/* ============================================================
   STACKWAVE - Premium Admin Dashboard
   Vertical Sidebar Layout | Bootstrap 5 | Plus Jakarta Sans
   ============================================================ */

/* ---- 1. FUENTE LOCAL (Plus Jakarta Sans vendorizada) ---- */
@import url('../fonts/plus-jakarta-sans/plus-jakarta-sans.css');

/* ---- 2. CSS VARIABLES ---- */
:root {
  /* Brand Colors */
  --primary:        #5D87FF;
  --primary-dark:   #4570EA;
  --primary-light:  #ECF2FF;
  --secondary:      #49BEFF;
  --secondary-light:#E8F7FF;
  --success:        #13DEB9;
  --success-light:  #E6FFFA;
  --warning:        #FFAE1F;
  --warning-light:  #FEF5E5;
  --danger:         #FA896B;
  --danger-light:   #FDEDE8;
  --info:           #539BFF;
  --info-light:     #EBF3FE;
  --purple:         #7460EE;
  --purple-light:   #F0EEFF;
  --pink:           #FC185A;
  --pink-light:     #FDE8EF;
  --teal:           #00BCD4;
  --teal-light:     #E0F7FA;
  --orange:         #FF8C00;
  --orange-light:   #FFF3E0;
  --indigo:         #3D5AF1;
  --indigo-light:   #EEF0FD;

  /* Layout */
  --header-h:       70px;
  --sidebar-w:      270px;
  --sidebar-collapsed-w: 72px;

  /* Header - LIGHT */
  --header-bg:      #ffffff;
  --header-border:  #eaecf4;
  --header-text:    #7C8FAC;

  /* Sidebar - LIGHT PREMIUM */
  --sidebar-bg:     #ffffff;
  --sidebar-border: #eef0f7;
  --sidebar-text:   #5a6a85;

  /* Content */
  --body-bg:        #ffffff;
  --content-bg:     #ffffff;
  --card-bg:        #ffffff;
  --card-radius:    16px;
  --card-shadow:    0 4px 24px rgba(93,135,255,0.07);
  --card-border:    #eaecf4;

  /* Page header band */
  --dark-band-bg:   rgba(93,135,255,0.07);

  /* Typography */
  --font:           'Plus Jakarta Sans', sans-serif;
  --body-color:     #2A3547;
  --body-text:      #2A3547;
  --dark-text:      #1e2a3a;
  --muted:          #7C8FAC;
  --heading-color:  #1e2a3a;
  --border-color:   #eaecf4;
  --radius:         12px;
  --radius-sm:      8px;
  --radius-lg:      20px;
  --radius-xl:      24px;
  --tr:             all 0.25s ease;
  /* Utility surface tones */
  --input-bg:       #f4f6fb;
  --hover-bg:       rgba(93,135,255,0.04);
}

/* ---- 3. DARK THEME ---- */
[data-theme="dark"] {
  --header-bg:      #2a3547;
  --header-border:  #3a4a62;
  --header-text:    #b8c4d8;
  --sidebar-bg:     #1e2a3a;
  --sidebar-border: #2d3d55;
  --sidebar-text:   #b8c4d8;
  --body-bg:        #1C222B;
  --content-bg:     #222D3A;
  --card-bg:        #2a3547;
  --card-border:    #3a4a62;
  --card-shadow:    0 4px 24px rgba(0,0,0,0.25);
  --body-color:     #bec8d8;
  --body-text:      #bec8d8;
  --dark-text:      #eaf0fb;
  --muted:          #7C8FAC;
  --heading-color:  #eaf0fb;
  --border-color:   #3a4a62;
  --header-bg:      #131d2a;
  --dark-band-bg:   rgba(93,135,255,0.06);
  --input-bg:       rgba(255,255,255,0.05);
  --hover-bg:       rgba(255,255,255,0.04);
  /* Bootstrap variable overrides */
  --bs-border-color:        #3a4a62;
  --bs-border-color-translucent: rgba(255,255,255,0.1);
  --bs-tertiary-bg:         rgba(255,255,255,0.04);
  --bs-secondary-bg:        #222D3A;
  --bs-body-bg:             #1C222B;
  --bs-body-color:          #bec8d8;
  /* Bootstrap bg-* color token overrides */
  --bs-light:               #2a3547;
  --bs-light-rgb:           42,53,71;
  --bs-white-rgb:           42,53,71;
  --bs-secondary-color:     #7C8FAC;
  --bs-emphasis-color:      #eaf0fb;
  --bs-emphasis-color-rgb:  234,240,251;
  --bs-heading-color:       #eaf0fb;
  --bs-link-color:          #5D87FF;
  --bs-link-hover-color:    #a3bbff;
  --bs-code-color:          #f9a58e;
}

/* ---- 4. BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--body-color);
  background: var(--body-bg);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font); font-weight: 700; color: var(--heading-color); line-height: 1.3; }
a { text-decoration: none; color: var(--primary); transition: var(--tr); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(93,135,255,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(93,135,255,0.45); }

/* ============================================================
   5. TOP HEADER (DARK)
   ============================================================ */
.app-header {
  position: fixed;
  top: 0; left: var(--sidebar-w); right: 0;
  height: var(--header-h);
  background: var(--header-bg);
  z-index: 1050;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
  transition: left 0.3s ease, background 0.3s;
}


/* Logo */
.logo-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  box-shadow: 0 4px 12px rgba(93,135,255,0.4);
  flex-shrink: 0;
}
.logo-text {
  font-size: 19px; font-weight: 800; color: #fff;
  letter-spacing: -0.5px;
}
.logo-text span { color: var(--secondary); }

/* Header Search */
.header-search { position: relative; flex-shrink: 0; }
.header-search .search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--body-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 50px; padding: 0 16px;
  transition: var(--tr);
}
.header-search .search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(93,135,255,0.12);
}
.header-search .search-wrap i { color: var(--muted); font-size: 15px; }
.header-search input {
  background: transparent; border: none; outline: none;
  color: var(--body-color); font-family: var(--font); font-size: 13.5px;
  width: 220px; padding: 9px 0;
}
.header-search input::placeholder { color: var(--muted); }

/* Dropdown de resultados del buscador global */
.header-search .search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  max-width: 80vw;
  max-height: 420px;
  overflow-y: auto;
  background: var(--card-bg, var(--body-bg));
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 6px;
  z-index: 1080;
}
.header-search .search-head {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
  padding: 8px 10px 6px;
}
.header-search .search-empty {
  font-size: 13px; color: var(--muted);
  padding: 14px 12px; text-align: center;
}
.header-search .search-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--body-color); text-decoration: none;
  transition: var(--tr);
}
.header-search .search-item:hover { background: var(--body-bg); }
.header-search .search-item > i { color: var(--primary); font-size: 16px; margin-top: 1px; }
.header-search .search-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.header-search .search-item-badge { flex: 0 0 auto; margin-top: 1px; }
.header-search .search-item-badge .badge { font-size: 10.5px; font-weight: 600; }
.header-search .search-item-title {
  font-size: 13.5px; font-weight: 500; color: var(--body-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-search .search-item-sub {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Header Right */
.header-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* Icon buttons */
.hdr-icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--body-bg);
  border: 1px solid var(--border-color);
  color: var(--header-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 17px; position: relative;
  transition: var(--tr); flex-shrink: 0;
}
.hdr-icon-btn:hover { background: var(--primary-light); color: var(--primary); border-color: transparent; }
.hdr-icon-btn:focus,
.hdr-icon-btn:focus-visible { outline: none; box-shadow: none; border-color: transparent; }

.badge-count {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; border-radius: 50px;
  background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--header-bg);
}

/* User Avatar */
.user-avatar-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(93,135,255,0.5);
  background: none; padding: 0; cursor: pointer;
  position: relative; transition: var(--tr); overflow: visible;
  flex-shrink: 0;
}
.user-avatar-btn:hover { border-color: var(--primary); }
.user-avatar-btn img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.user-online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--header-bg);
}

/* ---- Dropdowns ---- */
.notif-dropdown, .msg-dropdown, .profile-dropdown {
  min-width: 340px; border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  padding: 0; background: var(--card-bg); overflow: hidden;
  animation: dropFadeIn 0.2s ease;
}
.msg-dropdown { min-width: 300px; }
.profile-dropdown { min-width: 240px; }

@keyframes dropFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.dropdown-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border-color);
}
.dropdown-hd h6 { margin:0; font-size:14px; font-weight:700; color:var(--heading-color); }
.dropdown-hd a { font-size:12px; color:var(--primary); font-weight:600; }
.dropdown-ft { padding:10px 18px; border-top:1px solid var(--border-color); text-align:center; }
.dropdown-ft a { font-size:13px; color:var(--primary); font-weight:600; }

.notif-scroll { max-height:300px; overflow-y:auto; }
.notif-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--border-color);
  transition:var(--tr); position:relative; text-decoration:none;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--primary-light); }
[data-theme="dark"] .notif-item:hover { background:rgba(93,135,255,0.08); }
.notif-item.unread::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); border-radius:0 3px 3px 0; }
.notif-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.notif-text p { margin:0; font-size:13px; font-weight:500; color:var(--heading-color); }
.notif-text small { font-size:11px; color:var(--muted); }

.msg-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px; border-bottom:1px solid var(--border-color);
  transition:var(--tr); text-decoration:none;
}
.msg-item:last-child { border-bottom:none; }
.msg-item:hover { background:var(--primary-light); }
[data-theme="dark"] .msg-item:hover { background:rgba(93,135,255,0.08); }
.msg-ava { position:relative; flex-shrink:0; }
.msg-ava img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.msg-status { position:absolute; bottom:2px; right:2px; width:9px; height:9px; border-radius:50%; border:2px solid var(--card-bg); }
.msg-status.online   { background:var(--success); }
.msg-status.away     { background:var(--warning); }
.msg-status.busy     { background:var(--danger); }
.msg-status.offline  { background:#adb5bd; }
.msg-info h6 { margin:0 0 2px; font-size:13px; font-weight:600; color:var(--heading-color); }
.msg-info p  { margin:0; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:175px; }
.msg-time    { font-size:11px; color:var(--muted); margin-left:auto; flex-shrink:0; }

.profile-hd {
  padding:18px; text-align:center;
  background:linear-gradient(135deg, var(--primary-light), var(--secondary-light));
  border-bottom:1px solid var(--border-color);
}
[data-theme="dark"] .profile-hd { background:rgba(93,135,255,0.1); }
.profile-hd img { width:58px; height:58px; border-radius:50%; border:3px solid var(--primary); margin-bottom:8px; }
.profile-hd h6 { margin:0 0 2px; font-size:14px; font-weight:700; color:var(--heading-color); }
.profile-hd span { font-size:12px; color:var(--muted); }
.profile-menu { list-style:none; padding:6px 0; margin:0; }
.profile-menu li a {
  display:flex; align-items:center; gap:9px;
  padding:9px 18px; font-size:13px; color:var(--body-color); transition:var(--tr);
}
.profile-menu li a:hover { background:var(--primary-light); color:var(--primary); padding-left:22px; }
[data-theme="dark"] .profile-menu li a:hover { background:rgba(93,135,255,0.1); }
.profile-menu li a i { font-size:15px; width:18px; }
.profile-footer { padding:10px 14px; border-top:1px solid var(--border-color); }

/* ============================================================
   6. SIDEBAR (LIGHT / VERTICAL)
   ============================================================ */
.app-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto; overflow-x: hidden;
  z-index: 1051;
  transition: width 0.3s ease, transform 0.3s ease;
  display: flex; flex-direction: column;
  box-shadow: 1px 0 20px rgba(0,0,0,0.04);
}
.app-sidebar::-webkit-scrollbar { width: 3px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: #dde3f0; border-radius: 3px; }

/* Sidebar Logo Area */
.sidebar-logo {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  height: var(--header-h); min-height: var(--header-h);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0; text-decoration: none;
  background: var(--sidebar-bg);
  position: sticky; top: 0; z-index: 2;
}
.sidebar-logo .logo-img {
  max-height: 34px; width: auto; object-fit: contain;
  flex-shrink: 0;
}
.sidebar-logo .logo-brand {
  font-size: 17px; font-weight: 800;
  color: var(--primary); letter-spacing: -0.3px;
  white-space: nowrap;
}
.sidebar-logo .logo-text {
  font-size: 17px; font-weight: 800;
  color: var(--heading-color); letter-spacing: -0.3px;
}
.sidebar-logo .logo-text span { color: var(--primary); }

/* Sidebar collapse toggle */
.sidebar-logo-toggle {
  margin-left: auto;
  width: 28px; height: 28px; border-radius: 7px;
  background: #f4f6fb;
  border: 1px solid var(--sidebar-border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; flex-shrink: 0;
  transition: var(--tr);
}
.sidebar-logo-toggle:hover {
  background: rgba(93,135,255,0.1);
  color: var(--primary);
  border-color: rgba(93,135,255,0.25);
}

/* Navigation list */
#sidebarnav {
  list-style: none;
  padding: 10px 10px 24px;
  margin: 0;
}

/* Section headers */
.nav-small-cap {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 18px 7px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  color: #a8b4cc;
  white-space: nowrap; overflow: hidden;
}
.nav-small-cap span { flex-shrink: 0; }
.nav-small-cap::after {
  content: ''; flex: 1; height: 1px;
  background: var(--sidebar-border); border-radius: 1px;
}
.nav-small-cap-icon { font-size: 13px !important; color: #c0cce0; }

/* Sidebar items */
.sidebar-item { margin-bottom: 2px; }

/* Sidebar links */
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 12px;
  border-radius: 10px;
  color: var(--sidebar-text);
  font-size: 13.5px; font-weight: 500;
  transition: all 0.22s ease;
  text-decoration: none; cursor: pointer;
  position: relative;
  white-space: nowrap; overflow: hidden;
  margin: 0 8px;
}
.sidebar-link > span:first-child { flex-shrink: 0; }
.sidebar-link > span:first-child i { font-size: 17px; transition: color 0.25s; display: block; width: 20px; }
.sidebar-link:hover { background: rgba(93,135,255,0.07); color: var(--primary); }
.sidebar-link:hover > span:first-child i { color: var(--primary); }

/* Active state */
.sidebar-item.active > .sidebar-link {
  background: linear-gradient(90deg, rgba(93,135,255,0.13) 0%, rgba(93,135,255,0.04) 100%);
  color: var(--primary);
  box-shadow: none;
}
.sidebar-item.active > .sidebar-link::before {
  content: '';
  position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #5D87FF, #49b4e5);
}
.sidebar-item.active > .sidebar-link > span:first-child i { color: var(--primary); }

/* Has-arrow (submenu toggle) */
.sidebar-link.has-arrow::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.8px solid #b0bdd0;
  border-bottom: 1.8px solid #b0bdd0;
  border-left: none; border-top: none;
  margin-left: auto; flex-shrink: 0;
  transform: rotate(-45deg);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), border-color 0.25s;
  border-radius: 1px;
}
.sidebar-link.has-arrow[aria-expanded="true"]::after {
  transform: rotate(45deg) translate(-2px, -2px);
  border-color: var(--primary);
}
.sidebar-link:hover.has-arrow::after { border-color: var(--primary); }

/* First-level submenu */
.first-level {
  list-style: none;
  padding: 2px 0 4px 0;
  margin: 0;
}
.first-level .sidebar-item { margin-bottom: 1px; }
.first-level .sidebar-link {
  padding: 7px 10px 7px 56px;
  font-size: 13px; font-weight: 400;
  gap: 8px; margin: 0 8px;
  color: #8898aa;
  border-radius: 8px;
  position: relative;
}
.first-level .sidebar-link::before {
  content: '';
  position: absolute; left: 33px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #d0d9ec;
  transition: all 0.2s;
}
.first-level .sidebar-link:hover { color: var(--primary); background: rgba(93,135,255,0.06); }
.first-level .sidebar-link:hover::before { background: var(--primary); box-shadow: 0 0 5px rgba(93,135,255,0.4); }
.first-level li.active > .sidebar-link {
  color: var(--primary); background: rgba(93,135,255,0.11); font-weight: 600;
}
.first-level li.active > .sidebar-link::before {
  background: var(--primary); box-shadow: 0 0 7px rgba(93,135,255,0.55);
  width: 7px; height: 7px;
}
/* Parent item highlight when a child sub-link is active */
.sidebar-item.has-active > .sidebar-link.has-arrow {
  color: var(--primary); font-weight: 600;
}
.sidebar-item.has-active > .sidebar-link.has-arrow::after {
  border-color: var(--primary);
}

/* Collapsed sidebar */
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .hide-menu { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
body.sidebar-collapsed .nav-small-cap .hide-menu { display: none; }
body.sidebar-collapsed .nav-small-cap::after { display: none; }
body.sidebar-collapsed .nav-small-cap { justify-content: center; padding: 18px 8px 7px; }
body.sidebar-collapsed .nav-small-cap-icon { margin: 0; display: block !important; }
body.sidebar-collapsed .has-arrow::after { display: none; }
body.sidebar-collapsed .first-level { display: none !important; }
body.sidebar-collapsed .content-area { margin-left: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .app-header { left: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .sidebar-menu .sidebar-link { justify-content: center; padding: 8px 6px; margin: 0 6px; }
body.sidebar-collapsed .sidebar-menu .sidebar-badge { display: none; }
body.sidebar-collapsed .sidebar-item.active > .sidebar-link::before { display: none; }
body.sidebar-collapsed .sidebar-logo { justify-content: center; padding: 0 8px; gap: 0; }

/* ============================================================
   7. CONTENT AREA
   ============================================================ */
.content-area {
  margin-left: var(--sidebar-w);
  margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
  transition: margin-left 0.3s ease;
  display: flex;
  flex-direction: column;
}

.dark-band {
  background: var(--dark-band-bg);
  border-radius: var(--card-radius);
  margin: 1.5rem;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
/* Decorative circle — top-right */
.dark-band::after {
  content: '';
  position: absolute;
  right: -50px; top: -45px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7460EE 0%, #5D87FF 100%);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
/* Decorative star overlay */
.dark-band::before {
  content: '★';
  position: absolute;
  right: 24px; top: 6px;
  font-size: 54px;
  line-height: 1;
  color: #fff;
  opacity: 0.88;
  filter: drop-shadow(0 4px 16px rgba(93,135,255,0.5));
  pointer-events: none;
  z-index: 1;
}
.dark-band .container-fluid { position: relative; z-index: 2; }

/* Main content panel */
.page-wrapper {
  border-radius: 0;
  margin-top: 0;
  flex: 1;
  padding: 0;
  position: relative;
  z-index: 1;
  transition: background 0.3s;
}

/* ============================================================
   8. PAGE HEADER BAR
   ============================================================ */
.page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-hdr .page-title { font-size: 22px; font-weight: 800; color: var(--heading-color); margin: 0; }
.page-hdr .page-sub   { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.breadcrumb { margin: 0; background: none; padding: 0; }
.breadcrumb-item { font-size: 13px; }
.breadcrumb-item a { color: var(--muted); }
.breadcrumb-item.active { color: var(--primary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }

/* ============================================================
   9. CARDS
   ============================================================ */
.sw-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: var(--tr);
}
.sw-card:hover { box-shadow: 0 8px 32px rgba(93,135,255,0.1); transform: translateY(-2px); }
.sw-card .card-header {
  padding: 14px 20px;
  background: none;
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; gap: 12px;
}
.sw-card .card-header h5 { margin: 0; font-size: 15px; font-weight: 700; }
.sw-card .card-header.light-border { border-bottom: 1px solid rgba(255,255,255,0.15) !important; }
.sw-card .card-body { padding: 20px; }
.sw-card .card-footer { padding: 14px 20px; background: none; border-top: 1px solid var(--border-color); }

/* ---- Card Header Icon Badge ---- */
.card-hdr-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* ---- Stat / KPI Cards ---- */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative; overflow: hidden;
  transition: var(--tr);
  box-shadow: var(--card-shadow);
}
.stat-card::after { content:''; position:absolute; top:-20px; right:-20px; width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,0.07); }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(93,135,255,0.12); }
.stat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.stat-info { flex:1; }
.stat-info h3 { font-size:24px; font-weight:800; margin:0 0 2px; }
.stat-info p  { margin:0; font-size:13px; color:var(--muted); font-weight:500; }
.stat-badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:50px; display:inline-flex; align-items:center; gap:3px; margin-top:5px; }
.stat-badge.up   { background:var(--success-light); color:var(--success); }
.stat-badge.down { background:var(--danger-light);  color:var(--danger); }
[data-theme="dark"] .stat-badge.up   { background:rgba(19,222,185,0.15); }
[data-theme="dark"] .stat-badge.down { background:rgba(250,137,107,0.15); }

/* Colored stat cards */
.stat-card.c-primary { background: linear-gradient(135deg,#5D87FF,#7B9FFF); border:none; }
.stat-card.c-success { background: linear-gradient(135deg,#13DEB9,#20F8CE); border:none; }
.stat-card.c-warning { background: linear-gradient(135deg,#FFAE1F,#FFD166); border:none; }
.stat-card.c-danger  { background: linear-gradient(135deg,#FA896B,#FF9A80); border:none; }
.stat-card.c-purple  { background: linear-gradient(135deg,#7460EE,#9B8EF5); border:none; }
.stat-card.c-pink    { background: linear-gradient(135deg,#FC185A,#FF5C85); border:none; }
.stat-card.c-teal    { background: linear-gradient(135deg,#00BCD4,#4DD0E1); border:none; }
.stat-card.c-indigo  { background: linear-gradient(135deg,#3D5AF1,#6B7FFF); border:none; }
.stat-card.c-primary .stat-info h3,
.stat-card.c-success .stat-info h3,
.stat-card.c-warning .stat-info h3,
.stat-card.c-danger  .stat-info h3,
.stat-card.c-purple  .stat-info h3,
.stat-card.c-pink    .stat-info h3,
.stat-card.c-teal    .stat-info h3,
.stat-card.c-indigo  .stat-info h3 { color:#fff; }
.stat-card.c-primary .stat-info p,
.stat-card.c-success .stat-info p,
.stat-card.c-warning .stat-info p,
.stat-card.c-danger  .stat-info p,
.stat-card.c-purple  .stat-info p,
.stat-card.c-pink    .stat-info p,
.stat-card.c-teal    .stat-info p,
.stat-card.c-indigo  .stat-info p  { color:rgba(255,255,255,0.75); }
.stat-card.c-primary .stat-icon,
.stat-card.c-success .stat-icon,
.stat-card.c-warning .stat-icon,
.stat-card.c-danger  .stat-icon,
.stat-card.c-purple  .stat-icon,
.stat-card.c-pink    .stat-icon,
.stat-card.c-teal    .stat-icon,
.stat-card.c-indigo  .stat-icon { background:rgba(255,255,255,0.2); color:#fff; }

/* ============================================================
   10. COLOR UTILITIES
   ============================================================ */
.bg-primary-lt  { background:var(--primary-light) !important; color:var(--primary) !important; }
.bg-success-lt  { background:var(--success-light) !important; color:var(--success) !important; }
.bg-warning-lt  { background:var(--warning-light) !important; color:var(--warning) !important; }
.bg-danger-lt   { background:var(--danger-light)  !important; color:var(--danger)  !important; }
.bg-info-lt     { background:var(--info-light)    !important; color:var(--info)    !important; }
.bg-purple-lt   { background:var(--purple-light)  !important; color:var(--purple)  !important; }
.bg-pink-lt     { background:var(--pink-light)    !important; color:var(--pink)    !important; }
.bg-teal-lt     { background:var(--teal-light)    !important; color:var(--teal)    !important; }
.bg-orange-lt   { background:var(--orange-light)  !important; color:var(--orange)  !important; }
.bg-indigo-lt   { background:var(--indigo-light)  !important; color:var(--indigo)  !important; }
[data-theme="dark"] .bg-primary-lt { background:rgba(93,135,255,0.15) !important; }
[data-theme="dark"] .bg-success-lt { background:rgba(19,222,185,0.15) !important; }
[data-theme="dark"] .bg-warning-lt { background:rgba(255,174,31,0.15)  !important; }
[data-theme="dark"] .bg-danger-lt  { background:rgba(250,137,107,0.15) !important; }
[data-theme="dark"] .bg-purple-lt  { background:rgba(116,96,238,0.15)  !important; }
[data-theme="dark"] .bg-pink-lt    { background:rgba(252,24,90,0.15)   !important; }
[data-theme="dark"] .bg-teal-lt    { background:rgba(0,188,212,0.15)   !important; }
[data-theme="dark"] .bg-info-lt    { background:rgba(83,155,255,0.15)  !important; }
[data-theme="dark"] .bg-orange-lt  { background:rgba(249,115,22,0.15)  !important; }
[data-theme="dark"] .bg-indigo-lt  { background:rgba(99,102,241,0.15)  !important; }

/* Dark — prod-icon backgrounds */
[data-theme="dark"] .prod-icon-primary { background: rgba(93,135,255,0.15); }
[data-theme="dark"] .prod-icon-success { background: rgba(19,222,185,0.15); }
[data-theme="dark"] .prod-icon-warning { background: rgba(255,174,31,0.15);  }
[data-theme="dark"] .prod-icon-danger  { background: rgba(250,137,107,0.15); }
[data-theme="dark"] .prod-icon-info    { background: rgba(83,155,255,0.15);  }
[data-theme="dark"] .prod-icon-purple  { background: rgba(116,96,238,0.15);  }
[data-theme="dark"] .prod-icon-pink    { background: rgba(252,24,90,0.15);   }
[data-theme="dark"] .prod-icon-teal    { background: rgba(0,188,212,0.15);   }
[data-theme="dark"] .prod-icon-orange  { background: rgba(255,140,0,0.15);   }

/* Dark — metric-row backgrounds */
[data-theme="dark"] .metric-row-primary { background: rgba(93,135,255,0.1);  }
[data-theme="dark"] .metric-row-success { background: rgba(19,222,185,0.1);  }
[data-theme="dark"] .metric-row-warning { background: rgba(255,174,31,0.1);  }
[data-theme="dark"] .metric-row-danger  { background: rgba(250,137,107,0.1); }
[data-theme="dark"] .metric-row-info    { background: rgba(83,155,255,0.1);  }
[data-theme="dark"] .metric-row-purple  { background: rgba(116,96,238,0.1);  }
[data-theme="dark"] .metric-row-pink    { background: rgba(252,24,90,0.1);   }

/* Dark — soft backgrounds */
[data-theme="dark"] .bg-primary-soft { background: rgba(93,135,255,0.12) !important; }
[data-theme="dark"] .bg-success-soft { background: rgba(19,222,185,0.12) !important; }
[data-theme="dark"] .bg-warning-soft { background: rgba(255,174,31,0.12)  !important; }
[data-theme="dark"] .bg-danger-soft  { background: rgba(250,137,107,0.12) !important; }
[data-theme="dark"] .bg-purple-soft  { background: rgba(116,96,238,0.12)  !important; }
[data-theme="dark"] .bg-pink-soft    { background: rgba(252,24,90,0.12)   !important; }
[data-theme="dark"] .bg-teal-soft    { background: rgba(0,188,212,0.12)   !important; }
[data-theme="dark"] .bg-info-soft    { background: rgba(83,155,255,0.12)  !important; }
[data-theme="dark"] .bg-orange-soft  { background: rgba(249,115,22,0.12)  !important; }
[data-theme="dark"] .bg-indigo-soft  { background: rgba(99,102,241,0.12)  !important; }
/* Dark — Bootstrap .bg-white / .bg-secondary */
[data-theme="dark"] .bg-white     { background-color: var(--card-bg)              !important; }
[data-theme="dark"] .bg-secondary { background-color: rgba(255,255,255,0.08)      !important; }
[data-theme="dark"] .bg-body-secondary { background-color: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .bg-body-tertiary  { background-color: rgba(255,255,255,0.03) !important; }

/* ============================================================
   11. CHARTS
   ============================================================ */
.chart-box    { min-height:280px; position:relative; }
.chart-box-sm { min-height:180px; position:relative; }
.chart-box-md { min-height:240px; position:relative; }
.chart-box-lg { min-height:360px; position:relative; }
.chart-box-xl { min-height:420px; position:relative; }
.chart-legend { display:flex; flex-wrap:wrap; gap:12px; }
.legend-item  { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:500; }
.legend-dot   { width:10px; height:10px; border-radius:50%; }
.chart-period-btn { padding:4px 12px; border-radius:50px; border:1px solid var(--border-color); background:none; font-size:12px; font-family:var(--font); color:var(--muted); cursor:pointer; transition:var(--tr); font-weight:600; }
.chart-period-btn.active, .chart-period-btn:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ============================================================
   12. TABLES
   ============================================================ */
.sw-table-wrap { overflow-x:auto; border-radius:var(--radius); }
.sw-table { width:100%; border-collapse:separate; border-spacing:0; }
.sw-table thead th {
  padding:11px 15px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.8px;
  color:var(--muted); background:var(--body-bg);
  border-bottom:2px solid var(--border-color); white-space:nowrap;
}
[data-theme="dark"] .sw-table thead th { background:rgba(255,255,255,0.04); }
.sw-table tbody td {
  padding:13px 15px; font-size:13.5px; color:var(--body-color);
  border-bottom:1px solid var(--border-color); vertical-align:middle;
}
.sw-table tbody tr:hover td { background:var(--primary-light); }
[data-theme="dark"] .sw-table tbody tr:hover td { background:rgba(93,135,255,0.07); }
.sw-table tbody tr:last-child td { border-bottom:none; }
.cell-user { display:flex; align-items:center; gap:9px; }
.cell-ava { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.cell-ava-txt { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.cell-name { font-weight:600; color:var(--heading-color); font-size:13px; }
.cell-sub  { font-size:11.5px; color:var(--muted); }

/* ============================================================
   13. BADGES
   ============================================================ */
.sw-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px; border-radius:50px;
  font-size:11px; font-weight:700; line-height:1;
}
.sw-badge.bd-primary { background:var(--primary-light); color:var(--primary); }
.sw-badge.bd-success { background:var(--success-light); color:var(--success); }
.sw-badge.bd-warning { background:var(--warning-light); color:var(--warning); }
.sw-badge.bd-danger  { background:var(--danger-light);  color:var(--danger); }
.sw-badge.bd-info    { background:var(--info-light);    color:var(--info); }
.sw-badge.bd-purple  { background:var(--purple-light);  color:var(--purple); }
.sw-badge.bd-pink    { background:var(--pink-light);    color:var(--pink); }
.sw-badge.bd-teal    { background:var(--teal-light);    color:var(--teal); }
[data-theme="dark"] .sw-badge.bd-primary { background:rgba(93,135,255,0.15); }
[data-theme="dark"] .sw-badge.bd-success { background:rgba(19,222,185,0.15); }
[data-theme="dark"] .sw-badge.bd-warning { background:rgba(255,174,31,0.15); }
[data-theme="dark"] .sw-badge.bd-danger  { background:rgba(250,137,107,0.15); }
[data-theme="dark"] .sw-badge.bd-purple  { background:rgba(116,96,238,0.15); }
[data-theme="dark"] .sw-badge.bd-info    { background:rgba(73,190,255,0.15); }
[data-theme="dark"] .sw-badge.bd-pink    { background:rgba(252,24,90,0.15); }
[data-theme="dark"] .sw-badge.bd-teal    { background:rgba(0,200,180,0.15); }

/* ============================================================
   14. BUTTONS
   ============================================================ */
.btn { font-family:var(--font); font-weight:600; border-radius:var(--radius-sm); transition:var(--tr); align-items:center; gap:6px; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); box-shadow:0 4px 12px rgba(93,135,255,0.35); }
.btn-success { background:var(--success); border-color:var(--success); color:#fff; }
.btn-success:hover { box-shadow:0 4px 12px rgba(19,222,185,0.35); color:#fff; }
.btn-warning { background:var(--warning); border-color:var(--warning); color:#fff; }
.btn-warning:hover { box-shadow:0 4px 12px rgba(255,174,31,0.35); color:#fff; }
.btn-danger  { background:var(--danger);  border-color:var(--danger); }
.btn-danger:hover  { box-shadow:0 4px 12px rgba(250,137,107,0.35); }
.btn-purple  { background:var(--purple);  border-color:var(--purple); color:#fff; }
.btn-purple:hover  { background:#5a4bcf; box-shadow:0 4px 12px rgba(116,96,238,0.35); color:#fff; }
.btn-light   { background:var(--body-bg); border-color:var(--border-color); color:var(--body-color); }
.btn-light:hover   { background:var(--border-color); }
.btn-rounded { border-radius:50px !important; }
.btn-icon    { width:36px; height:36px; padding:0; justify-content:center; }
.btn-icon-sm { width:30px; height:30px; padding:0; justify-content:center; }
.btn-outline-primary { color:var(--primary); border-color:var(--primary); }
.btn-outline-primary:hover { background:var(--primary); color:#fff; }
.btn-outline-success { color:var(--success); border-color:var(--success); }
.btn-outline-success:hover { background:var(--success); color:#fff; }
.btn-outline-danger { color:var(--danger); border-color:var(--danger); }
.btn-outline-danger:hover { background:var(--danger); color:#fff; }

/* ============================================================
   15. FORMS
   ============================================================ */
.form-control, .form-select {
  font-family:var(--font); font-size:13.5px; color:var(--body-color);
  background:var(--card-bg); border:1.5px solid var(--border-color);
  border-radius:var(--radius-sm); padding:8px 13px; transition:var(--tr);
}
.form-control:focus, .form-select:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(93,135,255,0.15);
  background:var(--card-bg); color:var(--body-color);
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
  background:rgba(255,255,255,0.05); border-color:var(--border-color); color:var(--body-color);
}
.form-label { font-size:13px; font-weight:600; color:var(--heading-color); margin-bottom:5px; }
.form-text  { font-size:12px; color:var(--muted); }
.input-group-text { background:var(--body-bg); border:1.5px solid var(--border-color); color:var(--muted); font-family:var(--font); }
[data-theme="dark"] .input-group-text { background:rgba(255,255,255,0.05); border-color:var(--border-color); }
.form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.form-check-input:focus   { box-shadow:0 0 0 3px rgba(93,135,255,0.15); }
.form-switch .form-check-input { width:44px; height:24px; cursor:pointer; }

/* ============================================================
   16. PROGRESS BARS
   ============================================================ */
.sw-progress { background:var(--border-color); border-radius:50px; height:8px; overflow:hidden; }
.sw-progress-bar { height:100%; border-radius:50px; transition:width 0.8s ease; }
.sw-progress.thick { height:12px; }
.bar-primary { background: var(--primary); }
.bar-secondary{ background: var(--secondary); }
.bar-success  { background: var(--success); }
.bar-warning  { background: var(--warning); }
.bar-danger   { background: var(--danger); }
.bar-info     { background: var(--info); }
.bar-purple   { background: var(--purple); }
.bar-pink     { background: var(--pink); }
.bar-teal     { background: var(--teal); }
.bar-orange   { background: var(--orange); }

/* ============================================================
   17. ALERTS
   ============================================================ */
.sw-alert {
  border:none; border-radius:var(--radius); padding:13px 16px;
  font-size:13.5px; display:flex; align-items:flex-start; gap:10px;
  border-left:4px solid;
}
.sw-alert.alert-primary { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.sw-alert.alert-success { background:var(--success-light); border-color:var(--success); color:#0fa585; }
.sw-alert.alert-warning { background:var(--warning-light); border-color:var(--warning); color:#b87800; }
.sw-alert.alert-danger  { background:var(--danger-light);  border-color:var(--danger);  color:#c75230; }
[data-theme="dark"] .sw-alert.alert-primary { background:rgba(93,135,255,0.12); color:var(--primary); }
[data-theme="dark"] .sw-alert.alert-success { background:rgba(19,222,185,0.12); color:var(--success); }
[data-theme="dark"] .sw-alert.alert-warning { background:rgba(255,174,31,0.12); color:var(--warning); }
[data-theme="dark"] .sw-alert.alert-danger  { background:rgba(250,137,107,0.12); color:var(--danger); }
.sw-alert i { font-size:17px; margin-top:1px; flex-shrink:0; }

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-footer {
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  padding: 18px 24px;
  margin-top: 32px;
}
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-inner p { margin:0; font-size:13px; color:var(--muted); }
.footer-links { display:flex; gap:18px; }
.footer-links a { font-size:13px; color:var(--muted); transition:var(--tr); }
.footer-links a:hover { color:var(--primary); }

/* ============================================================
   19. MODALS
   ============================================================ */
.modal-content { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--card-radius); box-shadow:0 24px 60px rgba(0,0,0,0.15); }
.modal-header  { border-bottom:1px solid var(--border-color); padding:16px 20px; }
.modal-footer  { border-top:1px solid var(--border-color); padding:12px 20px; }
.modal-title   { font-size:15px; font-weight:700; color:var(--heading-color); }
.modal-body    { padding:20px; font-size:14px; color:var(--body-color); }
.btn-close { opacity:0.5; } .btn-close:hover { opacity:1; }
[data-theme="dark"] .btn-close { filter:invert(1); }

/* ============================================================
   20. CALENDAR
   ============================================================ */
.calendar-app { display:grid; grid-template-columns:1fr 280px; gap:20px; }
.calendar-main { background:var(--card-bg); border-radius:var(--card-radius); padding:20px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); }
.cal-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-grid .day-name { text-align:center; font-size:11px; font-weight:700; color:var(--muted); padding:7px 3px; text-transform:uppercase; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:13px; cursor:pointer; transition:var(--tr); position:relative; font-weight:500; }
.cal-day:hover { background:var(--primary-light); color:var(--primary); }
.cal-day.other-month { color:var(--muted); opacity:0.4; }
.cal-day.today { background:var(--primary); color:#fff; font-weight:700; }
.cal-day.has-event::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--success); }
.cal-day.today::after { background:#fff; }
.event-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.event-item { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:var(--radius-sm); }
.event-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.event-info h6 { margin:0 0 2px; font-size:13px; font-weight:600; }
.event-info small { font-size:11px; color:var(--muted); }

/* ============================================================
   21. CHAT
   ============================================================ */
.chat-app { display:grid; grid-template-columns:280px 1fr 250px; height:calc(100vh - 300px); min-height:580px; border-radius:var(--card-radius); overflow:hidden; border:1px solid var(--card-border); box-shadow:var(--card-shadow); }
.chat-sidebar { background:var(--card-bg); border-right:1px solid var(--border-color); display:flex; flex-direction:column; }
.chat-sidebar-hd { padding:16px; border-bottom:1px solid var(--border-color); }
.chat-sidebar-hd h5 { margin:0 0 10px; }
.chat-contact-list { flex:1; overflow-y:auto; }
.contact-item { display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer; transition:var(--tr); border-bottom:1px solid var(--border-color); }
.contact-item:hover, .contact-item.active { background:var(--primary-light); }
[data-theme="dark"] .contact-item:hover, [data-theme="dark"] .contact-item.active { background:rgba(93,135,255,0.08); }
.contact-ava { position:relative; flex-shrink:0; }
.contact-ava img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.contact-status { position:absolute; bottom:1px; right:1px; width:9px; height:9px; border-radius:50%; border:2px solid var(--card-bg); }
.contact-status.online { background:var(--success); }
.contact-status.away   { background:var(--warning); }
.contact-info { flex:1; min-width:0; }
.contact-info h6 { margin:0 0 2px; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-info p  { margin:0; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-time { font-size:11px; color:var(--muted); flex-shrink:0; }
.chat-main { display:flex; flex-direction:column; background:var(--content-bg); }
.chat-main-hd { padding:12px 18px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:10px; background:var(--card-bg); }
.chat-messages { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.msg-bubble { display:flex; gap:9px; max-width:72%; }
.msg-bubble.sent { align-self:flex-end; flex-direction:row-reverse; }
.bubble-ava img { width:32px; height:32px; border-radius:50%; }
.bubble-text { background:var(--body-bg); border-radius:14px 14px 14px 4px; padding:9px 13px; font-size:13.5px; }
.msg-bubble.sent .bubble-text { background:var(--primary); color:#fff; border-radius:14px 14px 4px 14px; }
[data-theme="dark"] .bubble-text { background:rgba(255,255,255,0.07); }
.bubble-time { font-size:11px; color:var(--muted); margin-top:3px; }
.msg-bubble.sent .bubble-time { text-align:right; }
.chat-input-bar { padding:12px 16px; border-top:1px solid var(--border-color); display:flex; gap:8px; align-items:center; background:var(--card-bg); }
.chat-input { flex:1; border:1.5px solid var(--border-color); border-radius:50px; padding:8px 15px; background:var(--body-bg); font-family:var(--font); font-size:13.5px; color:var(--body-color); outline:none; }
.chat-input:focus { border-color:var(--primary); }
[data-theme="dark"] .chat-input { background:rgba(255,255,255,0.05); }
.chat-profile-panel { background:var(--card-bg); border-left:1px solid var(--border-color); padding:18px; overflow-y:auto; }

/* ============================================================
   22. EMAIL
   ============================================================ */
.email-app { display:grid; grid-template-columns:200px 1fr; border-radius:var(--card-radius); overflow:hidden; border:1px solid var(--card-border); min-height:560px; box-shadow:var(--card-shadow); }
.email-sidebar { background:var(--card-bg); border-right:1px solid var(--border-color); padding:16px 0; }
.email-sidebar-hd { padding:0 16px 12px; border-bottom:1px solid var(--border-color); }
.email-folders { list-style:none; padding:10px 8px; margin:0; }
.email-folder-item a { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-sm); font-size:13.5px; color:var(--body-color); font-weight:500; transition:var(--tr); }
.email-folder-item a:hover, .email-folder-item.active a { background:var(--primary-light); color:var(--primary); }
.email-folder-item a i { font-size:15px; width:18px; }
.folder-count { margin-left:auto; font-size:11px; font-weight:700; padding:1px 6px; border-radius:50px; background:var(--primary); color:#fff; }
.email-main { display:flex; flex-direction:column; }
.email-toolbar { padding:12px 18px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:8px; background:var(--card-bg); }
.email-list { flex:1; overflow-y:auto; }
.email-row { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--border-color); cursor:pointer; transition:var(--tr); }
.email-row:hover { background:var(--primary-light); }
.email-row.unread { background:rgba(93,135,255,0.03); }
.email-row.unread .email-subject { font-weight:700; }
.email-sender img { width:36px; height:36px; border-radius:50%; }
.email-meta { flex:1; min-width:0; }
.email-from { font-size:13px; font-weight:600; color:var(--heading-color); margin:0 0 2px; }
.email-subject { font-size:13px; color:var(--body-color); margin:0 0 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.email-preview { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.email-time { font-size:11px; color:var(--muted); flex-shrink:0; }

/* ============================================================
   23. NOTES
   ============================================================ */
.notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.note-card { border-radius:var(--radius); padding:16px; min-height:150px; display:flex; flex-direction:column; cursor:pointer; transition:var(--tr); border:1px solid transparent; }
.note-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,0.08); }
.note-card h6 { font-size:14px; font-weight:700; margin:0 0 7px; }
.note-card p  { font-size:13px; flex:1; margin:0; opacity:0.85; }
.note-card .note-footer { margin-top:10px; display:flex; align-items:center; justify-content:space-between; font-size:11px; opacity:0.7; }
.note-yellow { background:#FFF9C4; } .note-blue  { background:#E3F2FD; } .note-green  { background:#E8F5E9; }
.note-pink   { background:#FCE4EC; } .note-purple{ background:#F3E5F5; } .note-orange { background:#FFF3E0; }
.note-teal   { background:#E0F7FA; } .note-red   { background:#FFEBEE; }
[data-theme="dark"] .note-yellow { background:rgba(255,235,59,0.1); }
[data-theme="dark"] .note-blue   { background:rgba(33,150,243,0.1); }
[data-theme="dark"] .note-green  { background:rgba(76,175,80,0.1); }
[data-theme="dark"] .note-pink   { background:rgba(233,30,99,0.1); }
[data-theme="dark"] .note-purple { background:rgba(156,39,176,0.1); }
[data-theme="dark"] .note-orange { background:rgba(255,152,0,0.1); }

/* ============================================================
   24. CONTACT CARDS
   ============================================================ */
.contacts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.contact-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--card-radius); padding:20px 14px; text-align:center; transition:var(--tr); box-shadow:var(--card-shadow); }
.contact-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(93,135,255,0.1); border-color:var(--primary); }
.contact-card img { width:60px; height:60px; border-radius:50%; margin-bottom:10px; object-fit:cover; border:2px solid var(--border-color); }
.contact-card h6 { font-size:14px; font-weight:700; margin:0 0 3px; }
.contact-card .role { font-size:12px; color:var(--muted); margin-bottom:10px; }
.contact-card .email { font-size:12px; color:var(--primary); margin-bottom:12px; }
.contact-actions { display:flex; gap:6px; justify-content:center; }

/* ============================================================
   25. INVOICE
   ============================================================ */
.invoice-doc { background:var(--card-bg); border-radius:var(--card-radius); padding:36px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); }
.invoice-hd { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; }
.invoice-meta { text-align:right; }
.invoice-meta h2 { font-size:26px; font-weight:800; color:var(--primary); margin:0 0 4px; }
.invoice-meta p { margin:0 0 2px; font-size:13px; color:var(--muted); }
.invoice-parties { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0; padding:20px 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
.invoice-party h6 { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:7px; }
.invoice-party p { margin:0 0 3px; font-size:13px; }
.invoice-party strong { font-size:14px; color:var(--heading-color); }
.invoice-totals { display:flex; justify-content:flex-end; margin-top:18px; }
.totals-box { min-width:260px; }
.total-row { display:flex; justify-content:space-between; padding:7px 0; font-size:13.5px; border-bottom:1px solid var(--border-color); }
.total-row:last-child { border-bottom:none; font-size:16px; font-weight:800; color:var(--primary); }

/* ============================================================
   26. USER PROFILE
   ============================================================ */
.profile-hero { background:linear-gradient(135deg,var(--primary),var(--purple)); border-radius:var(--card-radius); padding:36px; color:#fff; display:flex; align-items:center; gap:22px; margin-bottom:22px; position:relative; overflow:hidden; }
.profile-hero::before { content:''; position:absolute; top:-30px; right:-30px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,0.08); }
.profile-hero-ava { width:85px; height:85px; border-radius:50%; border:4px solid rgba(255,255,255,0.4); flex-shrink:0; }
.profile-hero-info h3 { color:#fff; font-size:22px; margin:0 0 3px; }
.profile-hero-info p { color:rgba(255,255,255,0.8); margin:0 0 10px; }
.profile-stats { display:flex; gap:20px; flex-wrap:wrap; }
.p-stat { text-align:center; }
.p-stat strong { display:block; font-size:18px; font-weight:800; color:#fff; }
.p-stat span { font-size:12px; color:rgba(255,255,255,0.7); }
.timeline { position:relative; padding:0; }
.timeline::before { content:''; position:absolute; left:19px; top:0; bottom:0; width:2px; background:var(--border-color); }
.timeline-item { position:relative; padding:0 0 18px 46px; }
.tl-icon { position:absolute; left:8px; top:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; z-index:1; }
.tl-card { background:var(--body-bg); border-radius:var(--radius); padding:12px 14px; border:1px solid var(--border-color); }
[data-theme="dark"] .tl-card { background:rgba(255,255,255,0.03); }
.tl-time { font-size:11.5px; color:var(--muted); }
.skill-row { margin-bottom:12px; }
.skill-row-hd { display:flex; justify-content:space-between; margin-bottom:5px; font-size:13px; font-weight:600; }
.skill-row-hd .pct { color:var(--primary); }

/* ============================================================
   27. BLOG
   ============================================================ */
.blog-hero { border-radius:var(--card-radius); overflow:hidden; position:relative; margin-bottom:22px; }
.blog-hero img { width:100%; height:340px; object-fit:cover; }
.blog-hero-overlay { position:absolute; bottom:0; left:0; right:0; padding:28px; background:linear-gradient(transparent,rgba(0,0,0,0.78)); }
.blog-hero-overlay h2 { color:#fff; font-size:24px; margin:0 0 6px; }
.blog-hero-overlay p  { color:rgba(255,255,255,0.8); font-size:13.5px; margin:0; }
.blog-card-img { height:170px; object-fit:cover; width:100%; }

/* ============================================================
   28. ECOMMERCE SHOP
   ============================================================ */
.shop-layout { display:grid; grid-template-columns:230px 1fr; gap:20px; }
.shop-filter { background:var(--card-bg); border-radius:var(--card-radius); padding:18px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); height:fit-content; position:sticky; top:calc(var(--header-h) + 16px); }
.filter-section { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border-color); }
.filter-section:last-child { margin:0; padding:0; border:none; }
.filter-section h6 { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:10px; font-weight:700; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.product-card { background:var(--card-bg); border-radius:var(--card-radius); border:1px solid var(--card-border); overflow:hidden; transition:var(--tr); box-shadow:var(--card-shadow); }
.product-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(93,135,255,0.1); }
.product-img { height:190px; overflow:hidden; position:relative; }
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.product-card:hover .product-img img { transform:scale(1.05); }
.product-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.28); opacity:0; transition:var(--tr); display:flex; align-items:center; justify-content:center; gap:7px; }
.product-card:hover .product-overlay { opacity:1; }
.product-body { padding:14px; }
.product-name { font-size:13.5px; font-weight:600; color:var(--heading-color); margin:0 0 3px; }
.product-price { font-size:16px; font-weight:800; color:var(--primary); margin:0; }
.product-price del { font-size:12px; color:var(--muted); font-weight:400; margin-left:5px; }
.product-rating { display:flex; align-items:center; gap:3px; margin:5px 0; }
.product-rating i { font-size:12px; color:var(--warning); }
.product-rating span { font-size:12px; color:var(--muted); }

/* ============================================================
   28b. SHOP FILTER PANEL (shf-)
   ============================================================ */
/* Panel header */
.shf-hd { display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid var(--border-color); }
.shf-hd-left { display:flex;align-items:center;gap:10px; }
.shf-hd-ico { width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#5D87FF,#7460EE);display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0; }
.shf-title { font-size:14px;font-weight:800;color:var(--dark-text);margin:0;line-height:1.2; }
.shf-active-count { font-size:10px;font-weight:700;color:var(--primary);background:rgba(93,135,255,0.1);padding:2px 7px;border-radius:10px;display:inline-block;margin-top:2px; }
.shf-clear { font-size:11px;font-weight:700;color:#FC185A;background:rgba(252,24,90,0.08);border:none;padding:4px 10px;border-radius:8px;cursor:pointer;transition:all .2s;font-family:var(--font); }
.shf-clear:hover { background:rgba(252,24,90,0.16); }

/* Active filter chips */
.shf-chips { display:flex;flex-wrap:wrap;gap:5px;padding:10px 18px 12px;border-bottom:1px solid var(--border-color); }
.shf-chip { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px 3px 10px;border-radius:20px;cursor:pointer;transition:all .2s;white-space:nowrap; }
.shf-chip i { font-size:11px;opacity:.75; }
.shf-chip:hover { opacity:.8; }
.shf-chip-blue   { background:rgba(93,135,255,0.12);color:#4F75E8;border:1px solid rgba(93,135,255,0.25); }
.shf-chip-indigo { background:rgba(99,102,241,0.12);color:#4338CA;border:1px solid rgba(99,102,241,0.22); }
.shf-chip-teal   { background:rgba(19,222,185,0.13);color:#0B9B80;border:1px solid rgba(19,222,185,0.22); }

/* Filter section */
.shf-section { padding:14px 18px; }
.shf-section-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;cursor:pointer;user-select:none; }
.shf-section-left { display:flex;align-items:center;gap:8px; }
.shf-section-ico { width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0; }
.shf-ico-indigo { background:rgba(99,102,241,0.12);color:#4338CA; }
.shf-ico-green  { background:rgba(16,185,129,0.12);color:#059669; }
.shf-ico-amber  { background:rgba(245,158,11,0.12);color:#D97706; }
.shf-ico-rose   { background:rgba(244,63,94,0.12);color:#E11D48; }
.shf-section-title { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--dark-text); }
.shf-arrow { font-size:11px;color:var(--muted);transition:transform .2s; }

/* Category list */
.shf-cat-list { display:flex;flex-direction:column;gap:2px; }
.shf-cat-item { display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;cursor:pointer;transition:all .2s;border:1.5px solid transparent;user-select:none; }
.shf-cat-item:hover { background:var(--input-bg); }
.shf-cat-item.active { background:rgba(93,135,255,0.07);border-color:rgba(93,135,255,0.2); }
.shf-cat-ico { width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
.shf-ico-elec  { background:linear-gradient(135deg,#EFF6FF,#BFDBFE);color:#2563EB; }
.shf-ico-mob   { background:linear-gradient(135deg,#FAF5FF,#E9D5FF);color:#7C3AED; }
.shf-ico-tv    { background:linear-gradient(135deg,#F0FDF4,#BBF7D0);color:#15803D; }
.shf-ico-audio { background:linear-gradient(135deg,#FFF7ED,#FED7AA);color:#C2410C; }
.shf-ico-cam   { background:linear-gradient(135deg,#FFF1F2,#FECDD3);color:#BE123C; }
.shf-ico-wear  { background:linear-gradient(135deg,#F0F9FF,#BAE6FD);color:#0369A1; }
.shf-cat-name { flex:1;font-size:13px;font-weight:600;color:var(--body-text); }
.shf-cat-count { font-size:10px;font-weight:700;color:var(--muted);background:var(--input-bg);padding:2px 7px;border-radius:10px;flex-shrink:0; }
.shf-check { width:18px;height:18px;border-radius:5px;border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;transition:all .2s;flex-shrink:0; }
.shf-cat-item.active .shf-check { background:var(--primary);border-color:var(--primary);color:#fff; }

/* Divider */
.shf-divider { height:1px;background:var(--border-color);margin:0 18px; }

/* Price range */
.shf-price-row { display:flex;align-items:flex-end;gap:8px;margin-bottom:12px; }
.shf-price-box { flex:1; }
.shf-price-lbl { font-size:10px;font-weight:700;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px; }
.shf-price-inp-wrap { position:relative; }
.shf-price-sym { position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;color:var(--muted);pointer-events:none; }
.shf-price-inp { width:100%;background:var(--input-bg);border:1.5px solid var(--border-color);border-radius:9px;padding:7px 8px 7px 22px;font-size:13px;font-weight:700;color:var(--dark-text);outline:none;transition:border .2s;font-family:var(--font); }
.shf-price-inp:focus { border-color:var(--primary); }
.shf-price-sep { font-size:16px;font-weight:700;color:var(--muted);flex-shrink:0;padding-bottom:7px; }
.shf-range-wrap { margin-bottom:10px; }
.shf-range { -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--primary) 50%,var(--border-color) 50%);outline:none;cursor:pointer; }
.shf-range::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 2px 8px rgba(93,135,255,0.4); }
.shf-range::-moz-range-thumb { width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:none; }
.shf-price-stats { display:flex;justify-content:space-between;align-items:center; }
.shf-price-avg { font-size:11px;color:var(--muted); }
.shf-price-range-label { font-size:11px;font-weight:700;color:var(--primary);background:rgba(93,135,255,0.1);padding:2px 8px;border-radius:8px; }

/* Brand grid */
.shf-brand-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.shf-brand-item { display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:10px;border:1.5px solid var(--border-color);cursor:pointer;transition:all .2s;background:var(--card-bg);user-select:none; }
.shf-brand-item:hover { border-color:rgba(93,135,255,0.3);background:rgba(93,135,255,0.04); }
.shf-brand-item.active { border-color:var(--primary);background:rgba(93,135,255,0.07); }
.shf-brand-logo { width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;font-weight:800; }
.shf-bl-apple   { background:linear-gradient(135deg,#f5f5f7,#e0e0e5);color:#1d1d1f; }
.shf-bl-samsung { background:linear-gradient(135deg,#EBF5FF,#BFDBFE);color:#1D4ED8; }
.shf-bl-sony    { background:linear-gradient(135deg,#1e1e2e,#2a2a3e);color:#A5B4FC; }
.shf-bl-canon   { background:linear-gradient(135deg,#FFF1F2,#FECDD3);color:#BE123C; }
.shf-bl-ms      { background:linear-gradient(135deg,#EEF2FF,#C7D7FD);color:#3730A3; }
.shf-brand-name { font-size:12px;font-weight:700;color:var(--body-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.shf-brand-chk { width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:9px;color:transparent;transition:all .2s;flex-shrink:0; }
.shf-brand-item.active .shf-brand-chk { background:var(--primary);border-color:var(--primary);color:#fff; }

/* Rating rows */
.shf-rating-list { display:flex;flex-direction:column;gap:4px; }
.shf-rating-row { display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;cursor:pointer;transition:all .2s;border:1.5px solid transparent;user-select:none; }
.shf-rating-row:hover { background:var(--input-bg); }
.shf-rating-row.active { background:rgba(93,135,255,0.07);border-color:rgba(93,135,255,0.18); }
.shf-stars { color:#F59E0B;font-size:13px;letter-spacing:1px;flex-shrink:0;white-space:nowrap;line-height:1; }
.shf-star-empty { color:var(--border-color); }
.shf-rbar-wrap { flex:1;height:4px;background:var(--border-color);border-radius:4px;overflow:hidden; }
.shf-rbar-fill { height:100%;border-radius:4px;background:linear-gradient(90deg,#F59E0B,#FCD34D); }
.shf-rpct { font-size:10px;font-weight:700;color:var(--muted);flex-shrink:0;min-width:26px;text-align:right; }
.shf-rating-row.active .shf-rpct { color:var(--primary); }

/* Footer apply button */
.shf-footer { padding:14px 18px 18px; }
.shf-apply { width:100%;background:linear-gradient(135deg,#5D87FF,#7460EE);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;font-family:var(--font);letter-spacing:.2px; }
.shf-apply:hover { opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(93,135,255,0.38); }
.shf-apply i { font-size:18px; }

/* ============================================================
   28c. SHOP DETAIL TABS (sdt-)
   ============================================================ */
/* Premium tab navigation — .nav class added for Bootstrap JS compat; neutralise Bootstrap .nav defaults */
.sdt-tab-nav { display:flex !important;flex-wrap:nowrap !important;gap:2px;padding:16px 24px 0;border-bottom:2px solid var(--border-color);overflow-x:auto;margin-bottom:0 !important; }
.sdt-tab-btn { display:flex;align-items:center;gap:8px;padding:10px 18px 13px;border:none;background:none;cursor:pointer;color:var(--muted);font-family:var(--font);font-size:13px;font-weight:700;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;border-radius:8px 8px 0 0;outline:none;text-decoration:none !important; }
.sdt-tab-btn:hover { color:var(--dark-text);background:rgba(93,135,255,0.05); }
.sdt-tab-btn.active { color:var(--primary);border-bottom-color:var(--primary); }
.sdt-tab-ico { width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;background:var(--input-bg);color:var(--muted);flex-shrink:0; }
.sdt-tab-btn.active .sdt-tab-ico { background:rgba(93,135,255,0.12);color:var(--primary); }
.sdt-tab-badge { font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;background:var(--input-bg);color:var(--muted);transition:all .2s;flex-shrink:0; }
.sdt-tab-btn.active .sdt-tab-badge { background:rgba(93,135,255,0.12);color:var(--primary); }

/* Tab pane body */
.sdt-pane-body { padding:28px; }

/* Description — highlights grid */
.sdt-highlights-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px; }
.sdt-hl-card { background:var(--input-bg);border:1px solid var(--border-color);border-radius:12px;padding:16px 12px;text-align:center;transition:all .2s;cursor:default; }
.sdt-hl-card:hover { border-color:rgba(93,135,255,0.35);box-shadow:0 4px 16px rgba(93,135,255,0.1); }
.sdt-hl-ico { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;margin:0 auto 10px; }
.sdt-hl-blue   { background:rgba(93,135,255,0.12);color:#5D87FF; }
.sdt-hl-green  { background:rgba(19,222,185,0.12);color:#059669; }
.sdt-hl-purple { background:rgba(116,96,238,0.12);color:#7460EE; }
.sdt-hl-amber  { background:rgba(245,158,11,0.12);color:#D97706; }
.sdt-hl-val { font-size:15px;font-weight:800;color:var(--dark-text);margin-bottom:3px; }
.sdt-hl-lbl { font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px; }
.sdt-desc-p { font-size:14px;color:var(--body-text);line-height:1.8;margin-bottom:16px; }
.sdt-features-hd { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.sdt-features-hd-ico { width:32px;height:32px;border-radius:9px;background:rgba(93,135,255,0.12);color:#5D87FF;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }
.sdt-features-hd h5 { font-size:15px;font-weight:800;color:var(--dark-text);margin:0; }
.sdt-feature-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px; }
.sdt-feature-list li { display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--body-text);line-height:1.65;padding:10px 14px;background:var(--input-bg);border-radius:10px;border:1px solid var(--border-color); }
.sdt-feat-ico { color:#5D87FF;font-size:15px;flex-shrink:0;margin-top:1px; }

/* Specifications table */
.sdt-spec-table { width:100%;border-collapse:separate;border-spacing:0 5px; }
.sdt-spec-key { width:28%;padding:11px 14px;background:var(--input-bg);border:1px solid var(--border-color);border-right:none;border-radius:10px 0 0 10px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;vertical-align:middle; }
.sdt-spec-ico { margin-right:6px;font-size:13px;color:var(--primary);opacity:.75; }
.sdt-spec-val { padding:11px 14px;background:var(--card-bg);border:1px solid var(--border-color);border-left:none;border-radius:0 10px 10px 0;font-size:13px;font-weight:600;color:var(--body-text);vertical-align:middle; }

/* Reviews — overview */
.sdt-rating-overview { display:flex;gap:24px;align-items:center;background:var(--input-bg);border:1px solid var(--border-color);border-radius:16px;padding:24px;margin-bottom:24px;flex-wrap:wrap; }
.sdt-rating-score-col { text-align:center;flex-shrink:0;min-width:100px; }
.sdt-rating-big { font-size:56px;font-weight:800;color:var(--dark-text);line-height:1; }
.sdt-ov-stars { font-size:20px;color:#F59E0B;letter-spacing:3px;margin:6px 0 4px; }
.sdt-ov-count { font-size:11px;font-weight:600;color:var(--muted); }
.sdt-rating-bars-col { flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px; }
.sdt-rb-row { display:flex;align-items:center;gap:10px; }
.sdt-rb-lbl { font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;min-width:26px; }
.sdt-rb-track { flex:1;height:8px;background:var(--border-color);border-radius:8px;overflow:hidden; }
.sdt-rb-fill { height:100%;border-radius:8px; }
.sdt-rb-fill-5 { background:linear-gradient(90deg,#F59E0B,#FCD34D); }
.sdt-rb-fill-4 { background:linear-gradient(90deg,#FBBF24,#FDE68A); }
.sdt-rb-fill-3 { background:linear-gradient(90deg,#FFAE1F,#FFD57D); }
.sdt-rb-fill-2 { background:linear-gradient(90deg,#FB923C,#FDBA74); }
.sdt-rb-fill-1 { background:linear-gradient(90deg,#EF4444,#FCA5A5); }
.sdt-rb-pct { font-size:11px;font-weight:700;color:var(--muted);flex-shrink:0;min-width:28px;text-align:right; }
.sdt-write-review-col { flex-shrink:0;text-align:center;border-left:1px solid var(--border-color);padding-left:24px; }
.sdt-wr-prompt { font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5;max-width:130px; }
.sdt-wr-btn { background:linear-gradient(135deg,#5D87FF,#7460EE);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:6px;transition:all .2s; }
.sdt-wr-btn:hover { opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(93,135,255,0.35); }

/* Reviews list */
.sdt-reviews-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.sdt-reviews-hd h6 { font-size:15px;font-weight:800;color:var(--dark-text);margin:0; }
.sdt-count-badge { font-size:10px;font-weight:800;background:rgba(93,135,255,0.1);color:var(--primary);padding:2px 9px;border-radius:10px;margin-left:6px;display:inline-block; }
.sdt-sort-select { font-size:12px;font-weight:600;color:var(--body-text);background:var(--input-bg);border:1.5px solid var(--border-color);border-radius:8px;padding:5px 10px;outline:none;cursor:pointer;font-family:var(--font); }
.sdt-review-card { border:1px solid var(--border-color);border-radius:14px;padding:20px;margin-bottom:12px;transition:box-shadow .2s,border-color .2s;background:var(--card-bg); }
.sdt-review-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.06);border-color:rgba(93,135,255,0.22); }
.sdt-review-hd { display:flex;align-items:center;gap:12px;margin-bottom:12px; }
.sdt-rev-av { width:44px;height:44px;border-radius:50%;flex-shrink:0;object-fit:cover; }
.sdt-rev-meta { flex:1;min-width:0; }
.sdt-rev-name { font-size:14px;font-weight:700;color:var(--dark-text);display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px; }
.sdt-verified { font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(16,185,129,0.12);color:#059669; }
.sdt-rev-stars { font-size:14px;color:#F59E0B;letter-spacing:2px; }
.sdt-rev-star-empty { color:var(--border-color); }
.sdt-rev-date { font-size:11px;color:var(--muted);flex-shrink:0; }
.sdt-review-title { font-size:14px;font-weight:800;color:var(--dark-text);margin-bottom:8px; }
.sdt-review-text { font-size:13px;color:var(--body-text);line-height:1.7;margin:0; }
.sdt-helpful { font-size:12px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--border-color);display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.sdt-helpful-btn { font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--input-bg);color:var(--muted);cursor:pointer;transition:all .2s;font-family:var(--font); }
.sdt-helpful-btn:hover { border-color:var(--primary);color:var(--primary);background:rgba(93,135,255,0.06); }
.sdt-load-more-btn { background:none;border:1.5px solid var(--border-color);border-radius:10px;padding:10px 24px;font-size:13px;font-weight:700;color:var(--body-text);cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:6px;transition:all .2s; }
.sdt-load-more-btn:hover { border-color:var(--primary);color:var(--primary);background:rgba(93,135,255,0.05); }

/* ============================================================
   28d. PRODUCT LIST (pli-)
   ============================================================ */
/* stat card icon squares */
.pli-stat-icon { width:52px;height:52px;min-width:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px; }
.pli-si-blue   { background:rgba(93,135,255,0.12);color:var(--primary); }
.pli-si-green  { background:rgba(19,222,185,0.12);color:#13DEB9; }
.pli-si-yellow { background:rgba(255,174,31,0.12);color:#FFAE1F; }
.pli-si-red    { background:rgba(250,137,107,0.12);color:#FA896B; }
/* product avatar initials */
.pli-prod-ava  { width:40px;height:40px;min-width:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0; }
.pli-pa-blue   { background:#5D87FF; }
.pli-pa-green  { background:#13DEB9; }
.pli-pa-yellow { background:#FFAB00; }
.pli-pa-red    { background:#FA5353; }
.pli-pa-purple { background:#7460EE; }
/* Home & Garden badge */
.pli-badge-hg  { display:inline-block;font-size:.75em;font-weight:700;padding:0.35em 0.65em;border-radius:0.35rem;background:rgba(116,96,238,0.12);color:#7460EE; }
/* form-switch sizing in table */
.pli-switch .form-check-input { width:2rem;height:1rem; }
/* filter bar inputs */
.pli-filter-addon { background:var(--input-bg) !important;border-color:var(--border-color) !important;color:var(--muted); }
.pli-filter-ctrl  { background:var(--input-bg) !important;border-color:var(--border-color) !important;color:var(--body-text); }
.pli-filter-ctrl:focus { background:var(--input-bg) !important;border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(93,135,255,0.12); }
.shf-brand-item-full { grid-column: 1 / -1; }
.pli-img-wrap { height: 180px; }
.pli-wish-btn { position:absolute; top:10px; right:10px; background:rgba(255,255,255,0.9); border:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:background 0.2s; }
.pli-wish-btn:hover { background:rgba(255,255,255,1); }
[data-theme="dark"] .pli-wish-btn { background:rgba(15,23,42,0.80); }
[data-theme="dark"] .pli-wish-btn:hover { background:rgba(15,23,42,0.95); }

/* ============================================================
   29. CHECKOUT STEPS
   ============================================================ */
.checkout-steps { display:flex; align-items:center; justify-content:center; margin-bottom:28px; flex-wrap:wrap; gap:6px; }
.step-item { display:flex; align-items:center; gap:8px; }
.step-item:not(:last-child)::after { content:''; width:50px; height:2px; background:var(--border-color); margin:0 6px; }
.step-item.done::after { background:var(--primary); }
.step-num { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; border:2px solid var(--border-color); color:var(--muted); transition:var(--tr); flex-shrink:0; }
.step-item.active .step-num { background:var(--primary); border-color:var(--primary); color:#fff; }
.step-item.done   .step-num { background:var(--success); border-color:var(--success); color:#fff; }
.step-label { font-size:13px; font-weight:600; color:var(--muted); }
.step-item.active .step-label { color:var(--primary); }
.checkout-pane { display:none; }
.checkout-pane.active { display:block; }

/* ============================================================
   30. PRICING
   ============================================================ */
.price-card { background:var(--card-bg); border:2px solid var(--card-border); border-radius:var(--card-radius); padding:28px; transition:var(--tr); text-align:center; }
.price-card:hover, .price-card.featured { border-color:var(--primary); box-shadow:0 18px 50px rgba(93,135,255,0.13); transform:scale(1.02); }
.price-card.featured { background:linear-gradient(135deg,var(--primary),var(--purple)); }
.price-card.featured * { color:#fff !important; }
.plan-badge { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:3px 11px; border-radius:50px; margin-bottom:14px; display:inline-block; }
.plan-name { font-size:20px; font-weight:800; margin-bottom:6px; }
.plan-desc { font-size:13px; color:var(--muted); margin-bottom:20px; }
.plan-price .amount { font-size:44px; font-weight:800; line-height:1; color:var(--heading-color); }
.plan-price .currency { font-size:22px; font-weight:700; vertical-align:super; }
.plan-price .period { font-size:13px; color:var(--muted); }
.plan-features { list-style:none; padding:0; margin:0 0 24px; text-align:left; display:flex; flex-direction:column; gap:8px; }
.plan-feature { display:flex; align-items:center; gap:7px; font-size:13.5px; }
.plan-feature i { font-size:15px; }

/* ============================================================
   31. FAQ
   ============================================================ */
.faq-hero { text-align:center; padding:42px 20px; background:linear-gradient(135deg,var(--primary-light),var(--secondary-light)); border-radius:var(--card-radius); margin-bottom:28px; }
[data-theme="dark"] .faq-hero { background:rgba(93,135,255,0.08); }
.faq-hero h2 { font-size:28px; margin-bottom:10px; }
.faq-hero p { color:var(--muted); margin-bottom:20px; }
.category-pill { padding:7px 16px; border-radius:50px; border:1.5px solid var(--border-color); background:var(--card-bg); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:var(--tr); }
.category-pill.active, .category-pill:hover { background:var(--primary); border-color:var(--primary); color:#fff; }
.faq-accordion .accordion-item { border:1px solid var(--border-color); border-radius:var(--radius) !important; margin-bottom:8px; background:var(--card-bg); overflow:hidden; }
.faq-accordion .accordion-button { font-family:var(--font); font-weight:600; font-size:14px; color:var(--heading-color); background:var(--card-bg); box-shadow:none; padding:14px 18px; }
.faq-accordion .accordion-button:not(.collapsed) { color:var(--primary); background:var(--primary-light); }
[data-theme="dark"] .faq-accordion .accordion-button { background:var(--card-bg); color:var(--heading-color); }
[data-theme="dark"] .faq-accordion .accordion-button:not(.collapsed) { background:rgba(93,135,255,0.1); }
.faq-accordion .accordion-body { padding:14px 18px; font-size:13.5px; color:var(--body-color); line-height:1.7; background:var(--card-bg); }

/* ============================================================
   32. ACCOUNT SETTINGS
   ============================================================ */
.settings-layout { display:grid; grid-template-columns:200px 1fr; gap:20px; }
.settings-nav { background:var(--card-bg); border-radius:var(--card-radius); padding:10px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); height:fit-content; position:sticky; top:calc(var(--header-h) + 16px); }
.settings-nav-item a { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--body-color); transition:var(--tr); }
.settings-nav-item a:hover, .settings-nav-item.active a { background:var(--primary-light); color:var(--primary); }
[data-theme="dark"] .settings-nav-item a:hover, [data-theme="dark"] .settings-nav-item.active a { background:rgba(93,135,255,0.1); }
.settings-nav-item a i { font-size:16px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--body-bg); border-radius:var(--radius); }
[data-theme="dark"] .switch-row { background:rgba(255,255,255,0.04); }
.switch-info h6 { margin:0 0 2px; font-size:14px; font-weight:600; }
.switch-info p  { margin:0; font-size:12px; color:var(--muted); }

/* ============================================================
   33. KANBAN
   ============================================================ */
.kanban-board { display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; }
.kanban-col { min-width:260px; background:var(--body-bg); border-radius:var(--radius); padding:14px; flex-shrink:0; }
[data-theme="dark"] .kanban-col { background:rgba(255,255,255,0.04); }
.kanban-col-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kanban-col-hd h6 { font-size:14px; font-weight:700; margin:0; }
.kanban-task { background:var(--card-bg); border-radius:var(--radius-sm); padding:12px; margin-bottom:8px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); cursor:grab; transition:var(--tr); }
.kanban-task:hover { box-shadow:0 6px 18px rgba(93,135,255,0.1); }
.kanban-task h6 { font-size:13px; font-weight:600; margin-bottom:5px; }
.kanban-task p  { font-size:12.5px; color:var(--muted); margin:0 0 9px; }
.kanban-task-footer { display:flex; align-items:center; justify-content:space-between; }
.kanban-assignees { display:flex; }
.kanban-assignees img { width:24px; height:24px; border-radius:50%; border:2px solid var(--card-bg); margin-left:-5px; }
.kanban-assignees img:first-child { margin-left:0; }

/* ============================================================
   34. AUTH PAGES
   ============================================================ */
.auth-logo { text-align:center; margin-bottom:24px; }
.auth-logo .logo-mark { width:50px; height:50px; border-radius:14px; margin:0 auto 8px; font-size:20px; }
.auth-logo .logo-text { font-size:20px; }
.auth-heading { text-align:center; margin-bottom:24px; }
.auth-heading h3 { font-size:22px; font-weight:800; margin-bottom:5px; }
.auth-heading p  { color:var(--muted); font-size:13.5px; }
.auth-divider { display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--muted); font-size:13px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border-color); }
.social-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border:1.5px solid var(--border-color); border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--body-color); background:var(--card-bg); cursor:pointer; transition:var(--tr); font-family:var(--font); }
.social-btn:hover { border-color:var(--primary); color:var(--primary); }
.auth-split { max-width:860px; display:grid; grid-template-columns:1fr 1fr; }
.auth-split-left { background:linear-gradient(135deg,var(--primary),var(--purple)); border-radius:var(--radius-xl) 0 0 var(--radius-xl); padding:44px 36px; display:flex; flex-direction:column; justify-content:center; }
.auth-split-left h2 { color:#fff; font-size:26px; margin-bottom:10px; }
.auth-split-left p  { color:rgba(255,255,255,0.8); font-size:13.5px; margin-bottom:28px; }
.auth-benefit { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.auth-benefit .benefit-icon { width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; flex-shrink:0; }
.auth-benefit p { color:rgba(255,255,255,0.85); font-size:13px; margin:0; }
.auth-split-right { border-radius:0 var(--radius-xl) var(--radius-xl) 0; padding:44px 36px; background:var(--card-bg); }
.error-page { text-align:center; padding:56px 20px; }
.error-code { font-size:110px; font-weight:800; line-height:1; color:transparent; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; }
.error-page h3 { font-size:24px; margin-bottom:10px; }
.error-page p  { color:var(--muted); font-size:14px; margin-bottom:24px; }

/* ============================================================
   35. ECOMMERCE DASHBOARD — dashboard-ecommerce.html
   ============================================================ */
/* Utility */
.fs-10 { font-size:10px !important; }

/* Product Cards — Row 1 */
.eco-product-card { transition:transform 0.25s ease, box-shadow 0.25s ease; cursor:pointer; box-shadow:0 2px 13px rgba(0,0,0,0.12) !important; }
.eco-product-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.12) !important; }
.eco-card-no-border { border:none !important; padding:0 !important; }
.eco-hero { padding:22px 18px 14px; position:relative; text-align:center; }
.eco-hero-blue     { background:linear-gradient(145deg,#EBF8FF 0%,#BDE9FF 100%); }
.eco-hero-rose     { background:linear-gradient(145deg,#FFF0F5 0%,#FFD5E8 100%); }
.eco-hero-lavender { background:linear-gradient(145deg,#F5F0FF 0%,#DDD5FF 100%); }
.eco-hero-mint     { background:linear-gradient(145deg,#EDFFF9 0%,#C2F5E0 100%); }
.eco-prod-badge          { position:absolute; top:11px; left:13px; font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px; letter-spacing:0.5px; color:#fff; }
.eco-prod-badge-blue     { background:#5D87FF; }
.eco-prod-badge-rose     { background:#FC185A; }
.eco-prod-badge-lavender { background:#7460EE; }
.eco-prod-badge-mint     { background:#13DEB9; }
.eco-prod-emoji          { font-size:56px; line-height:1; margin-bottom:6px; }
.eco-prod-emoji-blue     { filter:drop-shadow(0 4px 14px rgba(93,135,255,0.28)); }
.eco-prod-emoji-rose     { filter:drop-shadow(0 4px 14px rgba(252,24,90,0.22)); }
.eco-prod-emoji-lavender { filter:drop-shadow(0 4px 14px rgba(116,96,238,0.28)); }
.eco-prod-emoji-mint     { filter:drop-shadow(0 4px 14px rgba(19,222,185,0.28)); }
.eco-stars-row { display:flex; justify-content:center; align-items:center; gap:2px; }
.eco-star      { color:#FFAE1F; font-size:10px; }
.eco-rating          { font-size:10px; font-weight:800; margin-left:4px; }
.eco-rating-blue     { color:#5D87FF; }
.eco-rating-rose     { color:#FC185A; }
.eco-rating-lavender { color:#7460EE; }
.eco-rating-mint     { color:#13DEB9; }
.eco-sku          { font-size:10px; font-weight:700; letter-spacing:0.5px; margin-bottom:3px; text-transform:uppercase; }
.eco-sku-blue     { color:#5D87FF; }
.eco-sku-rose     { color:#FC185A; }
.eco-sku-lavender { color:#7460EE; }
.eco-sku-mint     { color:#13DEB9; }
.eco-prod-title { font-size:14px; font-weight:700; margin-bottom:8px; }
.eco-price          { font-size:22px; font-weight:800; }
.eco-price-blue     { color:#5D87FF; }
.eco-price-rose     { color:#FC185A; }
.eco-price-lavender { color:#7460EE; }
.eco-price-mint     { color:#13DEB9; }
.eco-price-old  { font-size:11px; color:var(--text-muted); text-decoration:line-through; }
.eco-stock-in   { font-size:11px; color:#13DEB9; font-weight:700; }
.eco-stock-low  { font-size:11px; color:#FFAE1F; font-weight:700; }
.eco-stats-box      { border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.eco-stats-blue     { background:#EBF5FF; }
.eco-stats-rose     { background:#FFF0F5; }
.eco-stats-lavender { background:#F5F0FF; }
.eco-stats-mint     { background:#EDFFF9; }
.eco-stats-row { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-bottom:5px; }
.eco-count-blue     { font-weight:800; color:#5D87FF; }
.eco-count-rose     { font-weight:800; color:#FC185A; }
.eco-count-lavender { font-weight:800; color:#7460EE; }
.eco-count-mint     { font-weight:800; color:#13DEB9; }
.eco-prog-track          { height:5px; border-radius:5px; }
.eco-prog-track-blue     { background:#C9E8FF; }
.eco-prog-track-rose     { background:#FFD5E8; }
.eco-prog-track-lavender { background:#E0D5FF; }
.eco-prog-track-mint     { background:#C2F5E0; }
.eco-prog-fill          { height:100%; border-radius:5px; }
.eco-prog-fill-blue     { background:linear-gradient(90deg,#5D87FF,#49BEFF); }
.eco-prog-fill-rose     { background:linear-gradient(90deg,#FC185A,#FF7BAC); }
.eco-prog-fill-lavender { background:linear-gradient(90deg,#7460EE,#9D8FFF); }
.eco-prog-fill-mint     { background:linear-gradient(90deg,#13DEB9,#00CFAD); }
.eco-prod-btn          { color:#fff; border:none; border-radius:9px; font-weight:700; font-size:12px; padding:8px; }
.eco-prod-btn-blue     { background:linear-gradient(90deg,#5D87FF,#49BEFF); }
.eco-prod-btn-rose     { background:linear-gradient(90deg,#FC185A,#FF7BAC); }
.eco-prod-btn-lavender { background:linear-gradient(90deg,#7460EE,#9D8FFF); }
.eco-prod-btn-mint     { background:linear-gradient(90deg,#13DEB9,#00CFAD); }

/* KPI Billboard Cards — Row 2 */
.eco-kpi-primary { border-left:4px solid #5D87FF !important; }
.eco-kpi-success { border-left:4px solid #13DEB9 !important; }
.eco-kpi-warning { border-left:4px solid #FFAE1F !important; }
.eco-kpi-purple  { border-left:4px solid #7460EE !important; }
.eco-kpi-bd  { padding:18px; }
.eco-flex1   { flex:1; }
.eco-kpi-lbl          { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:4px; }
.eco-kpi-lbl-primary  { color:#5D87FF; }
.eco-kpi-lbl-success  { color:#13DEB9; }
.eco-kpi-lbl-warning  { color:#FFAE1F; }
.eco-kpi-lbl-purple   { color:#7460EE; }
.eco-kpi-val { font-size:26px; font-weight:800; line-height:1; margin-bottom:6px; }
.eco-kpi-badge         { font-size:11px; font-weight:700; padding:2px 8px; border-radius:12px; }
.eco-kpi-badge-primary { background:#EBF5FF; color:#5D87FF; }
.eco-kpi-badge-success { background:#E4FDF8; color:#13DEB9; }
.eco-kpi-badge-warning { background:#FFF8E0; color:#FFAE1F; }
.eco-kpi-badge-purple  { background:#F2EFFF; color:#7460EE; }
.eco-sparkline { flex-shrink:0; margin-top:2px; }
.eco-kpi-footer    { margin-top:12px; padding-top:10px; border-top:1px solid var(--border-color); display:flex; gap:20px; }
.eco-kpi-foot-lbl  { font-size:10px; color:var(--text-muted); }
.eco-kpi-foot-val  { font-size:13px; font-weight:700; }
.eco-kpi-foot-val-success { color:#13DEB9; }
.eco-kpi-foot-val-warning { color:#FFAE1F; }
.eco-kpi-foot-val-primary { color:#5D87FF; }
.eco-kpi-foot-val-danger  { color:#FA896B; }

/* Order Status & Card Subtitle — Row 3 */
.eco-card-sub    { font-size:12px; color:var(--text-muted); margin:0; }
.eco-month-tag   { font-size:11px; background:var(--primary-light); padding:3px 10px; border-radius:12px; font-weight:600; color:#5D87FF; }
.eco-status-row         { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; border-radius:8px; }
.eco-status-row-primary { background:#f5f7ff; }
.eco-status-row-success { background:#f0fff9; }
.eco-status-row-warning { background:#fffbf0; }
.eco-status-row-danger  { background:#fff5f5; }
.eco-dot         { width:10px; height:10px; border-radius:50%; display:inline-block; }
.eco-dot-primary { background:#5D87FF; }
.eco-dot-success { background:#13DEB9; }
.eco-dot-warning { background:#FFAE1F; }
.eco-dot-danger  { background:#FA896B; }
.eco-status-val         { font-size:12px; font-weight:700; }
.eco-status-val-primary { color:#5D87FF; }
.eco-status-val-success { color:#13DEB9; }
.eco-status-val-warning { color:#FFAE1F; }
.eco-status-val-danger  { color:#FA896B; }

/* Order Fulfillment Pipeline — Row 4 */
.eco-pipeline-wrap { display:flex; align-items:center; justify-content:space-between; overflow-x:auto; padding:8px 0 4px; }
.pipeline-step       { flex:1; text-align:center; min-width:110px; }
.pipeline-circle     { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.pipeline-arrow      { flex:0 0 48px; text-align:center; padding-bottom:30px; }
.pipeline-arrow-line { height:3px; border-radius:3px; position:relative; }
.pipeline-arrow-line i { position:absolute; right:-8px; top:-9px; font-size:13px; font-weight:800; }
.eco-circle-1 { background:linear-gradient(135deg,#5D87FF,#49BEFF); box-shadow:0 6px 20px rgba(93,135,255,0.38); }
.eco-circle-2 { background:linear-gradient(135deg,#13DEB9,#00CFAD); box-shadow:0 6px 20px rgba(19,222,185,0.36); }
.eco-circle-3 { background:linear-gradient(135deg,#FFAE1F,#FF8C00); box-shadow:0 6px 20px rgba(255,174,31,0.36); }
.eco-circle-4 { background:linear-gradient(135deg,#7460EE,#9D8FFF); box-shadow:0 6px 20px rgba(116,96,238,0.36); }
.eco-circle-5 { background:linear-gradient(135deg,#FC185A,#FF7BAC); box-shadow:0 6px 20px rgba(252,24,90,0.36); }
.eco-pipe-icon  { font-size:22px; color:#fff; }
.eco-pipe-count { font-size:20px; font-weight:800; margin-bottom:2px; }
.eco-pipe-count-1 { color:#5D87FF; }
.eco-pipe-count-2 { color:#13DEB9; }
.eco-pipe-count-3 { color:#FFAE1F; }
.eco-pipe-count-4 { color:#7460EE; }
.eco-pipe-count-5 { color:#FC185A; }
.eco-arrow-1 { background:linear-gradient(90deg,#5D87FF,#13DEB9); }
.eco-arrow-2 { background:linear-gradient(90deg,#13DEB9,#FFAE1F); }
.eco-arrow-3 { background:linear-gradient(90deg,#FFAE1F,#7460EE); }
.eco-arrow-4 { background:linear-gradient(90deg,#7460EE,#FC185A); }
.eco-arrow-chevron-1 { color:#13DEB9; }
.eco-arrow-chevron-2 { color:#FFAE1F; }
.eco-arrow-chevron-3 { color:#7460EE; }
.eco-arrow-chevron-4 { color:#FC185A; }
.eco-arrow-rate   { font-size:10px; font-weight:700; display:block; margin-top:5px; }
.eco-arrow-rate-1 { color:#13DEB9; }
.eco-arrow-rate-2 { color:#FFAE1F; }
.eco-arrow-rate-3 { color:#7460EE; }
.eco-arrow-rate-4 { color:#FC185A; }
.eco-pipeline-footer { margin-top:18px; padding-top:14px; border-top:1px solid var(--border-color); }
.eco-seg-bar       { display:flex; height:10px; border-radius:10px; overflow:hidden; gap:2px; }
.eco-seg-delivered { flex:0 0 74%; background:linear-gradient(90deg,#5D87FF,#13DEB9); border-radius:10px 0 0 10px; }
.eco-seg-shipped   { flex:0 0 12.4%; background:#7460EE; }
.eco-seg-packed    { flex:0 0 6.5%; background:#FFAE1F; }
.eco-seg-confirmed { flex:0 0 3.5%; background:#13DEB9; opacity:0.5; }
.eco-seg-pending   { flex:1; background:var(--border-color); border-radius:0 10px 10px 0; }
.eco-seg-labels    { display:flex; justify-content:space-between; margin-top:7px; }
.eco-sla-text      { font-size:11px; font-weight:700; color:#5D87FF; }
.eco-live-tag      { font-size:11px; background:#E5FFF9; color:#13DEB9; padding:4px 12px; border-radius:12px; font-weight:700; }
.eco-live-tag i    { font-size:7px; }

/* Flash Sale Zone — Row 5 */
.eco-flash-card    { background:linear-gradient(135deg,#12112b 0%,#1a1842 50%,#0f1a2e 100%); border:1px solid rgba(93,135,255,0.2) !important; }
.eco-flash-icon-box { width:42px; height:42px; border-radius:12px; background:rgba(255,174,31,0.15); display:flex; align-items:center; justify-content:center; font-size:22px; }
.eco-flash-title   { color:#fff; margin:0; }
.eco-flash-sub     { font-size:11px; color:rgba(255,255,255,0.45); margin:0; }
.eco-flash-btn     { background:rgba(255,255,255,0.08) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.14) !important; font-size:12px; }
.flash-deal        { border-radius:16px; padding:16px; position:relative; overflow:hidden; }
.flash-deal-blob   { position:absolute; top:-24px; right:-24px; width:90px; height:90px; border-radius:50%; }
.eco-deal-blue     { border:2px dashed rgba(93,135,255,0.55); background:rgba(93,135,255,0.07); }
.eco-deal-rose     { border:2px dashed rgba(252,24,90,0.55); background:rgba(252,24,90,0.07); }
.eco-deal-mint     { border:2px dashed rgba(19,222,185,0.55); background:rgba(19,222,185,0.07); }
.eco-blob-blue     { background:rgba(93,135,255,0.12); }
.eco-blob-rose     { background:rgba(252,24,90,0.12); }
.eco-blob-mint     { background:rgba(19,222,185,0.12); }
.eco-deal-hd       { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; position:relative; }
.eco-deal-badge         { font-size:10px; font-weight:800; padding:3px 10px; border-radius:4px; letter-spacing:0.5px; color:#fff; }
.eco-deal-badge-blue    { background:#5D87FF; }
.eco-deal-badge-rose    { background:#FC185A; }
.eco-deal-badge-mint    { background:#13DEB9; }
.eco-deal-name     { font-size:15px; font-weight:700; color:#fff; margin-top:9px; line-height:1.2; }
.eco-deal-desc     { font-size:11px; color:rgba(255,255,255,0.45); margin-top:3px; }
.eco-deal-price    { text-align:right; flex-shrink:0; margin-left:12px; }
.eco-pct           { font-size:22px; font-weight:800; line-height:1; }
.eco-pct-blue      { color:#5D87FF; }
.eco-pct-rose      { color:#FC185A; }
.eco-pct-mint      { color:#13DEB9; }
.eco-old-price     { font-size:11px; color:rgba(255,255,255,0.4); text-decoration:line-through; }
.eco-new-price     { font-size:15px; font-weight:800; color:#fff; }
.eco-timer-row     { display:flex; align-items:center; justify-content:space-between; }
.eco-timer-units   { display:flex; gap:5px; }
.eco-timer-box     { background:rgba(255,255,255,0.1); border-radius:8px; padding:5px 8px; text-align:center; }
.eco-timer-num     { font-size:15px; font-weight:800; color:#fff; line-height:1; }
.eco-timer-lbl     { font-size:9px; color:rgba(255,255,255,0.4); margin-top:2px; }
.eco-deal-stock    { text-align:right; }
.eco-sold-count    { font-size:10px; color:rgba(255,255,255,0.4); }
.eco-remaining     { font-size:11px; color:#FFAE1F; font-weight:700; }

/* Top Products Table — Row 6 */
.eco-prod-icon          { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.eco-prod-icon-blue     { background:linear-gradient(145deg,#EBF8FF,#BDE9FF); }
.eco-prod-icon-rose     { background:linear-gradient(145deg,#FFF0F5,#FFD5E8); }
.eco-prod-icon-lavender { background:linear-gradient(145deg,#F5F0FF,#DDD5FF); }
.eco-prod-icon-mint     { background:linear-gradient(145deg,#EDFFF9,#C2F5E0); }
.eco-prod-icon-amber    { background:linear-gradient(145deg,#FFF5E8,#FFE0B8); }
.eco-prod-icon-sky      { background:linear-gradient(145deg,#F0F8FF,#C8E8FF); }
.eco-star-rating        { color:#FFAE1F; font-size:12px; font-weight:700; }
.text-pink              { color:#FC185A; }
.text-purple            { color:#7460EE; }
.text-info-blue         { color:#539BFF; }

/* Recent Orders Feed — Row 7 */
.eco-order-row           { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border-color); transition:background 0.15s; }
.eco-order-row:last-child { border-bottom:none; }
.eco-order-row:hover     { background:var(--hover-bg); }
.eco-order-avatar        { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; }
.eco-ava-blue     { background:#EBF5FF; }
.eco-ava-mint     { background:#F0FFF9; }
.eco-ava-amber    { background:#FFF8E0; }
.eco-ava-lavender { background:#F5F0FF; }
.eco-ava-rose     { background:#FFF0F5; }
.eco-ava-sky      { background:#F0F8FF; }
.eco-order-info   { flex:1; min-width:0; }
.eco-order-amount { text-align:right; flex-shrink:0; }
.eco-order-val          { font-size:13px; font-weight:800; }
.eco-order-val-primary  { color:#5D87FF; }
.eco-order-val-success  { color:#13DEB9; }
.eco-order-val-warning  { color:#FFAE1F; }
.eco-order-val-purple   { color:#7460EE; }
.eco-order-val-rose     { color:#FC185A; }
.eco-order-val-info     { color:#539BFF; }
.eco-action-row  { padding:14px 16px; display:flex; gap:8px; }
.eco-act-primary { background:var(--primary-light) !important; color:#5D87FF !important; font-size:11px; font-weight:700; border:none !important; }
.eco-act-success { background:var(--success-light) !important; color:#13DEB9 !important; font-size:11px; font-weight:700; border:none !important; }
.eco-act-warning { background:var(--warning-light) !important; color:#FFAE1F !important; font-size:11px; font-weight:700; border:none !important; }

/* ============================================================
   36. NFT MARKETPLACE DASHBOARD — dashboard-nft.html
   ============================================================ */
/* Stat Cards */
.nft-stat { border-radius:16px; padding:20px; position:relative; overflow:hidden; }
.nft-stat-purple { background:linear-gradient(145deg,#F3F0FF,#E8E2FF); }
.nft-stat-indigo  { background:linear-gradient(145deg,#EEF2FF,#DDE6FF); }
.nft-stat-pink    { background:linear-gradient(145deg,#FFF0F8,#FFD6EE); }
.nft-stat-teal    { background:linear-gradient(145deg,#EDFFFE,#C2FAF5); }
.nft-stat-amber   { background:linear-gradient(145deg,#FFFBEB,#FEF3C7); }
.nft-stat-orange  { background:linear-gradient(145deg,#FFF7ED,#FED7AA); }
.nft-stat-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.nft-stat-icon-purple { background:rgba(116,96,238,0.15); color:#7460EE; }
.nft-stat-icon-indigo  { background:rgba(93,135,255,0.15); color:#5D87FF; }
.nft-stat-icon-pink    { background:rgba(252,24,90,0.15);  color:#FC185A; }
.nft-stat-icon-teal    { background:rgba(19,222,185,0.15); color:#13DEB9; }
.nft-stat-icon-amber   { background:rgba(217,119,6,0.15);  color:#D97706; }
.nft-stat-icon-orange  { background:rgba(234,88,12,0.15);  color:#EA580C; }
.nft-stat-val { font-size:24px; font-weight:800; line-height:1; margin-bottom:4px; }
.nft-stat-val-purple { color:#7460EE; }
.nft-stat-val-indigo  { color:#5D87FF; }
.nft-stat-val-pink    { color:#FC185A; }
.nft-stat-val-teal    { color:#13DEB9; }
.nft-stat-val-amber   { color:#D97706; }
.nft-stat-val-orange  { color:#EA580C; }
.nft-stat-lbl { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.nft-stat-chg { font-size:12px; font-weight:700; }
.nft-stat-chg-up { color:#13DEB9; }
.nft-stat-chg-dn { color:#FA896B; }
/* Live Indicator */
.nft-live-dot-indicator { width:10px; height:10px; border-radius:50%; background:#FC185A; display:inline-block; animation:pulse 2s infinite; }
/* Auction Cards */
.nft-auction-card { border-radius:20px; overflow:hidden; position:relative; cursor:pointer; transition:transform 0.25s,box-shadow 0.25s; border:1px solid var(--card-border); }
.nft-auction-card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.14) !important; }
.nft-auction-hero { padding:32px 20px 24px; text-align:center; position:relative; }
.nft-auction-hero-purple { background:linear-gradient(135deg,#6B3FA0 0%,#A855F7 100%); }
.nft-auction-hero-blue   { background:linear-gradient(135deg,#1a56db 0%,#5D87FF 100%); }
.nft-auction-hero-teal   { background:linear-gradient(135deg,#0d7377 0%,#13DEB9 100%); }
.nft-auction-emoji { font-size:64px; line-height:1; display:block; margin-bottom:8px; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.25)); }
.nft-auction-name   { font-size:16px; font-weight:800; color:#fff; margin-bottom:2px; }
.nft-auction-artist { font-size:12px; color:rgba(255,255,255,0.7); }
.nft-verified { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,0.2); padding:3px 8px; border-radius:20px; position:absolute; top:14px; left:14px; backdrop-filter:blur(4px); }
.nft-live-badge { position:absolute; top:14px; right:14px; background:#FC185A; color:#fff; font-size:10px; font-weight:800; padding:4px 10px; border-radius:20px; letter-spacing:0.5px; animation:pulse 2s infinite; }
.nft-auction-body { padding:16px; background:var(--card-bg); }
.nft-price-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.nft-price-lbl { font-size:11px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.nft-price-val { font-size:18px; font-weight:800; color:var(--body-color); }
.nft-price-purple { color:#7460EE; }
.nft-price-blue   { color:#5D87FF; }
.nft-price-teal   { color:#13DEB9; }
.nft-timer { display:flex; gap:8px; justify-content:center; margin-bottom:14px; }
.nft-timer-unit { text-align:center; background:var(--body-bg); border-radius:10px; padding:8px 12px; min-width:52px; }
.nft-timer-num { font-size:20px; font-weight:800; display:block; line-height:1; }
.nft-timer-lbl { font-size:10px; color:var(--muted); font-weight:600; }
.nft-bid-btn { width:100%; border-radius:12px; font-size:13px; font-weight:700; padding:10px; border:none; color:#fff; cursor:pointer; transition:opacity 0.2s; }
.nft-bid-btn:hover { opacity:0.85; }
.nft-bid-btn-purple { background:linear-gradient(90deg,#7460EE,#A855F7); }
.nft-bid-btn-blue   { background:linear-gradient(90deg,#5D87FF,#49BEFF); }
.nft-bid-btn-teal   { background:linear-gradient(90deg,#13DEB9,#00BCD4); }
/* Live Bid Feed */
.nft-live-dot-sm { width:8px; height:8px; border-radius:50%; background:#13DEB9; display:inline-block; animation:pulse 2s infinite; }
.nft-bid-feed { padding:0 16px; }
.nft-bid-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-color); }
.nft-bid-item:last-child { border-bottom:none; }
.nft-bid-av { width:38px; height:38px; border-radius:50%; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nft-bid-av-purple { background:linear-gradient(135deg,#F3F0FF,#C4B5FD); }
.nft-bid-av-blue   { background:linear-gradient(135deg,#EEF2FF,#93C5FD); }
.nft-bid-av-teal   { background:linear-gradient(135deg,#EDFFFE,#99F6E4); }
.nft-bid-av-amber  { background:linear-gradient(135deg,#FFFBEB,#FDE68A); }
.nft-bid-av-pink   { background:linear-gradient(135deg,#FFF0F8,#F9A8D4); }
.nft-bid-av-orange { background:linear-gradient(135deg,#FFF7ED,#FED7AA); }
.nft-bid-info { flex:1; min-width:0; }
.nft-bid-pulse { width:8px; height:8px; border-radius:50%; background:#13DEB9; flex-shrink:0; animation:pulse 2s infinite; }
.text-purple { color:#7460EE !important; }
.text-orange { color:#EA580C !important; }
/* Collections Table */
.nft-tbl-hd th { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; padding:12px 16px; border-bottom:1px solid var(--border-color); background:transparent; }
.nft-rank-badge { width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.nft-rank-1 { background:#FFF3C4; color:#D97706; }
.nft-rank-2 { background:#F0F0F0; color:#6B7280; }
.nft-rank-3 { background:#FDE8D8; color:#D05D2A; }
.nft-rank-n { background:var(--body-bg); color:var(--muted); }
.nft-coll-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.nft-coll-purple { background:linear-gradient(145deg,#F3F0FF,#C4B5FD); }
.nft-coll-blue   { background:linear-gradient(145deg,#EEF2FF,#93C5FD); }
.nft-coll-teal   { background:linear-gradient(145deg,#EDFFFE,#99F6E4); }
.nft-coll-amber  { background:linear-gradient(145deg,#FFFBEB,#FDE68A); }
.nft-coll-pink   { background:linear-gradient(145deg,#FFF0F8,#F9A8D4); }
.nft-coll-orange { background:linear-gradient(145deg,#FFF7ED,#FED7AA); }
.nft-rarity { font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; }
.nft-rarity-legendary { background:#FFF3C4; color:#D97706; }
.nft-rarity-epic      { background:#F3F0FF; color:#7460EE; }
.nft-rarity-rare      { background:#EEF2FF; color:#5D87FF; }
.nft-rarity-common    { background:#ECFDF5; color:#065F46; }
/* Category Legend */
.nft-cat-legend { width:100%; }
.nft-legend-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.nft-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
/* Artist Spotlight */
.nft-artist-card { border-radius:18px; padding:20px; text-align:center; transition:transform 0.2s; cursor:pointer; border:1px solid var(--card-border); }
.nft-artist-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.08) !important; }
.nft-artist-av { width:72px; height:72px; border-radius:50%; margin:0 auto 10px; font-size:32px; display:flex; align-items:center; justify-content:center; }
.nft-artist-av-1 { background:linear-gradient(135deg,#F3F0FF,#C4B5FD); }
.nft-artist-av-2 { background:linear-gradient(135deg,#EEF2FF,#93C5FD); }
.nft-artist-av-3 { background:linear-gradient(135deg,#EDFFFE,#99F6E4); }
.nft-artist-av-4 { background:linear-gradient(135deg,#FFF0F8,#F9A8D4); }
.nft-artist-name  { font-size:14px; font-weight:700; margin-bottom:2px; }
.nft-artist-sales { font-size:12px; color:var(--muted); margin-bottom:10px; }
.nft-follow-btn { font-size:11px; font-weight:700; padding:6px 20px; border-radius:20px; border:1.5px solid var(--border-color); color:var(--body-color); background:transparent; cursor:pointer; transition:all 0.2s; }
.nft-follow-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }

/* ============================================================
   37. CRYPTO DASHBOARD — dashboard-crypto.html
   ============================================================ */
/* Ticker Strip */
.cry-ticker-wrap { overflow:hidden; background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:10px 0; }
.cry-ticker-inner { display:flex; gap:0; animation:tickerScroll 28s linear infinite; width:max-content; }
.cry-ticker-item { display:flex; align-items:center; gap:8px; padding:4px 24px; border-right:1px solid var(--border-color); white-space:nowrap; }
.cry-ticker-coin  { font-size:14px; font-weight:800; }
.cry-ticker-price { font-size:13px; font-weight:600; }
.cry-ticker-chg-up { font-size:12px; font-weight:700; color:#13DEB9; }
.cry-ticker-chg-dn { font-size:12px; font-weight:700; color:#FA896B; }
@keyframes tickerScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
/* Stat Cards */
.cry-stat { border-radius:16px; padding:18px 20px; display:flex; align-items:center; gap:16px; transition:transform 0.2s,box-shadow 0.2s; cursor:pointer; border:none !important; }
.cry-stat:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.10) !important; }
.cry-stat-amber  { background:linear-gradient(145deg,#FFFBEB,#FEF3C7); }
.cry-stat-blue   { background:linear-gradient(145deg,#EEF2FF,#DBEAFE); }
.cry-stat-purple { background:linear-gradient(145deg,#F3F0FF,#E8E2FF); }
.cry-stat-green  { background:linear-gradient(145deg,#ECFDF5,#D1FAE5); }
.cry-coin-icon { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; flex-shrink:0; }
.cry-coin-amber  { background:rgba(245,158,11,0.15); color:#D97706; }
.cry-coin-blue   { background:rgba(93,135,255,0.15); color:#5D87FF; }
.cry-coin-purple { background:rgba(116,96,238,0.15); color:#7460EE; }
.cry-coin-green  { background:rgba(19,222,185,0.15); color:#065F46; }
.cry-stat-name  { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:3px; }
.cry-stat-price { font-size:22px; font-weight:800; line-height:1; margin-bottom:3px; }
.cry-stat-chg   { font-size:12px; font-weight:700; }
.cry-stat-chg-up { color:#13DEB9; }
.cry-stat-chg-dn { color:#FA896B; }
/* Coin Tabs */
.cry-coin-selector { display:flex; gap:4px; }
.cry-coin-tab { font-size:12px; font-weight:700; padding:4px 12px; border-radius:8px; border:1.5px solid var(--border-color); background:transparent; color:var(--muted); cursor:pointer; transition:all 0.2s; }
.cry-coin-tab.active, .cry-coin-tab:hover { background:var(--primary); border-color:var(--primary); color:#fff; }
/* Fear & Greed */
.cry-fear-label { font-size:22px; font-weight:800; text-align:center; }
.cry-fear-greed  { color:#13DEB9; }
.cry-fear-neutral { color:#FFAE1F; }
.cry-fear-fear   { color:#FA896B; }
.cry-fear-history { border-top:1px solid var(--border-color); padding-top:12px; }
/* Order Book */
.cry-ob-header { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.4px; }
.cry-ob-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; padding:5px 4px; position:relative; border-radius:4px; margin-bottom:1px; }
.cry-ob-row-sell { background:rgba(250,137,107,0.04); }
.cry-ob-row-buy  { background:rgba(19,222,185,0.04); }
.cry-ob-price-sell { color:#FA896B; font-weight:700; min-width:70px; }
.cry-ob-price-buy  { color:#13DEB9; font-weight:700; min-width:70px; }
.cry-ob-size  { font-weight:600; min-width:60px; text-align:right; }
.cry-ob-total { color:var(--muted); min-width:70px; text-align:right; }
.cry-ob-fill-sell, .cry-ob-fill-buy { position:absolute; right:0; top:0; bottom:0; border-radius:4px; z-index:0; pointer-events:none; }
.cry-ob-fill-sell { background:rgba(250,137,107,0.08); }
.cry-ob-fill-buy  { background:rgba(19,222,185,0.08); }
.cry-ob-w-20 { width:20%; }
.cry-ob-w-35 { width:35%; }
.cry-ob-w-40 { width:40%; }
.cry-ob-w-55 { width:55%; }
.cry-ob-w-60 { width:60%; }
.cry-ob-w-75 { width:75%; }
.cry-ob-w-90 { width:90%; }
.cry-ob-w-95 { width:95%; }
.cry-ob-spread { text-align:center; font-size:12px; font-weight:700; color:var(--primary); padding:6px 0; border-top:1px dashed var(--border-color); border-bottom:1px dashed var(--border-color); margin:4px 0; }
/* Portfolio Allocation */
.cry-alloc-list { }
.cry-alloc-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cry-alloc-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
/* Watchlist Table */
.cry-tbl-hd th { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; padding:12px 16px; border-bottom:1px solid var(--border-color); background:transparent; }
.cry-coin-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; }
.cry-coin-dot-amber  { background:#FEF3C7; color:#D97706; }
.cry-coin-dot-blue   { background:#DBEAFE; color:#1d4ed8; }
.cry-coin-dot-teal   { background:#D1FAE5; color:#065F46; }
.cry-coin-dot-orange { background:#FED7AA; color:#9a3412; }
.cry-coin-dot-purple { background:#E8E2FF; color:#6d28d9; }
.cry-chg-badge { font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px; }
.cry-chg-up { background:#D1FAE5; color:#065F46; }
.cry-chg-dn { background:#FEE2E2; color:#991b1b; }
.cry-trade-btn { font-size:11px; font-weight:700; padding:4px 14px; border-radius:8px; border:none; cursor:pointer; transition:opacity 0.2s; }
.cry-trade-btn:hover { opacity:0.8; }
.cry-trade-buy  { background:#D1FAE5; color:#065F46; }
.cry-trade-sell { background:#FEE2E2; color:#991b1b; }
.cry-add-btn { font-size:12px; font-weight:700; padding:4px 12px; border-radius:8px; border:1.5px solid var(--border-color); background:transparent; color:var(--body-color); cursor:pointer; transition:all 0.2s; }
.cry-add-btn:hover { border-color:var(--primary); color:var(--primary); }
/* DeFi Yields */
.cry-defi-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-color); }
.cry-defi-row:last-child { border-bottom:none; }
.cry-defi-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.cry-defi-amber  { background:#FEF3C7; }
.cry-defi-blue   { background:#DBEAFE; }
.cry-defi-purple { background:#E8E2FF; }
.cry-defi-teal   { background:#D1FAE5; }
.cry-defi-orange { background:#FED7AA; }
.cry-defi-pink   { background:#FFD6EE; }
.cry-apy-badge { font-size:12px; font-weight:800; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.cry-apy-high   { background:#D1FAE5; color:#065F46; }
.cry-apy-medium { background:#DBEAFE; color:#1e40af; }
.cry-apy-low    { background:#FEF3C7; color:#92400E; }

/* ============================================================
   38. GENERAL ANALYTICS DASHBOARD — dashboard-general.html
   ============================================================ */
/* KPI Stat Cards */
.gnl-kpi { border-radius:16px; padding:20px; position:relative; overflow:hidden; }
.gnl-kpi::before { content:''; position:absolute; top:-24px; right:-24px; width:90px; height:90px; border-radius:50%; opacity:0.12; }
.gnl-kpi-blue   { background:linear-gradient(145deg,#EEF2FF,#DBEAFE); }
.gnl-kpi-blue::before   { background:#5D87FF; }
.gnl-kpi-green  { background:linear-gradient(145deg,#ECFDF5,#D1FAE5); }
.gnl-kpi-green::before  { background:#13DEB9; }
.gnl-kpi-purple { background:linear-gradient(145deg,#F3F0FF,#E8E2FF); }
.gnl-kpi-purple::before { background:#7460EE; }
.gnl-kpi-orange { background:linear-gradient(145deg,#FFF7ED,#FED7AA); }
.gnl-kpi-orange::before { background:#F97316; }
.gnl-kpi-pink   { background:linear-gradient(145deg,#FFF0F8,#FFD6EE); }
.gnl-kpi-pink::before   { background:#FC185A; }
.gnl-kpi-icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; }
.gnl-kpi-icon-blue   { background:rgba(93,135,255,0.18); color:#5D87FF; }
.gnl-kpi-icon-green  { background:rgba(19,222,185,0.18); color:#13DEB9; }
.gnl-kpi-icon-purple { background:rgba(116,96,238,0.18); color:#7460EE; }
.gnl-kpi-icon-orange { background:rgba(249,115,22,0.18); color:#F97316; }
.gnl-kpi-icon-pink   { background:rgba(252,24,90,0.18);  color:#FC185A; }
.gnl-kpi-val { font-size:28px; font-weight:800; line-height:1; margin-bottom:3px; }
.gnl-kpi-label { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.gnl-kpi-chg { font-size:12px; font-weight:700; }
.gnl-kpi-chg-up { color:#13DEB9; }
.gnl-kpi-chg-dn { color:#FA896B; }
/* Live Counter */
.gnl-live-dot { width:12px; height:12px; border-radius:50%; background:#13DEB9; margin:0 auto 12px; box-shadow:0 0 0 4px rgba(19,222,185,0.2); animation:gnlPulse 2s infinite; }
@keyframes gnlPulse { 0%,100% { box-shadow:0 0 0 4px rgba(19,222,185,0.2); } 50% { box-shadow:0 0 0 12px rgba(19,222,185,0.05); } }
.gnl-live-num { font-size:52px; font-weight:800; line-height:1; color:#13DEB9; font-variant-numeric:tabular-nums; }
.gnl-live-lbl { font-size:13px; color:var(--muted); font-weight:600; margin-top:6px; margin-bottom:0; }
.gnl-live-stats { border-top:1px solid var(--border-color); padding-top:16px; }
.gnl-live-stat-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.gnl-live-stat-row:last-child { margin-bottom:0; }
.gnl-live-stat-icon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.gnl-stat-icon-blue   { background:rgba(93,135,255,0.12); color:#5D87FF; }
.gnl-stat-icon-green  { background:rgba(19,222,185,0.12); color:#13DEB9; }
.gnl-stat-icon-orange { background:rgba(249,115,22,0.12); color:#F97316; }
/* Conversion Funnel */
.gnl-funnel { display:flex; flex-direction:column; gap:4px; }
.gnl-funnel-step { border-radius:10px; padding:10px 16px; display:flex; align-items:center; gap:12px; }
.gnl-funnel-step-1 { background:rgba(93,135,255,0.12); }
.gnl-funnel-step-2 { background:rgba(73,190,255,0.12); }
.gnl-funnel-step-3 { background:rgba(19,222,185,0.12); }
.gnl-funnel-step-4 { background:rgba(255,174,31,0.12); }
.gnl-funnel-step-5 { background:rgba(250,137,107,0.12); }
.gnl-funnel-arrow { display:flex; align-items:center; gap:8px; padding:2px 18px; font-size:12px; color:var(--muted); }
.gnl-funnel-num { font-size:15px; font-weight:800; min-width:56px; }
.gnl-funnel-num-1 { color:#5D87FF; }
.gnl-funnel-num-2 { color:#49BEFF; }
.gnl-funnel-num-3 { color:#13DEB9; }
.gnl-funnel-num-4 { color:#FFAE1F; }
.gnl-funnel-num-5 { color:#FA896B; }
.gnl-funnel-label { font-size:13px; font-weight:600; flex:1; }
.gnl-funnel-pct { font-size:12px; color:var(--muted); font-weight:700; }
/* Device Distribution */
.gnl-dev-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; display:inline-block; }
/* Goal Radial */
.gnl-goal-list { }
.gnl-goal-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gnl-goal-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
/* Cohort Heatmap */
.gnl-cohort-table { width:100%; border-collapse:separate; border-spacing:3px; }
.gnl-cohort-table th { font-size:11px; color:var(--muted); font-weight:700; padding:4px 8px; text-align:center; }
.gnl-cohort-cell { width:42px; height:34px; border-radius:6px; text-align:center; vertical-align:middle; font-size:11px; font-weight:700; padding:0; }
.gnl-cohort-label { font-size:12px; font-weight:600; padding:4px 8px; color:var(--body-color); white-space:nowrap; vertical-align:middle; }
.gnl-h0 { background:#5D87FF; color:#fff; }
.gnl-h1 { background:rgba(93,135,255,0.72); color:#fff; }
.gnl-h2 { background:rgba(93,135,255,0.52); color:#fff; }
.gnl-h3 { background:rgba(93,135,255,0.35); color:var(--body-color); }
.gnl-h4 { background:rgba(93,135,255,0.20); color:var(--body-color); }
.gnl-h5 { background:rgba(93,135,255,0.09); color:var(--muted); }
.gnl-heatmap-legend { display:flex; align-items:center; gap:4px; }
.gnl-legend-chip { width:24px; height:14px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
/* Top Pages Table */
.gnl-tbl-hd th { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; padding:12px 16px; border-bottom:1px solid var(--border-color); background:transparent; }
.gnl-bounce-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:8px; }
.gnl-bounce-low  { background:#D1FAE5; color:#065F46; }
.gnl-bounce-med  { background:#FEF3C7; color:#92400E; }
.gnl-bounce-high { background:#FEE2E2; color:#991b1b; }
/* A/B Test Cards */
.gnl-ab-card { border-radius:14px; padding:16px; }
.gnl-ab-blue  { background:linear-gradient(145deg,#EEF2FF,#DBEAFE); }
.gnl-ab-green { background:linear-gradient(145deg,#ECFDF5,#D1FAE5); }
.gnl-ab-variant { width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.gnl-ab-var-a { background:#5D87FF; color:#fff; }
.gnl-ab-var-b { background:#13DEB9; color:#fff; }
.gnl-ab-stat   { font-size:22px; font-weight:800; }
.gnl-ab-stat-a { color:#5D87FF; }
.gnl-ab-stat-b { color:#13DEB9; }
.gnl-winner-tag { font-size:10px; font-weight:800; background:#13DEB9; color:#fff; padding:2px 7px; border-radius:20px; margin-left:4px; }
.gnl-bar-track { height:8px; border-radius:4px; background:rgba(0,0,0,0.08); overflow:hidden; }
.gnl-bar-fill-a { height:8px; border-radius:4px; background:#5D87FF; }
.gnl-bar-fill-b { height:8px; border-radius:4px; background:#13DEB9; }

/* ============================================================
   39. MUSIC DASHBOARD — dashboard-music.html
   ============================================================ */
/* Stat Cards */
.mus-stat { border-radius:16px; padding:18px 20px; position:relative; overflow:hidden; }
.mus-stat-blue   { background:linear-gradient(145deg,#EEF2FF,#DBEAFE); }
.mus-stat-pink   { background:linear-gradient(145deg,#FFF0F8,#FFD6EE); }
.mus-stat-green  { background:linear-gradient(145deg,#ECFDF5,#D1FAE5); }
.mus-stat-orange { background:linear-gradient(145deg,#FFF7ED,#FED7AA); }
.mus-stat-purple { background:linear-gradient(145deg,#F3F0FF,#E8E2FF); }
.mus-stat-icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; }
.mus-stat-icon-blue   { background:rgba(93,135,255,0.15); color:#5D87FF; }
.mus-stat-icon-pink   { background:rgba(252,24,90,0.15);  color:#FC185A; }
.mus-stat-icon-green  { background:rgba(19,222,185,0.15); color:#13DEB9; }
.mus-stat-icon-orange { background:rgba(249,115,22,0.15); color:#F97316; }
.mus-stat-icon-purple { background:rgba(116,96,238,0.15); color:#7460EE; }
.mus-stat-val { font-size:26px; font-weight:800; line-height:1; margin-bottom:3px; }
.mus-stat-val-blue   { color:#5D87FF; }
.mus-stat-val-pink   { color:#FC185A; }
.mus-stat-val-green  { color:#13DEB9; }
.mus-stat-val-orange { color:#F97316; }
.mus-stat-val-purple { color:#7460EE; }
.mus-stat-label { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.mus-stat-chg { font-size:12px; font-weight:700; }
.mus-stat-chg-up { color:#13DEB9; }
.mus-stat-chg-dn { color:#FA896B; }
/* Now Playing Player Card */
.mus-player { background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 55%,#1a1435 100%); border-radius:20px; padding:28px 24px; color:#fff; border:none !important; }
.mus-player-header { margin-bottom:20px; text-align:center; }
.mus-player-tag { font-size:11px; font-weight:700; background:rgba(93,135,255,0.2); color:rgba(255,255,255,0.8); padding:4px 12px; border-radius:20px; letter-spacing:0.5px; }
.mus-album-art { width:130px; height:130px; border-radius:16px; font-size:64px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.05)); box-shadow:0 12px 32px rgba(0,0,0,0.3); }
.mus-now-title  { font-size:17px; font-weight:800; color:#fff; text-align:center; margin-bottom:4px; }
.mus-now-artist { font-size:13px; color:rgba(255,255,255,0.6); text-align:center; margin-bottom:16px; }
/* Waveform */
.mus-waveform { height:44px; display:flex; align-items:flex-end; gap:3px; justify-content:center; margin-bottom:12px; }
.mus-wave-bar { width:3px; border-radius:3px; background:rgba(255,255,255,0.25); animation:waveAnim 1.4s ease-in-out infinite; }
.mus-wave-bar.active { background:rgba(93,135,255,0.9); }
.mus-wave-bar:nth-child(3n)   { animation-duration:0.8s; }
.mus-wave-bar:nth-child(3n+1) { animation-duration:1.1s; }
.mus-wave-bar:nth-child(3n+2) { animation-duration:1.5s; }
/* Wave bar heights */
.mus-wh-8  { height:8px; }
.mus-wh-10 { height:10px; }
.mus-wh-12 { height:12px; }
.mus-wh-14 { height:14px; }
.mus-wh-16 { height:16px; }
.mus-wh-18 { height:18px; }
.mus-wh-20 { height:20px; }
.mus-wh-22 { height:22px; }
.mus-wh-24 { height:24px; }
.mus-wh-28 { height:28px; }
.mus-wh-32 { height:32px; }
.mus-wh-36 { height:36px; }
@keyframes waveAnim { 0%,100% { transform:scaleY(0.4); } 50% { transform:scaleY(1); } }
.mus-progress-track { height:4px; background:rgba(255,255,255,0.15); border-radius:2px; margin-bottom:6px; }
.mus-progress-fill { height:4px; background:linear-gradient(90deg,#5D87FF,#A855F7); border-radius:2px; width:38%; }
.mus-time-row { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.45); margin-bottom:16px; }
.mus-ctrl-row { display:flex; align-items:center; justify-content:center; gap:14px; }
.mus-ctrl-btn { background:rgba(255,255,255,0.1); border:none; width:38px; height:38px; border-radius:50%; color:#fff; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
.mus-ctrl-btn:hover { background:rgba(255,255,255,0.22); }
.mus-ctrl-btn-play { width:54px; height:54px; font-size:20px; background:linear-gradient(135deg,#5D87FF,#A855F7); box-shadow:0 6px 20px rgba(93,135,255,0.5); }
/* Top Tracks */
.mus-track-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-color); }
.mus-track-row:last-child { border-bottom:none; }
.mus-track-num { width:18px; font-size:13px; font-weight:700; color:var(--muted); text-align:center; flex-shrink:0; }
.mus-track-num-hot { color:#FC185A; }
.mus-track-art { width:42px; height:42px; border-radius:10px; font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mus-track-art-1 { background:linear-gradient(135deg,#667eea,#764ba2); }
.mus-track-art-2 { background:linear-gradient(135deg,#4facfe,#00f2fe); }
.mus-track-art-3 { background:linear-gradient(135deg,#a18cd1,#fbc2eb); }
.mus-track-art-4 { background:linear-gradient(135deg,#f093fb,#f5576c); }
.mus-track-art-5 { background:linear-gradient(135deg,#43e97b,#38f9d7); }
.mus-track-art-6 { background:linear-gradient(135deg,#fa709a,#fee140); }
.mus-track-art-7 { background:linear-gradient(135deg,#f7971e,#ffd200); }
.mus-track-info { min-width:0; }
.mus-track-pop-bar { flex:1; height:6px; background:var(--body-bg); border-radius:3px; overflow:hidden; min-width:60px; }
.mus-pop-fill { height:6px; border-radius:3px; background:linear-gradient(90deg,#5D87FF,#A855F7); }
.mus-pop-95 { width:95%; }
.mus-pop-80 { width:80%; }
.mus-pop-65 { width:65%; }
.mus-pop-55 { width:55%; }
.mus-pop-45 { width:45%; }
.mus-pop-38 { width:38%; }
.mus-pop-28 { width:28%; }
/* Platform Distribution */
.mus-platform-list { border-top:1px solid var(--border-color); padding-top:12px; }
.mus-platform-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.mus-platform-row:last-child { margin-bottom:0; }
.mus-platform-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.mus-plat-spotify { background:#D1FAE5; }
.mus-plat-apple   { background:#FEE2E2; }
.mus-plat-yt      { background:#FEE2E2; }
.mus-plat-amazon  { background:#FEF3C7; }
.mus-plat-other   { background:var(--body-bg); }
/* Album Rack */
.mus-album-rack { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.mus-album-rack::-webkit-scrollbar { height:4px; }
.mus-album-rack::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:2px; }
.mus-album-card { min-width:182px; border-radius:16px; overflow:hidden; cursor:pointer; transition:transform 0.2s; flex-shrink:0; border:1px solid var(--card-border); }
.mus-album-card:hover { transform:translateY(-5px); box-shadow:0 14px 32px rgba(0,0,0,0.12) !important; }
.mus-album-cover { height:155px; display:flex; align-items:center; justify-content:center; font-size:72px; }
.mus-album-cover-1 { background:linear-gradient(135deg,#667eea,#764ba2); }
.mus-album-cover-2 { background:linear-gradient(135deg,#f093fb,#f5576c); }
.mus-album-cover-3 { background:linear-gradient(135deg,#4facfe,#00f2fe); }
.mus-album-cover-4 { background:linear-gradient(135deg,#43e97b,#38f9d7); }
.mus-album-cover-5 { background:linear-gradient(135deg,#fa709a,#fee140); }
.mus-album-cover-6 { background:linear-gradient(135deg,#a18cd1,#fbc2eb); }
.mus-album-meta { padding:10px 12px; background:var(--card-bg); }
.mus-album-title   { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.mus-album-sub     { font-size:11px; color:var(--muted); font-weight:500; margin-bottom:2px; }
.mus-album-streams { font-size:11px; font-weight:700; color:var(--primary); }
/* Tour Timeline */
.mus-tour-item { display:flex; gap:14px; padding:12px 0; position:relative; align-items:flex-start; }
.mus-tour-item:not(:last-child)::after { content:''; position:absolute; left:17px; top:44px; bottom:0; width:2px; background:var(--border-color); }
.mus-tour-date-col { width:36px; flex-shrink:0; }
.mus-tour-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; line-height:1.2; text-align:center; }
.mus-tour-dot-upcoming { background:linear-gradient(135deg,#5D87FF,#7460EE); color:#fff; }
.mus-tour-dot-sold     { background:#FFF0F5; color:#FC185A; }
.mus-tour-dot-past     { background:var(--body-bg); color:var(--muted); }
.mus-tour-body { flex:1; }
.mus-tour-venue  { font-size:14px; font-weight:700; margin-bottom:2px; }
.mus-tour-city   { font-size:12px; color:var(--muted); margin-bottom:6px; }
.mus-tour-status { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.mus-tour-status-on   { background:#EEF2FF; color:#5D87FF; }
.mus-tour-status-sold { background:#FFF0F5; color:#FC185A; }
.mus-tour-status-past { background:var(--body-bg); color:var(--muted); }
.mus-tour-capacity { flex-shrink:0; text-align:right; white-space:nowrap; }
/* Fan Messages */
.mus-fan-msg { display:flex; gap:10px; margin-bottom:14px; }
.mus-fan-msg:last-child { margin-bottom:0; }
.mus-fan-av { width:36px; height:36px; border-radius:50%; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--body-bg); }
.mus-fan-av-1 { background:#EEF2FF; }
.mus-fan-av-2 { background:#FFF0F8; }
.mus-fan-av-3 { background:#ECFDF5; }
.mus-fan-av-4 { background:#FFF7ED; }
.mus-fan-av-5 { background:#F3F0FF; }
.mus-fan-bubble { border-radius:12px 12px 12px 4px; padding:10px 14px; flex:1; }
.mus-fan-bub-1 { background:rgba(93,135,255,0.08); }
.mus-fan-bub-2 { background:rgba(252,24,90,0.06); }
.mus-fan-bub-3 { background:rgba(19,222,185,0.08); }
.mus-fan-bub-4 { background:rgba(255,174,31,0.08); }
.mus-fan-meta { display:flex; gap:8px; margin-top:6px; }
.mus-fan-meta span { font-size:10px; font-weight:700; color:var(--muted); }
.mus-fan-meta span:first-child::after { content:'·'; margin-left:8px; }

/* Shared dot color classes for chart legends */
.dot-purple  { background:#7460EE; }
.dot-primary { background:#5D87FF; }
.dot-success { background:#13DEB9; }
.dot-warning { background:#FFAE1F; }
.dot-danger  { background:#FA896B; }
.dot-amber   { background:#FFAE1F; }
.dot-pink    { background:#FC185A; }
/* A/B bar fill widths */
.bfw-68  { width:68%; }
.bfw-75  { width:75%; }
.bfw-100 { width:100%; }
/* Now Playing Queue Cards (mus-np-*) */
.mus-np-card { border-radius:16px; padding:18px 16px 14px; display:flex; flex-direction:column; }
.mus-np-c1 { background:linear-gradient(160deg,#EEF2FF,#C7D2FE); }
.mus-np-c2 { background:linear-gradient(160deg,#F0FDFA,#CCFBF1); }
.mus-np-c3 { background:linear-gradient(160deg,#FDF4FF,#F5D0FE); }
.mus-np-c4 { background:linear-gradient(160deg,#FFF7ED,#FED7AA); }
/* top row */
.mus-np-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mus-np-tag { font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px; letter-spacing:.4px; text-transform:uppercase; }
.mus-np-tag-active { background:rgba(99,102,241,0.2); color:#4338CA; }
.mus-np-tag-next   { background:rgba(20,184,166,0.2); color:#0D9488; }
.mus-np-tag-queue  { background:rgba(0,0,0,0.07); color:var(--muted); }
.mus-np-rank { font-size:11px; font-weight:900; color:var(--muted); }
/* album art */
.mus-np-art { width:64px; height:64px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 12px; }
.mus-np-art-1 { background:linear-gradient(135deg,#818CF8,#6366F1); }
.mus-np-art-2 { background:linear-gradient(135deg,#5EEAD4,#14B8A6); }
.mus-np-art-3 { background:linear-gradient(135deg,#E879F9,#C026D3); }
.mus-np-art-4 { background:linear-gradient(135deg,#FB923C,#F97316); }
/* title / artist */
.mus-np-title { font-size:14px; font-weight:800; text-align:center; margin-bottom:2px; }
.mus-np-c1 .mus-np-title { color:#312E81; }
.mus-np-c2 .mus-np-title { color:#134E4A; }
.mus-np-c3 .mus-np-title { color:#701A75; }
.mus-np-c4 .mus-np-title { color:#7C2D12; }
.mus-np-artist { font-size:11px; font-weight:600; color:var(--muted); text-align:center; margin-bottom:10px; }
/* mini waveform */
.mus-np-wave { display:flex; align-items:flex-end; justify-content:center; gap:3px; height:36px; margin-bottom:10px; }
.mus-np-bar { width:4px; border-radius:2px; }
.mus-np-c1 .mus-np-bar { background:rgba(99,102,241,0.25); }
.mus-np-c2 .mus-np-bar { background:rgba(20,184,166,0.25); }
.mus-np-c3 .mus-np-bar { background:rgba(192,38,211,0.25); }
.mus-np-c4 .mus-np-bar { background:rgba(249,115,22,0.25); }
.mus-np-c1 .mus-np-bar.active { background:#6366F1; animation:waveAnim .8s ease-in-out infinite alternate; }
.mus-np-c2 .mus-np-bar.active { background:#14B8A6; animation:waveAnim .8s ease-in-out infinite alternate; }
.mus-np-c3 .mus-np-bar.active { background:#C026D3; animation:waveAnim .8s ease-in-out infinite alternate; }
.mus-np-c4 .mus-np-bar.active { background:#F97316; animation:waveAnim .8s ease-in-out infinite alternate; }
/* progress bar */
.mus-np-progress { height:4px; background:rgba(0,0,0,0.1); border-radius:10px; overflow:hidden; margin-bottom:5px; }
.mus-np-fill { height:100%; border-radius:10px; }
.mus-np-c1 .mus-np-fill { background:linear-gradient(90deg,#6366F1,#818CF8); }
.mus-np-c2 .mus-np-fill { background:linear-gradient(90deg,#14B8A6,#5EEAD4); }
.mus-np-c3 .mus-np-fill { background:linear-gradient(90deg,#C026D3,#E879F9); }
.mus-np-c4 .mus-np-fill { background:linear-gradient(90deg,#F97316,#FB923C); }
.mus-np-pct-38 { width:38%; }
.mus-np-pct-62 { width:62%; }
.mus-np-pct-18 { width:18%; }
.mus-np-pct-5  { width:5%; }
/* time */
.mus-np-time { display:flex; justify-content:space-between; font-size:10px; font-weight:700; color:var(--muted); margin-bottom:10px; }
/* footer */
.mus-np-footer { display:flex; align-items:center; gap:8px; margin-top:auto; }
.mus-np-play-btn { width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:22px; padding:0; background:transparent; line-height:1; }
.mus-np-play-1 { color:#6366F1; }
.mus-np-play-2 { color:#14B8A6; }
.mus-np-play-3 { color:#C026D3; }
.mus-np-play-4 { color:#F97316; }
.mus-np-streams { font-size:13px; font-weight:900; flex-grow:1; }
.mus-np-c1 .mus-np-streams { color:#4338CA; }
.mus-np-c2 .mus-np-streams { color:#0D9488; }
.mus-np-c3 .mus-np-streams { color:#A21CAF; }
.mus-np-c4 .mus-np-streams { color:#C2410C; }
.mus-np-hot      { font-size:11px; font-weight:700; color:#EF4444; }
.mus-np-trending { font-size:11px; font-weight:700; color:#10B981; }

/* ============================================================
   40. DARK THEME OVERRIDES
   ============================================================ */
/* Dark theme — Sidebar */
[data-theme="dark"] .app-sidebar { background: linear-gradient(180deg, #0a0f1e 0%, #0f172a 100%); border-color: rgba(255,255,255,0.05); box-shadow: none; }
[data-theme="dark"] .app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .sidebar-logo { background: transparent; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .sidebar-logo .logo-text { color: #fff; }
[data-theme="dark"] .sidebar-logo-toggle { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.35); }
[data-theme="dark"] .sidebar-logo-toggle:hover { background: rgba(93,135,255,0.2); color: #5D87FF; border-color: rgba(93,135,255,0.35); }
[data-theme="dark"] .nav-small-cap { color: rgba(255,255,255,0.25); }
[data-theme="dark"] .nav-small-cap::after { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .sidebar-link { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); }
[data-theme="dark"] .sidebar-link > i { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
[data-theme="dark"] .sidebar-link:hover > i { background: rgba(93,135,255,0.15); color: #5D87FF; }
[data-theme="dark"] .sidebar-item.active > .sidebar-link { background: linear-gradient(90deg, rgba(93,135,255,0.2), rgba(93,135,255,0.05)); color: #5D87FF; }
[data-theme="dark"] .sidebar-item.active > .sidebar-link > i { background: linear-gradient(135deg, #5D87FF, #49b4e5); color: #fff; box-shadow: 0 4px 12px rgba(93,135,255,0.45); }
[data-theme="dark"] .sidebar-link.has-arrow::after { border-color: rgba(255,255,255,0.25); }
[data-theme="dark"] .sidebar-link.has-arrow[aria-expanded="true"]::after { border-color: #5D87FF; }
[data-theme="dark"] .sidebar-link:hover.has-arrow::after { border-color: #5D87FF; }
[data-theme="dark"] .first-level .sidebar-link { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .first-level .sidebar-link::before { background: rgba(255,255,255,0.15); }
[data-theme="dark"] .first-level .sidebar-link:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); }
[data-theme="dark"] .first-level .sidebar-link:hover::before { background: #5D87FF; }
[data-theme="dark"] .first-level li.active > .sidebar-link { color: #5D87FF; background: rgba(93,135,255,0.14); }
[data-theme="dark"] .first-level li.active > .sidebar-link::before { background: #5D87FF; box-shadow: 0 0 7px rgba(93,135,255,0.6); }
[data-theme="dark"] .sidebar-item.has-active > .sidebar-link.has-arrow { color: #5D87FF; }
[data-theme="dark"] .sidebar-item.has-active > .sidebar-link.has-arrow::after { border-color: #5D87FF; }
[data-theme="dark"] .site-footer { background:#1a2333; }
[data-theme="dark"] .page-wrapper { }
[data-theme="dark"] .modal-content { background:#1e2a3a; }
[data-theme="dark"] .faq-accordion .accordion-body { background:var(--card-bg); }
[data-theme="dark"] .auth-split-right { background:#1e2a3a; }
[data-theme="dark"] .text-dark { color: #bec8d8 !important; }
[data-theme="dark"] .form-floating > .form-control-plaintext ~ label,
[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme="dark"] .form-floating > .form-select ~ label { color: var(--muted); }
[data-theme="dark"] .form-floating > label { color: var(--muted); }
[data-theme="dark"] .accordion-button::after { filter:invert(1); }
[data-theme="dark"] .accordion-button { background: var(--card-bg); color: var(--heading-color); box-shadow: none; }
[data-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(93,135,255,0.12); color: #a3bbff; --bs-accordion-active-bg: rgba(93,135,255,0.12); --bs-accordion-active-color: #a3bbff; }
[data-theme="dark"] .accordion-button:not(.collapsed)::after { filter: invert(1) brightness(1.5); }
[data-theme="dark"] .accordion-item { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: var(--border-color); --bs-nav-tabs-link-active-bg: var(--card-bg); --bs-nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--card-bg); --bs-nav-tabs-link-active-color: var(--primary); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--muted); }
[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) { border-color: var(--border-color) var(--border-color) transparent; color: var(--body-color); }
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background: var(--card-bg); border-color: var(--border-color) var(--border-color) var(--card-bg); color: var(--primary); }
[data-theme="dark"] .price-card { background:var(--card-bg); }
[data-theme="dark"] .email-sidebar { background:var(--card-bg); border-color:var(--border-color); }
[data-theme="dark"] .chat-main-hd { background:var(--card-bg); }
[data-theme="dark"] .chat-input-bar { background:var(--card-bg); }
[data-theme="dark"] .chat-sidebar { background:var(--card-bg); }
[data-theme="dark"] .chat-profile-panel { background:var(--card-bg); }

/* ============================================================
   36. ANIMATIONS
   ============================================================ */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn  { from { opacity:0; transform:scale(0.95); }      to { opacity:1; transform:scale(1); } }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes dropFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse    { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
.fade-in-up { animation:fadeInUp 0.4s ease both; }
.scale-in   { animation:scaleIn  0.3s ease both; }
.anim-d1 { animation-delay:0.1s; }
.anim-d2 { animation-delay:0.2s; }
.anim-d3 { animation-delay:0.3s; }
.anim-d4 { animation-delay:0.4s; }

/* Page loader */
.page-loader { position:fixed; inset:0; background:var(--card-bg); display:flex; align-items:center; justify-content:center; z-index:9999; }
.spinner-ring { width:44px; height:44px; border:4px solid var(--primary-light); border-top-color:var(--primary); border-radius:50%; animation:spin 0.75s linear infinite; }

/* ============================================================
   37. UTILITIES
   ============================================================ */
.text-primary  { color:var(--primary) !important; }
.text-success  { color:var(--success) !important; }
.text-warning  { color:var(--warning) !important; }
.text-danger   { color:var(--danger)  !important; }
.text-purple   { color:var(--purple)  !important; }
.text-pink     { color:var(--pink)    !important; }
.text-teal     { color:var(--teal)    !important; }
.text-muted    { color:var(--muted)   !important; }
.text-heading  { color:var(--heading-color) !important; }
.fw-500 { font-weight:500 !important; } .fw-600 { font-weight:600 !important; }
.fw-700 { font-weight:700 !important; } .fw-800 { font-weight:800 !important; }
.fs-11 { font-size:11px !important; } .fs-12 { font-size:12px !important; }
.fs-13 { font-size:13px !important; } .fs-14 { font-size:14px !important; }
.fs-15 { font-size:15px !important; } .fs-16 { font-size:16px !important; }
.fs-18 { font-size:18px !important; } .fs-20 { font-size:20px !important; }
.fs-24 { font-size:24px !important; } .fs-28 { font-size:28px !important; }
.rounded-8  { border-radius:8px  !important; } .rounded-12 { border-radius:12px !important; }
.rounded-16 { border-radius:16px !important; } .rounded-50 { border-radius:50px !important; }
.cursor-pointer { cursor:pointer; }
.bg-card { background:var(--card-bg) !important; }
.bg-body { background:var(--body-bg) !important; }
.border-color { border-color:var(--border-color) !important; }

/* Revenue strip (Crypto/Ecom dashboards) */
.crypto-ticker { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:20px; scrollbar-width:none; }
.crypto-ticker::-webkit-scrollbar { display:none; }
.coin-pill { background:var(--card-bg); border:1px solid var(--card-border); border-radius:50px; padding:9px 16px; display:flex; align-items:center; gap:9px; white-space:nowrap; box-shadow:var(--card-shadow); cursor:pointer; transition:var(--tr); flex-shrink:0; }
.coin-pill:hover { border-color:var(--primary); box-shadow:0 4px 14px rgba(93,135,255,0.13); }
.coin-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.coin-info strong { display:block; font-size:13.5px; font-weight:700; color:var(--heading-color); }
.coin-info span { font-size:11.5px; color:var(--muted); }
.coin-change { font-size:12px; font-weight:700; }
.coin-change.up { color:var(--success); } .coin-change.down { color:var(--danger); }

/* ============================================================
   38. RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  :root { --sidebar-w: 240px; }
  .chat-app { grid-template-columns: 240px 1fr; }
  .chat-profile-panel { display:none; }
  .calendar-app { grid-template-columns:1fr 240px; }
  .shop-layout { grid-template-columns:200px 1fr; }
}
@media (max-width: 991px) {
  .app-sidebar { transform:translateX(-100%); z-index:1052; }
  .app-sidebar.open { transform:translateX(0); }
  .app-header { left:0 !important; }
  .content-area { margin-left:0 !important; }
  .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1051; backdrop-filter:blur(2px); }
  .sidebar-overlay.show { display:block; }
  body.sidebar-collapsed .content-area { margin-left:0 !important; }
  body.sidebar-collapsed .app-header { left:0 !important; }
  .calendar-app { grid-template-columns:1fr; }
  .settings-layout { grid-template-columns:1fr; }
  .shop-layout { grid-template-columns:1fr; }
  .auth-split { grid-template-columns:1fr; max-width:420px; }
  .auth-split-left { display:none; }
  .auth-split-right { border-radius:var(--radius-xl); }
}
@media (max-width: 768px) {
  .header-search input { width:160px; }
  .email-app { grid-template-columns:1fr; }
  .email-sidebar { display:none; }
  .chat-app { grid-template-columns:1fr; }
  .chat-sidebar { display:none; }
  .invoice-hd { flex-direction:column; gap:14px; }
  .invoice-parties { grid-template-columns:1fr; }
  .profile-hero { flex-direction:column; text-align:center; }
  .profile-stats { justify-content:center; }
  .settings-layout { grid-template-columns:1fr; }
  .settings-nav { position:static; display:flex; flex-wrap:wrap; }
  .settings-nav-item a { padding:6px 10px; }
}
@media (max-width: 576px) {
  .product-grid { grid-template-columns:1fr 1fr; }
  .contacts-grid { grid-template-columns:1fr 1fr; }
  .notes-grid { grid-template-columns:1fr; }
  .crypto-ticker { flex-wrap:wrap; }
  .error-code { font-size:80px; }
  .header-search { display:none; }
}

/* Sidebar overlay for mobile */
.sidebar-overlay { display:none; }

/* ============================================================
   39. HEADER LAYOUT HELPERS
   ============================================================ */
.header-inner {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 100%;
}
.header-left {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.sidebar-toggle-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--body-bg); border: 1px solid var(--border-color);
  color: var(--header-text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; flex-shrink: 0; transition: var(--tr);
}
.sidebar-toggle-btn:hover { background: rgba(93,135,255,0.2); color: #fff; }

/* ============================================================
   40. DARK BAND PAGE HEADER
   ============================================================ */
.page-hdr-inline {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
}
.page-title-light { font-size: 22px; font-weight: 800; color: var(--heading-color); margin: 0; }
.page-sub-light   { font-size: 13px; color: var(--muted); margin: 2px 0 4px; }
.breadcrumb-light { margin: 0; }
.breadcrumb-light .breadcrumb-item { font-size: 12.5px; }
.breadcrumb-light .breadcrumb-item a { color: var(--muted); text-decoration: none; }
.breadcrumb-light .breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-light .breadcrumb-item.active { color: var(--primary); font-weight: 600; }
.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }

/* ============================================================
   41. STAT CARD VARIANTS
   ============================================================ */
.stat-card.stat-primary .stat-icon { background: var(--primary-light); color: var(--primary); }
.stat-card.stat-success .stat-icon { background: var(--success-light); color: var(--success); }
.stat-card.stat-warning .stat-icon { background: var(--warning-light); color: var(--warning); }
.stat-card.stat-danger  .stat-icon { background: var(--danger-light);  color: var(--danger); }
.stat-card.stat-purple  .stat-icon { background: var(--purple-light);  color: var(--purple); }
.stat-card.stat-info    .stat-icon { background: var(--info-light);    color: var(--info); }
.stat-card.stat-teal    .stat-icon { background: var(--teal-light);    color: var(--teal); }

/* Dark theme — stat-icon backgrounds */
[data-theme="dark"] .stat-card.stat-primary .stat-icon { background: rgba(93,135,255,0.15);  color: #7B9FFF; }
[data-theme="dark"] .stat-card.stat-success .stat-icon { background: rgba(19,222,185,0.15);  color: #13DEB9; }
[data-theme="dark"] .stat-card.stat-warning .stat-icon { background: rgba(255,174,31,0.15);  color: #FFAE1F; }
[data-theme="dark"] .stat-card.stat-danger  .stat-icon { background: rgba(250,137,107,0.15); color: #FA896B; }
[data-theme="dark"] .stat-card.stat-purple  .stat-icon { background: rgba(116,96,238,0.15);  color: #9B8EF5; }
[data-theme="dark"] .stat-card.stat-info    .stat-icon { background: rgba(83,155,255,0.15);  color: #539BFF; }
[data-theme="dark"] .stat-card.stat-teal    .stat-icon { background: rgba(0,188,212,0.15);   color: #00BCD4; }

/* ============================================================
   42. ANIMATION DELAYS
   ============================================================ */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }

/* ============================================================
   43. SIDEBAR STRUCTURE
   ============================================================ */
.sidebar-inner { flex: 1; overflow-y: auto; overflow-x: hidden; }
.sidebar-inner::-webkit-scrollbar { width: 0; }
.sidebar-nav   { width: 100%; }
.sidebar-menu  { list-style: none; padding: 8px 0 24px; margin: 0; }
/* Sidebar Badge — circle */
.sidebar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0; line-height: 1;
  box-shadow: 0 2px 8px rgba(93,135,255,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-link:hover .sidebar-badge {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Badge color variants */
.sidebar-badge-primary { background: #5D87FF; }
.sidebar-badge-success { background: #13DEB9; }
.sidebar-badge-danger  { background: #FA896B; box-shadow: 0 2px 8px rgba(250,137,107,0.45); }
.sidebar-badge-warning { background: #FFAE1F; color: #fff; }
.sidebar-badge-info    { background: #539BFF; }
.sidebar-badge-purple  { background: #7460EE; }
.sidebar-badge-pink    { background: #FC185A; }
.sidebar-badge-orange  { background: #FF8C00; }
.sidebar-badge-teal    { background: #00BCD4; }
.sidebar-badge-indigo  { background: #3D5AF1; }

/* Dark theme badge overrides */
[data-theme="dark"] .sidebar-badge { box-shadow: none; }

/* Direct icon inside sidebar-link — Premium Icon Box */
.sidebar-link > i {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 16px;
  background: #f0f4ff;
  color: #7C8FAC;
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.sidebar-link:hover > i {
  background: rgba(93,135,255,0.12);
  color: var(--primary);
}
.sidebar-item.active > .sidebar-link > i {
  background: linear-gradient(135deg, #5D87FF 0%, #49b4e5 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(93,135,255,0.35);
}
.first-level .sidebar-link > i { display: none; }

/* ============================================================
   44. CONTENT COMPONENT HELPERS
   ============================================================ */
.metric-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; border-radius: 12px; gap: 10px;
}
.metric-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.act-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.prod-icon-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.prod-icon-primary  { background: var(--primary-light); }
.prod-icon-success  { background: var(--success-light); }
.prod-icon-warning  { background: var(--warning-light); }
.prod-icon-danger   { background: var(--danger-light); }
.prod-icon-info     { background: var(--info-light); }
.prod-icon-purple   { background: var(--purple-light); }
.prod-icon-pink     { background: var(--pink-light); }
.prod-icon-teal     { background: var(--teal-light); }
.prod-icon-orange   { background: var(--orange-light); }

/* Metric row backgrounds */
.metric-row-primary { background: var(--primary-light); }
.metric-row-success { background: var(--success-light); }
.metric-row-warning { background: var(--warning-light); }
.metric-row-danger  { background: var(--danger-light); }
.metric-row-info    { background: var(--info-light); }
.metric-row-purple  { background: var(--purple-light); }
.metric-row-pink    { background: var(--pink-light); }

/* Legend dot colors */
.legend-dot-primary   { background: var(--primary); }
.legend-dot-secondary { background: var(--secondary); }
.legend-dot-success   { background: var(--success); }
.legend-dot-warning   { background: var(--warning); }
.legend-dot-danger    { background: var(--danger); }
.legend-dot-purple    { background: var(--purple); }
.legend-dot-pink      { background: var(--pink); }
.legend-dot-teal      { background: var(--teal); }

/* Soft bg (background only, no color cascade) */
.bg-primary-soft { background: var(--primary-light) !important; }
.bg-success-soft { background: var(--success-light) !important; }
.bg-warning-soft { background: var(--warning-light) !important; }
.bg-danger-soft  { background: var(--danger-light)  !important; }
.bg-purple-soft  { background: var(--purple-light)  !important; }
.bg-pink-soft    { background: var(--pink-light)    !important; }
.team-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px; background: var(--body-bg);
}
.team-ava {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.chart-toolbar { display: flex; gap: 5px; align-items: center; }

/* ============================================================
   45. COLLAPSED SIDEBAR FLYOUT
   ============================================================ */
.sidebar-flyout {
  position: fixed;
  left: calc(var(--sidebar-collapsed-w) + 8px);
  min-width: 190px;
  background: #fff;
  border: 1px solid #eef0f7;
  border-radius: 12px;
  box-shadow: 0 10px 36px rgba(93,135,255,0.14), 0 2px 10px rgba(0,0,0,0.07);
  padding: 6px;
  z-index: 1070;
  pointer-events: auto;
  animation: flyoutIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: left center;
}
@keyframes flyoutIn {
  from { opacity: 0; transform: translateX(-10px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
.flyout-title {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 700;
  color: var(--heading-color);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.flyout-title:hover {
  background: rgba(93,135,255,0.07);
  color: var(--primary);
}
.flyout-title.active { color: var(--primary); }
.flyout-title i {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: linear-gradient(135deg, #5D87FF, #49b4e5);
  color: #fff; flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(93,135,255,0.35);
}
.flyout-divider {
  height: 1px; background: #eef0f7; margin: 4px 2px;
}
.flyout-list {
  list-style: none; margin: 0; padding: 2px 0;
}
.flyout-list li a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 14px;
  font-size: 13px; font-weight: 400;
  color: #5a6a85;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
  position: relative;
}
.flyout-list li a::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: #d0d9ec; flex-shrink: 0;
  transition: background 0.15s;
}
.flyout-list li a:hover {
  background: rgba(93,135,255,0.07);
  color: var(--primary);
  padding-left: 16px;
}
.flyout-list li a:hover::before { background: var(--primary); box-shadow: 0 0 5px rgba(93,135,255,0.4); }
.flyout-list li a.active {
  color: var(--primary); background: rgba(93,135,255,0.08); font-weight: 500;
}
.flyout-list li a.active::before { background: var(--primary); box-shadow: 0 0 5px rgba(93,135,255,0.5); }

/* Dark theme flyout */
[data-theme="dark"] .sidebar-flyout {
  background: #1e2a3a;
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 10px 36px rgba(0,0,0,0.4);
}
[data-theme="dark"] .flyout-title { color: #fff; }
[data-theme="dark"] .flyout-title:hover { background: rgba(255,255,255,0.06); color: #5D87FF; }
[data-theme="dark"] .flyout-divider { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .flyout-list li a { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .flyout-list li a::before { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .flyout-list li a:hover { background: rgba(255,255,255,0.05); color: #5D87FF; }
[data-theme="dark"] .flyout-list li a:hover::before { background: #5D87FF; }
[data-theme="dark"] .flyout-list li a.active { color: #5D87FF; background: rgba(93,135,255,0.12); }

/* Dark mode dark-band */
[data-theme="dark"] .dark-band { background: var(--dark-band-bg); }

/* Dark theme — ApexCharts tooltips */
[data-theme="dark"] .apexcharts-tooltip {
  background: #1e2a3a !important;
  border: 1px solid #3a4a62 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  color: #bec8d8 !important;
}
[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light {
  background: #1e2a3a !important;
  border: 1px solid #3a4a62 !important;
  color: #bec8d8 !important;
}
[data-theme="dark"] .apexcharts-tooltip-title {
  background: #131d2a !important;
  border-bottom: 1px solid #3a4a62 !important;
  color: #eaf0fb !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .apexcharts-tooltip-series-group {
  background: transparent !important;
  color: #bec8d8 !important;
}
[data-theme="dark"] .apexcharts-tooltip-series-group.apexcharts-active,
[data-theme="dark"] .apexcharts-tooltip-series-group:last-child {
  background: transparent !important;
}
[data-theme="dark"] .apexcharts-tooltip-text-y-label,
[data-theme="dark"] .apexcharts-tooltip-text-goals-label,
[data-theme="dark"] .apexcharts-tooltip-text-z-label { color: #7C8FAC !important; }
[data-theme="dark"] .apexcharts-tooltip-text-y-value,
[data-theme="dark"] .apexcharts-tooltip-text-goals-value,
[data-theme="dark"] .apexcharts-tooltip-text-z-value { color: #eaf0fb !important; font-weight: 700 !important; }
[data-theme="dark"] .apexcharts-xaxistooltip {
  background: #1e2a3a !important;
  border: 1px solid #3a4a62 !important;
  color: #bec8d8 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .apexcharts-xaxistooltip-bottom::before { border-bottom-color: #3a4a62 !important; }
[data-theme="dark"] .apexcharts-xaxistooltip-bottom::after  { border-bottom-color: #1e2a3a !important; }
[data-theme="dark"] .apexcharts-xaxistooltip-text { color: #bec8d8 !important; }
[data-theme="dark"] .apexcharts-yaxistooltip {
  background: #1e2a3a !important;
  border: 1px solid #3a4a62 !important;
  color: #bec8d8 !important;
}
[data-theme="dark"] .apexcharts-yaxistooltip-left::before { border-left-color: #3a4a62 !important; }
[data-theme="dark"] .apexcharts-yaxistooltip-left::after  { border-left-color: #1e2a3a !important; }
/* Dark theme — ApexCharts grid & axis */
[data-theme="dark"] .apexcharts-gridline          { stroke: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .apexcharts-grid line          { stroke: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .apexcharts-xcrosshairs,
[data-theme="dark"] .apexcharts-ycrosshairs        { stroke: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .apexcharts-xaxis line,
[data-theme="dark"] .apexcharts-yaxis line         { stroke: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .apexcharts-xaxis-tick         { stroke: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .apexcharts-text tspan,
[data-theme="dark"] .apexcharts-xaxis-label tspan,
[data-theme="dark"] .apexcharts-yaxis-label tspan  { fill: #7C8FAC !important; }

/* Dark theme — General Analytics KPI cards */
[data-theme="dark"] .gnl-kpi-blue   { background: linear-gradient(145deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .gnl-kpi-green  { background: linear-gradient(145deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .gnl-kpi-purple { background: linear-gradient(145deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .gnl-kpi-orange { background: linear-gradient(145deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }
[data-theme="dark"] .gnl-kpi-pink   { background: linear-gradient(145deg, rgba(252,24,90,0.14), rgba(255,100,140,0.20)); }

/* Dark theme — General Analytics bounce badges */
[data-theme="dark"] .gnl-bounce-low  { background: rgba(19,222,185,0.14); color: #5FECD4; }
[data-theme="dark"] .gnl-bounce-med  { background: rgba(255,174,31,0.14); color: #FFD066; }
[data-theme="dark"] .gnl-bounce-high { background: rgba(250,137,107,0.14); color: #FFAA90; }

/* Dark theme — General Analytics A/B cards */
[data-theme="dark"] .gnl-ab-blue  { background: linear-gradient(145deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .gnl-ab-green { background: linear-gradient(145deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }

/* Dark theme — Music stat cards */
[data-theme="dark"] .mus-stat-blue   { background: linear-gradient(145deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .mus-stat-pink   { background: linear-gradient(145deg, rgba(252,24,90,0.14), rgba(255,100,140,0.20)); }
[data-theme="dark"] .mus-stat-green  { background: linear-gradient(145deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .mus-stat-orange { background: linear-gradient(145deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }
[data-theme="dark"] .mus-stat-purple { background: linear-gradient(145deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }

/* Dark theme — Music now playing cards */
[data-theme="dark"] .mus-np-c1 { background: linear-gradient(160deg, rgba(99,102,241,0.18), rgba(129,140,248,0.24)); }
[data-theme="dark"] .mus-np-c2 { background: linear-gradient(160deg, rgba(20,184,166,0.16), rgba(94,234,212,0.22)); }
[data-theme="dark"] .mus-np-c3 { background: linear-gradient(160deg, rgba(192,38,211,0.16), rgba(232,121,249,0.22)); }
[data-theme="dark"] .mus-np-c4 { background: linear-gradient(160deg, rgba(249,115,22,0.16), rgba(251,146,60,0.22)); }
[data-theme="dark"] .mus-np-c1 .mus-np-title { color: #A5B4FC; }
[data-theme="dark"] .mus-np-c2 .mus-np-title { color: #5EEAD4; }
[data-theme="dark"] .mus-np-c3 .mus-np-title { color: #E879F9; }
[data-theme="dark"] .mus-np-c4 .mus-np-title { color: #FB923C; }
[data-theme="dark"] .mus-np-c1 .mus-np-streams { color: #818CF8; }
[data-theme="dark"] .mus-np-c2 .mus-np-streams { color: #2DD4BF; }
[data-theme="dark"] .mus-np-c3 .mus-np-streams { color: #D946EF; }
[data-theme="dark"] .mus-np-c4 .mus-np-streams { color: #F97316; }

/* Dark theme — Music platform icons */
[data-theme="dark"] .mus-plat-spotify { background: rgba(19,222,185,0.13); }
[data-theme="dark"] .mus-plat-apple   { background: rgba(250,137,107,0.13); }
[data-theme="dark"] .mus-plat-yt      { background: rgba(250,137,107,0.13); }
[data-theme="dark"] .mus-plat-amazon  { background: rgba(255,174,31,0.13); }

/* Dark theme — Music tour dots */
[data-theme="dark"] .mus-tour-dot-sold { background: rgba(252,24,90,0.15); color: #FF80A8; }

/* Dark theme — Music tour status badges */
[data-theme="dark"] .mus-tour-status-on   { background: rgba(93,135,255,0.15); color: #93B4FF; }
[data-theme="dark"] .mus-tour-status-sold { background: rgba(252,24,90,0.13); color: #FF80A8; }

/* Dark theme — Calendar stat cards */
[data-theme="dark"] .cal-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .cal-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .cal-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .cal-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }
[data-theme="dark"] .cal-stat-pink   { background: linear-gradient(135deg, rgba(252,24,90,0.13), rgba(255,100,140,0.18)); }

/* Dark theme — Music fan avatars */
[data-theme="dark"] .mus-fan-av-1 { background: rgba(93,135,255,0.14); }
[data-theme="dark"] .mus-fan-av-2 { background: rgba(252,24,90,0.12); }
[data-theme="dark"] .mus-fan-av-3 { background: rgba(19,222,185,0.12); }
[data-theme="dark"] .mus-fan-av-4 { background: rgba(249,115,22,0.13); }
[data-theme="dark"] .mus-fan-av-5 { background: rgba(116,96,238,0.14); }

/* Dark theme — Bootstrap form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--body-color);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--primary);
  color: var(--body-color);
  box-shadow: 0 0 0 3px rgba(93,135,255,0.15);
}
[data-theme="dark"] .form-control::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] { background-color: rgba(255,255,255,0.04); color: var(--muted); }
[data-theme="dark"] .form-select option { background-color: #2a3547; color: var(--body-color); }
[data-theme="dark"] .input-group-text {
  background-color: rgba(255,255,255,0.06);
  border-color: var(--border-color);
  color: var(--muted);
}

/* Dark theme — Shop filter stat icons (rgba variants) */
[data-theme="dark"] .shf-ico-indigo { color: #A5B4FC; }
[data-theme="dark"] .shf-ico-green  { color: #5FECD4; }
[data-theme="dark"] .shf-ico-amber  { color: #FFD066; }
[data-theme="dark"] .shf-ico-rose   { color: #FF80A8; }

/* Dark theme — Shop filter category icons (gradient variants) */
[data-theme="dark"] .shf-ico-elec  { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); color: #93B4FF; }
[data-theme="dark"] .shf-ico-mob   { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); color: #B8A4FF; }
[data-theme="dark"] .shf-ico-tv    { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); color: #5FECD4; }
[data-theme="dark"] .shf-ico-audio { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); color: #FB923C; }
[data-theme="dark"] .shf-ico-cam   { background: linear-gradient(135deg, rgba(252,24,90,0.13), rgba(255,100,140,0.18)); color: #FF80A8; }
[data-theme="dark"] .shf-ico-wear  { background: linear-gradient(135deg, rgba(73,190,255,0.14), rgba(50,160,230,0.20)); color: #7DD3FC; }

/* Dark theme — Shop filter brand logos */
[data-theme="dark"] .shf-bl-apple   { background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.11)); color: #e0e0e5; }
[data-theme="dark"] .shf-bl-samsung { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); color: #93B4FF; }
[data-theme="dark"] .shf-bl-canon   { background: linear-gradient(135deg, rgba(252,24,90,0.13), rgba(255,100,140,0.18)); color: #FF80A8; }
[data-theme="dark"] .shf-bl-ms      { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); color: #B8A4FF; }

/* Dark theme — Profile contribution streak */
[data-theme="dark"] .prf-contrib-streak { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); border-color: rgba(249,115,22,0.22); }
[data-theme="dark"] .prf-contrib-streak-val { color: #FB923C; }

/* Dark theme — Profile badge cards */
[data-theme="dark"] .prf-badge-gold   { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,220,80,0.18)); border-color: rgba(255,174,31,0.25); }
[data-theme="dark"] .prf-badge-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); border-color: rgba(93,135,255,0.25); }
[data-theme="dark"] .prf-badge-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); border-color: rgba(19,222,185,0.22); }
[data-theme="dark"] .prf-badge-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); border-color: rgba(116,96,238,0.25); }

/* Dark theme — Invoice stat cards */
[data-theme="dark"] .inv-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .inv-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .inv-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }
[data-theme="dark"] .inv-stat-red    { background: linear-gradient(135deg, rgba(250,137,107,0.14), rgba(255,100,100,0.18)); }
[data-theme="dark"] .inv-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }

/* Dark theme — Contact grid stat cards */
[data-theme="dark"] .ctl-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .ctl-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .ctl-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .ctl-stat-pink   { background: linear-gradient(135deg, rgba(252,24,90,0.13), rgba(255,100,140,0.18)); }

/* Dark theme — Contact table stat cards */
[data-theme="dark"] .ctb-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .ctb-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .ctb-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .ctb-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }

/* Dark theme — Email stat cards */
[data-theme="dark"] .eml-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .eml-stat-red    { background: linear-gradient(135deg, rgba(250,137,107,0.14), rgba(255,100,100,0.18)); }
[data-theme="dark"] .eml-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .eml-stat-gray   { background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.10)); }
[data-theme="dark"] .eml-stat-yellow { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,220,80,0.18)); }
[data-theme="dark"] .eml-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }
[data-theme="dark"] .eml-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }

/* Dark theme — Checkbox & Radio inputs */
[data-theme="dark"] .form-check-input {
  --bs-form-check-input-bg: rgba(255,255,255,0.07);
  background-color: rgba(255,255,255,0.07);
  border-color: #3a4a62;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
[data-theme="dark"] .form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(93,135,255,0.18);
}
[data-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Dark theme — Chat stat cards */
[data-theme="dark"] .cht-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .cht-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .cht-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .cht-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }

/* Dark theme — Progress bar track */
[data-theme="dark"] .progress { --bs-progress-bg: rgba(255,255,255,0.08); background-color: rgba(255,255,255,0.08); }

/* Dark theme — Pricing popular plan card */
[data-theme="dark"] .pri-plan-popular { background: linear-gradient(135deg, rgba(93,135,255,0.14), rgba(93,135,255,0.06)); }

/* Dark theme — Pricing stat cards */
[data-theme="dark"] .pri-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .pri-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .pri-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .pri-stat-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .pri-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }

/* Dark theme — Pricing plan headers */
[data-theme="dark"] .pri-head-starter { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .pri-head-starter .pri-plan-name,
[data-theme="dark"] .pri-head-starter .pri-plan-tagline { color: var(--dark-text); }

/* Dark theme — Tag input container */
[data-theme="dark"] .tag-input-container { border-color: #3a4a62; background: var(--input-bg); }

/* Dark theme — Bootstrap .bg-light */
[data-theme="dark"] .bg-light { background-color: rgba(255,255,255,0.05) !important; }

/* Dark theme — Upload zones */
[data-theme="dark"] .upload-zone { border-color: #3a4a62; background: rgba(255,255,255,0.03); }
[data-theme="dark"] .upload-zone:hover { border-color: #5D87FF; background: rgba(93,135,255,0.07); }
[data-theme="dark"] .upload-zone .upload-icon { color: #4a5a72; }
[data-theme="dark"] .upload-zone-sm { border-color: #3a4a62; }
[data-theme="dark"] .upload-zone-sm:hover { border-color: #5D87FF; }

/* Dark theme — Shipping options */
[data-theme="dark"] .shipping-option { border-color: #3a4a62; }
[data-theme="dark"] .shipping-option:has(input:checked) { border-color: #5D87FF; background: rgba(93,135,255,0.10); }

/* Dark theme — Kanban cards */
[data-theme="dark"] .kanban-card           { border-color: #3a4a62; }
[data-theme="dark"] .kanban-card-blue      { border-color: #3a4a62; border-left-color: #5D87FF; }
[data-theme="dark"] .kanban-card-amber     { border-color: #3a4a62; border-left-color: #FFAE1F; }
[data-theme="dark"] .kanban-card-green     { border-color: #3a4a62; border-left-color: #13DEB9; }
[data-theme="dark"] .kanban-col-badge-amber { background: rgba(255,174,31,0.14); color: #FFD066; }
[data-theme="dark"] .kanban-col-badge-green { background: rgba(19,222,185,0.13); color: #5FECD4; }
[data-theme="dark"] .kanban-hd-gray        { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .kanban-hd-blue        { background: rgba(93,135,255,0.10); }
[data-theme="dark"] .kanban-hd-amber       { background: rgba(255,174,31,0.10); }
[data-theme="dark"] .kanban-hd-green       { background: rgba(19,222,185,0.10); }

/* Dark theme — Ecommerce live tag */
[data-theme="dark"] .eco-live-tag { background: rgba(19,222,185,0.12); }

/* Dark theme — Ecommerce month tag */
[data-theme="dark"] .eco-month-tag { background: rgba(93,135,255,0.15); }

/* Dark theme — Ecommerce KPI badges */
[data-theme="dark"] .eco-kpi-badge-primary { background: rgba(93,135,255,0.15); }
[data-theme="dark"] .eco-kpi-badge-success { background: rgba(19,222,185,0.12); }
[data-theme="dark"] .eco-kpi-badge-warning { background: rgba(255,174,31,0.13); }
[data-theme="dark"] .eco-kpi-badge-purple  { background: rgba(116,96,238,0.14); }

/* Dark theme — NFT bid avatars */
[data-theme="dark"] .nft-bid-av-purple { background: linear-gradient(135deg, rgba(116,96,238,0.18), rgba(150,120,255,0.24)); }
[data-theme="dark"] .nft-bid-av-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.22)); }
[data-theme="dark"] .nft-bid-av-teal   { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .nft-bid-av-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.20)); }
[data-theme="dark"] .nft-bid-av-pink   { background: linear-gradient(135deg, rgba(252,24,90,0.14), rgba(255,100,140,0.20)); }
[data-theme="dark"] .nft-bid-av-orange { background: linear-gradient(135deg, rgba(255,120,50,0.14), rgba(255,160,80,0.20)); }

/* Dark theme — NFT collection icons */
[data-theme="dark"] .nft-coll-purple { background: linear-gradient(145deg, rgba(116,96,238,0.18), rgba(150,120,255,0.24)); }
[data-theme="dark"] .nft-coll-blue   { background: linear-gradient(145deg, rgba(93,135,255,0.16), rgba(73,180,255,0.22)); }
[data-theme="dark"] .nft-coll-teal   { background: linear-gradient(145deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .nft-coll-amber  { background: linear-gradient(145deg, rgba(255,174,31,0.14), rgba(255,210,80,0.20)); }
[data-theme="dark"] .nft-coll-pink   { background: linear-gradient(145deg, rgba(252,24,90,0.14), rgba(255,100,140,0.20)); }
[data-theme="dark"] .nft-coll-orange { background: linear-gradient(145deg, rgba(255,120,50,0.14), rgba(255,160,80,0.20)); }

/* Dark theme — NFT rank badges */
[data-theme="dark"] .nft-rank-1 { background: rgba(255,174,31,0.18); color: #FFD066; }
[data-theme="dark"] .nft-rank-2 { background: rgba(255,255,255,0.10); color: #A0AEBF; }
[data-theme="dark"] .nft-rank-3 { background: rgba(250,137,107,0.16); color: #FFAA88; }

/* Dark theme — NFT stat cards */
[data-theme="dark"] .nft-stat-purple { background: linear-gradient(145deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .nft-stat-indigo  { background: linear-gradient(145deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .nft-stat-pink    { background: linear-gradient(145deg, rgba(252,24,90,0.14), rgba(255,100,140,0.20)); }
[data-theme="dark"] .nft-stat-teal    { background: linear-gradient(145deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .nft-stat-amber   { background: linear-gradient(145deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .nft-stat-orange  { background: linear-gradient(145deg, rgba(255,120,50,0.14), rgba(255,160,80,0.18)); }

/* Dark theme — Crypto coin icons */
[data-theme="dark"] .cry-coin-amber  { color: #FFD066; }
[data-theme="dark"] .cry-coin-blue   { color: #93B4FF; }
[data-theme="dark"] .cry-coin-purple { color: #B8A4FF; }
[data-theme="dark"] .cry-coin-green  { color: #5FECD4; }

/* Dark theme — Crypto stat cards */
[data-theme="dark"] .cry-stat-amber  { background: linear-gradient(145deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .cry-stat-blue   { background: linear-gradient(145deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .cry-stat-purple { background: linear-gradient(145deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .cry-stat-green  { background: linear-gradient(145deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }

/* Dark theme — Crypto coin dots */
[data-theme="dark"] .cry-coin-dot-amber  { background: rgba(255,174,31,0.15);  color: #FFD066; }
[data-theme="dark"] .cry-coin-dot-blue   { background: rgba(93,135,255,0.15);  color: #93B4FF; }
[data-theme="dark"] .cry-coin-dot-teal   { background: rgba(19,222,185,0.13);  color: #5FECD4; }
[data-theme="dark"] .cry-coin-dot-orange { background: rgba(255,120,50,0.15);  color: #FFAA80; }
[data-theme="dark"] .cry-coin-dot-purple { background: rgba(116,96,238,0.15);  color: #B8A4FF; }

/* Dark theme — Crypto change badges */
[data-theme="dark"] .cry-chg-up { background: rgba(19,222,185,0.14); color: #5FECD4; }
[data-theme="dark"] .cry-chg-dn { background: rgba(250,137,107,0.14); color: #FFAA90; }

/* Dark theme — Crypto trade buttons */
[data-theme="dark"] .cry-trade-buy  { background: rgba(19,222,185,0.14); color: #5FECD4; }
[data-theme="dark"] .cry-trade-sell { background: rgba(250,137,107,0.14); color: #FFAA90; }

/* Dark theme — Crypto DeFi icons */
[data-theme="dark"] .cry-defi-amber  { background: rgba(255,174,31,0.14); }
[data-theme="dark"] .cry-defi-blue   { background: rgba(93,135,255,0.14); }
[data-theme="dark"] .cry-defi-purple { background: rgba(116,96,238,0.14); }
[data-theme="dark"] .cry-defi-teal   { background: rgba(19,222,185,0.13); }
[data-theme="dark"] .cry-defi-orange { background: rgba(255,120,50,0.14); }
[data-theme="dark"] .cry-defi-pink   { background: rgba(252,24,90,0.13); }

/* Dark theme — Crypto APY badges */
[data-theme="dark"] .cry-apy-high   { background: rgba(19,222,185,0.14); color: #5FECD4; }
[data-theme="dark"] .cry-apy-medium { background: rgba(93,135,255,0.14); color: #93B4FF; }
[data-theme="dark"] .cry-apy-low    { background: rgba(255,174,31,0.14); color: #FFD066; }

/* Dark theme — NFT rarity badges */
[data-theme="dark"] .nft-rarity-legendary { background: rgba(255,174,31,0.15); color: #FFD066; }
[data-theme="dark"] .nft-rarity-epic      { background: rgba(116,96,238,0.15); color: #B8A4FF; }
[data-theme="dark"] .nft-rarity-rare      { background: rgba(93,135,255,0.15); color: #93B4FF; }
[data-theme="dark"] .nft-rarity-common    { background: rgba(19,222,185,0.12); color: #5FECD4; }

/* Dark theme — NFT artist avatars */
[data-theme="dark"] .nft-artist-av-1 { background: linear-gradient(135deg, rgba(116,96,238,0.18), rgba(150,120,255,0.24)); }
[data-theme="dark"] .nft-artist-av-2 { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.22)); }
[data-theme="dark"] .nft-artist-av-3 { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .nft-artist-av-4 { background: linear-gradient(135deg, rgba(252,24,90,0.14), rgba(255,100,140,0.20)); }

/* Dark theme — Ecommerce status rows */
[data-theme="dark"] .eco-status-row-primary { background: rgba(93,135,255,0.10); }
[data-theme="dark"] .eco-status-row-success { background: rgba(19,222,185,0.10); }
[data-theme="dark"] .eco-status-row-warning { background: rgba(255,174,31,0.10); }
[data-theme="dark"] .eco-status-row-danger  { background: rgba(250,137,107,0.10); }

/* Dark theme — Ecommerce stats boxes */
[data-theme="dark"] .eco-stats-blue     { background: rgba(93,135,255,0.12); }
[data-theme="dark"] .eco-stats-rose     { background: rgba(252,24,90,0.10); }
[data-theme="dark"] .eco-stats-lavender { background: rgba(116,96,238,0.12); }
[data-theme="dark"] .eco-stats-mint     { background: rgba(19,222,185,0.10); }

/* Dark theme — Ecommerce action badges */
[data-theme="dark"] .eco-act-primary { background: rgba(93,135,255,0.15) !important; }
[data-theme="dark"] .eco-act-success { background: rgba(19,222,185,0.12) !important; }
[data-theme="dark"] .eco-act-warning { background: rgba(255,174,31,0.12) !important; }

/* Dark theme — Ecommerce avatar backgrounds */
[data-theme="dark"] .eco-ava-blue     { background: rgba(93,135,255,0.14); }
[data-theme="dark"] .eco-ava-mint     { background: rgba(19,222,185,0.12); }
[data-theme="dark"] .eco-ava-amber    { background: rgba(255,174,31,0.13); }
[data-theme="dark"] .eco-ava-lavender { background: rgba(116,96,238,0.14); }
[data-theme="dark"] .eco-ava-rose     { background: rgba(252,24,90,0.12); }
[data-theme="dark"] .eco-ava-sky      { background: rgba(73,190,255,0.12); }

/* Dark theme — Ecommerce product icon backgrounds */
[data-theme="dark"] .eco-prod-icon-blue     { background: linear-gradient(145deg, rgba(93,135,255,0.18), rgba(73,180,255,0.22)); }
[data-theme="dark"] .eco-prod-icon-rose     { background: linear-gradient(145deg, rgba(252,24,90,0.14), rgba(255,100,140,0.18)); }
[data-theme="dark"] .eco-prod-icon-lavender { background: linear-gradient(145deg, rgba(116,96,238,0.16), rgba(150,120,255,0.20)); }
[data-theme="dark"] .eco-prod-icon-mint     { background: linear-gradient(145deg, rgba(19,222,185,0.14), rgba(0,200,160,0.18)); }
[data-theme="dark"] .eco-prod-icon-amber    { background: linear-gradient(145deg, rgba(255,174,31,0.14), rgba(255,140,0,0.18)); }
[data-theme="dark"] .eco-prod-icon-sky      { background: linear-gradient(145deg, rgba(73,190,255,0.14), rgba(50,160,230,0.18)); }

/* Dark theme — Bootstrap contextual table rows & thead */
[data-theme="dark"] .table-primary,
[data-theme="dark"] .table-primary > th,
[data-theme="dark"] .table-primary > td { --bs-table-bg: rgba(93,135,255,0.14); --bs-table-color: #c8d8ff; --bs-table-border-color: rgba(93,135,255,0.2); }
[data-theme="dark"] .table-success,
[data-theme="dark"] .table-success > th,
[data-theme="dark"] .table-success > td { --bs-table-bg: rgba(19,222,185,0.12); --bs-table-color: #a3f5e8; --bs-table-border-color: rgba(19,222,185,0.2); }
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > th,
[data-theme="dark"] .table-warning > td { --bs-table-bg: rgba(255,174,31,0.13); --bs-table-color: #ffe2a0; --bs-table-border-color: rgba(255,174,31,0.22); }
[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-danger > th,
[data-theme="dark"] .table-danger > td { --bs-table-bg: rgba(250,137,107,0.13); --bs-table-color: #ffcbbf; --bs-table-border-color: rgba(250,137,107,0.22); }
[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info > th,
[data-theme="dark"] .table-info > td { --bs-table-bg: rgba(73,190,255,0.12); --bs-table-color: #b3e8ff; --bs-table-border-color: rgba(73,190,255,0.2); }
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > th,
[data-theme="dark"] .table-secondary > td { --bs-table-bg: rgba(255,255,255,0.07); --bs-table-color: rgba(255,255,255,0.65); --bs-table-border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td { --bs-table-bg: rgba(255,255,255,0.05); --bs-table-color: rgba(255,255,255,0.6); --bs-table-border-color: rgba(255,255,255,0.08); }

/* Dark theme — Bootstrap table base */
[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--body-color); --bs-table-border-color: var(--border-color); --bs-table-striped-bg: rgba(255,255,255,0.04); --bs-table-striped-color: var(--body-color); --bs-table-hover-bg: rgba(93,135,255,0.07); --bs-table-hover-color: var(--body-color); }

/* Dark theme — Bootstrap .alert-* */
[data-theme="dark"] .alert-primary   { --bs-alert-bg: rgba(93,135,255,0.14);  --bs-alert-border-color: rgba(93,135,255,0.30);  --bs-alert-color: #a3bbff; }
[data-theme="dark"] .alert-success   { --bs-alert-bg: rgba(19,222,185,0.12);  --bs-alert-border-color: rgba(19,222,185,0.30);  --bs-alert-color: #5FECD4; }
[data-theme="dark"] .alert-warning   { --bs-alert-bg: rgba(255,174,31,0.12);  --bs-alert-border-color: rgba(255,174,31,0.30);  --bs-alert-color: #ffd27a; }
[data-theme="dark"] .alert-danger    { --bs-alert-bg: rgba(250,137,107,0.12); --bs-alert-border-color: rgba(250,137,107,0.30); --bs-alert-color: #f9a58e; }
[data-theme="dark"] .alert-info      { --bs-alert-bg: rgba(83,155,255,0.12);  --bs-alert-border-color: rgba(83,155,255,0.30);  --bs-alert-color: #7DD3FC; }
[data-theme="dark"] .alert-secondary { --bs-alert-bg: rgba(255,255,255,0.06); --bs-alert-border-color: rgba(255,255,255,0.12); --bs-alert-color: #bec8d8; }
[data-theme="dark"] .alert-light     { --bs-alert-bg: rgba(255,255,255,0.05); --bs-alert-border-color: rgba(255,255,255,0.10); --bs-alert-color: #bec8d8; }
[data-theme="dark"] .alert-dark      { --bs-alert-bg: rgba(0,0,0,0.25);       --bs-alert-border-color: rgba(255,255,255,0.10); --bs-alert-color: #bec8d8; }
/* Dark theme — .alert-outline-* */
[data-theme="dark"] .alert-outline-warning { color: #ffd27a; }
[data-theme="dark"] .alert-outline-info    { color: #7DD3FC; }
/* Dark theme — .alert-gradient-* */
[data-theme="dark"] .alert-gradient-primary { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(93,135,255,0.08)); }
[data-theme="dark"] .alert-gradient-success { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(19,222,185,0.07)); }
[data-theme="dark"] .alert-gradient-danger  { background: linear-gradient(135deg, rgba(250,137,107,0.14), rgba(250,137,107,0.07)); }
[data-theme="dark"] .alert-gradient-warning { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,174,31,0.07)); }

/* ============================================================
   SECTION 41: CALENDAR PAGE (cal-)
   ============================================================ */
.cal-stat { border-radius:14px; padding:20px 18px; }
.cal-stat-blue   { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.cal-stat-green  { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.cal-stat-purple { background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.cal-stat-orange { background:linear-gradient(135deg,#FFF7ED,#FED7AA); }
.cal-stat-pink   { background:linear-gradient(135deg,#FFF1F2,#FECDD3); }
.cal-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.cal-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.cal-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.cal-stat-icon-purple { background:rgba(168,85,247,0.15);color:#9333EA; }
.cal-stat-icon-orange { background:rgba(249,115,22,0.15);color:#EA580C; }
.cal-stat-icon-pink   { background:rgba(244,63,94,0.15);color:#E11D48; }
.cal-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.cal-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.cal-stat-chg   { font-size:11px;font-weight:600; }
.cal-chg-up     { color:#16A34A; }
.cal-chg-neutral{ color:#6B7280; }
.cal-chg-warn   { color:#DC2626; }

/* Nav buttons */
.cal-nav-btn { background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:4px 10px;font-size:13px;font-weight:600;color:var(--body-text);cursor:pointer;transition:all .2s; }
.cal-nav-today { padding:4px 14px; }
.cal-nav-btn:hover { background:var(--primary);color:#fff;border-color:var(--primary); }

/* Legend */
.cal-legend-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.cal-legend-dot { width:10px;height:10px;border-radius:50%;display:inline-block; }
.cal-legend-txt { font-size:12px;color:var(--muted);margin-right:4px; }
.cal-dot-meeting { background:#6366F1; }
.cal-dot-task    { background:#10B981; }
.cal-dot-reminder{ background:#F59E0B; }
.cal-dot-holiday { background:#EF4444; }

/* Week strip */
.cal-week-strip { display:grid;grid-template-columns:repeat(7,1fr);gap:8px; }
.cal-week-day { text-align:center;padding:12px 8px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:all .2s;background:var(--input-bg); }
.cal-week-day:hover { border-color:var(--primary);background:rgba(93,135,255,0.06); }
.cal-week-label { font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:6px; }
.cal-week-num   { font-size:20px;font-weight:800;color:var(--dark-text);margin-bottom:8px; }
.cal-week-dots  { display:flex;justify-content:center;gap:3px;min-height:8px; }
.cal-dot-sm     { width:6px;height:6px;border-radius:50%;display:inline-block; }
.cal-week-today { border-color:var(--primary)!important;background:rgba(93,135,255,0.08)!important; }
.cal-week-today .cal-week-num { color:var(--primary); }
.cal-week-weekend .cal-week-label { color:#EF4444; }
.cal-week-weekend .cal-week-num  { color:#EF4444; }

/* View buttons */
.cal-view-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.cal-view-btn:hover,.cal-view-active { background:var(--primary);color:#fff;border-color:var(--primary); }

/* Calendar grid */
.cal-grid-head { display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px; }
.cal-grid-hcell { text-align:center;padding:6px 2px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase; }
.cal-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border-color);border:1px solid var(--border-color);border-radius:8px;overflow:hidden; }
.cal-cell { background:var(--card-bg);padding:6px 6px 4px;min-height:72px;cursor:pointer;transition:background .15s; }
.cal-cell:hover { background:rgba(93,135,255,0.04); }
.cal-cell span { font-size:12px;font-weight:700;color:var(--dark-text);display:inline-block;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:3px; }
.cal-other-month { background:var(--input-bg); }
.cal-other-month span { color:var(--muted); }
.cal-weekend span { color:#EF4444; }
.cal-today { background:rgba(93,135,255,0.06)!important; }
.cal-today span { background:var(--primary);color:#fff; }
.cal-pill { font-size:10px;font-weight:600;border-radius:4px;padding:2px 5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cal-pill-meeting  { background:rgba(99,102,241,0.15);color:#4338CA; }
.cal-pill-task     { background:rgba(16,185,129,0.15);color:#047857; }
.cal-pill-reminder { background:rgba(245,158,11,0.15);color:#B45309; }
.cal-pill-holiday  { background:rgba(239,68,68,0.15);color:#B91C1C; }

/* Schedule list */
.cal-today-badge { font-size:11px;font-weight:700;background:var(--primary);color:#fff;padding:3px 10px;border-radius:20px; }
.cal-schedule-list { padding:8px 0; }
.cal-sch-item { display:grid;grid-template-columns:72px 4px 1fr;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-color);align-items:start;cursor:pointer;transition:background .15s; }
.cal-sch-item:hover { background:rgba(93,135,255,0.03); }
.cal-sch-item:last-child { border-bottom:none; }
.cal-sch-time { font-size:11px;font-weight:700;color:var(--muted);padding-top:2px; }
.cal-sch-bar  { width:4px;border-radius:4px;min-height:50px;align-self:stretch; }
.cal-bar-meeting  { background:#6366F1; }
.cal-bar-task     { background:#10B981; }
.cal-bar-reminder { background:#F59E0B; }
.cal-sch-title { font-size:13px;font-weight:700;color:var(--dark-text);margin-bottom:3px; }
.cal-sch-meta  { font-size:11px;color:var(--muted);margin-bottom:6px; }
.cal-sch-attendees { display:flex;align-items:center;gap:4px; }
.cal-att-av  { width:22px;height:22px;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff; }
.cal-att-blue   { background:#6366F1; }
.cal-att-green  { background:#10B981; }
.cal-att-purple { background:#8B5CF6; }
.cal-att-orange { background:#F97316; }
.cal-att-pink   { background:#EC4899; }
.cal-att-more   { font-size:10px;font-weight:700;color:var(--muted); }

/* ============================================================
   SECTION 42: CHAT PAGE (cht-)
   ============================================================ */
.cht-stat { border-radius:14px;padding:20px 18px; }
.cht-stat-green  { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.cht-stat-blue   { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.cht-stat-purple { background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.cht-stat-orange { background:linear-gradient(135deg,#FFF7ED,#FED7AA); }
.cht-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.cht-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.cht-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.cht-stat-icon-purple { background:rgba(168,85,247,0.15);color:#9333EA; }
.cht-stat-icon-orange { background:rgba(249,115,22,0.15);color:#EA580C; }
.cht-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.cht-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.cht-stat-chg   { font-size:11px;font-weight:600; }
.cht-chg-up     { color:#16A34A; }
.cht-chg-neutral{ color:#6B7280; }
.cht-chg-warn   { color:#DC2626; }

/* Panel head */
.cht-panel-head { padding:16px 16px 0; }
.cht-new-btn { background:transparent;border:none;cursor:pointer;font-size:18px;color:var(--primary);padding:4px; }
.cht-search-wrap { position:relative;margin-bottom:12px; }
.cht-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px; }
.cht-search-input { width:100%;border:1px solid var(--border-color);border-radius:8px;padding:7px 12px 7px 32px;font-size:13px;background:var(--input-bg);color:var(--body-text);outline:none; }
.cht-search-input:focus { border-color:var(--primary); }
.cht-tabs { display:flex;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--border-color); }
.cht-tab { background:transparent;border:none;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.cht-tab:hover,.cht-tab-active { background:rgba(93,135,255,0.1);color:var(--primary); }
.cht-tab-badge { background:var(--primary);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;margin-left:4px; }

/* Contact list */
.cht-contact-list { overflow-y:auto;max-height:420px;scrollbar-width:none; }
.cht-contact-list::-webkit-scrollbar { width:0; }
.cht-contact-list:hover { scrollbar-width:thin;scrollbar-color:rgba(93,135,255,0.3) transparent; }
.cht-contact-list:hover::-webkit-scrollbar { width:5px; }
.cht-contact-list:hover::-webkit-scrollbar-track { background:transparent; }
.cht-contact-list:hover::-webkit-scrollbar-thumb { background:rgba(93,135,255,0.3);border-radius:3px; }
.cht-contact-item { display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;border-bottom:1px solid var(--border-color);transition:background .15s;position:relative; }
.cht-contact-item:hover { background:rgba(93,135,255,0.04); }
.cht-contact-active { background:rgba(93,135,255,0.07)!important; }
.cht-contact-av { width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;position:relative; }
.cht-av-blue   { background:linear-gradient(135deg,#6366F1,#818CF8); }
.cht-av-green  { background:linear-gradient(135deg,#10B981,#34D399); }
.cht-av-purple { background:linear-gradient(135deg,#8B5CF6,#A78BFA); }
.cht-av-orange { background:linear-gradient(135deg,#F97316,#FB923C); }
.cht-av-pink   { background:linear-gradient(135deg,#EC4899,#F472B6); }
.cht-av-teal   { background:linear-gradient(135deg,#14B8A6,#2DD4BF); }
.cht-av-online::after { content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:#22C55E;border:2px solid var(--card-bg); }
.cht-av-lg { width:44px;height:44px;font-size:15px; }
.cht-contact-info { flex:1;min-width:0; }
.cht-contact-name { font-size:13px;font-weight:700;color:var(--dark-text); }
.cht-contact-time { font-size:11px;color:var(--muted);flex-shrink:0; }
.cht-contact-preview { font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cht-unread-badge { background:var(--primary);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }

/* Chat area header */
.cht-area-head { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-color); }
.cht-area-name   { font-size:14px;font-weight:700;color:var(--dark-text); }
.cht-area-status { font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:2px; }
.cht-online-dot  { width:7px;height:7px;border-radius:50%;background:#22C55E;display:inline-block; }
.cht-area-actions { display:flex;gap:4px; }
.cht-action-btn { background:transparent;border:1px solid var(--border-color);border-radius:8px;padding:6px 10px;font-size:15px;color:var(--muted);cursor:pointer;transition:all .2s; }
.cht-action-btn:hover { background:var(--primary);color:#fff;border-color:var(--primary); }

/* Messages area */
.cht-messages { flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:0;max-height:380px;scrollbar-width:none; }
.cht-messages::-webkit-scrollbar { width:0; }
.cht-messages:hover { scrollbar-width:thin;scrollbar-color:rgba(93,135,255,0.3) transparent; }
.cht-messages:hover::-webkit-scrollbar { width:5px; }
.cht-messages:hover::-webkit-scrollbar-track { background:transparent; }
.cht-messages:hover::-webkit-scrollbar-thumb { background:rgba(93,135,255,0.3);border-radius:3px; }
.cht-date-divider { text-align:center;margin:4px 0; }
.cht-date-divider span { font-size:11px;font-weight:600;color:var(--muted);background:var(--input-bg);padding:3px 12px;border-radius:20px; }
.cht-msg-row { display:flex;gap:8px;align-items:flex-end;max-width:80%; }
.cht-msg-incoming { align-self:flex-start; }
.cht-msg-outgoing { align-self:flex-end;flex-direction:row-reverse; }
.cht-msg-av { width:30px;height:30px;border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0; }
.cht-msg-group { display:flex;flex-direction:column;gap:3px; }
.cht-bubble { padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.5;max-width:360px; }
.cht-bubble-in  { background:var(--input-bg);color:var(--body-text);border-bottom-left-radius:4px; }
.cht-bubble-out { background:var(--primary);color:#fff;border-bottom-right-radius:4px; }
.cht-msg-time   { font-size:10px;color:var(--muted);padding:0 4px; }
.cht-time-out   { text-align:right; }
.cht-read-icon  { color:var(--primary);font-size:12px; }

/* Voice bubble (UNIQUE) */
.cht-voice-bubble { display:flex;align-items:center;gap:10px;padding:10px 14px;min-width:200px; }
.cht-voice-play { width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cht-voice-waveform { display:flex;align-items:center;gap:2px;flex:1;height:28px; }
.cht-vbar { width:3px;border-radius:3px;background:rgba(99,102,241,0.35);flex-shrink:0; }
.cht-vb-h2 { height:8px; }
.cht-vb-h3 { height:14px; }
.cht-vb-h4 { height:20px; }
.cht-vb-h5 { height:26px; }
.cht-voice-dur { font-size:11px;font-weight:700;color:var(--muted); }

/* Typing indicator (UNIQUE) */
.cht-typing-bubble { display:flex;align-items:center;gap:4px;background:var(--input-bg);border-radius:14px;border-bottom-left-radius:4px;padding:10px 16px; }
.cht-typing-dot { width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typingBounce 1.2s ease-in-out infinite; }
.cht-typing-dot:nth-child(2) { animation-delay:.2s; }
.cht-typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)} }

/* Emoji reactions (UNIQUE) */
.cht-reactions-row { display:flex;gap:4px;margin-top:2px; }
.cht-react-pill { background:rgba(255,255,255,0.2);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700;color:#fff;cursor:pointer; }

/* Input area */
.cht-input-area { padding:12px 16px;border-top:1px solid var(--border-color); }
.cht-input-toolbar { display:flex;gap:4px;margin-bottom:8px; }
.cht-tool-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:5px 9px;font-size:15px;color:var(--muted);cursor:pointer;transition:all .2s; }
.cht-tool-btn:hover { background:var(--primary);color:#fff;border-color:var(--primary); }
.cht-input-wrap { display:flex;align-items:center;gap:8px;background:var(--input-bg);border:1px solid var(--border-color);border-radius:10px;padding:6px 10px; }
.cht-input-field { flex:1;border:none;background:transparent;outline:none;font-size:13px;color:var(--body-text); }
.cht-emoji-btn { background:transparent;border:none;cursor:pointer;font-size:18px;color:var(--muted); }
.cht-send-btn { width:34px;height:34px;border-radius:8px;background:var(--primary);color:#fff;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center; }

/* cht- panel/area containers */
.cht-panel,.cht-area { border-radius:.75rem;border:1px solid var(--border-color);background:var(--card-bg);display:flex;flex-direction:column;height:calc(100vh - 280px);min-height:520px; }
.cht-panel-hd { padding:.9rem 1rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.cht-search-wrap { position:relative;padding:.75rem 1rem;flex-shrink:0; }
.cht-search { width:100%;padding:.4rem .75rem .4rem 2.1rem;border:1px solid var(--border-color);border-radius:2rem;background:var(--input-bg);font-size:.82rem;color:var(--body-text);outline:none; }
.cht-search:focus { border-color:var(--primary); }
.cht-search-ico { position:absolute;left:1.6rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85rem;pointer-events:none; }
/* cht- contact list override for full-height flex */
.cht-panel .cht-contact-list { overflow-y:auto;flex:1;max-height:none; }
/* cht- avatars - person initials variants */
.cht-avatar { width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0;position:relative;color:#fff; }
.cht-av-sw { background:linear-gradient(135deg,#5D87FF,#3b5bdb); }
.cht-av-jm { background:linear-gradient(135deg,#16a34a,#15803d); }
.cht-av-ec { background:linear-gradient(135deg,#9333ea,#7e22ce); }
.cht-av-dt { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.cht-av-mt { background:linear-gradient(135deg,#d97706,#b45309); }
.cht-av-ds { background:linear-gradient(135deg,#0891b2,#0e7490); }
/* cht- status dots */
.cht-status-dot { width:10px;height:10px;border-radius:50%;position:absolute;bottom:0;right:0;border:2px solid var(--card-bg); }
.cht-dot-online  { background:#16a34a; }
.cht-dot-away    { background:#d97706; }
.cht-dot-offline { background:#9ca3af; }
/* cht- contact item active via .active class */
.cht-contact-item.active { background:rgba(93,135,255,.08); }
.cht-contact-meta { text-align:right;flex-shrink:0; }
/* cht- chat area header */
.cht-area-hd { padding:.9rem 1.25rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:.75rem;flex-shrink:0; }
.cht-area-hd-info { flex:1;min-width:0; }
.cht-area-hd-name { font-size:.95rem;font-weight:700;line-height:1.2;color:var(--dark-text); }
.cht-area-hd-status { font-size:.77rem;color:#16a34a;font-weight:500; }
.cht-area-hd-actions { display:flex;gap:.4rem; }
.cht-icon-btn { width:34px;height:34px;border:1px solid var(--border-color);border-radius:.5rem;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.95rem;cursor:pointer;transition:background .15s; }
.cht-icon-btn:hover { background:var(--hover-bg);color:var(--body-text); }
/* cht- messages area override for full-height */
.cht-area .cht-messages { flex:1;overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;max-height:none; }
/* cht- message rows */
.cht-msg-row { display:flex;gap:.6rem;align-items:flex-end;max-width:100%; }
.cht-msg-row.mine { flex-direction:row-reverse; }
.cht-msg-av { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0;color:#fff;background:linear-gradient(135deg,#5D87FF,#3b5bdb); }
/* cht- bubble variants */
.cht-bubble-them { background:var(--input-bg);color:var(--body-text);border-bottom-left-radius:.2rem; }
.cht-bubble-me   { background:var(--primary);color:#fff;border-bottom-right-radius:.2rem; }
.cht-msg-time    { font-size:.7rem;color:var(--muted);white-space:nowrap;padding-bottom:2px; }
/* cht- voice message */
.cht-voice { display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;background:var(--input-bg);border-radius:.75rem; }
.cht-voice-play { width:30px;height:30px;border-radius:50%;background:var(--primary);border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;flex-shrink:0;cursor:pointer; }
.cht-waveform { display:flex;align-items:center;gap:2px;height:28px; }
.cht-waveform-bar { width:3px;border-radius:2px;background:var(--primary);opacity:.6; }
.cht-vb-h-8  { height:8px; }
.cht-vb-h-10 { height:10px; }
.cht-vb-h-12 { height:12px; }
.cht-vb-h-14 { height:14px; }
.cht-vb-h-16 { height:16px; }
.cht-vb-h-18 { height:18px; }
.cht-vb-h-20 { height:20px; }
.cht-vb-h-24 { height:24px; }
.cht-voice-dur { font-size:.75rem;color:var(--muted);white-space:nowrap; }
/* cht- reactions */
.cht-reactions { display:flex;gap:.3rem;margin-top:.3rem; }
.cht-react-pill { padding:.15rem .5rem;border-radius:2rem;background:var(--input-bg);border:1px solid var(--border-color);font-size:.78rem;cursor:pointer;display:flex;align-items:center;gap:.2rem;transition:background .15s; }
.cht-react-pill:hover { background:var(--hover-bg); }
/* cht- typing indicator */
.cht-typing { display:flex;align-items:center;gap:.5rem;padding:.4rem 0; }
.cht-typing-av { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#5D87FF,#3b5bdb);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff; }
.cht-typing-dots { display:flex;gap:3px;align-items:center; }
/* cht- input bar */
.cht-input-bar { padding:.75rem 1.25rem;border-top:1px solid var(--border-color);flex-shrink:0;display:flex;align-items:center;gap:.5rem; }
.cht-input-actions { display:flex;gap:.25rem; }
.cht-input-field { flex:1;border:1px solid var(--border-color);border-radius:2rem;padding:.45rem 1rem;background:var(--input-bg);font-size:.85rem;color:var(--body-text);outline:none; }
.cht-input-field:focus { border-color:var(--primary); }
.cht-send-btn { width:38px;height:38px;border-radius:50%;background:var(--primary);border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;cursor:pointer;flex-shrink:0; }

/* ============================================================
   SECTION 43: EMAIL PAGE (eml-)
   ============================================================ */
.eml-stat { border-radius:14px;padding:20px 18px; }
.eml-stat-blue   { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.eml-stat-red    { background:linear-gradient(135deg,#FFF1F2,#FECDD3); }
.eml-stat-green  { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.eml-stat-gray   { background:linear-gradient(135deg,#F9FAFB,#E5E7EB); }
.eml-stat-yellow { background:linear-gradient(135deg,#FEFCE8,#FEF08A); }
.eml-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.eml-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.eml-stat-icon-red    { background:rgba(239,68,68,0.15);color:#DC2626; }
.eml-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.eml-stat-icon-gray   { background:rgba(107,114,128,0.12);color:#374151; }
.eml-stat-icon-yellow { background:rgba(234,179,8,0.15);color:#B45309; }
.eml-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.eml-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.eml-stat-chg   { font-size:11px;font-weight:600; }
.eml-chg-up     { color:#16A34A; }
.eml-chg-neutral{ color:#6B7280; }
.eml-chg-warn   { color:#DC2626; }

/* Folder list */
.eml-folder-list { display:flex;flex-direction:column;gap:2px; }
.eml-folder-item { display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:all .2s;color:var(--body-text); }
.eml-folder-item:hover { background:rgba(93,135,255,0.07);color:var(--primary); }
.eml-folder-active { background:rgba(93,135,255,0.1);color:var(--primary)!important;font-weight:600; }
.eml-folder-icon { font-size:15px;color:var(--muted);width:18px;text-align:center; }
.eml-folder-name { flex:1;font-size:13px;font-weight:500; }
.eml-folder-count { font-size:11px;font-weight:700; }
.eml-count-badge { background:var(--primary);color:#fff;border-radius:10px;padding:1px 7px; }
.eml-folder-divider { height:1px;background:var(--border-color);margin:10px 0; }
.eml-label-title { font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px; }
.eml-label-item { display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:12px;cursor:pointer;border-radius:7px;color:var(--body-text); }
.eml-label-item:hover { background:rgba(93,135,255,0.05); }
.eml-label-dot { width:8px;height:8px;border-radius:50%; }
.eml-label-work     { background:#6366F1; }
.eml-label-personal { background:#10B981; }
.eml-label-promo    { background:#F59E0B; }

/* Email list */
.eml-list-head { padding:14px 14px 0; }
.eml-list-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:4px 8px;font-size:14px;color:var(--muted);cursor:pointer; }
.eml-count-sm { font-size:12px;font-weight:600;color:var(--muted);margin-left:4px; }

/* Action toolbar (UNIQUE) */
.eml-toolbar { display:flex;align-items:center;gap:.35rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border-color);flex-shrink:0; }
.eml-check-all { margin-right:4px; }
.eml-tool-btn { background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:4px 8px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .2s; }
.eml-tool-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary);border-color:var(--primary); }

/* Email items */
.eml-email-list { overflow-y:auto;max-height:480px;scrollbar-width:none; }
.eml-email-list::-webkit-scrollbar { width:0; }
.eml-email-list:hover { scrollbar-width:thin;scrollbar-color:rgba(93,135,255,0.3) transparent; }
.eml-email-list:hover::-webkit-scrollbar { width:5px; }
.eml-email-list:hover::-webkit-scrollbar-track { background:transparent; }
.eml-email-list:hover::-webkit-scrollbar-thumb { background:rgba(93,135,255,0.3);border-radius:3px; }
.eml-email-item { display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s; }
.eml-email-item:hover { background:rgba(93,135,255,0.04); }
.eml-email-active { background:rgba(93,135,255,0.08)!important; }
.eml-email-unread .eml-email-sender { font-weight:700; }
.eml-email-unread .eml-email-subject { font-weight:700; }
.eml-email-av { width:34px;height:34px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0; }
.eml-av-blue   { background:#6366F1; }
.eml-av-green  { background:#10B981; }
.eml-av-purple { background:#8B5CF6; }
.eml-av-orange { background:#F97316; }
.eml-av-pink   { background:#EC4899; }
.eml-av-teal   { background:#14B8A6; }
.eml-av-red    { background:#EF4444; }
.eml-av-sm { width:40px;height:40px;font-size:14px; }
.eml-email-body { flex:1;min-width:0; }
.eml-email-sender  { font-size:13px;color:var(--dark-text); }
.eml-email-time    { font-size:11px;color:var(--muted);white-space:nowrap; }
.eml-email-subject { font-size:12px;color:var(--dark-text);margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.eml-email-excerpt { font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px; }
.eml-item-check { margin-right:2px; }

/* Priority flag (UNIQUE) */
.eml-priority-flag { font-size:11px;font-weight:700; }
.eml-flag-high   { color:#EF4444; }
.eml-flag-medium { color:#F59E0B; }
.eml-flag-low    { color:#6B7280; }

/* Category tags (UNIQUE) */
.eml-cat-tag { display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin:2px 0;letter-spacing:.3px; }
.eml-cat-work       { background:rgba(99,102,241,0.12);color:#4338CA; }
.eml-cat-personal   { background:rgba(16,185,129,0.12);color:#047857; }
.eml-cat-newsletter { background:rgba(139,92,246,0.12);color:#6D28D9; }
.eml-cat-promo      { background:rgba(245,158,11,0.12);color:#B45309; }

/* Preview toolbar (UNIQUE) */
.eml-preview-toolbar { display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border-color); }
.eml-prev-btn { display:flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:5px 11px;font-size:13px;color:var(--body-text);cursor:pointer;transition:all .2s; }
.eml-prev-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary);border-color:var(--primary); }
.eml-prev-btn span { font-size:12px;font-weight:600; }
.eml-toolbar-sep { width:1px;height:28px;background:var(--border-color);margin:0 4px; }
.eml-preview-body { padding:16px; }
.eml-preview-subject { font-size:17px;font-weight:800;color:var(--dark-text);margin-bottom:8px; }
.eml-preview-from { display:flex;align-items:center;gap:10px;padding:12px;background:var(--input-bg);border-radius:10px;margin-bottom:16px; }
.eml-from-name  { font-size:13px;font-weight:700;color:var(--dark-text); }
.eml-from-email { font-size:12px;color:var(--muted);font-weight:400; }
.eml-from-to    { font-size:12px;color:var(--muted);margin-top:2px; }
.eml-preview-content { font-size:13px;color:var(--body-text);line-height:1.7; }
.eml-preview-content p { margin-bottom:10px; }
.eml-preview-date { font-size:12px;color:var(--muted);white-space:nowrap; }
.eml-preview-attach { margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color); }
.eml-attach-label { font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px; }
.eml-attach-item { display:flex;align-items:center;gap:8px;border:1px solid var(--border-color);border-radius:9px;padding:8px 12px;cursor:pointer; }
.eml-attach-icon { font-size:22px; }
.eml-attach-pdf  { color:#EF4444; }
.eml-attach-img  { color:#6366F1; }
.eml-attach-info { flex:1;min-width:0; }
.eml-attach-name { font-size:12px;font-weight:600;color:var(--dark-text); }
.eml-attach-size { font-size:11px;color:var(--muted); }
.eml-attach-dl   { background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:4px 8px;color:var(--muted);cursor:pointer;font-size:13px; }
.eml-attach-dl:hover { background:var(--primary);color:#fff;border-color:var(--primary); }

/* Email orange stat variant */
.eml-stat-orange     { background:linear-gradient(135deg,#FFF7ED,#FED7AA); }
.eml-stat-icon-orange { background:rgba(249,115,22,0.15);color:#EA580C; }
.eml-stat-purple     { background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.eml-stat-icon-purple { background:rgba(139,92,246,0.15);color:#7C3AED; }

/* Email three-pane layout */
.eml-layout { display:flex;height:calc(100vh - 280px);min-height:560px;border:1px solid var(--border-color);border-radius:.75rem;overflow:hidden; }
.eml-sidebar { width:188px;min-width:188px;border-right:1px solid var(--border-color);background:var(--card-bg);display:flex;flex-direction:column;padding:1rem .75rem;overflow-y:auto;scrollbar-width:none; }
.eml-sidebar::-webkit-scrollbar { width:0; }
.eml-sidebar:hover { scrollbar-width:thin;scrollbar-color:rgba(93,135,255,0.3) transparent; }
.eml-sidebar:hover::-webkit-scrollbar { width:5px; }
.eml-sidebar:hover::-webkit-scrollbar-track { background:transparent; }
.eml-sidebar:hover::-webkit-scrollbar-thumb { background:rgba(93,135,255,0.3);border-radius:3px; }
.eml-compose-btn { display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;padding:.55rem 1rem;background:var(--primary);color:#fff;border:none;border-radius:.5rem;font-size:.85rem;font-weight:600;cursor:pointer;margin-bottom:1rem;transition:opacity .15s; }
.eml-compose-btn:hover { opacity:.9; }
.eml-section-lbl { font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;padding:0 .25rem;margin:.75rem 0 .35rem; }
.eml-folder-item.active { background:rgba(93,135,255,.1);color:var(--primary)!important;font-weight:600; }
.eml-lbl-work      { background:#6366F1; }
.eml-lbl-personal  { background:#10B981; }
.eml-lbl-important { background:#F59E0B; }
.eml-lbl-finance   { background:#6366F1; }
.eml-list { flex:0 0 310px;border-right:1px solid var(--border-color);background:var(--card-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none; }
.eml-list::-webkit-scrollbar { width:0; }
.eml-list:hover { scrollbar-width:thin;scrollbar-color:rgba(93,135,255,0.3) transparent; }
.eml-list:hover::-webkit-scrollbar { width:5px; }
.eml-list:hover::-webkit-scrollbar-track { background:transparent; }
.eml-list:hover::-webkit-scrollbar-thumb { background:rgba(93,135,255,0.3);border-radius:3px; }
.eml-list-hd { padding:.75rem 1rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font-size:.84rem;font-weight:600;color:var(--heading-color); }
.eml-av { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;color:#fff; }
.eml-item { display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border-color); }
.eml-item:hover { background:var(--hover-bg); }
.eml-item.active { background:rgba(93,135,255,.08); }
.eml-item.unread { border-left:3px solid var(--primary); }
.eml-item-body { flex:1;min-width:0; }
.eml-item-hd { display:flex;justify-content:space-between;font-size:.84rem;margin-bottom:.1rem; }
.eml-item-from { font-weight:600;color:var(--heading-color); }
.eml-item.unread .eml-item-from { font-weight:700; }
.eml-item-time { font-size:.71rem;color:var(--muted);white-space:nowrap; }
.eml-item-subject { font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--body-text); }
.eml-item.unread .eml-item-subject { font-weight:600; }
.eml-item-preview { font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.eml-flag { width:4px;min-height:40px;border-radius:2px;flex-shrink:0;align-self:stretch;background:transparent; }
.eml-reader { flex:1;display:flex;flex-direction:column;overflow-y:auto;background:var(--card-bg); }
.eml-tbbtn { padding:.3rem .65rem;border:1px solid var(--border-color);border-radius:.4rem;background:transparent;font-size:.81rem;cursor:pointer;color:var(--body-text);display:flex;align-items:center;gap:.25rem;transition:background .15s; }
.eml-tbbtn:hover { background:var(--hover-bg);color:var(--primary);border-color:var(--primary); }
.eml-tb-divider { height:16px;width:1px;background:var(--border-color);margin-inline:.1rem; }
.eml-body { padding:1.25rem 1.5rem;flex:1;overflow-y:auto;scrollbar-width:none; }
.eml-body::-webkit-scrollbar { width:0; }
.eml-body:hover { scrollbar-width:thin;scrollbar-color:rgba(93,135,255,0.3) transparent; }
.eml-body:hover::-webkit-scrollbar { width:5px; }
.eml-body:hover::-webkit-scrollbar-track { background:transparent; }
.eml-body:hover::-webkit-scrollbar-thumb { background:rgba(93,135,255,0.3);border-radius:3px; }
.eml-email-hd { margin-bottom:1rem; }
.eml-subject { font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--heading-color); }
.eml-meta-row { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.5rem; }
.eml-tag { padding:.1rem .5rem;font-size:.74rem;border-radius:4px;font-weight:600; }
.eml-tag-work    { background:rgba(99,102,241,.15);color:#4338CA; }
.eml-tag-finance { background:rgba(34,197,94,.15);color:#16a34a; }
.eml-priority { padding:.1rem .5rem;font-size:.74rem;border-radius:4px;background:rgba(239,68,68,.15);color:#dc2626;font-weight:600; }
.eml-sender-row { display:flex;align-items:center;gap:.75rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-color); }
.eml-sender-av { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#4f46e5);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0; }
.eml-sender-name  { font-size:.85rem;font-weight:600;color:var(--heading-color); }
.eml-sender-email { font-size:.76rem;color:var(--muted); }
.eml-body-text { font-size:.86rem;line-height:1.7;margin:1rem 0;color:var(--body-text); }
.eml-attachments { display:flex;gap:.5rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--border-color);margin-top:1rem; }
.eml-reply-box { padding:1rem 1.5rem;border-top:1px solid var(--border-color);flex-shrink:0; }
.eml-reply-textarea { width:100%;border:1px solid var(--border-color);border-radius:.5rem;padding:.6rem .75rem;font-size:.84rem;background:var(--input-bg);color:var(--body-text);resize:none;margin-bottom:.5rem;outline:none; }
.eml-reply-textarea:focus { border-color:var(--primary); }

/* ============================================================
   SECTION 44: CONTACT TABLE PAGE (ctb-)
   ============================================================ */
.ctb-stat { border-radius:14px;padding:20px 18px; }
.ctb-stat-blue   { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.ctb-stat-green  { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.ctb-stat-purple { background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.ctb-stat-orange { background:linear-gradient(135deg,#FFF7ED,#FED7AA); }
.ctb-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.ctb-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.ctb-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.ctb-stat-icon-purple { background:rgba(168,85,247,0.15);color:#9333EA; }
.ctb-stat-icon-orange { background:rgba(249,115,22,0.15);color:#EA580C; }
.ctb-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.ctb-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.ctb-stat-chg   { font-size:11px;font-weight:600; }
.ctb-chg-up     { color:#16A34A; }
.ctb-chg-neutral{ color:#6B7280; }

/* Bulk action bar (UNIQUE) */
.ctb-bulk-bar { display:flex;align-items:center;gap:8px; }
.ctb-bulk-check { width:16px;height:16px;cursor:pointer; }
.ctb-bulk-actions { display:flex;gap:4px; }
.ctb-bulk-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--body-text);cursor:pointer;transition:all .2s; }
.ctb-bulk-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary);border-color:var(--primary); }
.ctb-bulk-danger { color:#DC2626; }
.ctb-bulk-danger:hover { background:rgba(220,38,38,0.08);color:#DC2626;border-color:#DC2626; }

/* Department filter pills (UNIQUE) */
.ctb-dept-pills { display:flex;gap:6px;flex-wrap:wrap; }
.ctb-dept-pill { background:var(--input-bg);border:1px solid var(--border-color);border-radius:20px;padding:4px 14px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.ctb-dept-pill:hover { border-color:var(--primary);color:var(--primary); }
.ctb-dept-pill span { font-size:10px;opacity:.7;margin-left:4px; }
.ctb-dept-all.ctb-dept-active,.ctb-dept-active { background:var(--primary);color:#fff;border-color:var(--primary); }
.ctb-dept-eng:hover,.ctb-dept-eng.ctb-dept-active { background:#EFF6FF;border-color:#6366F1;color:#4338CA; }
.ctb-dept-des:hover,.ctb-dept-des.ctb-dept-active { background:#FAF5FF;border-color:#8B5CF6;color:#6D28D9; }
.ctb-dept-mkt:hover,.ctb-dept-mkt.ctb-dept-active { background:#FFF7ED;border-color:#F97316;color:#C2410C; }
.ctb-dept-hr:hover,.ctb-dept-hr.ctb-dept-active   { background:#F0FDF4;border-color:#10B981;color:#047857; }
.ctb-dept-fin:hover,.ctb-dept-fin.ctb-dept-active { background:#FEFCE8;border-color:#EAB308;color:#854D0E; }
.ctb-dept-sales:hover,.ctb-dept-sales.ctb-dept-active { background:#FFF1F2;border-color:#EC4899;color:#9D174D; }
.ctb-dept-ops:hover,.ctb-dept-ops.ctb-dept-active { background:#F0FDFA;border-color:#14B8A6;color:#0F766E; }

/* Search */
.ctb-search-wrap { position:relative; }
.ctb-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px; }
.ctb-search-input { border:1px solid var(--border-color);border-radius:8px;padding:6px 12px 6px 30px;font-size:13px;background:var(--input-bg);color:var(--body-text);outline:none;width:220px; }

/* Table */
.ctb-table { font-size:13px; }
.ctb-table thead th { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border-color);padding:11px 14px;background:var(--input-bg); }
.ctb-table tbody td { padding:12px 14px;vertical-align:middle;border-bottom:1px solid var(--border-color);color:var(--body-text); }
.ctb-table tbody tr:hover td { background:rgba(93,135,255,0.03); }
.ctb-avatar { width:34px;height:34px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff; }
.ctb-av-blue   { background:#6366F1; }
.ctb-av-green  { background:#10B981; }
.ctb-av-purple { background:#8B5CF6; }
.ctb-av-orange { background:#F97316; }
.ctb-av-pink   { background:#EC4899; }
.ctb-contact-name { font-size:13px;font-weight:700;color:var(--dark-text); }
.ctb-contact-role { font-size:11px;color:var(--muted); }
.ctb-td-email { font-size:12px;color:var(--muted); }
.ctb-td-phone { font-size:12px;color:var(--muted); }
.ctb-dept-badge { display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px; }
.ctb-dept-badge-eng  { background:rgba(99,102,241,0.12);color:#4338CA; }
.ctb-dept-badge-des  { background:rgba(139,92,246,0.12);color:#6D28D9; }
.ctb-dept-badge-mkt  { background:rgba(249,115,22,0.12);color:#C2410C; }
.ctb-dept-badge-hr   { background:rgba(16,185,129,0.12);color:#047857; }
.ctb-dept-badge-fin  { background:rgba(234,179,8,0.12);color:#854D0E; }
.ctb-dept-badge-sales{ background:rgba(236,72,153,0.12);color:#9D174D; }
.ctb-dept-badge-ops  { background:rgba(20,184,166,0.12);color:#0F766E; }
.ctb-status-badge { display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px; }
.ctb-status-active   { background:rgba(16,185,129,0.12);color:#047857; }
.ctb-status-inactive { background:rgba(107,114,128,0.12);color:#374151; }
.ctb-status-pending  { background:rgba(245,158,11,0.12);color:#B45309; }
.ctb-act-row { display:flex;gap:4px; }
.ctb-act-btn { background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:4px 8px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .2s; }
.ctb-act-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary);border-color:var(--primary); }
.ctb-act-danger { color:#DC2626; }
.ctb-act-danger:hover { background:rgba(220,38,38,0.08);color:#DC2626;border-color:#DC2626; }
.ctb-table-footer { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border-color); }
.ctb-footer-info { font-size:12px;color:var(--muted); }
.ctb-pagination { display:flex;gap:4px;align-items:center; }
.ctb-page-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--body-text);cursor:pointer;transition:all .2s; }
.ctb-page-btn:hover,.ctb-page-active { background:var(--primary);color:#fff;border-color:var(--primary); }
.ctb-page-ellipsis { color:var(--muted);font-size:14px;padding:0 4px; }

/* ============================================================
   SECTION 45: CONTACT LIST PAGE (ctl-)
   ============================================================ */
.ctl-stat { border-radius:14px;padding:20px 18px; }
.ctl-stat-blue  { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.ctl-stat-green { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.ctl-stat-purple{ background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.ctl-stat-pink  { background:linear-gradient(135deg,#FFF1F2,#FECDD3); }
.ctl-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.ctl-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.ctl-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.ctl-stat-icon-purple { background:rgba(168,85,247,0.15);color:#9333EA; }
.ctl-stat-icon-pink   { background:rgba(244,63,94,0.15);color:#E11D48; }
.ctl-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.ctl-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.ctl-stat-chg   { font-size:11px;font-weight:600; }
.ctl-chg-up     { color:#16A34A; }
.ctl-chg-neutral{ color:#6B7280; }

/* Filter chips (UNIQUE) */
.ctl-filter-row { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.ctl-filter-label { font-size:12px;font-weight:700;color:var(--muted); }
.ctl-filter-chip { background:var(--input-bg);border:1px solid var(--border-color);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.ctl-filter-chip:hover { border-color:var(--primary);color:var(--primary); }
.ctl-filter-active { background:var(--primary);color:#fff!important;border-color:var(--primary)!important; }
.ctl-chip-eng:hover   { background:#EFF6FF;border-color:#6366F1;color:#4338CA; }
.ctl-chip-des:hover   { background:#FAF5FF;border-color:#8B5CF6;color:#6D28D9; }
.ctl-chip-mkt:hover   { background:#FFF7ED;border-color:#F97316;color:#C2410C; }
.ctl-chip-sales:hover { background:#FFF1F2;border-color:#EC4899;color:#9D174D; }

/* Sort select */
.ctl-search-wrap { position:relative; }
.ctl-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px; }
.ctl-search-input { border:1px solid var(--border-color);border-radius:8px;padding:6px 12px 6px 30px;font-size:13px;background:var(--input-bg);color:var(--body-text);outline:none;width:200px; }
.ctl-sort-select { border:1px solid var(--border-color);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;background:var(--input-bg);color:var(--body-text);cursor:pointer;outline:none; }

/* Contact grid cards */
.ctl-card { border-radius:14px;overflow:hidden; }
.ctl-card-top { height:58px;position:relative; }
.ctl-top-blue   { background:linear-gradient(135deg,#6366F1,#818CF8); }
.ctl-top-green  { background:linear-gradient(135deg,#10B981,#34D399); }
.ctl-top-purple { background:linear-gradient(135deg,#8B5CF6,#A78BFA); }
.ctl-top-orange { background:linear-gradient(135deg,#F97316,#FB923C); }
.ctl-top-pink   { background:linear-gradient(135deg,#EC4899,#F472B6); }
.ctl-top-teal   { background:linear-gradient(135deg,#14B8A6,#2DD4BF); }
.ctl-star-btn { position:absolute;top:8px;right:10px;background:rgba(255,255,255,0.3);border:none;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:12px;transition:all .2s; }
.ctl-star-btn:hover { background:rgba(255,255,255,0.6); }
.ctl-card-body { padding:0 14px 14px;text-align:center; }
.ctl-card-av { width:52px;height:52px;border-radius:50%;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;margin:-26px auto 8px;border:3px solid var(--card-bg);position:relative;z-index:1; }
.ctl-av-blue   { background:#6366F1; }
.ctl-av-green  { background:#10B981; }
.ctl-av-purple { background:#8B5CF6; }
.ctl-av-orange { background:#F97316; }
.ctl-av-pink   { background:#EC4899; }
.ctl-av-teal   { background:#14B8A6; }
.ctl-card-name { font-size:13px;font-weight:800;color:var(--dark-text);margin-bottom:2px; }
.ctl-card-role { font-size:11px;color:var(--muted);margin-bottom:6px; }
.ctl-card-dept { display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;margin-bottom:6px; }
.ctl-dept-eng  { background:rgba(99,102,241,0.12);color:#4338CA; }
.ctl-dept-des  { background:rgba(139,92,246,0.12);color:#6D28D9; }
.ctl-dept-mkt  { background:rgba(249,115,22,0.12);color:#C2410C; }
.ctl-dept-hr   { background:rgba(16,185,129,0.12);color:#047857; }
.ctl-dept-fin  { background:rgba(234,179,8,0.12);color:#854D0E; }
.ctl-dept-sales{ background:rgba(236,72,153,0.12);color:#9D174D; }
.ctl-dept-ops  { background:rgba(20,184,166,0.12);color:#0F766E; }
.ctl-card-location { font-size:11px;color:var(--muted);margin-bottom:8px; }
.ctl-card-stats { display:flex;justify-content:center;gap:12px;padding:8px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin-bottom:8px; }
.ctl-card-stat { text-align:center; }
.ctl-cs-val { font-size:13px;font-weight:800;color:var(--dark-text); }
.ctl-cs-lbl { font-size:10px;color:var(--muted);font-weight:600; }
.ctl-card-actions { display:flex;justify-content:center;gap:6px; }
.ctl-act-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:5px 9px;font-size:14px;color:var(--muted);cursor:pointer;transition:all .2s; }
.ctl-act-btn:hover { background:var(--primary);color:#fff;border-color:var(--primary); }
.ctl-page-info { font-size:12px;color:var(--muted); }
.ctl-pagination { display:flex;gap:4px;align-items:center; }
.ctl-page-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--body-text);cursor:pointer;transition:all .2s; }
.ctl-page-btn:hover,.ctl-page-active { background:var(--primary);color:#fff;border-color:var(--primary); }
.ctl-page-ellipsis { color:var(--muted);font-size:14px;padding:0 4px; }

/* ============================================================
   SECTION 46: INVOICE PAGE (inv-)
   ============================================================ */
.inv-stat { border-radius:14px;padding:20px 18px; }
.inv-stat-blue   { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.inv-stat-green  { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.inv-stat-orange { background:linear-gradient(135deg,#FFF7ED,#FED7AA); }
.inv-stat-red    { background:linear-gradient(135deg,#FFF1F2,#FECDD3); }
.inv-stat-purple { background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.inv-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.inv-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.inv-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.inv-stat-icon-orange { background:rgba(249,115,22,0.15);color:#EA580C; }
.inv-stat-icon-red    { background:rgba(239,68,68,0.15);color:#DC2626; }
.inv-stat-icon-purple { background:rgba(168,85,247,0.15);color:#9333EA; }
.inv-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.inv-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.inv-stat-chg   { font-size:11px;font-weight:600; }
.inv-chg-up     { color:#16A34A; }
.inv-chg-neutral{ color:#6B7280; }
.inv-chg-warn   { color:#DC2626; }

/* Revenue breakdown (UNIQUE) */
.inv-rev-legend { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--body-text); }
.inv-rev-dot { width:10px;height:10px;border-radius:50%;display:inline-block; }
.inv-rev-dot-paid    { background:#10B981; }
.inv-rev-dot-pending { background:#F59E0B; }
.inv-rev-dot-overdue { background:#EF4444; }
.inv-rev-bar-wrap { margin-bottom:8px; }
.inv-rev-bar { display:flex;height:36px;border-radius:10px;overflow:hidden; }
.inv-rev-seg { display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff; }
.inv-seg-paid    { flex:70;background:linear-gradient(90deg,#10B981,#34D399); }
.inv-seg-pending { flex:23;background:linear-gradient(90deg,#F59E0B,#FBBF24); }
.inv-seg-overdue { flex:7;background:linear-gradient(90deg,#EF4444,#F87171); }

/* Monthly bars (chart-style) */
.inv-monthly-bars { display:flex;gap:4px;align-items:stretch; }
.inv-month-item { flex:1;display:flex;flex-direction:column;align-items:center;gap:0; }
.inv-month-bar-wrap { width:100%;display:flex;align-items:flex-end;height:320px;border-bottom:2px solid var(--border-color); }
.inv-month-bar { width:100%;border-radius:6px 6px 0 0;background:rgba(93,135,255,0.25);transition:background .2s;min-height:4px;cursor:pointer; }
.inv-month-bar:hover { background:var(--primary); }
.inv-mbar-current { background:var(--primary)!important; }
.inv-mbar-h-52 { height:166px; }
.inv-mbar-h-55 { height:177px; }
.inv-mbar-h-62 { height:198px; }
.inv-mbar-h-68 { height:218px; }
.inv-mbar-h-70 { height:224px; }
.inv-mbar-h-74 { height:237px; }
.inv-mbar-h-78 { height:250px; }
.inv-mbar-h-83 { height:266px; }
.inv-mbar-h-85 { height:273px; }
.inv-mbar-h-86 { height:275px; }
.inv-mbar-h-91 { height:292px; }
.inv-mbar-h-95 { height:305px; }
.inv-month-label { font-size:10px;font-weight:600;color:var(--muted);padding-top:5px;line-height:1.4; }
.inv-month-val   { font-size:9px;color:var(--muted);white-space:nowrap; }
.inv-month-current .inv-month-label { color:var(--primary);font-weight:700; }

/* Payment funnel (UNIQUE) */
.inv-funnel { display:flex;flex-direction:column;gap:4px; }
.inv-funnel-step { display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px; }
.inv-funnel-s1 { background:rgba(99,102,241,0.08); }
.inv-funnel-s2 { background:rgba(99,102,241,0.06); }
.inv-funnel-s3 { background:rgba(99,102,241,0.05); }
.inv-funnel-s4 { background:rgba(99,102,241,0.04); }
.inv-funnel-s5 { background:rgba(16,185,129,0.08); }
.inv-funnel-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--card-bg);color:var(--primary);flex-shrink:0; }
.inv-funnel-s5 .inv-funnel-icon { color:#10B981; }
.inv-funnel-info { flex:1; }
.inv-funnel-label { font-size:12px;font-weight:600;color:var(--body-text); }
.inv-funnel-val { font-size:16px;font-weight:800;color:var(--dark-text); }
.inv-funnel-pct { font-size:12px;font-weight:700;color:var(--primary);white-space:nowrap; }
.inv-funnel-s5 .inv-funnel-pct { color:#10B981; }
.inv-funnel-arrow { text-align:center;color:var(--muted);font-size:14px; }

/* Search/filter */
.inv-search-wrap { position:relative; }
.inv-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px; }
.inv-search-input { border:1px solid var(--border-color);border-radius:8px;padding:6px 12px 6px 30px;font-size:13px;background:var(--input-bg);color:var(--body-text);outline:none;width:200px; }
.inv-filter-select { border:1px solid var(--border-color);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;background:var(--input-bg);color:var(--body-text);cursor:pointer;outline:none; }

/* Invoice table */
.inv-table { font-size:13px; }
.inv-table thead th { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border-color);padding:11px 14px;background:var(--input-bg); }
.inv-table tbody td { padding:12px 14px;vertical-align:middle;border-bottom:1px solid var(--border-color);color:var(--body-text); }
.inv-table tbody tr:hover td { background:rgba(93,135,255,0.03); }
.inv-num { font-size:12px;font-weight:700;color:var(--primary); }
.inv-client-av { width:32px;height:32px;border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff; }
.inv-av-blue   { background:#6366F1; }
.inv-av-green  { background:#10B981; }
.inv-av-purple { background:#8B5CF6; }
.inv-av-orange { background:#F97316; }
.inv-av-red    { background:#EF4444; }
.inv-av-teal   { background:#14B8A6; }
.inv-client-name  { font-size:13px;font-weight:700;color:var(--dark-text); }
.inv-client-email { font-size:11px;color:var(--muted); }
.inv-services { font-size:12px;color:var(--muted);max-width:200px; }
.inv-amount { font-size:13px;font-weight:700;color:var(--dark-text); }
.inv-status-badge { display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px; }
.inv-status-paid    { background:rgba(16,185,129,0.12);color:#047857; }
.inv-status-pending { background:rgba(245,158,11,0.12);color:#B45309; }
.inv-status-overdue { background:rgba(239,68,68,0.12);color:#B91C1C; }
.inv-status-draft   { background:rgba(107,114,128,0.12);color:#374151; }
.inv-act-row { display:flex;gap:4px; }
.inv-act-btn { background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:4px 8px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .2s; }
.inv-act-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary);border-color:var(--primary); }
.inv-act-danger { color:#DC2626; }
.inv-act-danger:hover { background:rgba(220,38,38,0.08);color:#DC2626;border-color:#DC2626; }
.inv-table-footer { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border-color); }
.inv-footer-info { font-size:12px;color:var(--muted); }
.inv-pagination { display:flex;gap:4px;align-items:center; }
.inv-page-btn { background:transparent;border:1px solid var(--border-color);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--body-text);cursor:pointer;transition:all .2s; }
.inv-page-btn:hover,.inv-page-active { background:var(--primary);color:#fff;border-color:var(--primary); }
.inv-page-ellipsis { color:var(--muted);font-size:14px;padding:0 4px; }

/* ============================================================
   SECTION 47: USER PROFILE PAGE (prf-)
   ============================================================ */

/* --- Cover --- */
.prf-hero { border-radius:14px;overflow:hidden; }
.prf-cover { height:200px;background:linear-gradient(135deg,#5D87FF 0%,#7460EE 55%,#FC185A 100%);position:relative;overflow:hidden; }
.prf-blob { position:absolute;border-radius:50%;opacity:.2;pointer-events:none; }
.prf-blob-1 { width:320px;height:320px;background:#fff;top:-130px;right:60px; }
.prf-blob-2 { width:220px;height:220px;background:#FC185A;bottom:-90px;left:160px; }
.prf-blob-3 { width:150px;height:150px;background:#13DEB9;top:10px;left:52%; }
.prf-cover-edit-btn { position:absolute;bottom:12px;right:16px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:11px;font-weight:600;padding:5px 14px;border-radius:8px;cursor:pointer;transition:all .2s; }
.prf-cover-edit-btn:hover { background:rgba(255,255,255,.35); }

/* --- Hero body & avatar row --- */
.prf-hero-body { padding:0 24px 22px;position:relative; }
.prf-av-row { display:flex;align-items:flex-end;gap:16px;margin-top:-46px;margin-bottom:0;flex-wrap:wrap; }
.prf-avatar-wrap { position:relative;flex-shrink:0; }
.prf-avatar { width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,#5D87FF,#7460EE);color:#fff;font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;border:4px solid var(--card-bg);box-shadow:0 4px 20px rgba(93,135,255,.35);flex-shrink:0; }
.prf-avatar-badge { width:18px;height:18px;border-radius:50%;background:#22C55E;border:2px solid var(--card-bg);position:absolute;bottom:4px;right:4px; }

/* --- Name / meta --- */
.prf-hero-meta { flex:1;min-width:0;padding-top:54px; }
.prf-name-line { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px; }
.prf-name { font-size:22px;font-weight:800;color:var(--dark-text);margin:0; }
.prf-verified { color:#6366F1;font-size:18px;line-height:1; }
.prf-role-chip { background:linear-gradient(90deg,rgba(99,102,241,.13),rgba(116,96,238,.13));color:#6366F1;padding:3px 12px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid rgba(99,102,241,.22);white-space:nowrap; }
.prf-company-line { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px; }
.prf-info-pills { display:flex;gap:6px;flex-wrap:wrap; }
.prf-info-pill { display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted);background:var(--input-bg);padding:3px 10px;border-radius:20px;border:1px solid var(--border-color); }
.prf-info-pill i { font-size:10px; }

/* --- Actions --- */
.prf-hero-actions { display:flex;align-items:flex-end;gap:6px;padding-top:54px;flex-shrink:0; }

/* --- Stats bar --- */
.prf-stats-bar { display:flex;align-items:center;border-top:1px solid var(--border-color);margin-top:18px;padding-top:16px;flex-wrap:wrap; }
.prf-stat-item { display:flex;align-items:center;gap:10px;flex:1;min-width:90px;padding:4px 12px; }
.prf-stat-sep { width:1px;height:38px;background:var(--border-color);flex-shrink:0; }
.prf-stat-ico { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }
.prf-sico-indigo { background:rgba(99,102,241,.12);color:#6366F1; }
.prf-sico-purple { background:rgba(116,96,238,.12);color:#7460EE; }
.prf-sico-green  { background:rgba(16,185,129,.12);color:#10B981; }
.prf-sico-amber  { background:rgba(245,158,11,.12);color:#F59E0B; }
.prf-sico-blue   { background:rgba(93,135,255,.12);color:#5D87FF; }
.prf-sico-rose   { background:rgba(252,24,90,.12);color:#FC185A; }
.prf-stat-val { font-size:16px;font-weight:800;color:var(--dark-text);line-height:1.2; }
.prf-stat-lbl { font-size:11px;color:var(--muted);font-weight:600; }

/* --- Badge cards --- */
.prf-badge-card { border-radius:14px;padding:20px;text-align:center; }
.prf-badge-gold   { background:linear-gradient(135deg,#FFFBEB,#FEF9C3);border:1px solid #FDE68A; }
.prf-badge-blue   { background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border:1px solid #BFDBFE; }
.prf-badge-green  { background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border:1px solid #BBF7D0; }
.prf-badge-purple { background:linear-gradient(135deg,#FAF5FF,#EDE9FE);border:1px solid #DDD6FE; }
.prf-badge-icon { font-size:32px;margin-bottom:8px; }
.prf-badge-name { font-size:14px;font-weight:800;color:var(--dark-text);margin-bottom:4px; }
.prf-badge-desc { font-size:12px;color:var(--muted);margin-bottom:8px; }
.prf-badge-date { font-size:10px;font-weight:700;color:var(--muted); }

/* --- About / bio --- */
.prf-bio { font-size:13px;color:var(--body-text);line-height:1.6;margin-bottom:16px; }
.prf-info-list { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
.prf-info-item { display:flex;align-items:center;gap:10px;font-size:13px;color:var(--body-text); }
.prf-info-item i { color:var(--primary);width:18px;text-align:center; }
.prf-social-row { display:flex;gap:8px;flex-wrap:wrap; }
.prf-social-btn { display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid var(--border-color);color:var(--body-text);transition:all .2s; }
.prf-social-btn:hover { background:var(--primary);color:#fff;border-color:var(--primary); }

/* --- Skills --- */
.prf-skill-row { margin-bottom:14px; }
.prf-skill-info { display:flex;justify-content:space-between;align-items:center;margin-bottom:5px; }
.prf-skill-name { font-size:13px;font-weight:600;color:var(--dark-text); }
.prf-skill-pct  { font-size:12px;font-weight:700;color:var(--primary); }
.prf-skill-track { height:7px;background:var(--border-color);border-radius:10px;overflow:hidden; }
.prf-skill-fill  { height:100%;border-radius:10px; }
.prf-skill-fill-1 { background:linear-gradient(90deg,#6366F1,#818CF8); }
.prf-skill-fill-2 { background:linear-gradient(90deg,#10B981,#34D399); }
.prf-skill-fill-3 { background:linear-gradient(90deg,#8B5CF6,#A78BFA); }
.prf-skill-fill-4 { background:linear-gradient(90deg,#F97316,#FB923C); }
.prf-skill-fill-5 { background:linear-gradient(90deg,#EC4899,#F472B6); }
.prf-skill-w-92 { width:92%; }
.prf-skill-w-88 { width:88%; }
.prf-skill-w-85 { width:85%; }
.prf-skill-w-78 { width:78%; }
.prf-skill-w-71 { width:71%; }

/* --- Activity timeline --- */
.prf-activity-item { display:flex;gap:12px;margin-bottom:16px;position:relative; }
.prf-activity-item::before { content:'';position:absolute;left:15px;top:30px;bottom:-14px;width:1px;background:var(--border-color); }
.prf-activity-item:last-child::before { display:none; }
.prf-activity-dot { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:#fff; }
.prf-dot-blue   { background:#6366F1; }
.prf-dot-green  { background:#10B981; }
.prf-dot-purple { background:#8B5CF6; }
.prf-dot-orange { background:#F97316; }
.prf-dot-pink   { background:#EC4899; }
.prf-activity-content { flex:1; }
.prf-act-title { font-size:13px;font-weight:600;color:var(--dark-text); }
.prf-act-meta  { font-size:12px;color:var(--muted); }
.prf-act-time  { font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap; }

/* --- Contribution heatmap --- */
.prf-heat-wrap { overflow-x:auto; }
.prf-heat-grid { display:grid;grid-template-columns:repeat(52,1fr);gap:3px;min-width:600px; }
.prf-heat-cell { width:10px;height:10px;border-radius:2px;cursor:pointer; }
.prf-h0 { background:var(--border-color); }
.prf-h1 { background:rgba(99,102,241,0.25); }
.prf-h2 { background:rgba(99,102,241,0.45); }
.prf-h3 { background:rgba(99,102,241,0.65); }
.prf-h4 { background:#6366F1; }
.prf-heat-legend { display:flex;align-items:center;gap:6px;margin-top:8px; }
.prf-heat-legend-lbl { font-size:11px;color:var(--muted); }
.prf-heat-chip { width:10px;height:10px;border-radius:2px; }

/* Contribution stats & activity */
.prf-contrib-stats { display:flex;gap:10px;margin-top:16px;flex-wrap:wrap; }
.prf-contrib-stat { flex:1;min-width:110px;background:var(--body-bg);border-radius:10px;padding:12px 14px;border:1px solid var(--border-color); }
.prf-contrib-stat-val { font-size:22px;font-weight:800;line-height:1;margin-bottom:3px; }
.prf-contrib-stat-lbl { font-size:11px;font-weight:600;color:var(--muted); }
.prf-contrib-streak { display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;background:linear-gradient(135deg,#FFF7ED,#FED7AA);border-radius:10px;border:1px solid rgba(249,115,22,0.2); }
.prf-contrib-streak-val { font-size:18px;font-weight:800;color:#EA580C; }
.prf-contrib-recent { margin-top:16px;border-top:1px solid var(--border-color);padding-top:14px; }
.prf-activity-row { display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-color); }
.prf-activity-row:last-child { border-bottom:none;padding-bottom:0; }
.prf-activity-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.prf-activity-desc { flex:1;font-size:12.5px;color:var(--body-text);line-height:1.4; }
.prf-activity-time { font-size:11px;color:var(--muted);white-space:nowrap; }

/* --- Work Experience timeline --- */
.prf-exp-item { display:flex;gap:14px;padding-bottom:22px;position:relative; }
.prf-exp-item::before { content:'';position:absolute;left:21px;top:46px;bottom:0;width:2px;background:var(--border-color); }
.prf-exp-item:last-child::before { display:none; }
.prf-exp-item:last-child { padding-bottom:0; }
.prf-exp-logo { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0; }
.prf-exp-logo-indigo { background:linear-gradient(135deg,#6366F1,#818CF8); }
.prf-exp-logo-blue   { background:linear-gradient(135deg,#5D87FF,#7DC7FF); }
.prf-exp-logo-green  { background:linear-gradient(135deg,#10B981,#34D399); }
.prf-exp-body { flex:1;min-width:0; }
.prf-exp-role { font-size:14px;font-weight:700;color:var(--dark-text);margin-bottom:1px; }
.prf-exp-company { font-size:13px;font-weight:600;color:var(--primary);margin-bottom:2px; }
.prf-exp-period { font-size:11px;color:var(--muted);margin-bottom:6px; }
.prf-exp-desc { font-size:12px;color:var(--body-text);line-height:1.55;margin-bottom:8px; }
.prf-exp-tags { display:flex;gap:4px;flex-wrap:wrap; }
.prf-exp-tag { font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--input-bg);color:var(--muted);border:1px solid var(--border-color); }

/* --- Projects --- */
.prf-proj-item { display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--border-color); }
.prf-proj-item:first-child { padding-top:0; }
.prf-proj-item:last-child { border-bottom:none;padding-bottom:0; }
.prf-proj-icon { width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0; }
.prf-proj-icon-indigo { background:rgba(99,102,241,.12);color:#6366F1; }
.prf-proj-icon-green  { background:rgba(16,185,129,.12);color:#10B981; }
.prf-proj-icon-purple { background:rgba(139,92,246,.12);color:#8B5CF6; }
.prf-proj-icon-amber  { background:rgba(245,158,11,.12);color:#F59E0B; }
.prf-proj-icon-pink   { background:rgba(236,72,153,.12);color:#EC4899; }
.prf-proj-body { flex:1;min-width:0; }
.prf-proj-name { font-size:13px;font-weight:700;color:var(--dark-text); }
.prf-proj-desc { font-size:12px;color:var(--muted);line-height:1.4;margin-bottom:5px; }
.prf-proj-tags { display:flex;gap:4px;flex-wrap:wrap; }
.prf-proj-tag { font-size:10px;font-weight:600;padding:1px 7px;border-radius:20px;background:var(--input-bg);color:var(--muted);border:1px solid var(--border-color); }
.prf-proj-status { font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap; }
.prf-proj-live   { background:rgba(16,185,129,.12);color:#10B981;border:1px solid rgba(16,185,129,.25); }
.prf-proj-wip    { background:rgba(249,115,22,.12);color:#F97316;border:1px solid rgba(249,115,22,.25); }
.prf-proj-review { background:rgba(99,102,241,.12);color:#6366F1;border:1px solid rgba(99,102,241,.25); }
.prf-proj-meta { display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex-shrink:0; }
.prf-proj-stat { font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap; }

/* --- Tech Stack --- */
.prf-tech-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.prf-tech-item { display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:10px;background:var(--input-bg);border:1px solid var(--border-color);text-align:center;transition:all .2s;cursor:default; }
.prf-tech-item:hover { border-color:var(--primary);background:rgba(99,102,241,.05); }
.prf-tech-icon { font-size:20px;line-height:1; }
.prf-tech-name { font-size:10px;font-weight:700;color:var(--muted); }

/* --- Peer Reviews --- */
.prf-review-avg { font-size:12px;font-weight:700;color:var(--muted); }
.prf-review-item { padding:14px;background:var(--input-bg);border-radius:12px;border:1px solid var(--border-color);height:100%; }
.prf-review-stars { color:#F59E0B;font-size:11px;margin-bottom:8px;letter-spacing:1px; }
.prf-review-quote { font-size:12px;color:var(--body-text);line-height:1.6;margin-bottom:10px;font-style:italic; }
.prf-review-author { display:flex;align-items:center;gap:8px; }
.prf-review-av { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0; }
.prf-review-name { font-size:12px;font-weight:700;color:var(--dark-text); }
.prf-review-role { font-size:10px;color:var(--muted); }

/* ============================================================
   SECTION 48: BLOG PAGE (blg-)
   ============================================================ */
.blg-stat { border-radius:14px;padding:20px 18px; }
.blg-stat-blue   { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.blg-stat-green  { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.blg-stat-purple { background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.blg-stat-pink   { background:linear-gradient(135deg,#FFF1F2,#FECDD3); }
.blg-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.blg-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.blg-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.blg-stat-icon-purple { background:rgba(168,85,247,0.15);color:#9333EA; }
.blg-stat-icon-pink   { background:rgba(244,63,94,0.15);color:#E11D48; }
.blg-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.blg-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.blg-stat-chg   { font-size:11px;font-weight:600; }
.blg-chg-up     { color:#16A34A; }

/* Hero card (UNIQUE) */
.blg-hero { border-radius:14px;overflow:hidden; }
.blg-hero-inner { display:flex;gap:0;min-height:220px; }
.blg-hero-visual { width:260px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:64px;color:rgba(255,255,255,.85); }
.blg-hero-vis-1 { background:linear-gradient(135deg,#6366F1,#8B5CF6,#EC4899); }
.blg-hero-content { flex:1;padding:24px; }
.blg-hero-cat { display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;background:rgba(99,102,241,0.1);color:#4338CA;padding:3px 10px;border-radius:20px;margin-bottom:10px; }
.blg-hero-badge { font-size:11px;font-weight:700;color:#10B981;margin-left:8px; }
.blg-hero-title { font-size:20px;font-weight:800;color:var(--dark-text);margin-bottom:8px;line-height:1.3; }
.blg-hero-excerpt { font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:12px; }
.blg-hero-meta  { font-size:12px;color:var(--muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap; }

/* Engagement bars (UNIQUE) */
.blg-eng-bar { display:flex;flex-direction:column;gap:8px; }
.blg-eng-item { display:flex;align-items:center;gap:10px; }
.blg-eng-label { font-size:12px;font-weight:600;color:var(--muted);min-width:100px; }
.blg-eng-track { flex:1;height:7px;background:var(--border-color);border-radius:10px;overflow:hidden; }
.blg-eng-fill  { height:100%;border-radius:10px;background:linear-gradient(90deg,#6366F1,#818CF8); }
.blg-eng-w-92  { width:92%; }
.blg-eng-w-64  { width:64%; }
.blg-eng-w-38  { width:38%; }

/* Filter tabs */
.blg-filter-tabs { display:flex;gap:4px;flex-wrap:wrap; }
.blg-ftab { background:transparent;border:1px solid var(--border-color);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.blg-ftab:hover,.blg-ftab-active { background:var(--primary);color:#fff;border-color:var(--primary); }
.blg-search { border:1px solid var(--border-color);border-radius:8px;padding:6px 12px;font-size:13px;background:var(--input-bg);color:var(--body-text);outline:none;width:200px; }

/* Post cards */
.blg-post-card { border-radius:12px;overflow:hidden; }
.blg-post-banner { height:140px;display:flex;align-items:center;justify-content:center;font-size:40px;color:rgba(255,255,255,.85); }
.blg-banner-1 { background:linear-gradient(135deg,#6366F1,#818CF8); }
.blg-banner-2 { background:linear-gradient(135deg,#10B981,#34D399); }
.blg-banner-3 { background:linear-gradient(135deg,#8B5CF6,#A78BFA); }
.blg-banner-4 { background:linear-gradient(135deg,#F97316,#FB923C); }
.blg-banner-5 { background:linear-gradient(135deg,#EC4899,#F472B6); }
.blg-banner-6 { background:linear-gradient(135deg,#14B8A6,#2DD4BF); }
.blg-cat-badge { display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:10px;margin-bottom:6px; }
.blg-cat-tech     { background:rgba(99,102,241,0.12);color:#4338CA; }
.blg-cat-design   { background:rgba(139,92,246,0.12);color:#6D28D9; }
.blg-cat-tutorial { background:rgba(16,185,129,0.12);color:#047857; }
.blg-cat-business { background:rgba(249,115,22,0.12);color:#C2410C; }
.blg-status-badge { font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap; }
.blg-status-pub   { background:rgba(16,185,129,0.12);color:#047857; }
.blg-status-draft { background:rgba(107,114,128,0.12);color:#374151; }
.blg-status-sched { background:rgba(245,158,11,0.12);color:#B45309; }
.blg-post-title   { font-size:14px;font-weight:800;color:var(--dark-text);margin-bottom:6px;line-height:1.4; }
.blg-post-excerpt { font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px; }
.blg-post-author  { display:flex;align-items:center;gap:7px;margin-bottom:8px; }
.blg-author-av    { width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff; }
.blg-av-blue      { background:#6366F1; }
.blg-av-green     { background:#10B981; }
.blg-av-purple    { background:#8B5CF6; }
.blg-post-footer  { display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--border-color); }
.blg-post-stats   { display:flex;gap:10px;font-size:12px;color:var(--muted);align-items:center; }
.blg-post-actions { display:flex;gap:4px; }
.blg-act-btn { background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:3px 8px;font-size:12px;color:var(--muted);cursor:pointer;transition:all .2s; }
.blg-act-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary);border-color:var(--primary); }
.blg-act-danger { color:#DC2626; }
.blg-act-danger:hover { background:rgba(220,38,38,0.08);color:#DC2626;border-color:#DC2626; }

/* ============================================================
   SECTION 49: BLOG DETAIL PAGE (bld-)
   ============================================================ */
.bld-stat { border-radius:14px;padding:20px 18px; }
.bld-stat-blue   { background:linear-gradient(135deg,#EFF6FF,#BFDBFE); }
.bld-stat-purple { background:linear-gradient(135deg,#FAF5FF,#E9D5FF); }
.bld-stat-pink   { background:linear-gradient(135deg,#FFF1F2,#FECDD3); }
.bld-stat-green  { background:linear-gradient(135deg,#F0FDF4,#BBF7D0); }
.bld-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.bld-stat-icon-blue   { background:rgba(59,130,246,0.15);color:#2563EB; }
.bld-stat-icon-purple { background:rgba(168,85,247,0.15);color:#9333EA; }
.bld-stat-icon-pink   { background:rgba(244,63,94,0.15);color:#E11D48; }
.bld-stat-icon-green  { background:rgba(34,197,94,0.15);color:#16A34A; }
.bld-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.bld-stat-label { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.bld-stat-chg   { font-size:11px;font-weight:600; }
.bld-chg-up     { color:#16A34A; }
.bld-chg-neutral{ color:#6B7280; }

/* Article hero */
.bld-article-hero { border-radius:12px 12px 0 0;overflow:hidden; }
.bld-hero-banner { height:200px;display:flex;align-items:center;justify-content:center;position:relative; }
.bld-hero-banner-1 { background:linear-gradient(135deg,#1E1B4B,#4338CA,#7C3AED); }
.bld-hero-emoji { font-size:64px; }
.bld-hero-content { padding:20px 24px; }
.bld-hero-cat  { display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;background:rgba(99,102,241,0.1);color:#4338CA;padding:3px 10px;border-radius:20px;margin-bottom:8px; }
.bld-hero-date { font-size:12px;color:var(--muted);margin-left:8px; }
.bld-article-title { font-size:22px;font-weight:800;color:var(--dark-text);line-height:1.3;margin-bottom:12px; }
.bld-author-row { display:flex;align-items:center;gap:10px; }
.bld-author-av  { width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#818CF8);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center; }
.bld-author-name{ font-size:13px;font-weight:700;color:var(--dark-text); }
.bld-author-role{ font-size:11px;color:var(--muted); }
.bld-article-meta { display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px; }

/* Reaction bar (UNIQUE) */
.bld-react-row { display:flex;align-items:center;gap:8px;padding:12px 24px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin:0 0 16px;flex-wrap:wrap; }
.bld-react-label-txt { font-size:12px;font-weight:700;color:var(--muted); }
.bld-react-btn { display:flex;align-items:center;gap:5px;background:var(--input-bg);border:1px solid var(--border-color);border-radius:20px;padding:5px 12px;cursor:pointer;font-size:13px;transition:all .2s; }
.bld-react-btn:hover { border-color:var(--primary);background:rgba(93,135,255,0.07); }
.bld-react-emoji { font-size:16px; }
.bld-react-label { font-size:11px;font-weight:600;color:var(--muted); }
.bld-react-count { font-size:13px;font-weight:700;color:var(--dark-text); }

/* Article body */
.bld-article-body { font-size:14px;color:var(--body-text);line-height:1.8;padding:0 24px 24px; }
.bld-article-body h3,.bld-article-body h4 { font-size:17px;font-weight:800;color:var(--dark-text);margin:20px 0 10px; }
.bld-article-body p  { margin-bottom:14px; }
.bld-code-block { background:#1E1B4B;color:#C4B5FD;border-radius:10px;padding:16px 20px;font-size:13px;font-family:monospace;overflow-x:auto;margin:16px 0;line-height:1.6; }
.bld-blockquote { border-left:4px solid var(--primary);padding:12px 20px;background:rgba(93,135,255,0.06);border-radius:0 10px 10px 0;margin:16px 0;font-style:italic;color:var(--muted); }
.bld-tags-row   { display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;align-items:center; }
.bld-tags-label { font-size:12px;font-weight:700;color:var(--muted); }
.bld-tag { background:var(--input-bg);border:1px solid var(--border-color);border-radius:20px;padding:3px 12px;font-size:12px;font-weight:600;color:var(--body-text);cursor:pointer;transition:all .2s; }
.bld-tag:hover { background:var(--primary);color:#fff;border-color:var(--primary); }

/* Comments */
.bld-comments { margin-top:0;padding:0 24px 24px; }
.bld-comment { display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-color); }
.bld-comment:last-of-type { border-bottom:none; }
.bld-comment-av { width:36px;height:36px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0; }
.bld-av-blue   { background:#6366F1; }
.bld-av-green  { background:#10B981; }
.bld-av-purple { background:#8B5CF6; }
.bld-comment-body { flex:1; }
.bld-comment-hd    { display:flex;align-items:center;gap:10px;margin-bottom:5px; }
.bld-comment-time  { font-size:11px;color:var(--muted); }
.bld-comment-likes { font-size:11px;color:var(--muted);margin-left:auto; }
.bld-comment-text  { font-size:13px;color:var(--body-text);line-height:1.6;margin-bottom:6px; }
.bld-comment-actions { display:flex;gap:8px; }
.bld-comment-btn { background:transparent;border:none;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;padding:0; }
.bld-comment-btn:hover { color:var(--primary); }
.bld-comment-form { margin-top:16px;display:flex;flex-direction:column;gap:8px; }
.bld-comment-form textarea { border:1px solid var(--border-color);border-radius:10px;padding:12px;font-size:13px;background:var(--input-bg);color:var(--body-text);outline:none;resize:vertical;min-height:80px; }
.bld-comment-form textarea:focus { border-color:var(--primary); }

/* Table of Contents (UNIQUE) */
.bld-toc { }
.bld-toc-list { display:flex;flex-direction:column;gap:4px; }
.bld-toc-item { display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:all .2s;text-decoration:none; }
.bld-toc-item:hover { background:rgba(93,135,255,0.07); }
.bld-toc-active { background:rgba(93,135,255,0.1)!important; }
.bld-toc-num  { width:22px;height:22px;border-radius:50%;background:var(--border-color);color:var(--muted);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.bld-toc-active .bld-toc-num { background:var(--primary);color:#fff; }
.bld-toc-text { font-size:13px;font-weight:500;color:var(--body-text);line-height:1.3; }
.bld-toc-active .bld-toc-text { color:var(--primary);font-weight:600; }

/* Author card sidebar */
.bld-author-card-body { display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 16px 16px; }
.bld-author-card-av  { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#818CF8);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center; }
.bld-author-stats-row { display:flex;gap:12px; }
.bld-au-stat  { text-align:center;flex:1; }
.bld-au-val   { font-size:16px;font-weight:800;color:var(--dark-text); }
.bld-au-lbl   { font-size:11px;color:var(--muted);font-weight:600; }

/* Related posts */
.bld-related-item { display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-color);cursor:pointer; }
.bld-related-item:last-child { border-bottom:none; }
.bld-rel-banner { width:56px;height:56px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
.bld-rel-banner-1 { background:linear-gradient(135deg,#6366F1,#818CF8); }
.bld-rel-banner-2 { background:linear-gradient(135deg,#10B981,#34D399); }
.bld-rel-banner-3 { background:linear-gradient(135deg,#8B5CF6,#A78BFA); }
.bld-rel-info { flex:1;min-width:0; }
.bld-rel-title { font-size:13px;font-weight:700;color:var(--dark-text);line-height:1.3;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.bld-rel-meta  { font-size:11px;color:var(--muted); }

/* ============================================================
   50. PRICING PAGE (pri-)
   ============================================================ */
/* Stat cards */
.pri-stat { padding:24px;border-radius:16px;position:relative;overflow:hidden; }
.pri-stat-blue   { background:linear-gradient(135deg,#ECF2FF 0%,#dce8ff 100%); }
.pri-stat-green  { background:linear-gradient(135deg,#E6FFFA 0%,#ccfff5 100%); }
.pri-stat-purple { background:linear-gradient(135deg,#F0EEFF 0%,#e0d8ff 100%); }
.pri-stat-amber  { background:linear-gradient(135deg,#FEF5E5 0%,#fde6b8 100%); }
.pri-stat-orange { background:linear-gradient(135deg,#FFF3ED 0%,#ffd8c2 100%); }
.pri-stat-icon { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px; }
.pri-stat-icon-blue   { background:#5D87FF;color:#fff; }
.pri-stat-icon-green  { background:#13DEB9;color:#fff; }
.pri-stat-icon-purple { background:#7460EE;color:#fff; }
.pri-stat-icon-amber  { background:#FFAE1F;color:#fff; }
.pri-stat-icon-orange { background:#FA896B;color:#fff; }
.pri-stat-val   { font-size:28px;font-weight:800;color:var(--dark-text);line-height:1; }
.pri-stat-label { font-size:13px;color:var(--muted);font-weight:600;margin-top:4px;margin-bottom:8px; }
.pri-stat-chg   { font-size:12px;font-weight:600;display:flex;align-items:center;gap:2px; }
.pri-chg-up   { color:#13DEB9; }
.pri-chg-down { color:#FA896B; }
/* Billing toggle */
.pri-toggle-wrap { display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--dark-text); }
.pri-toggle-track { position:relative;width:56px;height:28px;background:var(--primary);border-radius:14px;cursor:pointer;transition:background .2s; }
.pri-toggle-pill  { position:absolute;top:4px;left:4px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .25s; }
.pri-toggle-track.pri-annual .pri-toggle-pill { transform:translateX(28px); }
.pri-badge-save { background:linear-gradient(90deg,#13DEB9,#0fbfa1);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px; }
/* Plan cards */
.pri-plan-row { display:flex;gap:24px;flex-wrap:wrap; }
.pri-plan-card { flex:1;min-width:240px;border:2px solid var(--border-color);border-radius:20px;padding:32px 28px;position:relative;transition:all .3s;background:var(--card-bg); }
.pri-plan-card:hover { border-color:var(--primary);transform:translateY(-4px);box-shadow:0 16px 40px rgba(93,135,255,0.15); }
.pri-plan-popular { border-color:var(--primary);background:linear-gradient(135deg,#ECF2FF 0%,#ffffff 60%); }
.pri-popular-badge { position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#FFAE1F;color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;white-space:nowrap; }
.pri-plan-name  { font-size:18px;font-weight:800;color:var(--dark-text);margin-bottom:4px; }
.pri-plan-desc  { font-size:13px;color:var(--muted);margin-bottom:20px; }
.pri-plan-price { font-size:40px;font-weight:800;color:var(--dark-text);line-height:1; }
.pri-plan-price sup  { font-size:20px;vertical-align:top;margin-top:10px; }
.pri-plan-price small { font-size:14px;color:var(--muted);font-weight:500; }
.pri-plan-features { list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:10px; }
.pri-plan-features li { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--body-text); }
.pri-plan-features li i { color:#13DEB9;font-size:14px; }
/* Compare table */
.pri-compare-table { width:100%;border-collapse:collapse; }
.pri-compare-table th,.pri-compare-table td { padding:14px 16px;border-bottom:1px solid var(--border-color);text-align:center;font-size:13px; }
.pri-compare-table th:first-child,.pri-compare-table td:first-child { text-align:left; }
.pri-compare-table thead th { font-weight:700;font-size:14px;color:var(--dark-text);background:var(--body-bg);border-bottom:2px solid var(--primary); }
.pri-cmp-pro-col { background:rgba(93,135,255,0.06); }
.pri-cmp-yes { color:#13DEB9;font-size:16px; }
.pri-cmp-no  { color:var(--muted);font-size:14px; }
.pri-compare-group-hd td { background:rgba(93,135,255,0.04);font-weight:700;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; }
/* Trust badges */
.pri-trust-row { display:flex;gap:20px;flex-wrap:wrap; }
.pri-trust-item { flex:1;min-width:140px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:rgba(93,135,255,0.04);border-radius:14px;text-align:center; }
.pri-trust-icon { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px; }
.pri-trust-label { font-size:12px;font-weight:700;color:var(--dark-text); }
.pri-trust-sub   { font-size:11px;color:var(--muted); }
/* Plan head (colored card header) */
.pri-plan-head { padding:24px 28px 20px;margin:-32px -28px 24px;border-radius:20px 20px 0 0; }
.pri-head-starter    { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.pri-head-pro        { background:linear-gradient(135deg,var(--primary) 0%,#7460EE 100%); }
.pri-head-pro .pri-plan-name,.pri-head-pro .pri-plan-tagline { color:#fff; }
.pri-head-enterprise { background:linear-gradient(135deg,#2a3547,#1a1a2e); }
.pri-head-enterprise .pri-plan-name,.pri-head-enterprise .pri-plan-tagline { color:#fff; }
.pri-plan-icon    { font-size:34px;line-height:1;margin-bottom:8px;display:block; }
.pri-plan-tagline { font-size:13px;color:inherit;opacity:.8;margin-top:3px;font-weight:500; }
/* Price row */
.pri-price-row { display:flex;align-items:baseline;gap:2px;margin:16px 0 4px; }
.pri-currency  { font-size:22px;font-weight:800;color:var(--dark-text);line-height:1;align-self:flex-start;margin-top:6px; }
.pri-amount    { font-size:44px;font-weight:800;color:var(--dark-text);line-height:1; }
.pri-period    { font-size:14px;color:var(--muted);font-weight:500;margin-left:2px; }
.pri-billed-note { font-size:12px;color:var(--muted);margin-bottom:16px; }
/* Feature list */
.pri-features     { display:flex;flex-direction:column;gap:8px;margin:16px 0 0; }
.pri-feature-item { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--body-text); }
.pri-feat-yes i { color:#13DEB9;font-size:14px; }
.pri-feat-no  i { color:var(--border-color);font-size:14px; }
.pri-feat-no    { color:var(--muted); }
/* Comparison table groups */
.pri-cmp-feature-col { width:38%;text-align:left;font-weight:600; }
.pri-cmp-group td    { background:var(--body-bg);padding:10px 16px; }
.pri-cmp-group-label { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; }
/* Save badge alias */
.pri-save-badge { background:linear-gradient(90deg,#13DEB9,#0fbfa1);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:8px; }
/* Trust section child classes */
.pri-trust-text  { flex:1; }
.pri-trust-title { font-size:13px;font-weight:700;color:var(--dark-text);margin-bottom:3px; }
.pri-trust-desc  { font-size:12px;color:var(--muted); }
/* Dark mode stat & plan backgrounds */
[data-bs-theme="dark"] .pri-stat-blue    { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .pri-stat-green   { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .pri-stat-purple  { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .pri-stat-amber   { background:rgba(255,174,31,0.12); }
[data-bs-theme="dark"] .pri-stat-orange  { background:rgba(250,137,107,0.12); }
[data-bs-theme="dark"] .pri-head-starter { background:rgba(93,135,255,0.15); }
[data-bs-theme="dark"] .pri-plan-popular { background:rgba(93,135,255,0.08); }

/* ============================================================
   51. FAQ PAGE (faq-)
   ============================================================ */
/* Stat cards */
.faq-stat { padding:24px;border-radius:16px;position:relative;overflow:hidden; }
.faq-stat-blue   { background:linear-gradient(135deg,#ECF2FF 0%,#dce8ff 100%); }
.faq-stat-green  { background:linear-gradient(135deg,#E6FFFA 0%,#ccfff5 100%); }
.faq-stat-purple { background:linear-gradient(135deg,#F0EEFF 0%,#e0d8ff 100%); }
.faq-stat-amber  { background:linear-gradient(135deg,#FEF5E5 0%,#fde6b8 100%); }
.faq-stat-orange { background:linear-gradient(135deg,#FFF3ED 0%,#ffd8c2 100%); }
.faq-stat-icon { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px; }
.faq-icon-blue   { background:#5D87FF;color:#fff; }
.faq-icon-green  { background:#13DEB9;color:#fff; }
.faq-icon-purple { background:#7460EE;color:#fff; }
.faq-icon-amber  { background:#FFAE1F;color:#fff; }
.faq-stat-val   { font-size:28px;font-weight:800;color:var(--dark-text);line-height:1; }
.faq-stat-label { font-size:13px;color:var(--muted);font-weight:600;margin-top:4px;margin-bottom:8px; }
/* Search hero */
.faq-search-hero { background:linear-gradient(135deg,var(--primary) 0%,#7460EE 100%);border-radius:20px;padding:48px 32px;text-align:center;color:#fff;margin-bottom:0; }
.faq-search-title { font-size:26px;font-weight:800;margin-bottom:6px; }
.faq-search-sub   { font-size:14px;opacity:.85;margin-bottom:24px; }
.faq-search-bar-v1   { max-width:480px;margin:0 auto;position:relative; }
.faq-search-bar-v1 input { width:100%;padding:14px 20px 14px 48px;border-radius:14px;border:none;font-size:14px;font-family:inherit;outline:none;box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.faq-search-bar-v1 i { position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px; }
/* Category pills */
.faq-cat-pills { display:flex;flex-wrap:wrap;gap:8px;margin-top:24px; }
.faq-cat-btn   { padding:6px 16px;border-radius:20px;border:2px solid var(--border-color);background:transparent;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.faq-cat-btn:hover,.faq-cat-btn.active { background:var(--primary);border-color:var(--primary);color:#fff; }
/* FAQ accordion */
.faq-group-title { font-size:16px;font-weight:700;color:var(--dark-text);padding:12px 0;border-bottom:2px solid var(--primary);margin-bottom:8px; }
.faq-item .accordion-button { font-size:14px;font-weight:600;color:var(--dark-text);background:transparent;box-shadow:none; }
.faq-item .accordion-button:not(.collapsed) { color:var(--primary);background:rgba(93,135,255,0.05); }
.faq-item .accordion-body { font-size:13.5px;color:var(--body-text);line-height:1.7; }
/* Vote buttons */
.faq-vote-row  { display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color); }
.faq-vote-label { font-size:12px;color:var(--muted);font-weight:600; }
.faq-vote-btn  { display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1px solid var(--border-color);background:transparent;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s; }
.faq-vote-yes:hover,.faq-vote-yes.voted { border-color:#13DEB9;background:#E6FFFA;color:#0fbb8f; }
.faq-vote-no:hover,.faq-vote-no.voted   { border-color:#FA896B;background:#FDEDE8;color:#d9734c; }
/* Popular list */
.faq-popular-list { display:flex;flex-direction:column;gap:0;padding:0 20px; }
.faq-popular-item { display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--border-color);cursor:pointer; }
.faq-popular-item:last-child { border-bottom:none; }
.faq-popular-num  { min-width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center; }
.faq-popular-q    { font-size:13px;font-weight:600;color:var(--dark-text);line-height:1.4; }
.faq-popular-views { font-size:11px;color:var(--muted);margin-top:2px; }
/* Contact support widget */
.faq-contact-box  { text-align:center;padding:8px 0; }
.faq-contact-icon { width:52px;height:52px;border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px; }
/* Stat icon color aliases (HTML uses faq-stat-icon-* not faq-icon-*) */
.faq-stat-icon-blue   { background:#5D87FF;color:#fff; }
.faq-stat-icon-green  { background:#13DEB9;color:#fff; }
.faq-stat-icon-purple { background:#7460EE;color:#fff; }
.faq-stat-icon-orange { background:#FA896B;color:#fff; }
/* Group icon color aliases */
.faq-gi-blue   { background:#5D87FF;color:#fff; }
.faq-gi-green  { background:#13DEB9;color:#fff; }
.faq-gi-purple { background:#7460EE;color:#fff; }
.faq-gi-orange { background:#FFAE1F;color:#fff; }
/* Stat change text */
.faq-stat-chg    { font-size:12px;font-weight:600;display:flex;align-items:center;gap:2px; }
.faq-chg-up      { color:#0fbb8f; }
.faq-chg-neutral { color:var(--muted); }
/* Search bar (HTML structure: wrap > icon + input + button) */
.faq-search-bar-wrap { position:relative;max-width:520px;margin:0 auto; }
.faq-search-icon { position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#aaa;font-size:16px;z-index:1;pointer-events:none; }
.faq-search-bar  { width:100%;padding:14px 120px 14px 48px;border-radius:14px;border:none;font-size:14px;font-family:var(--font);outline:none;box-shadow:0 8px 24px rgba(0,0,0,0.15);background:#fff;color:#333; }
.faq-search-btn  { position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--primary);color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .2s; }
.faq-search-btn:hover { opacity:.9; }
/* Category active alias */
.faq-cat-btn.faq-cat-active { background:var(--primary);border-color:var(--primary);color:#fff; }
/* Group header */
.faq-group-header { display:flex;align-items:center;gap:10px;padding:14px 0 10px;border-bottom:2px solid var(--primary);margin-bottom:8px;font-size:15px;font-weight:700;color:var(--dark-text); }
.faq-group-icon   { width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
.faq-group-count  { font-size:11px;font-weight:600;color:var(--muted);margin-left:auto;background:var(--body-bg);padding:2px 8px;border-radius:10px;border:1px solid var(--border-color); }
/* FAQ item accordion */
.faq-items { display:flex;flex-direction:column;gap:4px; }
.faq-item  { border:1px solid var(--border-color);border-radius:12px;overflow:hidden;background:var(--card-bg); }
.faq-q-btn { width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:transparent;border:none;text-align:left;font-size:14px;font-weight:600;color:var(--dark-text);cursor:pointer;font-family:var(--font);gap:10px;transition:background .15s; }
.faq-q-btn:hover { background:rgba(93,135,255,0.04); }
.faq-q-btn:not(.collapsed) { color:var(--primary);background:rgba(93,135,255,0.05); }
.faq-chevron { font-size:14px;color:var(--muted);flex-shrink:0;transition:transform .25s; }
.faq-q-btn:not(.collapsed) .faq-chevron { transform:rotate(180deg);color:var(--primary); }
.faq-answer { padding:0 18px 16px;font-size:13.5px;color:var(--body-text);line-height:1.7; }
/* Contact response */
.faq-contact-resp { font-size:12px;color:var(--muted); }
/* Dark mode */
[data-bs-theme="dark"] .faq-stat-blue    { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .faq-stat-green   { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .faq-stat-purple  { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .faq-stat-amber   { background:rgba(255,174,31,0.12); }
[data-bs-theme="dark"] .faq-stat-orange  { background:rgba(250,137,107,0.12); }
[data-bs-theme="dark"] .faq-search-hero  { background:rgba(93,135,255,0.15); }
[data-bs-theme="dark"] .faq-search-bar   { background:var(--card-bg);color:var(--body-text); }
[data-theme="dark"] .faq-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .faq-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .faq-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .faq-stat-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .faq-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }
[data-theme="dark"] .faq-vote-yes:hover,[data-theme="dark"] .faq-vote-yes.voted { background: rgba(19,222,185,0.14); color: #5FECD4; }
[data-theme="dark"] .faq-vote-no:hover,[data-theme="dark"] .faq-vote-no.voted   { background: rgba(250,137,107,0.14); color: #f9a58e; }
[data-theme="dark"] .faq-contact-icon { background: rgba(93,135,255,0.16); }
[data-theme="dark"] .faq-group-header { border-bottom-color: rgba(93,135,255,0.50); }
[data-theme="dark"] .faq-search-hero  { background: linear-gradient(135deg, rgba(93,135,255,0.22) 0%, rgba(116,96,238,0.26) 100%); }
[data-theme="dark"] .faq-search-bar   { background: rgba(255,255,255,0.07); color: var(--body-color); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
[data-theme="dark"] .faq-search-bar::placeholder { color: #7a8faa; opacity: 1; }
[data-theme="dark"] .faq-search-bar-v1 input { background: rgba(255,255,255,0.14); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
[data-theme="dark"] .faq-search-bar-v1 input::placeholder { color: rgba(255,255,255,0.60); opacity: 1; }
[data-theme="dark"] .faq-search-icon  { color: #7a8faa; }

/* ============================================================
   52. ACCOUNT SETTINGS (acc-)
   ============================================================ */
/* Stat cards */
.acc-stat { padding:20px;border-radius:16px;display:flex;align-items:center;gap:16px; }
.acc-stat-blue   { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.acc-stat-green  { background:linear-gradient(135deg,#E6FFFA,#ccfff5); }
.acc-stat-purple { background:linear-gradient(135deg,#F0EEFF,#e0d8ff); }
.acc-stat-amber  { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
.acc-stat-icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.acc-icon-blue   { background:#5D87FF;color:#fff; }
.acc-icon-green  { background:#13DEB9;color:#fff; }
.acc-icon-purple { background:#7460EE;color:#fff; }
.acc-icon-amber  { background:#FFAE1F;color:#fff; }
.acc-stat-val   { font-size:24px;font-weight:800;color:var(--dark-text);line-height:1.1; }
.acc-stat-label { font-size:12px;color:var(--muted);font-weight:600; }
.acc-stat-body  { flex:1;min-width:0; }
.acc-stat-orange { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
/* Stat icon colors (HTML uses acc-stat-icon-* prefix) */
.acc-stat-icon-blue   { background:#5D87FF;color:#fff; }
.acc-stat-icon-green  { background:#13DEB9;color:#fff; }
.acc-stat-icon-purple { background:#7460EE;color:#fff; }
.acc-stat-icon-orange { background:#FFAE1F;color:#fff; }
/* Completion ring */
.acc-completion-ring { display:flex;align-items:center;gap:12px; }
.acc-ring-svg   { width:52px;height:52px;transform:rotate(-90deg); }
.acc-ring-bg    { fill:none;stroke:#e0e7ff;stroke-width:8; }
.acc-ring-fill  { fill:none;stroke:#5D87FF;stroke-width:8;stroke-linecap:round;stroke-dasharray:82 100; }
/* Settings layout */
.acc-settings-wrap { display:flex;gap:0;min-height:500px; }
.acc-settings-nav  { padding:8px 0; }
.acc-nav-item { display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:all .2s;border:none;border-left:3px solid transparent;background:transparent;width:100%;text-align:left;font-family:var(--font);color:inherit;outline:none;margin-bottom:2px; }
.acc-nav-item:hover { background:rgba(93,135,255,0.05); }
.acc-nav-active { background:rgba(93,135,255,0.08)!important;border-left-color:var(--primary)!important; }
.acc-nav-icon  { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:var(--body-bg);border:1px solid var(--border-color);color:var(--muted); }
.acc-nav-text  { flex:1;min-width:0; }
.acc-nav-title { font-size:13px;font-weight:700;color:var(--dark-text); }
.acc-nav-sub   { font-size:11px;color:var(--muted); }
.acc-tab-content-wrap { flex:1;padding:24px;overflow:auto; }
.acc-tab-pane  { display:none; }
.acc-tab-pane.acc-tab-active { display:block; }
/* Toggles */
.acc-toggle-row    { display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-color); }
.acc-toggle-row:last-child { border-bottom:none; }
.acc-toggle-info   { flex:1; }
.acc-toggle-label-text { font-size:14px;font-weight:600;color:var(--dark-text); }
.acc-toggle-desc   { font-size:12px;color:var(--muted); }
.acc-toggle-input  { width:40px;height:20px;appearance:none;background:var(--border-color);border-radius:10px;position:relative;cursor:pointer;transition:background .2s; }
.acc-toggle-input:checked { background:var(--primary); }
.acc-toggle-input::after { content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s; }
.acc-toggle-input:checked::after { transform:translateX(20px); }
/* Danger zone */
.acc-danger-card { border:1px solid rgba(250,137,107,0.3);background:rgba(250,137,107,0.04);border-radius:14px;padding:20px; }
.acc-danger-title { font-size:15px;font-weight:700;color:#FA896B;margin-bottom:4px; }
.acc-danger-desc  { font-size:13px;color:var(--muted); }
/* Sessions */
.acc-session-list { padding:0 20px; }
.acc-session-item { display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-color); }
.acc-session-item:last-child { border-bottom:none; }
.acc-session-icon { width:40px;height:40px;border-radius:10px;background:var(--body-bg);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.acc-session-info { flex:1; }
.acc-session-device { font-size:13px;font-weight:700;color:var(--dark-text); }
.acc-session-meta   { font-size:12px;color:var(--muted); }
.acc-session-current { background:rgba(19,222,185,0.05); }
/* 2FA steps */
.acc-2fa-steps { display:flex;flex-direction:column;gap:16px; }
.acc-2fa-step  { display:flex;gap:16px;align-items:flex-start; }
.acc-2fa-num   { width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.acc-2fa-content { font-size:13px; }
/* Integration items */
.acc-integration-item { display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--border-color); }
.acc-integration-item:last-child { border-bottom:none; }
.acc-int-icon  { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.acc-int-info  { flex:1; }
.acc-int-name  { font-size:14px;font-weight:700;color:var(--dark-text); }
.acc-int-desc  { font-size:12px;color:var(--muted); }
/* Stat change text */
.acc-stat-chg    { font-size:11px;font-weight:600;margin-top:6px; }
.acc-chg-warn    { color:#FFAE1F; }
.acc-chg-neutral { color:var(--muted); }
/* Nav icon color variants */
.acc-ni-blue   { background:rgba(93,135,255,0.12);color:#5D87FF; }
.acc-ni-green  { background:rgba(19,222,185,0.12);color:#13DEB9; }
.acc-ni-purple { background:rgba(116,96,238,0.12);color:#7460EE; }
.acc-ni-orange { background:rgba(255,174,31,0.12);color:#FFAE1F; }
.acc-ni-teal   { background:rgba(0,188,212,0.12);color:#00BCD4; }
.acc-ni-red    { background:rgba(250,137,107,0.12);color:#FA896B; }
.acc-nav-active .acc-nav-icon { background:var(--primary)!important;color:#fff!important; }
/* Nav label alias + arrow */
.acc-nav-label { font-size:13px;font-weight:700;color:var(--dark-text); }
.acc-nav-arrow { font-size:12px;color:var(--muted);margin-left:auto;flex-shrink:0;transition:transform .2s; }
.acc-nav-active .acc-nav-arrow { color:var(--primary); }
/* Ring text */
.acc-ring-pct { fill:var(--dark-text);font-size:9px;font-weight:700;font-family:var(--font);text-anchor:middle; }
/* Avatar section */
.acc-avatar-section { display:flex;align-items:center;gap:20px;flex-wrap:wrap; }
.acc-avatar-circle  { width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#5D87FF,#7460EE);color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.acc-avatar-info    { flex:1;min-width:0; }
.acc-avatar-name    { font-size:18px;font-weight:800;color:var(--dark-text);margin-bottom:2px; }
.acc-avatar-role    { font-size:13px;color:var(--muted); }
/* Form inputs */
.acc-form-label    { font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:block; }
.acc-form-input    { width:100%;padding:10px 14px;border:1.5px solid var(--border-color);border-radius:10px;background:var(--input-bg);color:var(--body-text);font-size:14px;font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s; }
.acc-form-input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(93,135,255,0.1); }
.acc-form-select   { width:100%;padding:10px 14px;border:1.5px solid var(--border-color);border-radius:10px;background:var(--input-bg);color:var(--body-text);font-size:14px;font-family:var(--font);outline:none;cursor:pointer; }
.acc-form-select:focus { border-color:var(--primary); }
.acc-form-textarea { width:100%;padding:10px 14px;border:1.5px solid var(--border-color);border-radius:10px;background:var(--input-bg);color:var(--body-text);font-size:14px;font-family:var(--font);outline:none;resize:vertical;min-height:90px;transition:border-color .2s; }
.acc-form-textarea:focus { border-color:var(--primary); }
/* Password section */
.acc-pw-wrap     { position:relative; }
.acc-pw-toggle   { position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;font-size:16px;line-height:1; }
.acc-pw-strength { display:flex;align-items:center;gap:10px; }
.acc-pw-str-bar  { flex:1;height:6px;background:var(--border-color);border-radius:3px;overflow:hidden; }
.acc-pw-str-fill    { height:100%;border-radius:3px;transition:width .3s; }
.acc-pw-str-weak    { background:#FA896B;width:25%; }
.acc-pw-str-medium  { background:#FFAE1F;width:55%; }
.acc-pw-str-strong  { background:#13DEB9;width:90%; }
.acc-pw-str-label   { font-size:13px;color:var(--muted);white-space:nowrap; }
/* 2FA */
.acc-2fa-badge { font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px; }
.acc-2fa-off   { background:rgba(250,137,107,0.12);color:#FA896B; }
.acc-2fa-on    { background:rgba(19,222,185,0.12);color:#13DEB9; }
.acc-2fa-step-done .acc-2fa-num { background:#13DEB9 !important;border-color:#13DEB9 !important; }
.acc-2fa-step-title { font-size:13px;font-weight:700;color:var(--dark-text); }
.acc-2fa-step-desc  { font-size:12px;color:var(--muted); }
/* Sessions */
.acc-session-tag  { display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:8px;background:#E6FFFA;color:#0fbb8f;margin-left:6px;vertical-align:middle; }
.acc-si-desktop   { background:var(--body-bg);border-color:var(--border-color); }
.acc-si-mobile    { background:var(--body-bg);border-color:var(--border-color); }
/* Notification list (HTML uses notif vs old toggle-row structure) */
.acc-notif-list   { display:flex;flex-direction:column; }
.acc-notif-item   { display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-color); }
.acc-notif-item:last-child { border-bottom:none; }
.acc-notif-info   { flex:1;padding-right:16px; }
.acc-notif-title  { font-size:14px;font-weight:600;color:var(--dark-text);margin-bottom:2px; }
.acc-notif-desc   { font-size:12px;color:var(--muted); }
/* Toggle wrapper */
.acc-toggle-wrap  { display:flex;align-items:center;flex-shrink:0; }
.acc-toggle-label { display:none; }
/* Integration list */
.acc-integration-list { display:flex;flex-direction:column; }
.acc-int-item         { display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--border-color); }
.acc-int-item:last-child { border-bottom:none; }
.acc-int-logo         { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;flex-shrink:0; }
.acc-int-slack  { background:#4A154B; }
.acc-int-github { background:#24292E; }
.acc-int-jira   { background:#0052CC; }
.acc-int-google { background:#4285F4; }
.acc-int-status { font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px; }
.acc-int-on     { background:rgba(19,222,185,0.12);color:#0fbb8f; }
.acc-int-off    { background:rgba(250,137,107,0.12);color:#FA896B; }
/* Danger zone */
.acc-danger-header { font-size:14px;font-weight:700;color:#FA896B;padding:14px 20px;border-bottom:1px solid rgba(250,137,107,0.2); }
.acc-danger-item   { display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border-color);gap:16px;flex-wrap:wrap; }
.acc-danger-item-last { border-bottom:none; }
.acc-danger-red    { color:#FA896B !important; }
/* Dark mode stat backgrounds */
[data-bs-theme="dark"] .acc-stat-blue   { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .acc-stat-green  { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .acc-stat-purple { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .acc-stat-amber  { background:rgba(255,174,31,0.12); }
[data-bs-theme="dark"] .acc-stat-orange { background:rgba(255,174,31,0.12); }
[data-bs-theme="dark"] .acc-session-tag { background:rgba(19,222,185,0.15); }
[data-theme="dark"] .acc-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .acc-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .acc-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .acc-stat-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .acc-stat-orange { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(255,160,80,0.18)); }

/* ============================================================
   53. APP WIDGETS (wap-)
   ============================================================ */
/* Stat cards */
.wap-stat { padding:20px;border-radius:16px;position:relative; }
.wap-stat-blue   { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.wap-stat-green  { background:linear-gradient(135deg,#E6FFFA,#ccfff5); }
.wap-stat-amber  { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
.wap-stat-purple { background:linear-gradient(135deg,#F0EEFF,#e0d8ff); }
.wap-stat-top  { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.wap-stat-icon { width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px; }
.wap-icon-blue   { background:#5D87FF;color:#fff; }
.wap-icon-green  { background:#13DEB9;color:#fff; }
.wap-icon-amber  { background:#FFAE1F;color:#fff; }
.wap-icon-purple { background:#7460EE;color:#fff; }
.wap-stat-badge  { font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px; }
.wap-badge-blue   { background:#ECF2FF;color:#5D87FF; }
.wap-badge-green  { background:#E6FFFA;color:#0fbb8f; }
.wap-badge-amber  { background:#FEF5E5;color:#cc8800; }
.wap-badge-purple { background:#F0EEFF;color:#7460EE; }
.wap-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.wap-stat-label { font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px; }
.wap-stat-bar   { height:4px;background:rgba(0,0,0,0.08);border-radius:4px;overflow:hidden; }
.wap-bar-fill   { height:100%;border-radius:4px;transition:width .6s; }
.wap-bar-blue   { background:#5D87FF;width:72%; }
.wap-bar-green  { background:#13DEB9;width:28%; }
.wap-bar-amber  { background:#FFAE1F;width:100%; }
.wap-bar-purple { background:#7460EE;width:96%; }
/* Featured spotlight */
.wap-spotlight  { padding:28px;position:relative;background:linear-gradient(135deg,#ECF2FF 0%,#ffffff 60%); }
.wap-spotlight-badge { position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#FFAE1F,#FF8C00);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px; }
.wap-spotlight-icon { width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,#5D87FF,#4570EA);color:#fff;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto; }
.wap-spotlight-info { padding:0 24px; }
.wap-spotlight-name { font-size:22px;font-weight:800;color:var(--dark-text);margin-bottom:8px; }
.wap-spotlight-meta { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px; }
.wap-spotlight-cat  { background:var(--primary-light);color:var(--primary);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px; }
.wap-spotlight-rating { display:flex;align-items:center;gap:4px;font-size:13px;color:#FFAE1F; }
.wap-spotlight-rating span { font-weight:700;color:var(--dark-text); }
.wap-spotlight-rating small { color:var(--muted); }
.wap-spotlight-desc { font-size:13.5px;color:var(--body-text);line-height:1.6;margin-bottom:12px; }
.wap-spotlight-features { margin-bottom:16px;display:flex;flex-direction:column;gap:6px; }
.wap-spotlight-features li { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--body-text); }
.wap-spotlight-features li i { color:#13DEB9; }
.wap-spotlight-actions { display:flex;gap:10px; }
/* Screenshots */
.wap-screenshots { padding:0 12px; }
.wap-screenshot-main { height:160px;border-radius:14px;background:linear-gradient(135deg,#5D87FF 0%,#4570EA 100%);display:flex;align-items:center;justify-content:center;margin-bottom:10px; }
.wap-screenshot-row  { display:flex;gap:10px; }
.wap-screenshot-thumb { flex:1;height:80px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;color:#fff;font-weight:600; }
.wap-ss-inner { display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:13px; }
.wap-ss-inner i { font-size:32px; }
.wap-ss-1 { background:linear-gradient(135deg,#5D87FF,#7460EE); }
.wap-ss-2 { background:linear-gradient(135deg,#13DEB9,#0fbb8f); }
.wap-ss-3 { background:linear-gradient(135deg,#FFAE1F,#FF8C00); }
/* Category pills */
.wap-cat-pills { display:flex;flex-wrap:wrap;gap:6px; }
.wap-cat-btn   { padding:5px 12px;border-radius:20px;border:1.5px solid var(--border-color);background:transparent;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.wap-cat-btn:hover,.wap-cat-btn.active { background:var(--primary);border-color:var(--primary);color:#fff; }
.wap-cat-count { opacity:.8; }
/* App cards */
.wap-app-card  { border:1.5px solid var(--border-color);border-radius:16px;padding:16px;text-align:center;transition:all .2s;cursor:pointer;background:var(--card-bg);height:100%; }
.wap-app-card:hover { border-color:var(--primary);box-shadow:0 8px 24px rgba(93,135,255,0.12);transform:translateY(-2px); }
.wap-app-icon  { width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 10px; }
.wap-app-icon-blue   { background:#ECF2FF;color:#5D87FF; }
.wap-app-icon-teal   { background:#E0F7FA;color:#00BCD4; }
.wap-app-icon-pink   { background:#FDE8EF;color:#FC185A; }
.wap-app-icon-green  { background:#E6FFFA;color:#13DEB9; }
.wap-app-icon-orange { background:#FFF3E0;color:#FF8C00; }
.wap-app-icon-red    { background:#FDEDE8;color:#FA896B; }
.wap-app-icon-dark   { background:#f0f2f8;color:#2a3547; }
.wap-app-icon-violet { background:#F0EEFF;color:#7460EE; }
.wap-app-icon-cyan   { background:#E0F7FA;color:#0097A7; }
.wap-app-icon-amber  { background:#FEF5E5;color:#FFAE1F; }
.wap-app-name  { font-size:13px;font-weight:700;color:var(--dark-text);margin-bottom:2px; }
.wap-app-cat-tag { font-size:11px;color:var(--muted);margin-bottom:6px; }
.wap-app-stars { color:#FFAE1F;font-size:11px;margin-bottom:4px; }
.wap-app-installs { font-size:11px;color:var(--muted);margin-bottom:10px; }
.wap-app-new,.wap-app-trending { position:relative; }
.wap-app-badge-new   { position:absolute;top:-6px;right:-6px;background:#13DEB9;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px; }
.wap-app-badge-trend { position:absolute;top:-6px;right:-6px;background:#FA896B;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px; }
.wap-install-btn { font-size:12px;font-weight:700;border-radius:8px;transition:all .2s;border:1.5px solid var(--primary);color:var(--primary);background:transparent; }
.wap-install-btn:hover { background:var(--primary);color:#fff; }
.wap-installed { background:var(--success-light)!important;border-color:#13DEB9!important;color:#0fbb8f!important; }
.wap-installed:hover { background:#13DEB9!important;color:#fff!important; }
/* Trend list */
.wap-trend-list { display:flex;flex-direction:column; }
.wap-trend-item { display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border-color);transition:background .15s; }
.wap-trend-item:last-child { border-bottom:none; }
.wap-trend-item:hover { background:rgba(93,135,255,0.04); }
.wap-trend-rank   { width:28px;height:28px;border-radius:50%;background:var(--body-bg);border:1.5px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--muted);flex-shrink:0; }
.wap-rank-gold    { background:#FFF3CD;border-color:#FFAE1F;color:#cc8800; }
.wap-rank-silver  { background:#f0f2f8;border-color:#adb5bd;color:#6c757d; }
.wap-rank-bronze  { background:#FEF1EC;border-color:#FA896B;color:#c25c3a; }
.wap-trend-icon   { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
.wap-trend-info   { flex:1;min-width:0; }
.wap-trend-name   { font-size:13px;font-weight:700;color:var(--dark-text); }
.wap-trend-meta   { font-size:12px;color:var(--muted); }
.wap-trend-rating { font-size:12px;font-weight:700;color:var(--dark-text); }
/* Recent list */
.wap-recent-list { display:flex;flex-direction:column; }
.wap-recent-item { display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border-color); }
.wap-recent-item:last-child { border-bottom:none; }
.wap-recent-info { flex:1;min-width:0; }
.wap-recent-name { font-size:13px;font-weight:700;color:var(--dark-text); }
.wap-recent-desc { font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.wap-recent-time { font-size:11px;color:var(--muted);white-space:nowrap; }

/* ============================================================
   54. BANNER WIDGETS (wbn-)
   ============================================================ */
/* Stat cards */
.wbn-stat { padding:20px;border-radius:16px;display:flex;align-items:center;gap:16px; }
.wbn-stat-blue    { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.wbn-stat-emerald { background:linear-gradient(135deg,#E6FFFA,#ccfff5); }
.wbn-stat-violet  { background:linear-gradient(135deg,#F0EEFF,#e0d8ff); }
.wbn-stat-amber   { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
.wbn-stat-icon-wrap { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
.wbn-icon-blue    { background:#5D87FF;color:#fff; }
.wbn-icon-emerald { background:#13DEB9;color:#fff; }
.wbn-icon-violet  { background:#7460EE;color:#fff; }
.wbn-icon-amber   { background:#FFAE1F;color:#fff; }
.wbn-stat-body  { flex:1; }
.wbn-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1; }
.wbn-stat-label { font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px; }
.wbn-stat-trend { font-size:11px;font-weight:600;display:flex;align-items:center;gap:3px; }
.wbn-trend-up   { color:#13DEB9; }
.wbn-trend-down { color:#FA896B; }
/* Format selector */
.wbn-format-selector { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px; }
.wbn-fmt-btn { flex:1;min-width:120px;padding:12px;border:2px solid var(--border-color);border-radius:14px;background:var(--card-bg);cursor:pointer;text-align:center;transition:all .2s; }
.wbn-fmt-btn:hover,.wbn-fmt-btn.active { border-color:var(--primary);background:rgba(93,135,255,0.06); }
.wbn-fmt-visual { margin:0 auto 8px;background:rgba(93,135,255,0.15);border-radius:4px; }
.wbn-fmt-leader { width:72px;height:9px; }
.wbn-fmt-rect   { width:30px;height:25px; }
.wbn-fmt-sky    { width:16px;height:60px; }
.wbn-fmt-square { width:25px;height:25px; }
.wbn-fmt-half   { width:30px;height:60px; }
.wbn-fmt-name   { font-size:12px;font-weight:700;color:var(--dark-text);margin-bottom:2px; }
.wbn-fmt-dims   { font-size:11px;color:var(--muted); }
/* Preview stage */
.wbn-preview-stage { background:var(--body-bg);border:1.5px solid var(--border-color);border-radius:14px;overflow:hidden; }
.wbn-preview-toolbar { display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-color);flex-wrap:wrap; }
.wbn-preview-label { font-size:13px;font-weight:600;color:var(--dark-text); }
.wbn-palette-row { display:flex;gap:6px;align-items:center; }
.wbn-palette-swatch { width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s; }
.wbn-palette-swatch:hover,.wbn-palette-swatch.active { transform:scale(1.2);border-color:#fff;box-shadow:0 0 0 2px var(--primary); }
.wbn-pal-blue   { background:linear-gradient(135deg,#5D87FF,#4570EA); }
.wbn-pal-purple { background:linear-gradient(135deg,#7460EE,#5a47d4); }
.wbn-pal-green  { background:linear-gradient(135deg,#13DEB9,#0fbb8f); }
.wbn-pal-orange { background:linear-gradient(135deg,#FF8C00,#e07800); }
.wbn-pal-dark   { background:linear-gradient(135deg,#2a3547,#1a2233); }
.wbn-preview-canvas { padding:24px;display:flex;justify-content:center;align-items:center;min-height:180px; }
/* Banner templates */
.wbn-preview-banner { display:flex;align-items:center;border-radius:10px;padding:16px 24px;transition:all .3s; }
.wbn-banner-leaderboard { width:100%;max-width:640px;height:72px;justify-content:space-between;flex-direction:row; }
.wbn-banner-content { display:flex;align-items:center;gap:16px;width:100%; }
.wbn-banner-logo { font-size:13px;font-weight:800;white-space:nowrap; }
.wbn-banner-copy { font-size:12px;flex:1; }
.wbn-banner-cta  { padding:6px 14px;border-radius:6px;border:none;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap; }
.wbn-theme-blue   { background:linear-gradient(135deg,#5D87FF,#4570EA);color:#fff; }
.wbn-theme-blue .wbn-banner-cta   { background:#fff;color:#5D87FF; }
.wbn-theme-purple { background:linear-gradient(135deg,#7460EE,#5a47d4);color:#fff; }
.wbn-theme-purple .wbn-banner-cta { background:#fff;color:#7460EE; }
.wbn-theme-green  { background:linear-gradient(135deg,#13DEB9,#0fbb8f);color:#fff; }
.wbn-theme-green .wbn-banner-cta  { background:#fff;color:#0fbb8f; }
.wbn-theme-orange { background:linear-gradient(135deg,#FF8C00,#e07800);color:#fff; }
.wbn-theme-orange .wbn-banner-cta { background:#fff;color:#e07800; }
.wbn-theme-dark   { background:linear-gradient(135deg,#2a3547,#1a2233);color:#fff; }
.wbn-theme-dark .wbn-banner-cta   { background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.3); }
/* Template gallery */
.wbn-tpl-card { border:1.5px solid var(--border-color);border-radius:14px;overflow:hidden;transition:all .2s;background:var(--card-bg); }
.wbn-tpl-card:hover { border-color:var(--primary);box-shadow:0 8px 24px rgba(93,135,255,0.12);transform:translateY(-2px); }
.wbn-tpl-thumb { height:120px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center; }
.wbn-tpl-blue     { background:linear-gradient(135deg,#5D87FF,#4570EA); }
.wbn-tpl-purple   { background:linear-gradient(135deg,#7460EE,#5a47d4); }
.wbn-tpl-green    { background:linear-gradient(135deg,#13DEB9,#0fbb8f); }
.wbn-tpl-orange   { background:linear-gradient(135deg,#FF8C00,#e07800); }
.wbn-tpl-teal     { background:linear-gradient(135deg,#00BCD4,#0097A7); }
.wbn-tpl-pink     { background:linear-gradient(135deg,#FC185A,#d4144d); }
.wbn-tpl-dark     { background:linear-gradient(135deg,#2a3547,#1a2233); }
.wbn-tpl-gradient { background:linear-gradient(135deg,#5D87FF,#FC185A); }
.wbn-tpl-overlay { position:absolute;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;gap:8px;transition:opacity .2s; }
.wbn-tpl-card:hover .wbn-tpl-overlay { display:flex; }
/* Mock elements inside thumb */
.wbn-tpl-mock { display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px; }
.wbn-mock-logo,.wbn-mock-text,.wbn-mock-cta,.wbn-mock-img,.wbn-mock-star,.wbn-mock-badge,.wbn-mock-heart { border-radius:4px;background:rgba(255,255,255,0.3); }
.wbn-mock-logo { width:40px;height:8px; }
.wbn-mock-text { width:80px;height:6px; }
.wbn-mock-cta  { width:50px;height:16px;border-radius:8px; }
.wbn-mock-cta-sm { width:36px;height:12px;border-radius:6px; }
.wbn-mock-img  { width:60px;height:40px; }
.wbn-mock-star,.wbn-mock-badge,.wbn-mock-heart { width:20px;height:20px;border-radius:50%; }
.wbn-mock-white { background:rgba(255,255,255,0.5); }
.wbn-mock-cta-outline { background:transparent;border:1.5px solid rgba(255,255,255,0.5); }
.wbn-mock-cta-white { background:#fff; }
.wbn-tpl-info { padding:10px 12px; }
.wbn-tpl-name { font-size:13px;font-weight:700;color:var(--dark-text);margin-bottom:4px; }
.wbn-tpl-meta { display:flex;align-items:center;justify-content:space-between; }
.wbn-tpl-tag  { font-size:10px;font-weight:700;background:var(--primary-light);color:var(--primary);padding:2px 7px;border-radius:6px; }
.wbn-tpl-uses { font-size:11px;color:var(--muted); }
/* Performance table */
.wbn-perf-table th,.wbn-perf-table td { padding:12px 14px;font-size:13px;vertical-align:middle; }
.wbn-camp-name { display:flex;align-items:center;gap:8px;font-weight:600; }
.wbn-camp-dot  { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.wbn-dot-blue   { background:#5D87FF; }
.wbn-dot-purple { background:#7460EE; }
.wbn-dot-green  { background:#13DEB9; }
.wbn-dot-orange { background:#FF8C00; }
.wbn-fmt-badge { background:var(--primary-light);color:var(--primary);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px; }
.wbn-ctr-bar   { display:flex;align-items:center;gap:8px; }
.wbn-ctr-fill  { height:6px;border-radius:3px;background:var(--primary);transition:width .6s; }

/* ============================================================
   55. CARD WIDGETS (wcd-)
   ============================================================ */
/* Stat cards - ring style */
.wcd-stat { padding:20px;border-radius:16px;display:flex;align-items:center;gap:16px; }
.wcd-stat-blue   { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.wcd-stat-green  { background:linear-gradient(135deg,#E6FFFA,#ccfff5); }
.wcd-stat-amber  { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
.wcd-stat-purple { background:linear-gradient(135deg,#F0EEFF,#e0d8ff); }
.wcd-stat-ring { width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;font-weight:800; }
.wcd-ring-blue   { background:conic-gradient(#5D87FF 72%,#ECF2FF 72%);color:#5D87FF;box-shadow:inset 0 0 0 8px var(--card-bg); }
.wcd-ring-green  { background:conic-gradient(#13DEB9 94%,#E6FFFA 94%);color:#13DEB9;box-shadow:inset 0 0 0 8px var(--card-bg); }
.wcd-ring-amber  { background:conic-gradient(#FFAE1F 45%,#FEF5E5 45%);color:#cc8800;box-shadow:inset 0 0 0 8px var(--card-bg); }
.wcd-ring-purple { background:conic-gradient(#7460EE 98%,#F0EEFF 98%);color:#7460EE;box-shadow:inset 0 0 0 8px var(--card-bg); }
.wcd-ring-val  { font-size:14px;font-weight:800; }
.wcd-stat-info { flex:1; }
.wcd-stat-label { font-size:14px;font-weight:700;color:var(--dark-text); }
.wcd-stat-sub   { font-size:12px;color:var(--muted); }
/* Explorer layout */
.wcd-explorer  { display:flex;min-height:560px; }
.wcd-type-nav  { width:200px;flex-shrink:0;border-right:1px solid var(--border-color);padding:8px 0; }
.wcd-type-btn  { display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:none;background:transparent;cursor:pointer;transition:all .2s;text-align:left; }
.wcd-type-btn:hover { background:rgba(93,135,255,0.05); }
.wcd-type-btn.active { background:rgba(93,135,255,0.08);border-right:2px solid var(--primary); }
.wcd-type-btn i { font-size:18px;width:24px;text-align:center;color:var(--muted); }
.wcd-type-btn.active i { color:var(--primary); }
.wcd-type-text span { display:block;font-size:13px;font-weight:700;color:var(--dark-text); }
.wcd-type-text small { font-size:11px;color:var(--muted); }
.wcd-gallery-pane  { flex:1;min-width:0; }
.wcd-gallery-header { display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-color);flex-wrap:wrap;gap:8px; }
.wcd-gallery-title  { font-size:14px;font-weight:700;color:var(--dark-text); }
.wcd-complexity-filter { display:flex;gap:6px;align-items:center; }
.wcd-cplx-btn  { padding:4px 10px;border-radius:20px;border:1.5px solid var(--border-color);background:transparent;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px; }
.wcd-cplx-btn.active,.wcd-cplx-btn:hover { border-color:var(--primary);color:var(--primary); }
.wcd-cplx-dot  { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.wcd-dot-green  { background:#13DEB9; }
.wcd-dot-amber  { background:#FFAE1F; }
.wcd-dot-red    { background:#FA896B; }
.wcd-gallery-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:16px 20px; }
/* Card items in gallery */
.wcd-card-item { cursor:pointer; }
.wcd-preview-wrap { position:relative;border:1.5px solid var(--border-color);border-radius:12px;overflow:hidden;padding:12px;background:var(--body-bg);min-height:150px;display:flex;align-items:center;justify-content:center;transition:all .2s; }
.wcd-card-item:hover .wcd-preview-wrap { border-color:var(--primary);box-shadow:0 4px 16px rgba(93,135,255,0.12); }
.wcd-complexity-badge { position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px; }
.wcd-badge-simple  { background:#E6FFFA;color:#0fbb8f; }
.wcd-badge-medium  { background:#FEF5E5;color:#cc8800; }
.wcd-badge-complex { background:#FDEDE8;color:#d9734c; }
.wcd-copy-btn { position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;background:rgba(93,135,255,0.1);color:var(--primary);display:none;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:all .2s; }
.wcd-card-item:hover .wcd-copy-btn { display:flex; }
.wcd-copy-btn:hover { background:var(--primary);color:#fff; }
.wcd-card-label { font-size:12px;font-weight:700;color:var(--muted);text-align:center;margin-top:6px; }
/* Demo card styles */
.wcd-demo-profile-basic { text-align:center;width:100%;padding:8px 0; }
.wcd-demo-avatar   { width:48px;height:48px;border-radius:50%;display:block;margin:0 auto 6px; }
.wcd-demo-name     { font-size:13px;font-weight:700;color:var(--dark-text);margin-bottom:1px; }
.wcd-demo-role     { font-size:11px;color:var(--muted);margin-bottom:8px; }
.wcd-demo-actions  { display:flex;gap:6px;justify-content:center; }
.wcd-demo-profile-cover { text-align:center;width:100%;position:relative;padding-bottom:4px; }
.wcd-demo-cover    { height:40px;background:linear-gradient(135deg,#5D87FF,#7460EE);border-radius:8px 8px 0 0;margin-bottom:0; }
.wcd-avatar-cover  { margin-top:-20px;border:2px solid #fff;display:block;margin-left:auto;margin-right:auto;margin-bottom:4px; }
.wcd-demo-stats-row { display:flex;gap:8px;justify-content:center;margin-top:6px; }
.wcd-demo-stats-row div { text-align:center; }
.wcd-demo-stats-row strong { font-size:12px;font-weight:800;color:var(--dark-text);display:block; }
.wcd-demo-stats-row small  { font-size:10px;color:var(--muted); }
.wcd-demo-profile-horizontal { display:flex;align-items:center;gap:10px;width:100%; }
.wcd-demo-avatar-sm  { width:38px;height:38px;border-radius:50%;flex-shrink:0; }
.wcd-demo-name-sm    { font-size:12px;font-weight:700;color:var(--dark-text); }
.wcd-demo-role-sm    { font-size:11px;color:var(--muted);margin-bottom:3px; }
.wcd-demo-tag { display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px; }
.wcd-tag-pink { background:#FDE8EF;color:#FC185A; }
.wcd-demo-stat-basic { text-align:center;width:100%; }
.wcd-demo-stat-icon { width:40px;height:40px;border-radius:12px;background:var(--primary-light);color:var(--primary);font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px; }
.wcd-demo-stat-val   { font-size:20px;font-weight:800;color:var(--dark-text); }
.wcd-demo-stat-label { font-size:11px;color:var(--muted);font-weight:600; }
.wcd-demo-stat-chg   { font-size:11px;font-weight:700;margin-top:2px; }
.wcd-chg-up   { color:#13DEB9; }
.wcd-demo-stat-progress { width:100%; }
.wcd-demo-stat-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; }
.wcd-demo-stat-pct { font-size:13px;font-weight:800;color:var(--primary); }
.wcd-demo-prog-bar { height:6px;background:var(--border-color);border-radius:3px;margin:6px 0;overflow:hidden; }
.wcd-demo-prog-fill { height:100%;background:var(--primary);width:72%;border-radius:3px; }
.wcd-demo-media  { display:flex;gap:10px;align-items:center;width:100%; }
.wcd-demo-media-img { width:56px;height:40px;border-radius:8px;background:linear-gradient(135deg,#5D87FF,#7460EE);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0; }
.wcd-demo-media-body  { flex:1;min-width:0; }
.wcd-demo-media-title { font-size:12px;font-weight:700;color:var(--dark-text);line-height:1.3; }
.wcd-demo-media-meta  { font-size:11px;color:var(--muted); }
.wcd-demo-action { text-align:center;width:100%; }
.wcd-demo-action-icon { width:44px;height:44px;border-radius:12px;background:var(--primary-light);color:var(--primary);font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px; }
.wcd-demo-action-title { font-size:13px;font-weight:700;color:var(--dark-text); }
.wcd-demo-action-desc  { font-size:11px;color:var(--muted); }
.wcd-demo-notif { display:flex;flex-direction:column;gap:6px;width:100%; }
.wcd-demo-notif-item { display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:11px; }
.wcd-notif-success { background:#E6FFFA;color:#0fbb8f; }
.wcd-notif-warning { background:#FEF5E5;color:#cc8800; }
.wcd-notif-danger  { background:#FDEDE8;color:#d9734c; }
.wcd-demo-product { text-align:center;width:100%; }
.wcd-demo-product-img { width:56px;height:56px;border-radius:12px;background:var(--body-bg);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 6px; }
.wcd-demo-product-name  { font-size:12px;font-weight:700;color:var(--dark-text); }
.wcd-demo-product-price { font-size:16px;font-weight:800;color:var(--dark-text); }
.wcd-demo-product-price span { font-size:12px;color:var(--muted); }
.wcd-demo-product-stars { font-size:11px;margin:3px 0; }
.wcd-demo-profile-full { text-align:center;width:100%;position:relative; }
.wcd-demo-profile-bg { height:36px;background:linear-gradient(135deg,#13DEB9,#0fbb8f);border-radius:8px 8px 0 0; }
.wcd-demo-avatar-lg { width:44px;height:44px;border-radius:50%;border:2px solid #fff;margin:-22px auto 4px;display:block; }
.wcd-demo-skills { display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:4px 0; }
.wcd-skill { background:var(--primary-light);color:var(--primary);font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px; }
.wcd-demo-product-featured { text-align:center;width:100%;position:relative; }
.wcd-product-large { width:64px;height:64px;font-size:32px;margin:0 auto 6px; }
.wcd-demo-product-badge { position:absolute;top:8px;left:8px;background:#FA896B;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px; }
.wcd-demo-price-row { display:flex;gap:8px;align-items:center;justify-content:center;margin:4px 0; }
.wcd-price-old { text-decoration:line-through;color:var(--muted);font-size:12px; }
.wcd-price-new { font-size:16px;font-weight:800;color:var(--primary); }
.wcd-demo-product-meta { font-size:11px;color:var(--muted); }
.wcd-demo-product-actions { display:flex;gap:6px;justify-content:center;margin-top:6px; }
.wcd-demo-action-complex { text-align:center;width:100%; }
.wcd-demo-action-list { margin:6px 0;text-align:left; }
.wcd-demo-action-list li { font-size:11px;margin-bottom:2px;color:var(--body-text); }
.wcd-demo-price-tag { font-size:20px;font-weight:800;color:var(--primary);margin:6px 0; }
.wcd-demo-price-tag small { font-size:12px;color:var(--muted);font-weight:500; }
.wcd-icon-purple { background:#F0EEFF;color:#7460EE; }
/* Complexity chart */
.wcd-complexity-chart { display:flex;flex-direction:column;gap:14px; }
.wcd-cplx-row  { display:flex;align-items:center;gap:10px; }
.wcd-cplx-label { min-width:80px;font-size:13px;font-weight:600;color:var(--dark-text);display:flex;align-items:center;gap:6px; }
.wcd-cplx-bar-wrap { flex:1;height:8px;background:var(--border-color);border-radius:4px;overflow:hidden; }
.wcd-cplx-bar  { height:100%;border-radius:4px;transition:width .6s; }
.wcd-bar-green  { background:#13DEB9;width:62%; }
.wcd-bar-amber  { background:#FFAE1F;width:28%; }
.wcd-bar-red    { background:#FA896B;width:10%; }
.wcd-cplx-pct  { min-width:32px;font-size:12px;font-weight:700;color:var(--muted);text-align:right; }
.wcd-a11y-score { text-align:center; }
.wcd-a11y-label { font-size:12px;color:var(--muted);font-weight:600; }
.wcd-a11y-val   { font-size:24px;font-weight:800;color:var(--dark-text); }
.wcd-a11y-sub   { font-size:12px;color:#13DEB9;font-weight:600; }

/* ============================================================
   56. CHART WIDGETS (wch-)
   ============================================================ */
/* Stat cards - icon + dots style */
.wch-stat { padding:20px;border-radius:16px;display:flex;gap:14px;align-items:center; }
.wch-stat-blue   { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.wch-stat-green  { background:linear-gradient(135deg,#E6FFFA,#ccfff5); }
.wch-stat-purple { background:linear-gradient(135deg,#F0EEFF,#e0d8ff); }
.wch-stat-amber  { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
.wch-stat-left  { flex-shrink:0; }
.wch-stat-icon  { width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px; }
.wch-icon-blue   { background:#5D87FF;color:#fff; }
.wch-icon-green  { background:#13DEB9;color:#fff; }
.wch-icon-purple { background:#7460EE;color:#fff; }
.wch-icon-amber  { background:#FFAE1F;color:#fff; }
.wch-stat-right { flex:1; }
.wch-stat-val   { font-size:24px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:2px; }
.wch-stat-label { font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px; }
.wch-stat-dots  { display:flex;gap:4px; }
.wch-dot { width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,0.1);transition:background .2s; }
.wch-dot-fill          { background:#5D87FF; }
.wch-dot-fill.wch-dot-green  { background:#13DEB9; }
.wch-dot-fill.wch-dot-purple { background:#7460EE; }
.wch-dot-fill.wch-dot-amber  { background:#FFAE1F; }
/* Chart type palette */
.wch-type-palette { display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px; }
.wch-type-tile  { padding:14px 8px;border:1.5px solid var(--border-color);border-radius:12px;background:var(--card-bg);cursor:pointer;text-align:center;transition:all .2s; }
.wch-type-tile:hover,.wch-type-tile.active { border-color:var(--primary);background:rgba(93,135,255,0.07); }
.wch-tile-icon  { font-size:24px;color:var(--muted);margin-bottom:6px;transition:color .2s; }
.wch-type-tile:hover .wch-tile-icon,.wch-type-tile.active .wch-tile-icon { color:var(--primary); }
.wch-tile-label { font-size:11px;font-weight:700;color:var(--dark-text); }
/* Demo chart */
.wch-demo-chart { min-height:280px; }
/* Config panel */
.wch-config-panel { display:flex;flex-direction:column;gap:18px; }
.wch-config-group { display:flex;flex-direction:column;gap:8px; }
.wch-config-label { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted); }
.wch-scheme-row { display:flex;gap:8px; }
.wch-scheme-btn { width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s; }
.wch-scheme-btn:hover,.wch-scheme-btn.active { transform:scale(1.2);border-color:#fff;box-shadow:0 0 0 2px var(--primary); }
.wch-scheme-primary { background:var(--primary); }
.wch-scheme-success { background:#13DEB9; }
.wch-scheme-purple  { background:#7460EE; }
.wch-scheme-warning { background:#FFAE1F; }
.wch-scheme-danger  { background:#FA896B; }
.wch-scheme-multi   { background:linear-gradient(135deg,#5D87FF,#13DEB9,#FFAE1F); }
.wch-period-btn { padding:5px 12px;border-radius:8px;border:1.5px solid var(--border-color);background:transparent;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s; }
.wch-period-btn.active,.wch-period-btn:hover { background:var(--primary);border-color:var(--primary);color:#fff; }
.wch-toggle-row { display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--body-text); }
.wch-prop-list  { display:flex;flex-direction:column;gap:8px; }
.wch-prop-item  { display:flex;justify-content:space-between;align-items:center;font-size:12px; }
.wch-prop-item span  { color:var(--muted); }
.wch-prop-item strong { color:var(--dark-text); }
/* Mini chart cards */
.wch-mini-card  { border:1.5px solid var(--border-color);border-radius:12px;padding:14px;background:var(--card-bg);transition:all .2s; }
.wch-mini-card:hover { border-color:var(--primary);box-shadow:0 4px 16px rgba(93,135,255,0.1); }
.wch-mini-label { font-size:12px;font-weight:700;color:var(--dark-text);margin-bottom:8px; }
.wch-mini-chart { height:90px; }
.wch-mini-meta  { display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px; }

/* ============================================================
   57. DATA WIDGETS (wdt-)
   ============================================================ */
/* Stat cards - mini bar groups */
.wdt-stat { padding:20px;border-radius:16px; }
.wdt-stat-blue   { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.wdt-stat-teal   { background:linear-gradient(135deg,#E0F7FA,#b3eef5); }
.wdt-stat-amber  { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
.wdt-stat-purple { background:linear-gradient(135deg,#F0EEFF,#e0d8ff); }
.wdt-stat-number { font-size:28px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.wdt-stat-label  { font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px; }
.wdt-stat-bar-group { display:flex;align-items:flex-end;gap:3px;height:28px;margin-bottom:8px; }
.wdt-mini-bar    { flex:1;border-radius:3px 3px 0 0;transition:height .6s; }
.wdt-mb-blue   { background:#5D87FF; }
.wdt-mb-teal   { background:#00BCD4; }
.wdt-mb-amber  { background:#FFAE1F; }
.wdt-mb-purple { background:#7460EE; }
.wdt-stat-trend { font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px; }
.wdt-trend-up  { color:#13DEB9; }
/* Showcase layout */
.wdt-showcase  { display:flex;min-height:520px; }
.wdt-style-nav { width:180px;flex-shrink:0;border-right:1px solid var(--border-color);padding:8px 0; }
.wdt-style-nav-head { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:10px 16px 4px; }
.wdt-style-btn { display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;border:none;background:transparent;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:all .2s; }
.wdt-style-btn:hover { background:rgba(93,135,255,0.05);color:var(--dark-text); }
.wdt-style-btn.active { background:rgba(93,135,255,0.08);color:var(--primary);border-left:3px solid var(--primary); }
.wdt-style-btn i { font-size:14px;width:18px;text-align:center; }
.wdt-table-pane { flex:1;min-width:0;display:flex;flex-direction:column; }
/* Toolbar */
.wdt-toolbar { display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-color);flex-wrap:wrap; }
.wdt-search-wrap { position:relative;flex:1;min-width:160px;max-width:280px; }
.wdt-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px; }
.wdt-search-input { width:100%;padding:7px 12px 7px 32px;border:1.5px solid var(--border-color);border-radius:8px;font-size:13px;font-family:inherit;outline:none;background:var(--card-bg);color:var(--dark-text);transition:border-color .2s; }
.wdt-search-input:focus { border-color:var(--primary); }
.wdt-col-dropdown { padding:8px 0;min-width:160px; }
.wdt-col-check { display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:6px 14px; }
.wdt-col-check input { accent-color:var(--primary); }
/* Table */
.wdt-main-table th { font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:12px 14px;white-space:nowrap; }
.wdt-main-table td { padding:11px 14px;font-size:13px;vertical-align:middle; }
.wdt-col-check-all { width:40px; }
.wdt-sortable { cursor:pointer;user-select:none; }
.wdt-sortable:hover { color:var(--primary); }
.wdt-sort-icon { font-size:11px;opacity:.5;margin-left:4px; }
.wdt-id-badge  { background:var(--body-bg);border:1px solid var(--border-color);color:var(--muted);font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;font-family:monospace; }
.wdt-name-cell { display:flex;align-items:center;gap:8px;font-weight:600;color:var(--dark-text); }
.wdt-row-avatar { width:28px;height:28px;border-radius:50%;flex-shrink:0; }
.wdt-action-btns { display:flex;gap:4px; }
.wdt-dot { font-size:6px!important;vertical-align:middle; }
/* Pagination */
.wdt-pagination-bar { display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border-color);flex-wrap:wrap; }
.wdt-pag-info { font-size:13px;color:var(--muted);flex:1; }
.wdt-pag-perpage { display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted); }
.wdt-perpage-sel { width:72px;font-size:12px; }

/* ============================================================
   58. FEED WIDGETS (wfd-)
   ============================================================ */
/* Stat cards - glow style */
.wfd-stat { padding:20px;border-radius:16px;position:relative;overflow:hidden; }
.wfd-stat-blue   { background:linear-gradient(135deg,#ECF2FF,#dce8ff); }
.wfd-stat-green  { background:linear-gradient(135deg,#E6FFFA,#ccfff5); }
.wfd-stat-purple { background:linear-gradient(135deg,#F0EEFF,#e0d8ff); }
.wfd-stat-amber  { background:linear-gradient(135deg,#FEF5E5,#fde6b8); }
.wfd-stat-glow   { position:absolute;width:80px;height:80px;border-radius:50%;filter:blur(30px);opacity:.4;top:-10px;right:-10px; }
.wfd-glow-blue   { background:#5D87FF; }
.wfd-glow-green  { background:#13DEB9; }
.wfd-glow-purple { background:#7460EE; }
.wfd-glow-amber  { background:#FFAE1F; }
.wfd-stat-content { position:relative;z-index:1; }
.wfd-stat-icon  { width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px; }
.wfd-stat-blue .wfd-stat-icon   { background:#5D87FF;color:#fff; }
.wfd-stat-green .wfd-stat-icon  { background:#13DEB9;color:#fff; }
.wfd-stat-purple .wfd-stat-icon { background:#7460EE;color:#fff; }
.wfd-stat-amber .wfd-stat-icon  { background:#FFAE1F;color:#fff; }
.wfd-stat-val   { font-size:26px;font-weight:800;color:var(--dark-text);line-height:1;margin-bottom:4px; }
.wfd-stat-label { font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px; }
.wfd-stat-desc  { font-size:11.5px;color:var(--muted);line-height:1.5; }
/* Format tabs */
.wfd-format-tabs { display:flex;gap:4px;flex-wrap:wrap; }
.wfd-fmt-tab  { display:flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px solid transparent;border-radius:10px;background:transparent;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.wfd-fmt-tab:hover { background:rgba(93,135,255,0.06);color:var(--dark-text); }
.wfd-fmt-tab.active { background:rgba(93,135,255,0.1);border-color:rgba(93,135,255,0.2);color:var(--primary); }
/* Composer */
.wfd-composer  { display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--border-color); }
.wfd-compose-avatar { width:40px;height:40px;border-radius:50%;flex-shrink:0; }
.wfd-compose-box { flex:1;display:flex;flex-direction:column;gap:8px; }
.wfd-compose-input { width:100%;padding:10px 14px;border:1.5px solid var(--border-color);border-radius:10px;font-size:13px;font-family:inherit;outline:none;background:var(--body-bg);color:var(--dark-text);transition:border-color .2s; }
.wfd-compose-input:focus { border-color:var(--primary); }
.wfd-compose-actions { display:flex;align-items:center;gap:4px; }
.wfd-compose-btn { width:32px;height:32px;border:none;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--muted);cursor:pointer;transition:all .15s; }
.wfd-compose-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary); }
/* Filter chips */
.wfd-filter-chips { display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border-color);flex-wrap:wrap; }
.wfd-chip { display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1.5px solid var(--border-color);background:transparent;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.wfd-chip:hover,.wfd-chip.active { background:var(--primary);border-color:var(--primary);color:#fff; }
/* Feed list */
.wfd-feed-list  { display:flex;flex-direction:column; }
.wfd-post { display:flex;gap:12px;padding:18px 16px;border-bottom:1px solid var(--border-color);position:relative; }
.wfd-post:last-child { border-bottom:none; }
.wfd-post-timeline-line { position:absolute;left:36px;top:58px;width:2px;background:var(--border-color);bottom:-1px;z-index:0; }
.wfd-tl-last { bottom:50%; }
.wfd-post-avatar { width:40px;height:40px;border-radius:50%;flex-shrink:0;position:relative;z-index:1; }
.wfd-post-body  { flex:1;min-width:0; }
.wfd-post-header { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px; }
.wfd-post-author { font-size:14px;font-weight:700;color:var(--dark-text); }
.wfd-post-role   { font-size:12px;color:var(--muted); }
.wfd-post-time   { font-size:11px;color:var(--muted); }
.wfd-post-opts   { }
.wfd-opts-btn { background:transparent;border:none;width:28px;height:28px;border-radius:8px;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s; }
.wfd-opts-btn:hover { background:rgba(93,135,255,0.08);color:var(--primary); }
.wfd-post-text { font-size:13.5px;color:var(--body-text);line-height:1.6;margin-bottom:10px; }
/* Media */
.wfd-post-media { margin-bottom:10px; }
.wfd-media-grid-1 { }
.wfd-media-img  { height:160px;background:linear-gradient(135deg,#5D87FF,#7460EE);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:32px;gap:6px;overflow:hidden; }
.wfd-media-img span { font-size:13px;font-weight:600; }
.wfd-media-tall { height:180px; }
/* Reactions */
.wfd-post-reactions { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
.wfd-react-btns { display:flex;gap:4px; }
.wfd-react-btn  { display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1.5px solid var(--border-color);background:transparent;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s; }
.wfd-react-btn:hover { border-color:var(--primary);color:var(--primary); }
.wfd-react-liked { border-color:#5D87FF!important;background:rgba(93,135,255,0.08)!important;color:var(--primary)!important; }
.wfd-react-avatars { display:flex;align-items:center; }
.wfd-react-avatars img { width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-right:-6px; }
.wfd-react-more { font-size:11px;color:var(--muted);font-weight:600;margin-left:10px; }
/* Reply preview */
.wfd-reply-preview { display:flex;gap:8px;align-items:flex-start;margin-top:10px; }
.wfd-reply-preview img { width:28px;height:28px;border-radius:50%;flex-shrink:0; }
.wfd-reply-bubble { background:var(--body-bg);border:1px solid var(--border-color);border-radius:10px;padding:8px 12px;font-size:12.5px;color:var(--body-text);flex:1; }
/* Link preview */
.wfd-link-card  { display:flex;border:1.5px solid var(--border-color);border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;transition:all .2s; }
.wfd-link-card:hover { border-color:var(--primary); }
.wfd-link-thumb { width:70px;min-height:70px;background:linear-gradient(135deg,#7460EE,#5a47d4);display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;flex-shrink:0; }
.wfd-link-info  { flex:1;padding:10px 12px;min-width:0; }
.wfd-link-title { font-size:13px;font-weight:700;color:var(--dark-text);margin-bottom:2px; }
.wfd-link-domain { font-size:11px;color:var(--primary);margin-bottom:4px; }
.wfd-link-desc  { font-size:12px;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
/* Video */
.wfd-video-thumb { position:relative;height:150px;background:linear-gradient(135deg,#2a3547,#1a2233);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;cursor:pointer; }
.wfd-video-play { font-size:44px;color:#fff;opacity:.9; }
.wfd-video-dur  { position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,0.7);color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px; }
/* Activity */
.wfd-post-activity { }
.wfd-activity-icon { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;z-index:1;position:relative; }
.wfd-act-blue   { background:#ECF2FF;color:#5D87FF; }
.wfd-act-purple { background:#F0EEFF;color:#7460EE; }
.wfd-act-green  { background:#E6FFFA;color:#13DEB9; }
.wfd-activity-text { font-size:13px;color:var(--body-text);line-height:1.5;margin-bottom:6px; }
.wfd-activity-meta { display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);flex-wrap:wrap; }
.wfd-commit-list { margin-top:8px;display:flex;flex-direction:column;gap:4px; }
.wfd-commit-item { font-size:12px;color:var(--body-text);display:flex;align-items:center;gap:8px; }
.wfd-commit-sha { background:var(--body-bg);border:1px solid var(--border-color);color:var(--primary);font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;font-family:monospace;flex-shrink:0; }
/* Members list */
.wfd-member-list { display:flex;flex-direction:column; }
.wfd-member-item { display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-color); }
.wfd-member-item:last-child { border-bottom:none; }
.wfd-member-avatar { width:38px;height:38px;border-radius:50%;flex-shrink:0; }
.wfd-member-info   { flex:1;min-width:0; }
.wfd-member-name   { font-size:13px;font-weight:700;color:var(--dark-text);display:flex;align-items:center;gap:6px; }
.wfd-member-role   { font-size:11px;color:var(--muted); }
.wfd-online-dot { width:8px;height:8px;border-radius:50%;background:#13DEB9;flex-shrink:0; }
.wfd-away-dot   { width:8px;height:8px;border-radius:50%;background:#FFAE1F;flex-shrink:0; }
/* Trending */
.wfd-trending-list { display:flex;flex-direction:column;gap:10px; }
.wfd-trending-item { display:flex;align-items:center;gap:10px; }
.wfd-trending-rank { width:22px;height:22px;border-radius:50%;background:var(--body-bg);border:1.5px solid var(--border-color);font-size:11px;font-weight:800;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.wfd-trending-info { flex:1; }
.wfd-trending-tag   { font-size:13px;font-weight:700;color:var(--primary); }
.wfd-trending-count { font-size:11px;color:var(--muted); }
/* Feed format info */
.wfd-format-info-list { display:flex;flex-direction:column;gap:8px; }
.wfd-fmt-info-item { display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;transition:background .2s; }
.wfd-fmt-info-item:hover { background:rgba(93,135,255,0.05); }
.wfd-fmt-active { background:rgba(93,135,255,0.08)!important; }
.wfd-fmt-info-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }
.wfd-fii-blue   { background:#ECF2FF;color:#5D87FF; }
.wfd-fii-green  { background:#E6FFFA;color:#13DEB9; }
.wfd-fii-purple { background:#F0EEFF;color:#7460EE; }
.wfd-fii-amber  { background:#FEF5E5;color:#FFAE1F; }
.wfd-fii-red    { background:#FDEDE8;color:#FA896B; }
.wfd-fmt-info-name { font-size:13px;font-weight:700;color:var(--dark-text); }
.wfd-fmt-info-desc { font-size:11px;color:var(--muted);line-height:1.4; }

/* btn-xs utility */
.btn-xs { padding:3px 8px;font-size:11px;line-height:1.5; }

/* purple badge utilities */
.bg-primary-subtle  { background:rgba(93,135,255,0.1)!important; }
.text-primary       { color:var(--primary)!important; }
.bg-purple-subtle   { background:rgba(116,96,238,0.1)!important; }
.text-purple        { color:var(--purple)!important; }
.bg-success-subtle  { background:rgba(19,222,185,0.1)!important; }
.text-success       { color:#13DEB9!important; }
.bg-warning-subtle  { background:rgba(255,174,31,0.1)!important; }
.text-warning       { color:#cc8800!important; }
.bg-danger-subtle   { background:rgba(250,137,107,0.1)!important; }
.text-danger        { color:#FA896B!important; }
.bg-primary-lt { background:rgba(93,135,255,0.1); }

/* Banner format shape classes */
.wbn-banner-rectangle  { max-width:300px;min-height:90px;flex-direction:column;text-align:center; }
.wbn-banner-skyscraper { max-width:160px;min-height:200px;flex-direction:column;text-align:center; }
.wbn-banner-square     { max-width:250px;min-height:130px;flex-direction:column;text-align:center; }
.wbn-banner-halfpage   { max-width:300px;min-height:200px;flex-direction:column;text-align:center; }
.wbn-banner-rectangle .wbn-banner-content,
.wbn-banner-skyscraper .wbn-banner-content,
.wbn-banner-square .wbn-banner-content,
.wbn-banner-halfpage .wbn-banner-content { flex-direction:column;gap:10px;text-align:center; }

/* wdt mini bar heights via data-pct attribute — set by JS or CSS */
.wdt-mini-bar[data-pct="100"] { height:28px; }
.wdt-mini-bar[data-pct="82"]  { height:23px; }
.wdt-mini-bar[data-pct="64"]  { height:18px; }
.wdt-mini-bar[data-pct="90"]  { height:25px; }
.wdt-mini-bar[data-pct="48"]  { height:13px; }
.wdt-mini-bar[data-pct="78"]  { height:22px; }
.wdt-mini-bar[data-pct="95"]  { height:27px; }
.wdt-mini-bar[data-pct="60"]  { height:17px; }
.wdt-mini-bar[data-pct="85"]  { height:24px; }
.wdt-mini-bar[data-pct="42"]  { height:12px; }
.wdt-mini-bar[data-pct="72"]  { height:20px; }
.wdt-mini-bar[data-pct="88"]  { height:25px; }
.wdt-mini-bar[data-pct="54"]  { height:15px; }
.wdt-mini-bar[data-pct="96"]  { height:27px; }

/* wbn-ctr-bar fill widths via data-pct */
.wbn-ctr-fill[data-pct="38"] { width:38%; }
.wbn-ctr-fill[data-pct="35"] { width:35%; }
.wbn-ctr-fill[data-pct="46"] { width:46%; }

/* ============================================================
   DARK MODE: stat card pastel backgrounds for widget/page sections
   ============================================================ */
[data-bs-theme="dark"] .wap-stat-blue,[data-bs-theme="dark"] .wap-spotlight { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .wap-stat-green   { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .wap-stat-amber   { background:rgba(255,174,31,0.12); }
[data-bs-theme="dark"] .wap-stat-purple  { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .wap-badge-blue   { background:rgba(93,135,255,0.2);color:#7ba4ff; }
[data-bs-theme="dark"] .wap-badge-green  { background:rgba(19,222,185,0.2);color:#13DEB9; }
[data-bs-theme="dark"] .wap-badge-amber  { background:rgba(255,174,31,0.2);color:#FFAE1F; }
[data-bs-theme="dark"] .wap-badge-purple { background:rgba(116,96,238,0.2);color:#9f8ff5; }
[data-theme="dark"] .wap-badge-blue   { background: rgba(93,135,255,0.16);  color: #a3bbff; }
[data-theme="dark"] .wap-badge-green  { background: rgba(19,222,185,0.14);  color: #5FECD4; }
[data-theme="dark"] .wap-badge-amber  { background: rgba(255,174,31,0.14);  color: #ffd27a; }
[data-theme="dark"] .wap-badge-purple { background: rgba(116,96,238,0.16);  color: #b3a6f8; }
[data-bs-theme="dark"] .wap-app-icon-blue   { background:rgba(93,135,255,0.18);color:#7ba4ff; }
[data-bs-theme="dark"] .wap-app-icon-teal   { background:rgba(0,188,212,0.18);color:#26C6DA; }
[data-bs-theme="dark"] .wap-app-icon-pink   { background:rgba(252,24,90,0.18);color:#FC185A; }
[data-bs-theme="dark"] .wap-app-icon-green  { background:rgba(19,222,185,0.18);color:#13DEB9; }
[data-bs-theme="dark"] .wap-app-icon-orange { background:rgba(255,140,0,0.18);color:#FF8C00; }
[data-bs-theme="dark"] .wap-app-icon-red    { background:rgba(250,137,107,0.18);color:#FA896B; }
[data-bs-theme="dark"] .wap-app-icon-violet { background:rgba(116,96,238,0.18);color:#9f8ff5; }
[data-bs-theme="dark"] .wap-app-icon-cyan   { background:rgba(0,151,167,0.18);color:#26C6DA; }
[data-bs-theme="dark"] .wap-app-icon-amber  { background:rgba(255,174,31,0.18);color:#FFAE1F; }
[data-theme="dark"] .wap-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .wap-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .wap-stat-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .wap-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .wap-spotlight      { background: linear-gradient(135deg, rgba(93,135,255,0.12) 0%, rgba(93,135,255,0.04) 60%); }
[data-theme="dark"] .wap-spotlight-cat  { background: rgba(93,135,255,0.16); color: #a3bbff; }
[data-theme="dark"] .wap-spotlight-badge { background: linear-gradient(135deg, rgba(255,174,31,0.80), rgba(255,140,0,0.90)); }
[data-theme="dark"] .wap-app-icon-blue   { background: rgba(93,135,255,0.16);  color: #a3bbff; }
[data-theme="dark"] .wap-app-icon-teal   { background: rgba(0,188,212,0.16);   color: #4DD9EC; }
[data-theme="dark"] .wap-app-icon-pink   { background: rgba(252,24,90,0.16);   color: #ff6b9d; }
[data-theme="dark"] .wap-app-icon-green  { background: rgba(19,222,185,0.14);  color: #5FECD4; }
[data-theme="dark"] .wap-app-icon-orange { background: rgba(255,140,0,0.16);   color: #ffb347; }
[data-theme="dark"] .wap-app-icon-red    { background: rgba(250,137,107,0.14); color: #f9a58e; }
[data-theme="dark"] .wap-app-icon-dark   { background: rgba(255,255,255,0.08); color: #bec8d8; }
[data-theme="dark"] .wap-app-icon-violet { background: rgba(116,96,238,0.16);  color: #b3a6f8; }
[data-theme="dark"] .wap-app-icon-cyan   { background: rgba(0,151,167,0.16);   color: #4DD9EC; }
[data-theme="dark"] .wap-app-icon-amber  { background: rgba(255,174,31,0.14);  color: #ffd27a; }
[data-theme="dark"] .wap-installed { background: rgba(19,222,185,0.14)!important; border-color: rgba(19,222,185,0.40)!important; color: #5FECD4!important; }
[data-theme="dark"] .wap-rank-gold   { background: rgba(255,174,31,0.14);  border-color: rgba(255,174,31,0.40);  color: #ffd27a; }
[data-theme="dark"] .wap-rank-silver { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: #bec8d8; }
[data-theme="dark"] .wap-rank-bronze { background: rgba(250,137,107,0.14); border-color: rgba(250,137,107,0.40); color: #f9a58e; }
[data-bs-theme="dark"] .wbn-stat-blue    { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .wbn-stat-emerald { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .wbn-stat-violet  { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .wbn-stat-amber   { background:rgba(255,174,31,0.12); }
[data-theme="dark"] .wbn-stat-blue    { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .wbn-stat-emerald { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .wbn-stat-violet  { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .wbn-stat-amber   { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .wbn-fmt-badge { background: rgba(93,135,255,0.16); color: #a3bbff; }
[data-theme="dark"] .wbn-tpl-tag  { background: rgba(93,135,255,0.16); color: #a3bbff; }
[data-bs-theme="dark"] .wcd-stat-blue    { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .wcd-stat-green   { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .wcd-stat-amber   { background:rgba(255,174,31,0.12); }
[data-bs-theme="dark"] .wcd-stat-purple  { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .wch-stat-blue    { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .wch-stat-green   { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .wch-stat-purple  { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .wch-stat-amber   { background:rgba(255,174,31,0.12); }
[data-theme="dark"] .wch-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .wch-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .wch-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .wch-stat-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-bs-theme="dark"] .wdt-stat-blue    { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .wdt-stat-teal    { background:rgba(0,188,212,0.12); }
[data-bs-theme="dark"] .wdt-stat-amber   { background:rgba(255,174,31,0.12); }
[data-bs-theme="dark"] .wdt-stat-purple  { background:rgba(116,96,238,0.12); }
[data-theme="dark"] .wdt-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .wdt-stat-teal   { background: linear-gradient(135deg, rgba(0,188,212,0.14), rgba(0,220,240,0.20)); }
[data-theme="dark"] .wdt-stat-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-theme="dark"] .wdt-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-bs-theme="dark"] .wfd-stat-blue    { background:rgba(93,135,255,0.12); }
[data-bs-theme="dark"] .wfd-stat-green   { background:rgba(19,222,185,0.12); }
[data-bs-theme="dark"] .wfd-stat-purple  { background:rgba(116,96,238,0.12); }
[data-bs-theme="dark"] .wfd-stat-amber   { background:rgba(255,174,31,0.12); }
[data-theme="dark"] .wfd-stat-blue   { background: linear-gradient(135deg, rgba(93,135,255,0.16), rgba(73,180,255,0.20)); }
[data-theme="dark"] .wfd-stat-green  { background: linear-gradient(135deg, rgba(19,222,185,0.14), rgba(0,200,160,0.20)); }
[data-theme="dark"] .wfd-stat-purple { background: linear-gradient(135deg, rgba(116,96,238,0.16), rgba(150,120,255,0.22)); }
[data-theme="dark"] .wfd-stat-amber  { background: linear-gradient(135deg, rgba(255,174,31,0.14), rgba(255,210,80,0.18)); }
[data-bs-theme="dark"] .wfd-act-blue     { background:rgba(93,135,255,0.18);color:#7ba4ff; }
[data-bs-theme="dark"] .wfd-act-purple   { background:rgba(116,96,238,0.18);color:#9f8ff5; }
[data-bs-theme="dark"] .wfd-act-green    { background:rgba(19,222,185,0.18);color:#13DEB9; }
[data-theme="dark"] .wfd-act-blue   { background: rgba(93,135,255,0.16);  color: #a3bbff; }
[data-theme="dark"] .wfd-act-purple { background: rgba(116,96,238,0.16);  color: #b3a6f8; }
[data-theme="dark"] .wfd-act-green  { background: rgba(19,222,185,0.14);  color: #5FECD4; }
[data-bs-theme="dark"] .wfd-fii-blue     { background:rgba(93,135,255,0.18);color:#7ba4ff; }
[data-bs-theme="dark"] .wfd-fii-green    { background:rgba(19,222,185,0.18);color:#13DEB9; }
[data-bs-theme="dark"] .wfd-fii-purple   { background:rgba(116,96,238,0.18);color:#9f8ff5; }
[data-bs-theme="dark"] .wfd-fii-amber    { background:rgba(255,174,31,0.18);color:#FFAE1F; }
[data-bs-theme="dark"] .wfd-fii-red      { background:rgba(250,137,107,0.18);color:#FA896B; }
[data-theme="dark"] .wfd-fii-blue   { background: rgba(93,135,255,0.16);  color: #a3bbff; }
[data-theme="dark"] .wfd-fii-green  { background: rgba(19,222,185,0.14);  color: #5FECD4; }
[data-theme="dark"] .wfd-fii-purple { background: rgba(116,96,238,0.16);  color: #b3a6f8; }
[data-theme="dark"] .wfd-fii-amber  { background: rgba(255,174,31,0.14);  color: #ffd27a; }
[data-theme="dark"] .wfd-fii-red    { background: rgba(250,137,107,0.14); color: #f9a58e; }

/* ===================================================================
   BOOTSTRAP PAGINATION — Modern & Attractive Override
   =================================================================== */
.pagination {
  gap: 4px;
  flex-wrap: wrap;
}
.page-item + .page-item { margin-left: 0; }

.page-link {
  border-radius: 8px !important;
  border: 1.5px solid var(--border-color, #dee2e6);
  color: var(--primary, #5D87FF);
  background-color: var(--card-bg, #fff);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 13px;
  min-width: 36px;
  text-align: center;
  line-height: 1.4;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.page-link:hover {
  background-color: rgba(93,135,255,0.1);
  border-color: #5D87FF;
  color: #5D87FF;
  box-shadow: 0 3px 10px rgba(93,135,255,0.2);
  transform: translateY(-1px);
  text-decoration: none;
}
.page-link:focus {
  box-shadow: 0 0 0 3px rgba(93,135,255,0.22);
  outline: none;
  border-color: #5D87FF;
}
.page-item.active .page-link {
  background: linear-gradient(135deg, #5D87FF 0%, #4570EA 100%);
  border-color: #5D87FF;
  color: #fff;
  box-shadow: 0 4px 14px rgba(93,135,255,0.4);
  font-weight: 700;
  z-index: 2;
}
.page-item.active .page-link:hover {
  background: linear-gradient(135deg, #4570EA 0%, #3460d4 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(93,135,255,0.45);
  color: #fff;
}
.page-item.disabled .page-link {
  background-color: var(--card-bg, #fff);
  border-color: var(--border-color, #dee2e6);
  color: var(--text-muted, #adb5bd);
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* Small variant */
.pagination-sm .page-link {
  padding: 4px 9px;
  font-size: 0.78rem;
  min-width: 30px;
  border-radius: 6px !important;
}

/* Large variant */
.pagination-lg .page-link {
  padding: 9px 17px;
  font-size: 0.95rem;
  min-width: 44px;
  border-radius: 10px !important;
}

/* Dark mode */
[data-bs-theme="dark"] .page-link {
  background-color: var(--card-bg, #2a3547);
  border-color: var(--border-color, #3a4758);
  color: #7ba4ff;
}
[data-bs-theme="dark"] .page-link:hover {
  background-color: rgba(93,135,255,0.15);
  border-color: #5D87FF;
  color: #a0bcff;
}
[data-bs-theme="dark"] .page-item.active .page-link {
  color: #fff;
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--card-bg, #2a3547);
  border-color: var(--border-color, #3a4758);
  color: var(--text-muted, #6c757d);
}

/* ============================================================
   Section 59: DATATABLES — BASIC  (tbl- prefix)
   ============================================================ */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding: 14px 2px 12px; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 13px; font-weight: 500; color: var(--text-muted, #8a9099);
  display: flex; align-items: center; gap: 6px; margin-bottom: 0;
}
.dataTables_wrapper .dataTables_filter input[type="search"] {
  border: 1px solid var(--border-color, #dee2e6); border-radius: 8px;
  padding: 7px 12px; font-size: 13px;
  background: var(--card-bg, #fff); color: var(--body-color, #2a3547);
  min-width: 210px; margin-left: 6px; transition: border-color .2s, box-shadow .2s;
}
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  outline: none; border-color: #5D87FF; box-shadow: 0 0 0 3px rgba(93,135,255,.12);
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-color, #dee2e6); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; margin: 0 6px;
  background: var(--card-bg, #fff); color: var(--body-color, #2a3547); cursor: pointer;
}
.dt-sep {
  clear: both; height: 0;
  border-top: 1px solid var(--border-color, #e8ecef); margin: 0 0 16px;
}
.dataTables_wrapper table.dataTable { margin-top: 0 !important; margin-bottom: 12px !important; }
.dataTables_wrapper .dataTables_info { font-size: 13px; color: var(--text-muted, #8a9099); padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 7px !important; padding: 5px 11px !important; font-size: 13px !important;
  color: var(--body-color, #2a3547) !important; border: 1px solid transparent !important;
  margin: 0 2px !important; transition: all .2s !important; background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(93,135,255,.1) !important; border-color: #5D87FF !important; color: #5D87FF !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg,#5D87FF,#4a6fe8) !important;
  border-color: #5D87FF !important; color: #fff !important;
  font-weight: 600 !important; box-shadow: 0 2px 8px rgba(93,135,255,.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--border-color, #ccc) !important; cursor: default !important; background: transparent !important;
}
.dt-bot-sep {
  clear: both; height: 0;
  border-top: 1px solid var(--border-color, #e8ecef); margin: 0 0 10px;
}

/* ============================================================
   Section 60: DATATABLES — ADVANCED  (adv- prefix)
   ============================================================ */
table.dataTable thead th { white-space: nowrap; }
.select-checkbox { cursor: pointer; }
.row-selected { background-color: rgba(93,135,255,0.08) !important; }

.adv-filter-panel {
  background: linear-gradient(135deg, rgba(93,135,255,0.06) 0%, rgba(19,222,185,0.04) 100%);
  border: 1.5px solid var(--border-color, #e3e8ef); border-radius: 12px;
  padding: 16px 20px 14px 24px; margin-bottom: 20px; position: relative;
}
.adv-filter-panel::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, #5D87FF 0%, #13DEB9 100%); border-radius: 12px 0 0 12px;
}
.adv-filter-panel .form-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted, #6c757d); margin-bottom: 5px; display: block;
}
.adv-filter-panel .form-select {
  border: 1.5px solid var(--border-color, #dee2e6); border-radius: 8px;
  font-size: 0.85rem; padding: 6px 32px 6px 12px;
  background-color: var(--card-bg, #fff); color: var(--body-color, #2a3547);
  min-width: 160px; transition: border-color 0.2s, box-shadow 0.2s;
}
.adv-filter-panel .form-select:focus {
  border-color: #5D87FF; box-shadow: 0 0 0 3px rgba(93,135,255,0.18); outline: none;
}
.adv-filter-panel #clearFilters {
  border-radius: 8px; font-size: 0.83rem; font-weight: 600; padding: 6px 16px;
  border: 1.5px solid #fc4b6c; color: #fc4b6c; background: rgba(252,75,108,0.08);
  transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 5px;
}
.adv-filter-panel #clearFilters:hover {
  background: #fc4b6c; border-color: #fc4b6c; color: #fff;
  box-shadow: 0 4px 12px rgba(252,75,108,0.35); transform: translateY(-1px);
}
.adv-filter-panel .fp-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5D87FF; display: flex; align-items: center; gap: 5px; margin-bottom: 12px;
}
.dataTables_wrapper .dataTables_filter input[type="search"] {
  border: 1.5px solid var(--border-color, #dee2e6); border-radius: 20px;
  padding: 6px 14px 6px 36px; font-size: 0.85rem; min-width: 220px;
  color: var(--body-color, #2a3547); background-color: var(--card-bg, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.742 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border-color: #5D87FF; box-shadow: 0 0 0 3px rgba(93,135,255,0.18); outline: none;
}
.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--border-color, #dee2e6); border-radius: 8px;
  padding: 5px 28px 5px 10px; font-size: 0.85rem;
  background-color: var(--card-bg, #fff); color: var(--body-color, #2a3547);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dataTables_wrapper .dataTables_length select:focus {
  border-color: #5D87FF; box-shadow: 0 0 0 3px rgba(93,135,255,0.18); outline: none;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--body-color, #2a3547); font-size: 0.85rem; }
.dt-adv-sep { border-top: 1px solid var(--border-color, #e3e8ef); margin: 0 0 16px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #5D87FF 0%, #4570EA 100%) !important;
  border-color: #5D87FF !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: rgba(93,135,255,0.1) !important; border-color: #5D87FF !important; color: #5D87FF !important;
}
.dt-buttons .btn {
  margin-right: 5px !important; font-size: 0.8rem !important; font-weight: 600 !important;
  border-radius: 8px !important; padding: 6px 13px !important; letter-spacing: 0.01em !important;
  transition: all 0.18s ease !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.dt-buttons .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important; }
.dt-buttons .btn-secondary { color: #fff !important; }
.dt-buttons .btn-success   { color: #fff !important; }
.dt-buttons .btn-danger    { color: #fff !important; }
.dt-buttons .btn-info      { color: #fff !important; background-color: #0dcaf0 !important; border-color: #0dcaf0 !important; }
.dt-buttons .btn-warning   { color: #212529 !important; }

/* ============================================================
   Section 61: FORM WIZARD  (w1- w2- w3- w4- prefix)
   ============================================================ */
@keyframes wFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.rv-label { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted,#8a9099); font-weight:600; margin-bottom:3px; }
.rv-value { font-weight:500; }

.w1-steps { display:flex; justify-content:center; align-items:flex-start; padding:28px 16px 20px; position:relative; }
.w1-step  { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.w1-step::before { content:''; position:absolute; top:23px; left:-50%; width:100%; height:2px; background:var(--border-color,#e8ecef); z-index:0; }
.w1-step:first-child::before { display:none; }
.w1-dot { width:46px; height:46px; border-radius:50%; background:var(--card-bg,#fff); border:2px solid var(--border-color,#e8ecef); color:var(--text-muted,#8a9099); display:flex; align-items:center; justify-content:center; font-size:18px; position:relative; z-index:1; transition:all .3s; }
.w1-step.active .w1-dot { background:#5D87FF; border-color:#5D87FF; color:#fff; box-shadow:0 0 0 7px rgba(93,135,255,.14); }
.w1-step.done  .w1-dot { background:#13DEB9; border-color:#13DEB9; color:#fff; }
.w1-step.done::before  { background:#13DEB9; }
.w1-step.active::before { background:linear-gradient(to right,#13DEB9,#5D87FF); }
.w1-lbl { margin-top:8px; font-size:11px; font-weight:600; color:var(--text-muted,#8a9099); text-align:center; white-space:nowrap; }
.w1-step.active .w1-lbl { color:#5D87FF; }
.w1-step.done  .w1-lbl { color:#13DEB9; }
.w1-panel { display:none; animation:wFadeUp .3s ease; }
.w1-panel.active { display:block; }
.theme-pick { border:2px solid var(--border-color,#e8ecef); border-radius:10px; padding:14px 10px; cursor:pointer; text-align:center; transition:all .2s; }
.theme-pick:hover { border-color:#5D87FF; }
.theme-pick.sel  { border-color:#5D87FF; background:rgba(93,135,255,.07); }

.w2-side { background:linear-gradient(160deg,#0b7a55 0%,#13DEB9 100%); border-radius:12px 0 0 12px; padding:32px 22px; display:flex; flex-direction:column; min-height:520px; }
.w2-brand { color:#fff; margin-bottom:28px; }
.w2-sitem { display:flex; align-items:center; gap:14px; padding:10px 0; position:relative; color:rgba(255,255,255,.55); transition:color .2s; }
.w2-sitem+.w2-sitem::before { content:''; position:absolute; top:0; left:17px; width:2px; height:10px; background:rgba(255,255,255,.2); }
.w2-sitem.active { color:#fff; }
.w2-sitem.done   { color:rgba(255,255,255,.85); }
.w2-sdot { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; transition:all .3s; }
.w2-sitem.active .w2-sdot { background:#fff; color:#0b7a55; border-color:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.18); }
.w2-sitem.done   .w2-sdot { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.6); color:#fff; }
.w2-summary { background:rgba(0,0,0,.15); border-radius:10px; padding:16px; margin-top:auto; color:#fff; }
.w2-panel { display:none; animation:wFadeUp .3s ease; }
.w2-panel.active { display:block; }

.w3-hdr { background:linear-gradient(135deg,#5a33d6,#7460EE,#9c73f8); border-radius:12px 12px 0 0; padding:28px 24px 22px; color:#fff; }
.w3-dots { display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.w3-dot-wrap { display:flex; align-items:center; }
.w3-dot { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:rgba(255,255,255,.65); transition:all .3s; cursor:default; }
.w3-dot.active { background:#fff; color:#7460EE; border-color:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.18); }
.w3-dot.done   { background:rgba(255,255,255,.35); border-color:rgba(255,255,255,.7); color:#fff; }
.w3-line { width:44px; height:2px; background:rgba(255,255,255,.2); }
.w3-line.done { background:rgba(255,255,255,.65); }
.w3-panel { display:none; animation:wFadeUp .3s ease; }
.w3-panel.active { display:block; }
.avatar-opt { width:52px; height:52px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:all .2s; }
.avatar-opt.sel { border-color:#7460EE; box-shadow:0 0 0 3px rgba(116,96,238,.25); }
.goal-card { border:2px solid var(--border-color,#e8ecef); border-radius:10px; padding:14px 12px; cursor:pointer; text-align:center; transition:all .2s; }
.goal-card:hover { border-color:#7460EE; }
.goal-card.sel { border-color:#7460EE; background:rgba(116,96,238,.07); }

.w4-hdr { background:linear-gradient(135deg,#e84118,#FFAE1F); border-radius:12px 12px 0 0; overflow:hidden; }
.w4-tabs { display:flex; }
.w4-tab { flex:1; padding:18px 10px; display:flex; align-items:center; justify-content:center; gap:9px; color:rgba(255,255,255,.55); border-bottom:3px solid transparent; transition:all .2s; position:relative; }
.w4-tab.active { color:#fff; border-bottom-color:#fff; background:rgba(255,255,255,.12); }
.w4-tab.done   { color:rgba(255,255,255,.8); }
.w4-num { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.w4-tab.active .w4-num { background:#fff; color:#e84118; }
.w4-tab.done   .w4-num { background:rgba(255,255,255,.35); }
.w4-tab-lbl { font-size:12px; font-weight:600; }
.w4-panel { display:none; animation:wFadeUp .3s ease; }
.w4-panel.active { display:block; }
.member-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; background:rgba(232,65,24,.08); border-radius:20px; font-size:12px; font-weight:600; color:#e84118; margin:3px; border:1px solid rgba(232,65,24,.15); }
.member-tag img { width:22px; height:22px; border-radius:50%; }
.stat-strip { background:var(--card-bg,#fff); border-radius:12px; padding:18px 22px; border:1px solid var(--border-color,#e8ecef); }
.stat-strip-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
@media(max-width:991px){ .w2-side { border-radius:12px 12px 0 0; min-height:auto; } }

/* ============================================================
   Section 62: FORM — BASIC  (frm- prefix)
   ============================================================ */
.star-rating { display:flex; flex-direction:row-reverse; gap:4px; }
.star-rating input { display:none; }
.star-rating label { font-size:28px; color:#dee2e6; cursor:pointer; transition:color 0.1s; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color:#FFAE1F; }
[data-theme="dark"] .star-rating label { color: #3a4a62; }
.form-icon-header { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.card-number-input { letter-spacing:3px; font-family:monospace; font-size:18px; }

/* ============================================================
   Section 63: UI — ACCORDION  (acc- prefix)
   ============================================================ */
.acc-grad .accordion-button:not(.collapsed) { color:#fff; }
.acc-grad .accordion-button:not(.collapsed)::after { filter:brightness(0) invert(1); }
#gradAcc1 .accordion-button:not(.collapsed) { background:linear-gradient(135deg,#5D87FF,#4570EA); }
#gradAcc2 .accordion-button:not(.collapsed) { background:linear-gradient(135deg,#13DEB9,#02b89d); }
#gradAcc3 .accordion-button:not(.collapsed) { background:linear-gradient(135deg,#FFAE1F,#e89e10); color:#1e1e2d !important; }
#gradAcc3 .accordion-button:not(.collapsed)::after { filter:none; }
#gradAcc4 .accordion-button:not(.collapsed) { background:linear-gradient(135deg,#FA896B,#f06a45); }
#gradAcc5 .accordion-button:not(.collapsed) { background:linear-gradient(135deg,#7928CA,#6b21a8); }
.acc-border-item { border:1px solid var(--bs-border-color) !important; border-radius:10px !important; overflow:hidden; margin-bottom:.6rem; }
.acc-border-item:last-child { margin-bottom:0; }
.nested-inner .accordion-button { padding:.55rem 1rem; font-size:.875rem; }
.nested-inner .accordion-body   { padding:.4rem 1rem .7rem 2.2rem; font-size:.84rem; }

/* ============================================================
   Section 64: UI — BUTTONS
   ============================================================ */
.btn-gradient-1 { background:linear-gradient(135deg,#5D87FF,#13DEB9); border:none; color:#fff; }
.btn-gradient-2 { background:linear-gradient(135deg,#FA896B,#FFAE1F); border:none; color:#fff; }
.btn-gradient-3 { background:linear-gradient(135deg,#7928CA,#5D87FF); border:none; color:#fff; }
.btn-gradient-4 { background:linear-gradient(135deg,#13DEB9,#11C2D9); border:none; color:#fff; }
.btn-gradient-5 { background:linear-gradient(135deg,#FF416C,#FF4B2B); border:none; color:#fff; }
.btn-gradient-6 { background:linear-gradient(135deg,#f7971e,#ffd200); border:none; color:#212529; }
.btn-soft-primary   { background:rgba(93,135,255,0.12);  color:#5D87FF;  border:none; }
.btn-soft-success   { background:rgba(19,222,185,0.12);  color:#13DEB9;  border:none; }
.btn-soft-danger    { background:rgba(250,137,107,0.12); color:#FA896B;  border:none; }
.btn-soft-warning   { background:rgba(255,174,31,0.12);  color:#FFAE1F;  border:none; }
.btn-soft-info      { background:rgba(83,155,255,0.12);  color:#539BFF;  border:none; }
.btn-soft-secondary { background:rgba(108,117,125,0.12); color:#6c757d;  border:none; }
.btn-soft-primary:hover   { background:rgba(93,135,255,0.22);  color:#5D87FF; }
.btn-soft-success:hover   { background:rgba(19,222,185,0.22);  color:#13DEB9; }
.btn-soft-danger:hover    { background:rgba(250,137,107,0.22); color:#FA896B; }
.btn-soft-warning:hover   { background:rgba(255,174,31,0.22);  color:#FFAE1F; }
.btn-soft-info:hover      { background:rgba(83,155,255,0.22);  color:#539BFF; }
.btn-xs { padding:.2rem .5rem; font-size:.75rem; }
.btn-icon-40 { width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.demo-section { padding:1.25rem; background:var(--bs-tertiary-bg,#f8f9fa); border-radius:10px; border:1px solid var(--bs-border-color,#dee2e6); }

/* ============================================================
   Section 65: UI — CARD CUSTOMS
   ============================================================ */
.gradient-card-header { padding:24px 20px; color:#fff; border-radius:12px 12px 0 0; }
.gh-primary { background:linear-gradient(135deg,#5D87FF,#4FC3F7); }
.gh-success { background:linear-gradient(135deg,#13DEB9,#00BCD4); }
.gh-danger  { background:linear-gradient(135deg,#FA896B,#f44336); }
.gh-warning { background:linear-gradient(135deg,#FFAE1F,#FF6F00); }
.gh-purple  { background:linear-gradient(135deg,#7C3AED,#A855F7); }
.gh-pink    { background:linear-gradient(135deg,#EC4899,#F43F5E); }
.profile-card-cover { height:90px; border-radius:12px 12px 0 0; }
.profile-card-avatar { width:80px; height:80px; border-radius:50%; border:4px solid #fff; margin-top:-40px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,0.12); }
.social-icon-btn { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; border:1px solid #e8ecef; }
.star-filled { color:#FFAE1F; }
.star-empty  { color:#dee2e6; }
.blog-card-img { height:160px; object-fit:cover; border-radius:12px 12px 0 0; }
.service-card-icon { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 16px; }
.testimonial-quote { font-size:48px; line-height:1; color:#5D87FF; opacity:0.3; font-family:Georgia,serif; }
.task-card-priority { width:10px; height:10px; border-radius:50%; display:inline-block; }
.notif-left-border { border-left:4px solid; border-radius:0 12px 12px 0; }
.metric-number { font-size:2rem; font-weight:800; line-height:1; }
.achievement-medal { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 12px; }
.team-skill-tag { font-size:11px; padding:2px 10px; border-radius:20px; }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); }
.card-img-top-180 { height:180px; object-fit:cover; border-radius:12px 12px 0 0; }
.avatar-overlap { margin-right:-8px; }
.card-icon-56 { width:56px; height:56px; font-size:24px; border-radius:12px; display:flex; align-items:center; justify-content:center; }

/* ============================================================
   Section 66: UI — CARD WEATHER
   ============================================================ */
.weather-main   { background:linear-gradient(135deg,#1a6fd4,#2196F3,#03A9F4); color:#fff; border-radius:16px; padding:32px; }
.weather-sunny  { background:linear-gradient(135deg,#f7971e,#ffd200,#FF8C00); }
.weather-rainy  { background:linear-gradient(135deg,#4a7fb5,#2c3e50,#546E8A); }
.weather-cloudy { background:linear-gradient(135deg,#636fa4,#8a9bc0,#7D8DAA); }
.weather-snowy  { background:linear-gradient(135deg,#74b9ff,#a9c9f5,#9dbfe8); }
.weather-stormy { background:linear-gradient(135deg,#2c3e50,#3d3f56,#4a4d6a); }
.weather-icon-lg { font-size:72px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.forecast-day { text-align:center; padding:12px 8px; border-radius:12px; cursor:pointer; transition:background 0.2s; }
.forecast-day:hover { background:rgba(255,255,255,0.1); }
.forecast-day.active { background:rgba(255,255,255,0.2); }
.hourly-item { min-width:70px; text-align:center; padding:12px 8px; border-radius:12px; flex-shrink:0; }
.hourly-scroll { overflow-x:auto; display:flex; gap:8px; padding-bottom:4px; }
.hourly-scroll::-webkit-scrollbar { height:4px; }
.hourly-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.3); border-radius:2px; }
.city-weather-card { border-radius:12px; padding:20px; color:#fff; position:relative; overflow:hidden; cursor:pointer; transition:transform 0.2s,box-shadow 0.2s; }
.city-weather-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.2); }
.city-weather-card::after { content:''; position:absolute; right:-20px; top:-20px; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,0.08); }
.aqi-bar { height:12px; border-radius:6px; background:linear-gradient(to right,#4caf50,#ffeb3b,#ff9800,#f44336,#9c27b0,#795548); position:relative; }
.aqi-needle { position:absolute; top:-4px; width:4px; height:20px; background:#333; border-radius:2px; transform:translateX(-50%); }
.uv-badge { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; margin:0 auto; }
.compass-rose { position:relative; width:100px; height:100px; margin:0 auto; }
.compass-needle { position:absolute; top:50%; left:50%; width:4px; height:40px; background:linear-gradient(to bottom,#f44336 50%,#aaa 50%); transform-origin:bottom center; border-radius:2px; }
.weather-stat { text-align:center; padding:12px; }
.weather-stat .value { font-size:1.4rem; font-weight:700; }

/* ============================================================
   Section 67: UI — CARDS (supplement)
   ============================================================ */
.ribbon { position:absolute; top:12px; right:-4px; background:#5D87FF; color:#fff; font-size:11px; font-weight:600; padding:3px 12px; border-radius:3px 0 0 3px; }
.ribbon::after { content:''; position:absolute; right:0; bottom:-7px; border:4px solid #3a5fd9; border-right-color:transparent; border-bottom-color:transparent; }
.ribbon-success { background:#13DEB9; }
.ribbon-danger  { background:#FA896B; }
.ribbon-warning { background:#FFAE1F; }
.card-overlay-bg { background:linear-gradient(135deg,#5D87FF 0%,#49BEFF 100%); min-height:160px; }
.card-img-overlay-custom { background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 100%); }
.stat-card-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.avatar-card-img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,0.12); }
.pricing-feature { list-style:none; padding:0; }
.pricing-feature li { padding:7px 0; border-bottom:1px solid #f0f0f0; font-size:14px; }
.pricing-feature li i { margin-right:8px; }
.card-tab-content { padding:16px 0 0; }
.rating-star { color:#FFAE1F; }
.card-cover-80 { height:80px; border-radius:12px 12px 0 0; }
.card-avatar-mt { margin-top:-40px; }

/* ============================================================
   Section 68: UI — BADGE
   ============================================================ */
.badge-outline-primary   { border:1.5px solid #5D87FF; color:#5D87FF;  background:transparent; }
.badge-outline-success   { border:1.5px solid #13DEB9; color:#13DEB9;  background:transparent; }
.badge-outline-danger    { border:1.5px solid #FA896B; color:#FA896B;  background:transparent; }
.badge-outline-warning   { border:1.5px solid #FFAE1F; color:#FFAE1F;  background:transparent; }
.badge-outline-info      { border:1.5px solid #539BFF; color:#539BFF;  background:transparent; }
.badge-outline-secondary { border:1.5px solid #6c757d; color:#6c757d;  background:transparent; }
.badge-outline-dark      { border:1.5px solid #212529; color:#212529;  background:transparent; }
.dot-badge { width:8px; height:8px; border-radius:50%; display:inline-block; }
.badge-purple { background:rgba(121,40,202,0.12); color:#7928CA; }
.badge-teal   { background:rgba(17,194,217,0.12);  color:#11C2D9; }
.badge-xs { font-size:0.65em; }
.badge-sm { font-size:0.75em; }
.badge-lg { font-size:1em; padding:.4em .75em; }
.badge-xl { font-size:1.15em; padding:.45em .9em; }

/* ============================================================
   Section 69: UI — CAROUSEL
   ============================================================ */
.carousel-slide    { height:320px; display:flex; align-items:center; justify-content:center; border-radius:12px; }
.carousel-slide-sm { height:220px; display:flex; align-items:center; justify-content:center; border-radius:12px; }
.carousel-testimonial { min-height:200px; display:flex; flex-direction:column; justify-content:center; }
.testimonial-card { padding:2rem; border-radius:12px; }
.cs-grad-1 { background:linear-gradient(135deg,#5D87FF,#13DEB9); }
.cs-grad-2 { background:linear-gradient(135deg,#FA896B,#FFAE1F); }
.cs-grad-3 { background:linear-gradient(135deg,#7928CA,#5D87FF); }
.cs-grad-4 { background:linear-gradient(135deg,#11C2D9,#5D87FF); }
.cs-grad-5 { background:linear-gradient(135deg,#FA896B,#7928CA); }
.cs-grad-6 { background:linear-gradient(135deg,#13DEB9,#FFAE1F); }

/* ============================================================
   Section 70: UI — DROPDOWNS
   ============================================================ */
.dropdown-item i { width:20px; }
.mega-dropdown { min-width:600px; padding:1rem; }
.mega-dropdown-col h6 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:#6c757d; margin-bottom:.75rem; }
.mega-dropdown-col a.dropdown-item { font-size:.875rem; padding:.35rem .75rem; border-radius:6px; }
.dd-scroll-menu { max-height:200px; overflow-y:auto; }

/* ============================================================
   Section 71: UI — GRID
   ============================================================ */
.grid-box          { padding:.75rem .5rem; border-radius:8px; text-align:center; font-size:.8rem; font-weight:600; margin-bottom:0; }
.grid-box-primary  { background:rgba(93,135,255,.15);  color:#5D87FF; }
.grid-box-success  { background:rgba(19,222,185,.15);  color:#02b89d; }
.grid-box-warning  { background:rgba(255,174,31,.15);  color:#c98d00; }
.grid-box-danger   { background:rgba(250,137,107,.15); color:#c85a3a; }
.grid-box-info     { background:rgba(83,155,255,.15);  color:#0c63e4; }
.grid-box-purple   { background:rgba(121,40,202,.15);  color:#7928CA; }
.grid-box-teal     { background:rgba(17,194,217,.15);  color:#0da8bd; }
.grid-box-dark     { background:rgba(33,37,41,.12);    color:#212529; }

/* ============================================================
   Section 72: UI — LISTS
   ============================================================ */
.list-fancy .list-group-item { border-left:3px solid transparent; transition:.15s; }
.list-fancy .list-group-item:hover { border-left-color:#5D87FF; background:rgba(93,135,255,.04); }
.user-list-item { padding:.85rem 1rem; }
.user-list-item:hover { background:rgba(93,135,255,.04); }
.gradient-border-list .list-group-item { border-left:4px solid; }
.list-bullet-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.list-icon-box { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ============================================================
   Section 73: UI — MODALS
   ============================================================ */
.modal-trigger-card { padding:1.5rem; border-radius:12px; border:1px dashed var(--bs-border-color,#dee2e6); text-align:center; transition:.2s; cursor:pointer; }
.modal-trigger-card:hover { border-color:#5D87FF; background:rgba(93,135,255,.04); }
.modal-trigger-card .icon-box { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:1.5rem; }
.modal-icon-box { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }

/* ============================================================
   Section 74: UI — PAGINATION (supplement)
   ============================================================ */
.pagination-rounded .page-link { border-radius:50% !important; width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0; }

/* ============================================================
   Section 75: UI — SPINNERS
   ============================================================ */
.skeleton { background:linear-gradient(90deg,#e9ecef 25%,#f8f9fa 50%,#e9ecef 75%); background-size:200% 100%; animation:skeleton-shimmer 1.4s infinite; border-radius:.375rem; }
@keyframes skeleton-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.skeleton-avatar { width:46px; height:46px; border-radius:50%; }
.skeleton-line    { height:10px; margin-bottom:.5rem; }
.skeleton-line-sm { height:8px; width:60%; }
.skeleton-img     { height:140px; border-radius:.5rem; margin-bottom:.75rem; }
.skeleton-btn     { height:34px; width:90px; border-radius:6px; }
[data-theme="dark"] .skeleton { background:linear-gradient(90deg,#2a2f3a 25%,#343944 50%,#2a2f3a 75%); background-size:200% 100%; }

.ring-spinner { display:inline-block; width:46px; height:46px; border-radius:50%; border:4px solid rgba(93,135,255,.2); border-top-color:#5D87FF; animation:ring-spin .75s linear infinite; }
.ring-spinner-sm { width:28px; height:28px; border-width:3px; }
.ring-spinner-lg { width:64px; height:64px; border-width:5px; }
@keyframes ring-spin { to { transform:rotate(360deg); } }
.ring-spinner-success { border-color:rgba(19,222,185,.2);  border-top-color:#13DEB9; }
.ring-spinner-danger  { border-color:rgba(250,137,107,.2); border-top-color:#FA896B; }
.ring-spinner-warning { border-color:rgba(255,174,31,.2);  border-top-color:#FFAE1F; }
.ring-spinner-info    { border-color:rgba(73,190,255,.2);  border-top-color:#49BEFF; }

.dual-ring { display:inline-block; width:46px; height:46px; border-radius:50%; border:4px solid transparent; border-top-color:#5D87FF; border-bottom-color:#49BEFF; animation:ring-spin .7s linear infinite; }
.tri-ring  { display:inline-block; width:46px; height:46px; border-radius:50%; border:4px solid transparent; border-top-color:#5D87FF; border-right-color:#13DEB9; border-bottom-color:#FA896B; animation:ring-spin .8s linear infinite; }

.dot-pulse { display:flex; gap:6px; align-items:center; }
.dot-pulse span { width:10px; height:10px; border-radius:50%; background:#5D87FF; animation:dot-bounce .9s infinite ease-in-out both; }
.dot-pulse span:nth-child(1) { animation-delay:-.32s; }
.dot-pulse span:nth-child(2) { animation-delay:-.16s; }
.dot-pulse span:nth-child(3) { animation-delay:0s; }
@keyframes dot-bounce { 0%,80%,100% { transform:scale(0); opacity:.3; } 40% { transform:scale(1); opacity:1; } }

.dot-wave { display:flex; gap:5px; align-items:flex-end; height:26px; }
.dot-wave span { width:8px; height:8px; border-radius:50%; background:#13DEB9; animation:dot-wave-anim .9s infinite ease-in-out; }
.dot-wave span:nth-child(1) { animation-delay:0s; }
.dot-wave span:nth-child(2) { animation-delay:.15s; }
.dot-wave span:nth-child(3) { animation-delay:.3s; }
.dot-wave span:nth-child(4) { animation-delay:.45s; }
.dot-wave span:nth-child(5) { animation-delay:.6s; }
@keyframes dot-wave-anim { 0%,40%,100% { transform:translateY(0); } 20% { transform:translateY(-12px); } }

.bar-pulse { display:flex; gap:4px; align-items:flex-end; height:36px; }
.bar-pulse span { width:6px; border-radius:3px; background:#FA896B; animation:bar-grow 1s infinite ease-in-out; }
.bar-pulse span:nth-child(1) { animation-delay:-.4s;  height:60%; }
.bar-pulse span:nth-child(2) { animation-delay:-.2s;  height:80%; }
.bar-pulse span:nth-child(3) { animation-delay:0s;    height:100%; }
.bar-pulse span:nth-child(4) { animation-delay:-.2s;  height:80%; }
.bar-pulse span:nth-child(5) { animation-delay:-.4s;  height:60%; }
@keyframes bar-grow { 0%,40%,100% { transform:scaleY(.5); opacity:.4; } 20% { transform:scaleY(1); opacity:1; } }

.progress-ring-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.progress-ring-wrap .ring-label { position:absolute; font-size:.75rem; font-weight:700; color:#5D87FF; }
.progress-ring circle.track { stroke:rgba(93,135,255,.15); fill:none; }
.progress-ring circle.fill  { fill:none; stroke:#5D87FF; stroke-linecap:round; stroke-dasharray:157; stroke-dashoffset:50; transform-origin:50% 50%; animation:ring-fill 1.8s ease-in-out infinite alternate; }
@keyframes ring-fill { 0% { stroke-dashoffset:140; } 100% { stroke-dashoffset:20; } }

.orbit-spinner { display:inline-block; position:relative; width:52px; height:52px; }
.orbit-spinner::before,.orbit-spinner::after { content:''; position:absolute; border-radius:50%; }
.orbit-spinner::before { width:52px; height:52px; border:3px solid rgba(93,135,255,.15); top:0; left:0; }
.orbit-spinner::after  { width:10px; height:10px; background:#5D87FF; top:0; left:50%; margin-left:-5px; animation:orbit-spin 1s linear infinite; transform-origin:5px 26px; }
@keyframes orbit-spin { to { transform:rotate(360deg); } }

.flip-coin { display:inline-block; width:36px; height:36px; background:linear-gradient(135deg,#5D87FF,#49BEFF); border-radius:50%; animation:flip-3d 1.2s infinite ease-in-out; }
@keyframes flip-3d { 0% { transform:rotateY(0deg); } 50% { transform:rotateY(180deg); } 100% { transform:rotateY(360deg); } }

.square-morph { display:inline-block; width:36px; height:36px; background:linear-gradient(135deg,#FA896B,#FFAE1F); animation:sq-morph 1.4s infinite ease-in-out; }
@keyframes sq-morph { 0%,100% { border-radius:4px; transform:rotate(0deg); } 25% { border-radius:50%; transform:rotate(90deg); } 50% { border-radius:4px; transform:rotate(180deg); } 75% { border-radius:50%; transform:rotate(270deg); } }

.spinner-overlay-card { position:relative; min-height:200px; }
.spinner-overlay { position:absolute; inset:0; background:rgba(255,255,255,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:inherit; z-index:10; backdrop-filter:blur(2px); }
[data-theme="dark"] .spinner-overlay { background:rgba(30,34,44,.88); }
.spinner-demo-box { display:flex; align-items:center; justify-content:center; min-height:80px; background:rgba(93,135,255,.04); border-radius:.5rem; border:1px dashed rgba(93,135,255,.2); }
.spinner-label { font-size:.72rem; color:#8a96b0; margin-top:.5rem; text-align:center; }

/* ============================================================
   Section 76: UI — TABS
   ============================================================ */
.nav-tabs-underline .nav-link { border:none; border-bottom:3px solid transparent; border-radius:0; color:var(--bs-secondary-color); padding:.75rem 1.25rem; font-weight:500; }
.nav-tabs-underline .nav-link.active { border-bottom-color:#5D87FF; color:#5D87FF; background:transparent; }
.nav-tabs-underline .nav-link:hover:not(.active) { border-bottom-color:rgba(93,135,255,.3); color:#5D87FF; }
.tab-content-panel { padding:1.5rem; border:1px solid var(--bs-border-color,#dee2e6); border-top:none; border-radius:0 0 8px 8px; }
.tab-content-panel-pills { padding:1.5rem; border:1px solid var(--bs-border-color,#dee2e6); border-radius:8px; margin-top:.5rem; }
.scrollable-tabs { flex-wrap:nowrap; overflow-x:auto; }
.scrollable-tabs::-webkit-scrollbar { height:3px; }
.scrollable-tabs::-webkit-scrollbar-thumb { background:#dee2e6; border-radius:10px; }

/* ============================================================
   Section 77: UI — TOOLTIP / POPOVER
   ============================================================ */
.info-icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgba(93,135,255,.15); color:#5D87FF; font-size:.75rem; cursor:help; }
/* Dark theme — Bootstrap tooltip */
[data-theme="dark"] .tooltip .tooltip-inner { background: #1e2a3a; color: #eaf0fb; border: 1px solid #3a4a62; }
[data-theme="dark"] .tooltip.bs-tooltip-top    .tooltip-arrow::before { border-top-color:    #3a4a62; }
[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #3a4a62; }
[data-theme="dark"] .tooltip.bs-tooltip-start  .tooltip-arrow::before { border-left-color:   #3a4a62; }
[data-theme="dark"] .tooltip.bs-tooltip-end    .tooltip-arrow::before { border-right-color:  #3a4a62; }
/* Dark theme — Bootstrap popover */
[data-theme="dark"] .popover { --bs-popover-bg: #1e2a3a; --bs-popover-border-color: #3a4a62; --bs-popover-header-bg: #131d2a; --bs-popover-header-color: #eaf0fb; --bs-popover-body-color: #bec8d8; background: #1e2a3a; border-color: #3a4a62; }
[data-theme="dark"] .popover-header { background: #131d2a; color: #eaf0fb; border-bottom-color: #3a4a62; }
[data-theme="dark"] .popover-body   { color: #bec8d8; }
[data-theme="dark"] .popover .popover-arrow::before { border-color: #3a4a62 transparent; }
[data-theme="dark"] .popover .popover-arrow::after  { border-color: #1e2a3a transparent; }
/* Dark theme — info icon */
[data-theme="dark"] .info-icon { background: rgba(93,135,255,0.20); color: #a3bbff; }

/* ============================================================
   Section 78: UI — TYPOGRAPHY
   ============================================================ */
.font-demo-row { padding:.75rem 0; border-bottom:1px solid var(--bs-border-color,#dee2e6); }
.font-demo-row:last-child { border-bottom:none; }
.color-swatch { width:100%; height:60px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; }
.code-block { background:#1e1e2e; color:#cdd6f4; padding:1rem 1.25rem; border-radius:10px; font-family:'Courier New',monospace; font-size:.875rem; line-height:1.6; }
.code-block .kw  { color:#cba6f7; }
.code-block .str { color:#a6e3a1; }
.code-block .fn  { color:#89b4fa; }
.code-block .cm  { color:#6c7086; }

/* ============================================================
   Section 79: FORM — CHECKBOX & RADIO
   ============================================================ */
.form-check-input.check-primary:checked { background-color:#5D87FF; border-color:#5D87FF; }
.form-check-input.check-success:checked { background-color:#13DEB9; border-color:#13DEB9; }
.form-check-input.check-danger:checked  { background-color:#FA896B; border-color:#FA896B; }
.form-check-input.check-warning:checked { background-color:#FFAE1F; border-color:#FFAE1F; }
.radio-card { border:2px solid #e8ecef; border-radius:12px; padding:16px; cursor:pointer; transition:all 0.2s; text-align:center; }
.radio-card:hover { border-color:#5D87FF; background:#f0f5ff; }
.radio-card.selected { border-color:#5D87FF; background:#eef2ff; }
.radio-card input { display:none; }
[data-theme="dark"] .radio-card { border-color: var(--border-color); }
[data-theme="dark"] .radio-card:hover   { border-color: var(--primary); background: rgba(93,135,255,0.08); }
[data-theme="dark"] .radio-card.selected { border-color: var(--primary); background: rgba(93,135,255,0.12); }
.checkbox-rich-label { display:flex; align-items:center; gap:12px; padding:12px; border-radius:8px; border:1px solid #e8ecef; margin-bottom:8px; cursor:pointer; transition:background 0.2s; }
.checkbox-rich-label:hover { background:#f8f9fa; }
.checkbox-rich-label input { flex-shrink:0; }
[data-theme="dark"] .checkbox-rich-label { border-color: var(--border-color); color: var(--body-color); }
[data-theme="dark"] .checkbox-rich-label:hover { background: rgba(255,255,255,0.04); color: var(--body-color); }

/* ============================================================
   Section 80: FORM — FILE UPLOAD
   ============================================================ */
.dropzone { border:2px dashed #c8d0da; border-radius:16px; padding:48px 24px; text-align:center; cursor:pointer; transition:all 0.3s; background:#fafbfc; }
.dropzone:hover,.dropzone.dragover { border-color:#5D87FF; background:#eef2ff; }
.dropzone .dz-icon { font-size:48px; color:#5D87FF; margin-bottom:16px; }
.dropzone h6 { font-weight:600; color:#333; margin-bottom:8px; }
.dropzone p  { color:#8a9099; font-size:14px; margin-bottom:16px; }
.file-list-item { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #e8ecef; border-radius:8px; margin-bottom:8px; background:#fff; }
.file-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; }
.file-icon-pdf   { background:#fff0ec; color:#FA896B; }
.file-icon-excel { background:#e6f8f4; color:#13DEB9; }
[data-theme="dark"] .file-list-item { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .file-icon-pdf   { background: rgba(250,137,107,0.14); }
[data-theme="dark"] .file-icon-excel { background: rgba(19,222,185,0.14); }
.file-icon-word  { background:#eef2ff; color:#5D87FF; }
.file-icon-image { background:#fff8e6; color:#FFAE1F; }
.file-icon-video { background:#f3ecff; color:#7C3AED; }
.file-icon-zip   { background:#e8ecef; color:#6c757d; }
[data-theme="dark"] .file-icon-word  { background: rgba(93,135,255,0.14);  color: #a3bbff; }
[data-theme="dark"] .file-icon-image { background: rgba(255,174,31,0.14);  color: #ffd27a; }
[data-theme="dark"] .file-icon-video { background: rgba(124,58,237,0.16);  color: #c4b5fd; }
[data-theme="dark"] .file-icon-zip   { background: rgba(255,255,255,0.08); color: #bec8d8; }
.img-upload-slot { width:100px; height:100px; border:2px dashed #c8d0da; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; overflow:hidden; position:relative; background:#fafbfc; }
.img-upload-slot:hover { border-color:#5D87FF; background:#eef2ff; }
.img-upload-slot img { width:100%; height:100%; object-fit:cover; }
[data-theme="dark"] .dropzone { border-color: #3a4a62; background: rgba(255,255,255,0.03); }
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.dragover { border-color: var(--primary); background: rgba(93,135,255,0.08); }
[data-theme="dark"] .dropzone h6 { color: var(--heading-color); }
[data-theme="dark"] .dropzone p  { color: var(--muted); }
[data-theme="dark"] .img-upload-slot { border-color: #3a4a62; background: rgba(255,255,255,0.03); }
[data-theme="dark"] .img-upload-slot:hover { border-color: var(--primary); background: rgba(93,135,255,0.08); }
.img-upload-slot .remove-img { position:absolute; top:4px; right:4px; width:22px; height:22px; background:rgba(0,0,0,0.6); border-radius:50%; display:none; align-items:center; justify-content:center; color:#fff; font-size:12px; cursor:pointer; }
.img-upload-slot:hover .remove-img { display:flex; }
.avatar-upload-area { width:120px; height:120px; border-radius:50%; border:3px dashed #c8d0da; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; transition:all 0.2s; position:relative; background:#fafbfc; }
.avatar-upload-area:hover { border-color:#5D87FF; }
.avatar-upload-area img { width:100%; height:100%; object-fit:cover; }
.avatar-upload-overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); color:#fff; text-align:center; padding:6px; font-size:11px; }
.img-preview-box { max-height:240px; border:2px solid #e8ecef; border-radius:8px; overflow:hidden; }

/* ============================================================
   Section 81: FORM — SELECT
   ============================================================ */
.priority-select option[value="critical"] { color:#FA896B; font-weight:600; }
.priority-select option[value="high"]     { color:#FFAE1F; font-weight:600; }
.priority-select option[value="medium"]   { color:#5D87FF; }
.priority-select option[value="low"]      { color:#13DEB9; }
.btn-select-group .btn-sel { border:2px solid #e8ecef; border-radius:8px; padding:10px 20px; cursor:pointer; transition:all 0.2s; background:#fff; font-weight:500; }
.btn-select-group .btn-sel:hover { border-color:#5D87FF; color:#5D87FF; }
.btn-select-group .btn-sel.active { border-color:#5D87FF; background:#eef2ff; color:#5D87FF; }
[data-theme="dark"] .btn-select-group .btn-sel { background: var(--card-bg); border-color: var(--border-color); color: var(--body-color); }
[data-theme="dark"] .btn-select-group .btn-sel:hover { border-color: var(--primary); color: #a3bbff; }
[data-theme="dark"] .btn-select-group .btn-sel.active { background: rgba(93,135,255,0.12); border-color: var(--primary); color: #a3bbff; }
.multi-check-dropdown { position:relative; }
.multi-check-menu { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e8ecef; border-radius:8px; z-index:1000; padding:8px 0; box-shadow:0 8px 24px rgba(0,0,0,0.1); display:none; max-height:200px; overflow-y:auto; }
.multi-check-menu.show { display:block; }
.multi-check-item { padding:8px 16px; display:flex; align-items:center; gap:8px; cursor:pointer; }
.multi-check-item:hover { background:#f8f9fa; }

/* ============================================================
   Section 82: FORM — VALIDATION
   ============================================================ */
.req-item { display:flex; align-items:center; gap:6px; font-size:12px; margin-bottom:4px; color:#8a9099; transition:color 0.2s; }
.req-item.met { color:#13DEB9; }
.req-item .req-icon { width:16px; height:16px; border-radius:50%; background:#e8ecef; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; transition:background 0.2s; }
.req-item.met .req-icon { background:#13DEB9; color:#fff; }
.field-status { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:16px; }
.validation-example-card { border-left:4px solid; }
.validation-example-card.all-valid   { border-left-color:#13DEB9; }
.validation-example-card.all-invalid { border-left-color:#FA896B; }

/* ============================================================
   Section 83: UI — ALERTS (supplement)
   ============================================================ */
.alert-outline-primary { border:1.5px solid #5D87FF; color:#5D87FF;  background:transparent; }
.alert-outline-success { border:1.5px solid #13DEB9; color:#13DEB9;  background:transparent; }
.alert-outline-danger  { border:1.5px solid #FA896B; color:#FA896B;  background:transparent; }
.alert-outline-warning { border:1.5px solid #FFAE1F; color:#856404;  background:transparent; }
.alert-outline-info    { border:1.5px solid #539BFF; color:#0c63e4;  background:transparent; }
.alert-strip { border-left:4px solid; border-top:none; border-right:none; border-bottom:none; border-radius:0 8px 8px 0; padding:.6rem 1rem; font-size:.875rem; }
.toast-container-custom { position:fixed; bottom:1.5rem; right:1.5rem; z-index:1100; }
.alert-gradient-primary { background:linear-gradient(135deg,#5D87FF20,#5D87FF10); border-left:4px solid #5D87FF; border-radius:8px; }
.alert-gradient-success { background:linear-gradient(135deg,#13DEB920,#13DEB910); border-left:4px solid #13DEB9; border-radius:8px; }
.alert-gradient-danger  { background:linear-gradient(135deg,#FA896B20,#FA896B10); border-left:4px solid #FA896B; border-radius:8px; }
.alert-gradient-warning { background:linear-gradient(135deg,#FFAE1F20,#FFAE1F10); border-left:4px solid #FFAE1F; border-radius:8px; }
.alert-icon-box { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ============================================================
   Section 84: ECO — CHECKOUT
   ============================================================ */
.shipping-option { border:2px solid #e9ecef; border-radius:12px; padding:16px; cursor:pointer; transition:all 0.2s; }
.shipping-option:has(input:checked) { border-color:#5D87FF; background:rgba(93,135,255,0.05); }
.shipping-option input[type="radio"] { accent-color:#5D87FF; }
.card-input { letter-spacing:3px; }
.checkout-step-circle { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.checkout-step-line { flex:1; height:2px; }
.checkout-qty-badge { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; }
.checkout-product-thumb { width:48px; height:48px; min-width:48px; border-radius:8px; font-size:11px; }
.checkout-sticky-top { position:sticky; top:80px; }

/* ============================================================
   Section 85: ECO — ADD / EDIT PRODUCT
   ============================================================ */
.upload-zone { border:2px dashed #dee2e6; border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:all 0.2s; background:#f8f9fa; }
.upload-zone:hover { border-color:#5D87FF; background:rgba(93,135,255,0.03); }
.upload-zone .upload-icon { font-size:2.5rem; color:#adb5bd; }
.upload-zone-sm { height:72px; border:2px dashed #dee2e6; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.upload-zone-sm:hover { border-color:#5D87FF; }
.tag-input-container { border:1px solid #dee2e6; border-radius:8px; padding:8px; display:flex; flex-wrap:wrap; gap:6px; min-height:44px; }
.tag-badge { background:rgba(93,135,255,0.1); color:#5D87FF; border-radius:20px; padding:4px 12px; font-size:13px; display:flex; align-items:center; gap:6px; }
.tag-badge .remove-tag { cursor:pointer; }
.product-thumb { width:72px; height:72px; border-radius:8px; object-fit:cover; border:2px solid transparent; cursor:pointer; transition:all 0.2s; }
.product-thumb:hover,.product-thumb.active { border-color:#5D87FF; }

/* ============================================================
   Section 86: AUTH PAGES
   ============================================================ */
body.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-wrap { width:100%; max-width:920px; background:#fff; border-radius:24px; box-shadow:0 24px 80px rgba(93,135,255,0.12); overflow:hidden; display:flex; min-height:580px; }
.auth-left { flex:1; padding:48px 40px; display:flex; flex-direction:column; color:#fff; position:relative; overflow:hidden; }
.auth-left::before { content:''; position:absolute; width:300px; height:300px; background:rgba(255,255,255,0.05); border-radius:50%; top:-80px; right:-80px; }
.auth-left::after  { content:''; position:absolute; width:200px; height:200px; background:rgba(255,255,255,0.05); border-radius:50%; bottom:-40px; left:-40px; }
.auth-right { flex:1; padding:48px 40px; display:flex; flex-direction:column; justify-content:center; }
.auth-logo { align-items:center; gap:10px; text-decoration:none; margin-bottom:48px; position:relative; z-index:1; }
.auth-logo .logo-mark { width:40px; height:40px; background:rgba(255,255,255,0.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; }
.auth-logo .logo-text { font-size:22px; font-weight:800; color:#fff; }
.auth-headline { font-size:32px; font-weight:800; line-height:1.2; margin-bottom:16px; position:relative; z-index:1; }
.auth-sub-text { font-size:15px; opacity:0.85; margin-bottom:40px; position:relative; z-index:1; }
.auth-feature { display:flex; align-items:center; gap:12px; margin-bottom:16px; position:relative; z-index:1; }
.auth-feature .feat-icon { width:36px; height:36px; background:rgba(255,255,255,0.15); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth-feature span { font-size:14px; opacity:0.9; }
.auth-right h2 { font-size:26px; font-weight:800; color:#2a3547; margin-bottom:6px; }
.auth-right .sub { font-size:14px; color:#7c8fac; margin-bottom:32px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:#a8b4cc; font-size:13px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:#eef0f7; }
.btn-social { border:1.5px solid #eef0f7; border-radius:10px; padding:10px; font-size:14px; font-weight:600; color:#2a3547; background:#fff; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.2s; }
.btn-social:hover { border-color:#5D87FF; color:#5D87FF; background:#f5f8ff; }
.auth-footer { text-align:center; margin-top:24px; font-size:14px; color:#7c8fac; }
.auth-footer a { color:#5D87FF; font-weight:600; text-decoration:none; }
.auth-wrap-reg { max-width:960px; }
.auth-left-reg { flex:0 0 380px; }
.auth-benefit { display:flex; align-items:center; gap:10px; margin-bottom:14px; position:relative; z-index:1; }
.auth-benefit span { font-size:14px; opacity:0.9; }
.btn-success-grad { background:linear-gradient(135deg,#13DEB9,#00BCD4); border:none; border-radius:10px; padding:12px; font-weight:700; font-size:15px; color:#fff; width:100%; }
.btn-success-grad:hover { opacity:0.9; color:#fff; }
.strength-bar  { height:4px; border-radius:2px; background:#eef0f7; margin-top:8px; overflow:hidden; }
.strength-fill { height:100%; border-radius:2px; transition:all 0.3s; width:0%; }
.auth-card { background:#fff; border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,0.08); padding:48px 40px; max-width:460px; width:100%; text-align:center; }
.logo-mark-auth { width:40px; height:40px; background:linear-gradient(135deg,#5D87FF,#49b4e5); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px; }
.logo-text-auth { font-size:22px; font-weight:800; color:#2a3547; }
.logo-text-auth span { color:#5D87FF; }
.email-icon-box { width:80px; height:80px; background:linear-gradient(135deg,#fff3e0,#ffe0b2); border-radius:24px; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
.email-icon-box i { font-size:36px; color:#FFAE1F; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#5D87FF; text-decoration:none; font-weight:600; margin-top:20px; }
.auth-steps { display:flex; justify-content:center; margin-bottom:36px; }
.auth-step { display:flex; flex-direction:column; align-items:center; position:relative; flex:1; }
.auth-step:not(:last-child)::after { content:''; position:absolute; top:15px; left:60%; width:80%; height:2px; background:#eef0f7; }
.auth-step.active:not(:last-child)::after { background:#5D87FF; }
.auth-step-num { width:32px; height:32px; border-radius:50%; background:#eef0f7; color:#a8b4cc; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; position:relative; z-index:1; }
.auth-step.active .auth-step-num { background:linear-gradient(135deg,#5D87FF,#49b4e5); color:#fff; }
.auth-step.done   .auth-step-num { background:#13DEB9; color:#fff; }
.auth-step-label { font-size:11px; color:#a8b4cc; }
.auth-step.active .auth-step-label { color:#5D87FF; font-weight:600; }
.error-404 { font-size:clamp(100px,20vw,160px); font-weight:900; line-height:1; background:linear-gradient(135deg,#5D87FF,#7460EE,#FC185A); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:-10px; }
.error-graphic { width:200px; height:8px; background:linear-gradient(135deg,#5D87FF,#7460EE,#FC185A); border-radius:4px; margin:0 auto 32px; }
.btn-primary-grad { background:linear-gradient(135deg,#5D87FF,#49b4e5); border:none; border-radius:12px; padding:12px 28px; font-weight:700; font-size:15px; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.btn-primary-grad:hover { opacity:0.9; color:#fff; }
.btn-outline-primary-custom { border:2px solid #5D87FF; border-radius:12px; padding:11px 28px; font-weight:700; font-size:15px; color:#5D87FF; text-decoration:none; display:inline-flex; align-items:center; gap:8px; background:transparent; }
.btn-outline-primary-custom:hover { background:#5D87FF; color:#fff; }
.quick-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.quick-link { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#fff; border-radius:10px; text-decoration:none; color:#5a6a85; font-size:13px; font-weight:600; box-shadow:0 2px 12px rgba(0,0,0,0.06); border:1px solid #eef0f7; transition:all 0.2s; }
.quick-link:hover { border-color:#5D87FF; color:#5D87FF; transform:translateY(-2px); }
[data-theme="dark"] .quick-link { background: #1e2a3a; border-color: #3a4a62; color: #bec8d8; box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
[data-theme="dark"] .quick-link:hover { border-color: var(--primary); color: #a3bbff; }
.error-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:32px; }
@media (max-width:640px) { .auth-wrap { flex-direction:column; } .auth-left { padding:32px 28px; min-height:auto; } }
@media (max-width:680px) { .auth-left-reg { flex:none; padding:28px; } }

/* ============================================================
   Section 87: SHARED GRADIENT UTILITIES
   ============================================================ */
.bg-grad-primary { background:linear-gradient(135deg,#5D87FF,#4570EA); }
.bg-grad-success { background:linear-gradient(135deg,#13DEB9,#02b89d); }
.bg-grad-warning { background:linear-gradient(135deg,#FFAE1F,#e89e10); }
.bg-grad-danger  { background:linear-gradient(135deg,#FA896B,#f06a45); }
.bg-grad-purple  { background:linear-gradient(135deg,#7928CA,#6b21a8); }
.bg-grad-info    { background:linear-gradient(135deg,#49BEFF,#0dcaf0); }
.bg-grad-pink    { background:linear-gradient(135deg,#FC185A,#d40f4d); }
.card-hdr-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; }

/* Auth page background variants */
body.auth-page-login  { background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 50%, #f4f0ff 100%); }
body.auth-page-reg    { background: linear-gradient(135deg, #f0fff8 0%, #e8f5ff 50%, #f0f4ff 100%); }
body.auth-page-forgot { background: linear-gradient(135deg, #fff8f0 0%, #fff0f8 50%, #f0f4ff 100%); flex-direction: column; align-items: center; justify-content: center; }
body.auth-page-error  { background: linear-gradient(135deg, #f0f4ff 0%, #f8f0ff 100%); flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* Auth left panel gradient variants */
.auth-left-login { background: linear-gradient(145deg, #5D87FF 0%, #7460EE 60%, #49b4e5 100%); }
.auth-left-reg   { background: linear-gradient(145deg, #13DEB9 0%, #00BCD4 50%, #5D87FF 100%); flex: 0 0 380px; }

/* .auth-sub is the sub-heading on auth-left */
.auth-sub { font-size: 14px; opacity: 0.85; margin-bottom: 36px; position: relative; z-index: 1; }

/* benefit-item (alias for auth-benefit used in register page) */
.benefit-item { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; position: relative; z-index: 1; }
.benefit-item .bi { font-size: 18px; }
.benefit-item span { font-size: 14px; opacity: 0.9; }

/* logo-mark / logo-text inside auth-logo or error-logo */
.auth-logo .logo-mark, .error-logo .logo-mark {
  width: 40px; height: 40px; background: rgba(255,255,255,0.2);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
}
.auth-logo .logo-text, .error-logo .logo-text {
  font-size: 22px; font-weight: 800; color: #fff;
}
.error-logo .logo-mark { background: linear-gradient(135deg, #5D87FF, #49b4e5); }
.error-logo .logo-text { color: #2a3547; }
.error-logo .logo-text span, .auth-card .logo-text span { color: #5D87FF; }

/* auth-card logo variants (forgot-password uses standalone logo-mark) */
.auth-card .auth-logo { display: inline-flex; }
.auth-card .auth-logo .logo-mark { background: linear-gradient(135deg, #5D87FF, #49b4e5); }
.auth-card .auth-logo .logo-text { color: #2a3547; }

/* steps (auth-forgot-password uses .steps/.step classes) */
.steps { display: flex; justify-content: center; gap: 0; margin-bottom: 36px; }
.step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 60%; width: 80%; height: 2px; background: #eef0f7; }
.step.active:not(:last-child)::after { background: #5D87FF; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: #eef0f7; color: #a8b4cc; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; position: relative; z-index: 1; }
.step.active .step-num { background: linear-gradient(135deg, #5D87FF, #49b4e5); color: #fff; }
.step.done   .step-num { background: #13DEB9; color: #fff; }
.step-label { font-size: 11px; color: #a8b4cc; }
.step.active .step-label { color: #5D87FF; font-weight: 600; }

/* email-icon in forgot-password */
.email-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #fff3e0, #ffe0b2); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.email-icon i { font-size: 36px; color: #FFAE1F; }

/* desc paragraph in forgot-password */
.desc { font-size: 14px; color: #7c8fac; margin-bottom: 32px; line-height: 1.6; }

/* Scoped btn-primary for auth pages (gradient instead of Bootstrap blue) */
.auth-page .btn-primary,
.auth-card .btn-primary {
  background: linear-gradient(135deg, #5D87FF, #49b4e5) !important;
  border: none !important; border-radius: 10px !important;
  padding: 12px !important; font-weight: 700 !important; font-size: 15px !important; color: #fff !important;
}
.auth-page .btn-primary:hover,
.auth-card .btn-primary:hover {
  background: linear-gradient(135deg, #4a74ec, #36a1d2) !important; color: #fff !important;
}

/* form-control overrides for auth pages */
.auth-page .form-control,
.auth-card .form-control {
  border-radius: 10px; border: 1.5px solid #eef0f7;
  padding: 11px 14px; font-size: 14px; color: #2a3547;
}
.auth-page .form-control:focus,
.auth-card .form-control:focus {
  border-color: #5D87FF; box-shadow: 0 0 0 3px rgba(93,135,255,0.12);
}
.auth-page .form-label,
.auth-card .form-label {
  font-size: 13px; font-weight: 600; color: #2a3547; margin-bottom: 6px;
}
.auth-page .input-group .form-control { border-radius: 10px 0 0 10px; }
.auth-page .input-group .btn { border-radius: 0 10px 10px 0; border-color: #eef0f7; border-left: 0; color: #7c8fac; }

/* action-btns alias for error page */
.action-btns { display: flex; gap: 12px; justify-content: center; margin-bottom: 48px; flex-wrap: wrap; }

/* Auth inline link style */
.auth-footer-link { color: #5D87FF; font-weight: 600; text-decoration: none; }
.auth-footer-link:hover { text-decoration: underline; color: #4a74ec; }
/* ── Dark theme — Auth pages ── */
[data-theme="dark"] body.auth-page-login  { background: linear-gradient(135deg, #0f172a 0%, #1a1f35 50%, #12102a 100%); }
[data-theme="dark"] body.auth-page-reg    { background: linear-gradient(135deg, #0f1f1a 0%, #0f172a 50%, #0f1a2e 100%); }
[data-theme="dark"] body.auth-page-forgot { background: linear-gradient(135deg, #1a120f 0%, #1a0f18 50%, #0f1228 100%); }
[data-theme="dark"] body.auth-page-error  { background: linear-gradient(135deg, #0f1228 0%, #180f28 100%); }
[data-theme="dark"] .auth-wrap  { background: #1e2a3a; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
[data-theme="dark"] .auth-right { background: #1e2a3a; }
[data-theme="dark"] .auth-right h2 { color: #eaf0fb; }
[data-theme="dark"] .auth-right .sub { color: #7C8FAC; }
[data-theme="dark"] .auth-divider { color: #7C8FAC; }
[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after { background: #3a4a62; }
[data-theme="dark"] .auth-footer { color: #7C8FAC; }
[data-theme="dark"] .btn-social { background: rgba(255,255,255,0.05); border-color: #3a4a62; color: #bec8d8; }
[data-theme="dark"] .btn-social:hover { border-color: #5D87FF; color: #a3bbff; background: rgba(93,135,255,0.10); }
[data-theme="dark"] .auth-page .form-control,
[data-theme="dark"] .auth-card .form-control { background: rgba(255,255,255,0.05); border-color: #3a4a62; color: #eaf0fb; }
[data-theme="dark"] .auth-page .form-control::placeholder,
[data-theme="dark"] .auth-card .form-control::placeholder { color: #7C8FAC; opacity: 1; }
[data-theme="dark"] .auth-page .form-label,
[data-theme="dark"] .auth-card .form-label { color: #bec8d8; }
[data-theme="dark"] .auth-page .input-group .btn { border-color: #3a4a62; border-left: 0; color: #7C8FAC; background: rgba(255,255,255,0.05); }
[data-theme="dark"] .auth-card { background: #1e2a3a; box-shadow: 0 24px 80px rgba(0,0,0,0.45); }
[data-theme="dark"] .auth-card .auth-logo .logo-text { color: #eaf0fb; }
[data-theme="dark"] .auth-step:not(:last-child)::after { background: #3a4a62; }
[data-theme="dark"] .auth-step-num { background: #2a3a52; color: #7C8FAC; }
[data-theme="dark"] .auth-step-label { color: #7C8FAC; }

/* ====== Section 88: Additional Utility & Component Classes ====== */

/* Additional gradient backgrounds */
.bg-grad-teal   { background: linear-gradient(135deg, #11C2D9, #0da8bd); }
.bg-grad-dark   { background: linear-gradient(135deg, #212529, #495057); }
.bg-grad-warm   { background: linear-gradient(135deg, #FA896B, #FFAE1F); }
.bg-grad-sky    { background: linear-gradient(135deg, #5D87FF, #49BEFF); }
.bg-grad-indigo { background: linear-gradient(135deg, #5D87FF, #7460EE); }
.bg-grad-ocean  { background: linear-gradient(135deg, #5D87FF, #13DEB9); }
.bg-grad-violet { background: linear-gradient(135deg, #7928CA, #5D87FF); }
.bg-grad-cyan-blue { background: linear-gradient(135deg, #11C2D9, #5D87FF); }

/* Icon box size utilities */
.icon-box-28 { width: 28px; height: 28px; }
.icon-box-36 { width: 36px; height: 36px; }
.icon-box-38 { width: 38px; height: 38px; }
.icon-box-40 { width: 40px; height: 40px; }
.icon-box-44 { width: 44px; height: 44px; }
.icon-box-48 { width: 48px; height: 48px; flex-shrink: 0; }
.icon-box-56 { width: 56px; height: 56px; }

/* Avatar stack */
.avatar-stack-item     { margin-right: -6px; border: 2px solid #fff; }
.avatar-stack-item-end { border: 2px solid #fff; }

/* Button icon sizes */
.btn-icon-xs { width: 26px; height: 26px; padding: 0; line-height: 1; }
.btn-icon-sm { width: 30px; height: 30px; padding: 0; }
.btn-icon-md { width: 40px; height: 40px; padding: 0; }
.btn-icon-lg { width: 42px; height: 42px; padding: 0; }

/* Priority badges */
.badge-priority-high   { background: #fff0f0; color: #FA3E3E; font-size: 11px; font-weight: 700; }
.badge-priority-medium { background: #fff8e6; color: #FFAE1F; font-size: 11px; font-weight: 700; }
.badge-priority-low    { background: #e8f5e9; color: #13DEB9; font-size: 11px; font-weight: 700; }

/* Kanban column helpers */
.kanban-col-dot-gray   { width: 10px; height: 10px; border-radius: 50%; background: #adb5bd; }
.kanban-col-dot-blue   { width: 10px; height: 10px; border-radius: 50%; background: #5D87FF; }
.kanban-col-badge        { background: #e9ecef; color: #5a6a85; font-size: 11px; }
.kanban-col-badge-blue   { background: #dbeafe; color: #5D87FF; font-size: 11px; }
.kanban-col-badge-amber  { background: #fef3c7; color: #FFAE1F; font-size: 11px; }
.kanban-col-badge-green  { background: #dcfce7; color: #13DEB9; font-size: 11px; }
.kanban-col-dot-amber    { width: 10px; height: 10px; border-radius: 50%; background: #FFAE1F; }
.kanban-col-dot-green    { width: 10px; height: 10px; border-radius: 50%; background: #13DEB9; }
.kanban-card             { border: 1px solid #eef0f7; }
.kanban-card-blue        { border: 1px solid #eef0f7; border-left: 3px solid #5D87FF; }
.kanban-card-amber       { border: 1px solid #eef0f7; border-left: 3px solid #FFAE1F; }
.kanban-card-green       { border: 1px solid #eef0f7; border-left: 3px solid #13DEB9; opacity: 0.85; }
.kanban-title-done       { text-decoration: line-through; opacity: 0.7; }
.kanban-select-lg        { width: 180px; }
.kanban-select-sm        { width: 140px; }
.kanban-hd-gray          { background: #f4f5f7; }
.kanban-hd-blue          { background: #eff6ff; }
.kanban-hd-amber         { background: #fffbf0; }
.kanban-hd-green         { background: #f0fdf4; }

/* Note card top borders */
.note-border-blue     { border-top: 4px solid #5D87FF !important; }
.note-border-yellow   { border-top: 3px solid #FFAE1F !important; }
.note-border-teal     { border-top: 3px solid #13DEB9 !important; }
.note-border-purple   { border-top: 3px solid #7460EE !important; }
.note-border-cornblue { border-top: 3px solid #539BFF !important; }
.note-border-red      { border-top: 3px solid #FC185A !important; }
.note-border-orange   { border-top: 3px solid #FA896B !important; }
.note-count-badge     { background: #e9ecef; color: #5a6a85; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-help    { cursor: help; }

/* Opacity utility */
.opacity-85 { opacity: 0.85; }

/* Text color utility */
.text-purple { color: #7928CA; }

/* Progress height utilities */
.progress-3px  { height: 3px; }
.progress-4px  { height: 4px; }
.progress-5px  { height: 5px; }
.progress-6px  { height: 6px; }
.progress-8px  { height: 8px; }
.progress-12px { height: 12px; }
.progress-14px { height: 14px; }

/* Spinner size utilities */
.spinner-2x { width: 2rem; height: 2rem; }
.spinner-3x { width: 3rem; height: 3rem; border-width: 4px; }
.spinner-4x { width: 4rem; height: 4rem; border-width: 5px; }
.spinner-5x { width: 5rem; height: 5rem; border-width: 6px; }

/* User profile tech icon brand colors */
.prf-tech-icon-js     { color: #F7DF1E; }
.prf-tech-icon-react  { color: #61DAFB; }
.prf-tech-icon-ts     { color: #3178C6; }
.prf-tech-icon-node   { color: #68A063; }
.prf-tech-icon-python { color: #3776AB; }
.prf-tech-icon-mysql  { color: #4479A1; }
.prf-tech-icon-mongo  { color: #47A248; }
.prf-tech-icon-docker { color: #2496ED; }
.prf-tech-icon-aws    { color: #FF9900; }
.prf-tech-icon-git    { color: #F05032; }
.prf-tech-icon-css    { color: #CC6699; }
.prf-tech-icon-redux  { color: #764ABC; }

/* Profile reviewer avatar backgrounds */
.prf-review-av-blue   { background: #5D87FF; }
.prf-review-av-purple { background: #7460EE; }
.prf-review-av-teal   { background: #13DEB9; }
.prf-review-av-pink   { background: #FC185A; }

/* Carousel caption fix */
.carousel-caption-bottom { bottom: 1rem; }

/* Table helpers */
.table-header-sm { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.thead-gradient-warm    { background: linear-gradient(135deg, #FA896B, #FFAE1F); }
.thead-gradient-warm th { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.thead-gradient-blue    { background: linear-gradient(135deg, #5D87FF, #49BEFF); }
.thead-gradient-blue th { background: transparent; color: #fff; }
.tr-primary-light  { background: rgba(93,135,255,0.10); }
.tr-success-light  { background: rgba(19,222,185,0.10); }
.tr-warning-light  { background: rgba(255,174,31,0.12); }
.tr-danger-light   { background: rgba(250,137,107,0.10); }
.tr-info-light     { background: rgba(73,190,255,0.10); }
.tr-primary-xlight { background: rgba(93,135,255,0.06); }

/* Widget card covers */
.widget-cover-indigo { height: 64px; background: linear-gradient(135deg, #5D87FF, #7460EE); }
.widget-cover-ocean  { height: 56px; background: linear-gradient(135deg, #13DEB9, #5D87FF); }
.widget-avatar-up    { margin-top: -40px; position: relative; }

/* Eco product components */
.eco-product-img     { height: 180px; }
.eco-detail-img      { height: 400px; }
.eco-detail-thumbnail { height: 70px; cursor: pointer; }
.eco-detail-price    { font-size: 2rem; }
.color-swatch        { width: 32px; height: 32px; }
.qty-btn             { width: 38px; height: 38px; }
.qty-input           { width: 60px; height: 38px; }
.qty-wrapper         { width: 140px; }
.eco-mod-banner      { background: rgba(73,190,255,0.10); color: #0369a1; }
[data-theme="dark"] .eco-mod-banner { background: rgba(73,190,255,0.12); color: #7DD3FC; }
.eco-step-circle     { width: 32px; height: 32px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.eco-step-active     { flex: 1; height: 2px; background: linear-gradient(to right, #13DEB9 50%, #dee2e6 50%); }
.eco-step-inactive   { flex: 1; height: 2px; background: #dee2e6; }
.form-switch-lg      { width: 2.5rem; height: 1.3rem; }
.tag-input           { border: 0; outline: none; flex: 1; min-width: 80px; font-size: 13px; background: transparent; }
.url-prefix          { font-size: 13px; }
.img-slot            { height: 72px; border: 2px dashed #dee2e6; }

/* Weather card backgrounds */
.weather-card-blue   { background: linear-gradient(135deg, #1565C0, #1976D2, #1E88E5); border-radius: 16px; padding: 24px; }
.weather-card-teal   { background: linear-gradient(135deg, #00695C, #00897B, #26A69A); border-radius: 16px; padding: 24px; }
.weather-card-purple { background: linear-gradient(135deg, #6a3093, #a044ff); }
.weather-card-padded { border-radius: 16px; padding: 24px; }
.weather-hr          { border-color: rgba(255,255,255,0.3); }
.uv-badge-sunny      { background: linear-gradient(135deg, #f7971e, #ffd200); }

/* Form wizard */
.wizard-step-icon    { width: 56px; height: 56px; }
.wizard-section-icon { width: 28px; height: 28px; }
.wizard-step-badge   { width: 26px; height: 26px; font-size: 0.8rem; }
.wizard-center       { max-width: 600px; margin: 0 auto; }
.wizard-cart-icon    { width: 34px; height: 34px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wizard-pwd-bar      { height: 4px; }

/* ====== Section 89: Extended Component Classes ====== */

/* Note sidebar active category */
.note-active-bg { background: #f0f4ff; }

/* Note search */
.note-search-wrap { position:relative; }
.note-search-wrap i { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none; }
.note-search-input { border:1.5px solid var(--border-color);border-radius:8px;padding:8px 12px 8px 34px;width:100%;font-size:13px;color:var(--body-text);font-family:inherit;background:var(--input-bg);outline:none;transition:border-color .2s; }
.note-search-input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(93,135,255,0.1); }

/* Rainbow gradient badge */
.bg-grad-rainbow { background: linear-gradient(90deg, #5D87FF, #13DEB9, #FFAE1F, #FA896B); }

/* Accordion colored buttons */
.accordion-btn-blue   { background: #5D87FF; }
.accordion-btn-teal   { background: #13DEB9; }
.accordion-btn-yellow { background: #FFAE1F; }
.accordion-btn-orange { background: #FA896B; }
.accordion-btn-cyan   { background: #11C2D9; }

/* Accordion colored bodies */
.accordion-body-blue   { background: rgba(93,135,255,0.06); }
.accordion-body-teal   { background: rgba(19,222,185,0.06); }
.accordion-body-yellow { background: rgba(255,174,31,0.06); }
.accordion-body-orange { background: rgba(250,137,107,0.06); }
.accordion-body-cyan   { background: rgba(17,194,217,0.06); }

/* Step badges (numbered circles) */
.step-badge { width: 26px; height: 26px; font-size: .8rem; }

/* Inline tag badges */
.badge-tag-blue   { background: rgba(93,135,255,0.12); color: #5D87FF; }
.badge-tag-teal   { background: rgba(19,222,185,0.12); color: #13DEB9; }
.badge-tag-orange { background: rgba(250,137,107,0.12); color: #FA896B; }

/* Small rgba stat boxes */
.stat-box-primary { background: rgba(93,135,255,0.08); }
.stat-box-success { background: rgba(19,222,185,0.08); }
.stat-box-warning { background: rgba(255,174,31,0.08); }
.stat-box-teal    { background: rgba(19,222,185,0.08); border-left: 3px solid #13DEB9; }
.stat-box-blue-xs { background: rgba(93,135,255,0.06); }

/* Carousel small slide backgrounds */
.carousel-slide-sm.bg-grad-primary-teal { background: linear-gradient(135deg, #5D87FF, #13DEB9); }
.carousel-slide-sm.bg-grad-teal-cyan    { background: linear-gradient(135deg, #13DEB9, #11C2D9); }
.carousel-slide-sm.bg-grad-warm-sm      { background: linear-gradient(135deg, #FFAE1F, #FA896B); }
.carousel-slide-sm.bg-grad-cosmic       { background: linear-gradient(135deg, #7928CA, #FA896B); }
.carousel-slide-sm.bg-grad-teal-blue    { background: linear-gradient(135deg, #11C2D9, #13DEB9); }
.carousel-slide-sm.bg-grad-indigo-sm    { background: linear-gradient(135deg, #5D87FF, #7928CA); }
.carousel-slide-sm.bg-grad-warm-rev     { background: linear-gradient(135deg, #FA896B, #FFAE1F); }
.carousel-slide.bg-grad-warm-purple     { background: linear-gradient(135deg, #FA896B, #7928CA); }
.carousel-slide.bg-grad-teal-yellow     { background: linear-gradient(135deg, #13DEB9, #FFAE1F); }

/* ====== Section 90: Additional Component Helpers ====== */

/* Spinner size utilities */
.spinner-1-2x { width: 1.2rem; height: 1.2rem; }
.spinner-2-5x { width: 2.5rem; height: 2.5rem; }

/* Spinner demo box muted */
.spinner-demo-box-muted { background: rgba(108,117,125,.08); }

/* Card overlay dark */
.card-overlay-dark { background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1)); }

/* List dot bullets */
.list-dot           { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.list-dot-primary   { background: #5D87FF; }
.list-dot-success   { background: #13DEB9; }
.list-dot-warning   { background: #FFAE1F; }
.list-dot-danger    { background: #FA896B; }
.list-dot-purple    { background: #7460EE; }

/* List icon boxes */
.list-icon-box        { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.list-icon-box-primary { background: rgba(93,135,255,0.1); }
.list-icon-box-success { background: rgba(19,222,185,0.1); }
.list-icon-box-warning { background: rgba(255,174,31,0.1); }
.list-icon-box-danger  { background: rgba(250,137,107,0.1); }
.list-icon-box-purple  { background: rgba(116,96,238,0.1); }

/* List avatar */
.list-avatar { width: 40px; height: 40px; }

/* Badge tag variants */
.badge-tag-purple { background: rgba(121,40,202,0.12); color: #7928CA; font-size: .875em; }
.badge-tag-cyan   { background: rgba(17,194,217,0.12);  color: #11C2D9; font-size: .875em; }

/* Grid box tiny */
.grid-box-xs { font-size: .65rem; }

/* Nav pills sidebar */
.nav-pills-sidebar { min-width: 140px; }
.overflow-x-auto   { overflow-x: auto; }
.min-w-max         { min-width: max-content; }

/* Width utilities */
.w-160 { width: 160px; }
.w-130 { width: 130px; }
.w-70  { width: 70px; }
.w-220 { width: 220px; }

/* Subtle backgrounds (Bootstrap 5.3 compatible) */
.bg-success-subtle { background: #f0fdf4; }
.bg-warning-subtle { background: #fffbeb; }
.bg-danger-subtle  { background: #fff5f5; }
[data-theme="dark"] .bg-success-subtle { background: rgba(19,222,185,0.10)  !important; }
[data-theme="dark"] .bg-warning-subtle { background: rgba(255,174,31,0.10)  !important; }
[data-theme="dark"] .bg-danger-subtle  { background: rgba(250,137,107,0.10) !important; }

/* ====== Section 91: Final Utility Additions ====== */
.icon-box-52    { width: 52px; height: 52px; }
.wizard-divider { border-color: rgba(255,255,255,.25); margin: 10px 0; }
.card-num-input { letter-spacing: 2px; font-family: monospace; }
.bg-white-10    { background: rgba(255,255,255,0.2); }
.opacity-80     { opacity: 0.8; }
.opacity-90     { opacity: 0.9; }
.icon-box-40    { width: 40px; height: 40px; }
.icon-box-36    { width: 36px; height: 36px; }
.eco-product-icon { font-size: 4rem; opacity: 0.7; }
.eco-detail-icon  { font-size: 8rem; opacity: 0.75; }
.eco-detail-price { font-size: 2rem; }
.eco-detail-thumbnail { height: 70px; cursor: pointer; }

/* Table action buttons */
.btn-action { font-size: 0.75rem; padding: 2px 6px; }

/* XSmall button */
.btn-xs { padding: .2rem .5rem; font-size: .75rem; }

/* ============================================================
   92. LANDING PAGE (lp-)
   ============================================================ */
/* Reset / base */
.lp-body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8faff; color: #1e293b; }

/* Nav */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255,255,255,0.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(93,135,255,0.1); padding: 0 64px; height: 68px; display: flex; align-items: center; justify-content: space-between; transition: background .3s, box-shadow .3s; }
.lp-nav.lp-nav-scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 2px 24px rgba(93,135,255,0.1); }
.lp-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lp-nav-logo-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg,#5D87FF,#7460EE); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lp-nav-logo-text { font-size: 20px; font-weight: 800; color: #1e293b; }
.lp-nav-logo-text span { color: #5D87FF; }
.lp-nav-links { display: flex; align-items: center; gap: 28px; }
.lp-nav-link { font-size: 14px; font-weight: 600; color: #64748b; text-decoration: none; transition: color .2s; }
.lp-nav-link:hover { color: #5D87FF; }
.lp-nav-cta { display: flex; align-items: center; gap: 12px; }

/* Hero — Premium Light */
.lp-hero { background: linear-gradient(155deg, #fafbff 0%, #f0f4ff 45%, #ede8ff 100%); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.lp-hero::before { display: none; }

/* Soft background blobs */
.lp-hero-orb { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; animation: none; }
.lp-hero-orb-1 { width: 580px; height: 580px; background: rgba(93,135,255,0.16); top: -140px; right: -100px; }
.lp-hero-orb-2 { width: 440px; height: 440px; background: rgba(116,96,238,0.12); bottom: 80px; left: -120px; }
.lp-hero-orb-3 { width: 280px; height: 280px; background: rgba(252,24,90,0.08); top: 240px; left: 40%; }

/* Centered copy area */
.lp-hero-copy { text-align: center; padding: 118px 40px 52px; position: relative; z-index: 2; max-width: 840px; margin: 0 auto; width: 100%; box-sizing: border-box; }

/* Badge */
.lp-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(93,135,255,0.09); color: #5D87FF; border: 1px solid rgba(93,135,255,0.22); border-radius: 24px; padding: 6px 18px; font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-bottom: 26px; }
.lp-hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #5D87FF; box-shadow: 0 0 0 3px rgba(93,135,255,0.2); animation: lp-pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes lp-pulse { 0%,100%{ box-shadow:0 0 0 3px rgba(93,135,255,0.22) } 50%{ box-shadow:0 0 0 6px rgba(93,135,255,0.08) } }

/* Title */
.lp-hero-title { font-size: clamp(34px,4.5vw,64px); font-weight: 800; line-height: 1.1; color: #0f172a; margin-bottom: 20px; }
.lp-hero-title span { background: linear-gradient(135deg,#5D87FF 0%,#7460EE 50%,#FC185A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Sub */
.lp-hero-sub { font-size: 18px; color: #64748b; line-height: 1.72; max-width: 580px; margin: 0 auto 36px; }

/* Buttons */
.lp-hero-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.lp-btn-primary { background: linear-gradient(135deg,#5D87FF,#7460EE); color: #fff; border: none; border-radius: 12px; padding: 14px 32px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s, transform .2s; font-family: inherit; }
.lp-btn-primary:hover { opacity: .88; transform: translateY(-2px); color: #fff; }
.lp-btn-ghost { background: rgba(93,135,255,0.07); color: #5D87FF; border: 1.5px solid rgba(93,135,255,0.25); border-radius: 12px; padding: 13px 28px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; font-family: inherit; }
.lp-btn-ghost:hover { background: rgba(93,135,255,0.14); border-color: rgba(93,135,255,0.4); color: #5D87FF; }
.lp-btn-outline { background: #fff; color: #5D87FF; border: 2px solid #5D87FF; border-radius: 12px; padding: 12px 28px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; font-family: inherit; }
.lp-btn-outline:hover { background: #5D87FF; color: #fff; }

/* Social proof */
.lp-hero-proof { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lp-hero-avatars { display: flex; }
.lp-hero-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #f0f4ff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; margin-right: -10px; flex-shrink: 0; }
.lp-hero-proof-text { font-size: 13px; color: #64748b; padding-left: 18px; }
.lp-hero-proof-text strong { color: #0f172a; }

/* ---- 3-Card Screenshot Showcase ---- */
.lp-showcase-wrap { display: flex; align-items: center; justify-content: center; perspective: 1600px; padding: 0 48px 96px; position: relative; z-index: 2; max-width: 1300px; margin: 0 auto; width: 100%; box-sizing: border-box; }

/* Soft radial glow behind card fan */
.lp-showcase-wrap::before { content: ""; position: absolute; width: 65%; height: 90%; top: 30%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(93,135,255,0.09) 0%, transparent 68%); pointer-events: none; z-index: 0; }

/* Base card */
.lp-sc-card { border-radius: 16px; flex-shrink: 0; position: relative; z-index: 1; }

/* Equal-height images: fixed height + cover crop from top */
.lp-sc-img { display: block; width: 100%; height: 360px; object-fit: cover; object-position: top; border-radius: 0 0 16px 16px; }

/* Side cards */
.lp-sc-left { width: 28%; margin-right: -64px; transform: rotateY(16deg); transform-origin: right center; z-index: 2; opacity: 0.72; filter: brightness(0.88) saturate(0.9); box-shadow: -20px 28px 64px rgba(93,135,255,0.14); border: 1px solid rgba(93,135,255,0.14); }
.lp-sc-right { width: 28%; margin-left: -64px; transform: rotateY(-16deg); transform-origin: left center; z-index: 2; opacity: 0.72; filter: brightness(0.88) saturate(0.9); box-shadow: 20px 28px 64px rgba(93,135,255,0.14); border: 1px solid rgba(93,135,255,0.14); }

/* Bottom gradient fade on side cards — blends into page bg */
.lp-sc-left::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, transparent 0%, rgba(238,242,255,0.94) 100%); pointer-events: none; z-index: 3; border-radius: 0 0 16px 16px; }
.lp-sc-right::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, transparent 0%, rgba(236,232,255,0.94) 100%); pointer-events: none; z-index: 3; border-radius: 0 0 16px 16px; }

/* Center card — full opacity, strong shadow */
.lp-sc-center { z-index: 3; box-shadow: 0 0 0 1px rgba(93,135,255,0.16), 0 4px 16px rgba(93,135,255,0.1), 0 20px 56px rgba(93,135,255,0.2), 0 48px 80px rgba(0,0,0,0.09); }

/* Hover: side cards become more visible */
.lp-showcase-wrap:hover .lp-sc-left { opacity: 0.84; filter: brightness(0.93) saturate(0.96); }
.lp-showcase-wrap:hover .lp-sc-right { opacity: 0.84; filter: brightness(0.93) saturate(0.96); }

/* Browser bar */
.lp-sc-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; border-radius: 16px 16px 0 0; }
.lp-browser-dots { display: flex; gap: 6px; }
.lp-browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.lp-browser-dot:nth-child(1) { background: #fc685f; }
.lp-browser-dot:nth-child(2) { background: #fdbc3d; }
.lp-browser-dot:nth-child(3) { background: #35cd4b; }
.lp-sc-url { flex: 1; background: #e2e8f0; border-radius: 5px; padding: 3px 10px; font-size: 11px; color: #94a3b8; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dashboard name pill — floats above the bottom fade on side cards */
.lp-sc-badge { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,0.70); backdrop-filter: blur(8px); color: rgba(255,255,255,0.92); font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 20px; white-space: nowrap; z-index: 4; pointer-events: none; letter-spacing: .3px; border: 1px solid rgba(255,255,255,0.1); }

/* Floating stat chips on center card */
.lp-sc-chip { position: absolute; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.95); backdrop-filter: blur(14px); border: 1px solid rgba(93,135,255,0.14); border-radius: 12px; padding: 10px 14px; box-shadow: 0 4px 24px rgba(93,135,255,0.16), 0 2px 8px rgba(0,0,0,0.05); z-index: 5; white-space: nowrap; }
.lp-sc-chip-tl { top: -18px; left: -18px; animation: lp-chip-float 5s ease-in-out infinite; }
.lp-sc-chip-br { bottom: -18px; right: -18px; animation: lp-chip-float 7s ease-in-out infinite reverse; }
@keyframes lp-chip-float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
.lp-sc-chip-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.lp-sc-chip-val { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1; }
.lp-sc-chip-lbl { font-size: 11px; color: #64748b; margin-top: 2px; }

/* Stats strip (light) */
.lp-hero-stats-strip { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.78); backdrop-filter: blur(12px); border-top: 1px solid rgba(93,135,255,0.1); padding: 28px 48px; position: relative; z-index: 1; flex-wrap: wrap; gap: 0; }
.lp-hero-stat { text-align: center; flex: 1; min-width: 90px; padding: 8px 0; }
.lp-hero-stat-val { font-size: 30px; font-weight: 800; color: #0f172a; line-height: 1; }
.lp-hero-stat-label { font-size: 12px; color: #94a3b8; font-weight: 500; margin-top: 5px; letter-spacing: .3px; }
.lp-hero-stat-divider { width: 1px; height: 40px; background: rgba(93,135,255,0.12); flex-shrink: 0; }

/* Sections */
.lp-section { padding: 88px 48px; }
.lp-section-alt { background: #fff; }
.lp-section-title { font-size: 36px; font-weight: 800; color: #0f172a; text-align: center; margin-bottom: 12px; }
.lp-section-sub { font-size: 16px; color: #64748b; text-align: center; max-width: 520px; margin: 0 auto 56px; line-height: 1.6; }
.lp-label { display: inline-block; background: rgba(93,135,255,0.1); color: #5D87FF; border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-bottom: 14px; text-transform: uppercase; }

/* Dashboard Cards */
.lp-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1200px; margin: 0 auto; }
.lp-dash-card { border-radius: 20px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08); background: #fff; transition: transform .25s, box-shadow .25s; text-decoration: none; color: inherit; display: block; }
.lp-dash-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(93,135,255,0.18); }
.lp-dash-preview { height: 220px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.lp-dash-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lp-dash-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.lp-dash-placeholder-icon { font-size: 42px; opacity: .7; }
.lp-dash-placeholder-name { font-size: 13px; font-weight: 600; opacity: .55; }
.lp-dash-c1 { background: linear-gradient(135deg,#1a2a4a 0%,#0d1b35 100%); color: #a8c4ff; }
.lp-dash-c2 { background: linear-gradient(135deg,#0d4a3a 0%,#13DEB9 100%); color: #d0fff8; }
.lp-dash-c3 { background: linear-gradient(135deg,#2d1b6b 0%,#7460EE 100%); color: #e0d8ff; }
.lp-dash-c4 { background: linear-gradient(135deg,#3d2200 0%,#FFAE1F 100%); color: #fff3d0; }
.lp-dash-c5 { background: linear-gradient(135deg,#0c2a5e 0%,#5D87FF 100%); color: #cfe0ff; }
.lp-dash-c6 { background: linear-gradient(135deg,#4a0d2a 0%,#FC185A 100%); color: #ffd0e0; }
.lp-dash-info { padding: 20px 22px; }
.lp-dash-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #5D87FF; margin-bottom: 6px; }
.lp-dash-name { font-size: 17px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.lp-dash-desc { font-size: 13px; color: #64748b; line-height: 1.5; }
.lp-dash-arrow { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 700; color: #5D87FF; }

/* Feature Cards */
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.lp-feat-card { background: #fff; border-radius: 18px; padding: 32px 28px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); border: 1px solid rgba(93,135,255,0.08); transition: transform .2s, box-shadow .2s; }
.lp-feat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(93,135,255,0.12); }
.lp-feat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; }
.lp-feat-icon-blue { background: rgba(93,135,255,0.12); color: #5D87FF; }
.lp-feat-icon-teal { background: rgba(19,222,185,0.12); color: #13DEB9; }
.lp-feat-icon-purple { background: rgba(116,96,238,0.12); color: #7460EE; }
.lp-feat-icon-amber { background: rgba(255,174,31,0.12); color: #FFAE1F; }
.lp-feat-icon-pink { background: rgba(252,24,90,0.12); color: #FC185A; }
.lp-feat-icon-green { background: rgba(34,197,94,0.12); color: #22C55E; }
.lp-feat-icon-orange { background: rgba(250,137,107,0.12); color: #FA896B; }
.lp-feat-icon-dark { background: rgba(30,41,59,0.08); color: #1e293b; }
.lp-feat-title { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.lp-feat-desc { font-size: 13.5px; color: #64748b; line-height: 1.65; }

/* Pages Overview */
.lp-pages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.lp-pages-card { background: #fff; border-radius: 16px; padding: 24px 20px; border: 1px solid rgba(93,135,255,0.1); text-align: center; }
.lp-pages-count { font-size: 36px; font-weight: 800; color: #5D87FF; line-height: 1; margin-bottom: 6px; }
.lp-pages-label { font-size: 13px; font-weight: 600; color: #64748b; }
.lp-include-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 40px auto 0; }
.lp-include-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 16px 18px; border: 1px solid rgba(93,135,255,0.08); }
.lp-include-dot { width: 8px; height: 8px; border-radius: 50%; background: #5D87FF; flex-shrink: 0; }
.lp-include-text { font-size: 14px; font-weight: 600; color: #334155; }

/* Tech */
.lp-tech-grid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; max-width: 900px; margin: 0 auto; }
.lp-tech-pill { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(93,135,255,0.12); border-radius: 40px; padding: 10px 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.lp-tech-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lp-tech-name { font-size: 14px; font-weight: 700; color: #334155; }
.lp-tech-ver { font-size: 12px; color: #94a3b8; margin-left: 4px; }

/* CTA */
.lp-cta { background: linear-gradient(135deg,#5D87FF 0%,#7460EE 100%); padding: 88px 48px; text-align: center; color: #fff; }
.lp-cta-title { font-size: 40px; font-weight: 800; margin-bottom: 16px; }
.lp-cta-sub { font-size: 17px; opacity: .85; max-width: 480px; margin: 0 auto 36px; }
.lp-btn-white { background: #fff; color: #5D87FF; border: none; border-radius: 12px; padding: 14px 32px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s; font-family: inherit; }
.lp-btn-white:hover { opacity: .92; color: #5D87FF; }

/* Footer */
.lp-footer { background: #0f172a; color: rgba(255,255,255,0.6); padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.lp-footer-brand { font-size: 18px; font-weight: 800; color: #fff; }
.lp-footer-brand span { color: #5D87FF; }
.lp-footer-links { display: flex; gap: 24px; }
.lp-footer-links a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 13px; transition: color .2s; }
.lp-footer-links a:hover { color: #fff; }

/* Apps Grid */
.lp-apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1200px; margin: 0 auto; }
.lp-apps-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.07); border: 1px solid rgba(93,135,255,0.08); text-decoration: none; color: inherit; display: block; transition: transform .22s, box-shadow .22s; }
.lp-apps-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(93,135,255,0.16); }
.lp-apps-preview { height: 160px; overflow: hidden; background: #f1f5ff; }
.lp-apps-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lp-apps-info { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.lp-apps-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.lp-apps-icon-blue   { background: rgba(93,135,255,0.12);  color: #5D87FF; }
.lp-apps-icon-teal   { background: rgba(19,222,185,0.12);  color: #13DEB9; }
.lp-apps-icon-purple { background: rgba(116,96,238,0.12);  color: #7460EE; }
.lp-apps-icon-amber  { background: rgba(255,174,31,0.12);  color: #FFAE1F; }
.lp-apps-icon-pink   { background: rgba(252,24,90,0.12);   color: #FC185A; }
.lp-apps-icon-green  { background: rgba(34,197,94,0.12);   color: #22C55E; }
.lp-apps-icon-orange { background: rgba(250,137,107,0.12); color: #FA896B; }
.lp-apps-name { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }
.lp-apps-desc { font-size: 12px; color: #64748b; line-height: 1.5; }

/* Responsive */
@media (max-width: 992px) {
  .lp-nav { padding: 0 24px; }
  .lp-nav-links { display: none; }
  .lp-section,.lp-cta { padding-left: 24px; padding-right: 24px; }
  .lp-dash-grid,.lp-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-apps-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-pages-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-include-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-footer { padding: 32px 24px; }
  .lp-showcase-wrap { padding: 0 16px 56px; }
  .lp-sc-left { width: 26%; margin-right: -40px; }
  .lp-sc-center { width: 50%; }
  .lp-sc-right { width: 26%; margin-left: -40px; }
}
@media (max-width: 720px) {
  .lp-sc-left, .lp-sc-right { display: none; }
  .lp-sc-center { width: 90%; }
  .lp-showcase-wrap { padding: 0 16px 48px; }
  .lp-hero-copy { padding: 108px 24px 44px; }
  .lp-hero-stats-strip { padding: 20px 16px; gap: 4px; }
  .lp-hero-stat-divider { display: none; }
}
@media (max-width: 576px) {
  .lp-dash-grid,.lp-feat-grid,.lp-apps-grid { grid-template-columns: 1fr; }
  .lp-sc-chip-tl, .lp-sc-chip-br { display: none; }
}

/* ── Expediente / Chat — handle + panel lateral derecho ─────────────────── */
.exp-panel-handle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    background: var(--bs-primary);
    border: none;
    border-radius: .4rem 0 0 .4rem;
    color: #fff;
    width: 2.2rem;
    height: 3.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: -3px 2px 10px rgba(0,0,0,.25);
    transition: right .3s ease;
}
.exp-panel-handle:hover { background: var(--bs-primary-dark, #4570EA); }
.exp-panel-handle i { transition: transform .25s ease; display: inline-block; }
.exp-offcanvas { width: 360px !important; }
@media (max-width: 576px) {
    .exp-offcanvas { width: calc(100vw - 2.5rem) !important; }
}
.exp-aside { display: flex; flex-direction: column; gap: .75rem; }

/* ── Grilla de accesos rápidos compartida (nav entre módulos de expediente) ── */
.exp-accesos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}
.exp-accesos-grid .exp-btn-full { grid-column: 1 / -1; }
.exp-accesos-grid .exp-action-btn {
    display: flex !important; align-items: center; justify-content: center; gap: .3rem;
    padding: .35rem .5rem; font-size: .78rem; font-weight: 500;
    white-space: nowrap; width: 100% !important;
}
.exp-accesos-grid .exp-action-btn .bi { font-size: .9rem; }
.btn-outline-purple {
    --bs-btn-color: #6f42c1; --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-bg: #6f42c1; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #6f42c1;
    --bs-btn-active-bg: #6f42c1; --bs-btn-active-color: #fff;
}
.btn-outline-indigo {
    --bs-btn-color: #4b52b5; --bs-btn-border-color: #4b52b5;
    --bs-btn-hover-bg: #4b52b5; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #4b52b5;
    --bs-btn-active-bg: #4b52b5; --bs-btn-active-color: #fff;
}