/* ============================================================
   Liner Admin — Bootstrap 5 Theme
   Color presets + dark mode + RTL + custom components
   ============================================================ */

/* ---------- COLOR PRESETS ------------------------------------ */
:root,
[data-theme="navy"] {
  --p-50:  240 247 255;
  --p-100: 220 236 252;
  --p-200: 180 213 245;
  --p-300: 130 183 230;
  --p-400:  70 140 205;
  --p-500:   0  66 118;
  --p-600:   0  56 102;
  --p-700:   0  47  86;
  --p-800:   0  38  70;
  --p-900:   0  30  56;
  --p-hex: #004276;
}
[data-theme="blue"] {
  --p-50:  239 246 255; --p-100: 219 234 254; --p-200: 191 219 254;
  --p-300: 147 197 253; --p-400:  96 165 250; --p-500:  59 130 246;
  --p-600:  37  99 235; --p-700:  29  78 216; --p-800:  30  64 175;
  --p-900:  30  58 138; --p-hex: #3b82f6;
}
[data-theme="green"] {
  --p-50:  236 253 245; --p-100: 209 250 229; --p-200: 167 243 208;
  --p-300: 110 231 183; --p-400:  52 211 153; --p-500:  16 185 129;
  --p-600:   5 150 105; --p-700:   4 120  87; --p-800:   6  95  70;
  --p-900:   6  78  59; --p-hex: #10b981;
}
[data-theme="orange"] {
  --p-50:  255 247 237; --p-100: 255 237 213; --p-200: 254 215 170;
  --p-300: 253 186 116; --p-400: 251 146  60; --p-500: 249 115  22;
  --p-600: 234  88  12; --p-700: 194  65  12; --p-800: 154  52  18;
  --p-900: 124  45  18; --p-hex: #f97316;
}
[data-theme="red"] {
  --p-50:  255 241 242; --p-100: 255 228 230; --p-200: 254 205 211;
  --p-300: 253 164 175; --p-400: 251 113 133; --p-500: 244  63  94;
  --p-600: 225  29  72; --p-700: 190  18  60; --p-800: 159  18  57;
  --p-900: 136  19  55; --p-hex: #f43f5e;
}

:root {
  --bs-primary: var(--p-hex);
  --bs-primary-rgb: var(--p-500);
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --body-bg: var(--slate-50);
  --surface-bg: #ffffff;
  --surface-border: var(--slate-200);
  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-muted: var(--slate-400);
  --header-h: 64px;
  --horizontal-h: 48px;
  --sidebar-w: 256px;
  --sidebar-collapsed-w: 88px;
  --transition: all .3s ease-in-out;
}

html.dark {
  --body-bg: var(--slate-900);
  --surface-bg: var(--slate-800);
  --surface-border: var(--slate-700);
  --text-primary: var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-muted: var(--slate-500);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { font-family: 'Inter', system-ui, -apple-system, sans-serif; scroll-behavior: smooth; }
body {
  background: var(--body-bg);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  margin: 0;
  transition: background-color .2s, color .2s;
}

/* ---------- UTILITY: rgb-based primary colors --------------- */
.text-primary-500 { color: rgb(var(--p-500)) !important; }
.text-primary-600 { color: rgb(var(--p-600)) !important; }
.text-primary-700 { color: rgb(var(--p-700)) !important; }
.text-primary { color: rgb(var(--p-500)) !important; }
.bg-primary-50  { background: rgb(var(--p-50)); }
.bg-primary-100 { background: rgb(var(--p-100)); }
.bg-primary-500 { background: rgb(var(--p-500)) !important; }
.bg-primary-600 { background: rgb(var(--p-600)) !important; }
.border-primary-500 { border-color: rgb(var(--p-500)) !important; }
.bg-primary-soft { background: rgb(var(--p-500) / 0.10); }
.text-gradient { color: rgb(var(--p-500)); }
.shadow-glow { box-shadow: 0 0 20px rgb(var(--p-500) / 0.35); }

html.dark .bg-primary-50  { background: rgb(var(--p-900) / 0.30); }
html.dark .bg-primary-100 { background: rgb(var(--p-900) / 0.40); }
html.dark .text-primary-600,
html.dark .text-primary-700 { color: rgb(var(--p-400)) !important; }

/* Bootstrap primary override */
.btn-primary {
  --bs-btn-bg: rgb(var(--p-500));
  --bs-btn-border-color: rgb(var(--p-500));
  --bs-btn-hover-bg: rgb(var(--p-600));
  --bs-btn-hover-border-color: rgb(var(--p-600));
  --bs-btn-active-bg: rgb(var(--p-700));
  --bs-btn-active-border-color: rgb(var(--p-700));
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: rgb(var(--p-600));
  --bs-btn-border-color: rgb(var(--p-500));
  --bs-btn-hover-bg: rgb(var(--p-500));
  --bs-btn-hover-border-color: rgb(var(--p-500));
  --bs-btn-active-bg: rgb(var(--p-600));
}
.bg-primary { background: rgb(var(--p-500)) !important; }
.form-control:focus,
.form-select:focus {
  border-color: rgb(var(--p-400));
  box-shadow: 0 0 0 .2rem rgb(var(--p-500) / 0.18);
}
.form-check-input:checked {
  background-color: rgb(var(--p-500));
  border-color: rgb(var(--p-500));
}
.link-primary, a.link-primary { color: rgb(var(--p-600)) !important; }
.page-link { color: rgb(var(--p-600)); }
.page-item.active .page-link {
  background: rgb(var(--p-500));
  border-color: rgb(var(--p-500));
}

/* ---------- DARK MODE for Bootstrap components -------------- */
html.dark body { background: var(--slate-900); color: var(--slate-100); }
html.dark .card,
html.dark .modal-content,
html.dark .dropdown-menu,
html.dark .offcanvas,
html.dark .list-group-item,
html.dark .accordion-item,
html.dark .accordion-button,
html.dark .nav-tabs .nav-link.active {
  background-color: var(--slate-800);
  color: var(--slate-100);
  border-color: var(--slate-700);
}
html.dark .accordion-button:not(.collapsed) {
  background: rgb(var(--p-900) / 0.4);
  color: rgb(var(--p-400));
}
html.dark .form-control,
html.dark .form-select,
html.dark .input-group-text {
  background-color: var(--slate-800);
  border-color: var(--slate-700);
  color: var(--slate-100);
}
html.dark .form-control::placeholder { color: var(--slate-500); }
html.dark .table { color: var(--slate-200); --bs-table-bg: transparent; --bs-table-color: var(--slate-200); --bs-table-border-color: var(--slate-700); --bs-table-hover-bg: rgb(51 65 85 / .3); --bs-table-hover-color: var(--slate-100); --bs-table-striped-bg: rgb(51 65 85 / .2); --bs-table-striped-color: var(--slate-200); }
html.dark .border, html.dark .border-top, html.dark .border-bottom,
html.dark .border-start, html.dark .border-end { border-color: var(--slate-700) !important; }
html.dark .text-muted,
html.dark .text-body-secondary { color: var(--slate-400) !important; }
html.dark .text-dark { color: var(--slate-100) !important; }
html.dark .bg-light { background: var(--slate-700) !important; }
html.dark .bg-white { background: var(--slate-800) !important; }
html.dark hr { border-color: var(--slate-700); }
html.dark .nav-link { color: var(--slate-400); }
html.dark .nav-link:hover, html.dark .nav-link:focus { color: var(--slate-100); }
html.dark .breadcrumb-item, html.dark .breadcrumb-item.active,
html.dark .breadcrumb-item + .breadcrumb-item::before { color: var(--slate-400); }
html.dark .btn-light {
  background: var(--slate-700); border-color: var(--slate-700); color: var(--slate-200);
}
html.dark .btn-light:hover { background: var(--slate-600); }
html.dark .alert-light { background: var(--slate-700); color: var(--slate-200); }
html.dark .progress { background: var(--slate-700); }
html.dark .modal-header, html.dark .modal-footer { border-color: var(--slate-700); }
html.dark .close, html.dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html.dark .text-bg-light { background: var(--slate-700) !important; color: var(--slate-100) !important; }
html.dark .dropdown-item { color: var(--slate-300); }
html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background: var(--slate-700); color: var(--slate-100); }
html.dark .dropdown-divider { border-color: var(--slate-700); }
html.dark .form-check-input { background-color: var(--slate-700); border-color: var(--slate-600); }

/* ---------- LAYOUT ------------------------------------------ */
.app-wrapper { min-height: 100vh; }
.app-sidebar {
  position: fixed; top: 0;
  inset-inline-start: 0;
  height: 100%; width: var(--sidebar-w);
  background: var(--surface-bg);
  border-inline-end: 1px solid var(--surface-border);
  z-index: 1030;
  display: flex; flex-direction: column;
  transition: var(--transition);
  overflow: hidden;
}
.app-sidebar.collapsed { width: var(--sidebar-collapsed-w); }
.app-sidebar .sidebar-brand {
  display: flex; align-items: center; gap: .75rem;
  height: var(--header-h); padding: 0 1.25rem;
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
}
.app-sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 .75rem; }
.app-sidebar.collapsed .brand-text { display: none; }
.app-sidebar .sidebar-nav {
  flex: 1; overflow-y: auto; padding: 1rem .5rem;
}
.sidebar-group-title {
  padding: .375rem .75rem; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--slate-400);
}
html.dark .sidebar-group-title { color: var(--slate-500); }
.app-sidebar.collapsed .sidebar-group-title { display: none; }
.sidebar-nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .5rem;
  color: var(--slate-600); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: all .15s;
  margin-bottom: 2px;
}
html.dark .sidebar-nav-link { color: var(--slate-400); }
.sidebar-nav-link:hover {
  background: var(--slate-100); color: var(--slate-900);
}
html.dark .sidebar-nav-link:hover { background: rgb(51 65 85 / .5); color: var(--slate-100); }
.sidebar-nav-link.active {
  background: rgb(var(--p-500) / .1);
  color: rgb(var(--p-600));
}
html.dark .sidebar-nav-link.active {
  background: rgb(var(--p-900) / .3);
  color: rgb(var(--p-400));
}
.sidebar-nav-link i, .sidebar-nav-link svg { flex-shrink: 0; }
.app-sidebar.collapsed .sidebar-nav-link {
  flex-direction: column; gap: 2px; padding: .625rem .25rem;
  font-size: 10px; line-height: 1.1; text-align: center;
}
.app-sidebar.collapsed .sidebar-submenu { display: none !important; }
.app-sidebar.collapsed .sidebar-nav-link .toggle-icon { display: none; }

/* Collapsed sidebar — show group-icons nav, hide expanded item nav */
.sidebar-nav-collapsed { display: none; }
.app-sidebar.collapsed .sidebar-nav { display: none !important; }
.app-sidebar.collapsed .sidebar-nav-collapsed { display: flex !important; flex-direction: column; gap: 4px; padding: 12px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.sidebar-coll-group { position: relative; }
.sidebar-coll-trigger {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 10px; border: 0; background: transparent;
  color: #64748b; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sidebar-coll-trigger:hover { background: #f1f5f9; color: #0f172a; }
.sidebar-coll-trigger.active { background: rgb(var(--p-500) / .12); color: rgb(var(--p-600)); }
.sidebar-coll-label { font-size: 10px; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .sidebar-coll-trigger { color: #94a3b8; }
html.dark .sidebar-coll-trigger:hover { background: rgb(51 65 85 / .5); color: #f1f5f9; }
html.dark .sidebar-coll-trigger.active { background: rgb(var(--p-900) / .35); color: rgb(var(--p-400)); }

/* Flyout panel for collapsed groups */
.sidebar-flyout { display: none; }
.sidebar-flyout.sidebar-flyout-open {
  display: block;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(15,23,42,.15), 0 4px 6px -4px rgba(15,23,42,.08);
  padding: 8px 0;
  overflow-y: auto;
  animation: sidebar-fly-in .12s ease-out;
}
html.dark .sidebar-flyout.sidebar-flyout-open { background: #1e293b; border-color: #334155; }
@keyframes sidebar-fly-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sidebar-flyout-title {
  padding: 6px 14px;
  font-size: 10px; font-weight: 700;
  color: #94a3b8; text-transform: uppercase; letter-spacing: .1em;
}
.sidebar-flyout-header {
  padding: 10px 14px 4px;
  margin-top: 4px;
  border-top: 1px solid #f1f5f9;
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .08em;
}
html.dark .sidebar-flyout-header { border-color: #334155; }
.sidebar-flyout-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0 6px;
  font-size: 13px; color: #475569;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.sidebar-flyout-link:hover { background: #f1f5f9; color: #0f172a; }
.sidebar-flyout-link.active { background: rgb(var(--p-500) / .1); color: rgb(var(--p-600)); font-weight: 500; }
html.dark .sidebar-flyout-link { color: #94a3b8; }
html.dark .sidebar-flyout-link:hover { background: rgb(51 65 85 / .5); color: #f1f5f9; }
.sidebar-flyout-link svg, .sidebar-flyout-link i { flex-shrink: 0; }
.sidebar-submenu {
  margin: 4px 0 4px 1rem; padding-inline-start: .75rem;
  border-inline-start: 1px solid var(--surface-border);
  display: none;
}
.sidebar-submenu.open { display: block; }
.sidebar-submenu .sidebar-nav-link { font-size: 12.5px; padding: .375rem .75rem; }
.sidebar-nav-link .toggle-icon { margin-inline-start: auto; transition: transform .2s; }
.sidebar-nav-link.expanded .toggle-icon { transform: rotate(180deg); }
.app-sidebar .sidebar-footer {
  padding: 1rem; border-top: 1px solid var(--surface-border); flex-shrink: 0;
}
.app-sidebar.collapsed .sidebar-footer-info { display: none; }
.app-sidebar.collapsed .sidebar-footer { padding: .75rem; text-align: center; }
.app-sidebar .user-mini {
  display: flex; align-items: center; gap: .75rem; padding: .5rem;
  border-radius: .75rem; cursor: pointer;
}
.app-sidebar .user-mini:hover { background: var(--slate-50); }
html.dark .app-sidebar .user-mini:hover { background: rgb(51 65 85 / .5); }
.user-avatar-mini {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgb(var(--p-500)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}

/* Mobile drawer */
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1029;
  display: none;
}
.sidebar-backdrop.open { display: block; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); width: 256px !important; }
  .app-sidebar.mobile-open { transform: translateX(0); }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  [dir="rtl"] .app-sidebar.mobile-open { transform: translateX(0); }
}

/* Header */
.app-header {
  position: fixed; top: 0; inset-inline-start: var(--sidebar-w); inset-inline-end: 0;
  height: var(--header-h);
  background: var(--surface-bg);
  border-bottom: 1px solid var(--surface-border);
  z-index: 1020;
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  transition: var(--transition);
}
.app-sidebar.collapsed ~ .app-header,
body.sidebar-collapsed .app-header { inset-inline-start: var(--sidebar-collapsed-w); }
body.horizontal-mode .app-header { inset-inline-start: 0; }
@media (max-width: 991.98px) {
  .app-header { inset-inline-start: 0 !important; }
}

/* Header search — click-to-expand, matches React design */
.hdr-search { position: relative; display: inline-flex; align-items: center; }
.hdr-search-btn { color: #475569; }
html.dark .hdr-search-btn { color: #94a3b8; }
.hdr-search-input { display: flex; align-items: center; gap: 8px; animation: hdr-search-in .15s ease-out; }
@keyframes hdr-search-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hdr-search-field {
  width: 192px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.hdr-search-field:focus { border-color: rgb(var(--p-500)); box-shadow: 0 0 0 3px rgb(var(--p-500) / .2); }
html.dark .hdr-search-field { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.hdr-search-close { color: #94a3b8; }
.hdr-search-close:hover { background: #f1f5f9; color: #475569; }
@media (min-width: 640px) { .hdr-search-field { width: 256px; } }

/* Mobile header logo — appears left of the menu button on < lg */
.header-mobile-logo { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 8px; text-decoration: none; transition: background-color .15s; }
.header-mobile-logo:hover { background: #f1f5f9; }
html.dark .header-mobile-logo:hover { background: rgb(51 65 85 / .5); }
.header-mobile-logo img { display: block; width: 28px; height: 28px; }
@media (min-width: 992px) { .header-mobile-logo { display: none !important; } }

/* Horizontal mode: hide sidebar entirely on desktop, keep mobile drawer behaviour */
body.horizontal-mode .app-sidebar { display: none; }
@media (max-width: 991.98px) {
  body.horizontal-mode .app-sidebar { display: flex; }
  /* Hide horizontal bar on mobile; sidebar drawer takes over */
  body.horizontal-mode .horizontal-bar { display: none !important; }
  body.horizontal-mode .app-main { margin-top: var(--header-h) !important; }
}
.app-header .header-icon-btn {
  width: 40px; height: 40px; border: 0; background: transparent;
  border-radius: .5rem; color: var(--slate-600);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
  position: relative;
}
html.dark .app-header .header-icon-btn { color: var(--slate-400); }
.app-header .header-icon-btn:hover { background: var(--slate-100); }
html.dark .app-header .header-icon-btn:hover { background: rgb(51 65 85 / .8); }
.header-breadcrumb {
  display: flex; align-items: center; gap: .375rem; font-size: 13px;
  color: var(--slate-400);
}
.header-breadcrumb .crumb-last { color: var(--slate-700); font-weight: 500; }
html.dark .header-breadcrumb .crumb-last { color: var(--slate-300); }
.notif-dot {
  position: absolute; top: 6px; inset-inline-end: 6px;
  background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}

/* Horizontal menu bar (under header) */
.horizontal-bar {
  display: none;
  position: fixed; top: var(--header-h); inset-inline-start: 0; inset-inline-end: 0;
  height: var(--horizontal-h);
  background: var(--surface-bg);
  border-bottom: 1px solid var(--surface-border);
  z-index: 1015;
  align-items: center;
  padding: 0 1rem;
  gap: .25rem;
  overflow-x: auto;
}
/* Horizontal menu bar — only renders when body.horizontal-mode */
.horizontal-bar { display: none; }
body.horizontal-mode .horizontal-bar {
  position: fixed; top: var(--header-h); inset-inline-start: 0; inset-inline-end: 0;
  height: var(--horizontal-h);
  background: var(--surface-bg);
  border-bottom: 1px solid var(--surface-border);
  z-index: 20;
  display: flex; align-items: center;
  padding: 0 1rem; gap: 4px;
  overflow-x: auto;
}
@media (max-width: 991.98px) { body.horizontal-mode .horizontal-bar { display: none; } }
.horizontal-bar::-webkit-scrollbar { display: none; }

.hbar-group { position: relative; }
.hbar-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  color: #475569; font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0; background: transparent;
  transition: background-color .15s, color .15s;
}
html.dark .hbar-item { color: #94a3b8; }
.hbar-item:hover { background: #f1f5f9; color: #0f172a; }
html.dark .hbar-item:hover { background: rgb(51 65 85 / .5); color: #f1f5f9; }
.hbar-item.active,
.hbar-item.hbar-trigger-open { background: #f1f5f9; color: #0f172a; }
.hbar-item.active { background: rgb(var(--p-500) / .1); color: rgb(var(--p-600)); }
html.dark .hbar-item.active { background: rgb(var(--p-900) / .35); color: rgb(var(--p-400)); }
.hbar-chev { transition: transform .2s; opacity: .7; }
.hbar-trigger-open .hbar-chev { transform: rotate(180deg); }

/* Dropdown panel (rendered as portal — positioned absolutely via JS) */
.hbar-dropdown { display: none; }
.hbar-dropdown.hbar-open {
  display: block;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(15,23,42,.15), 0 4px 6px -4px rgba(15,23,42,.08);
  padding: 8px 0;
  overflow-y: auto;
  animation: hbar-fly-in .12s ease-out;
}
html.dark .hbar-dropdown.hbar-open { background: #1e293b; border-color: #334155; }
@keyframes hbar-fly-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hbar-section {
  padding: 10px 14px 4px;
  margin-top: 4px;
  border-top: 1px solid #f1f5f9;
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .08em;
}
.hbar-section:first-child { border-top: 0; margin-top: 0; }
html.dark .hbar-section { border-color: #334155; }
.hbar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0 6px;
  font-size: 13px; color: #475569;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.hbar-link:hover { background: #f1f5f9; color: #0f172a; }
.hbar-link.active { background: rgb(var(--p-500) / .1); color: rgb(var(--p-600)); font-weight: 500; }
html.dark .hbar-link { color: #94a3b8; }
html.dark .hbar-link:hover { background: rgb(51 65 85 / .5); color: #f1f5f9; }
.hbar-link svg, .hbar-link i { flex-shrink: 0; }

/* Main */
.app-main {
  margin-inline-start: var(--sidebar-w);
  margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
  transition: var(--transition);
  padding: 1.25rem;
}
body.sidebar-collapsed .app-main { margin-inline-start: var(--sidebar-collapsed-w); }
body.horizontal-mode .app-main { margin-inline-start: 0; margin-top: calc(var(--header-h) + var(--horizontal-h)); }
@media (max-width: 991.98px) { .app-main { margin-inline-start: 0 !important; } }

/* Settings panel */
.settings-overlay {
  position: fixed; inset: 0; background: rgb(0 0 0 / .4); backdrop-filter: blur(2px);
  z-index: 1050; display: none;
}
.settings-overlay.open { display: block; }
.settings-panel {
  position: fixed; top: 0; inset-inline-end: 0; height: 100%; width: 320px;
  background: var(--surface-bg); border-inline-start: 1px solid var(--surface-border);
  z-index: 1060; transform: translateX(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  box-shadow: -10px 0 30px rgb(0 0 0 / .1);
}
[dir="rtl"] .settings-panel { transform: translateX(-100%); }
.settings-panel.open { transform: translateX(0); }
.settings-panel .settings-section { padding: 1.25rem; border-bottom: 1px solid var(--surface-border); }
.settings-panel h6 {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-400); margin-bottom: .75rem;
}
.mode-card {
  flex: 1; padding: .75rem; border: 2px solid var(--surface-border);
  border-radius: .75rem; cursor: pointer; transition: all .15s;
  background: transparent;
  display: flex; flex-direction: column; gap: .5rem;
}
.mode-card.active { border-color: rgb(var(--p-500)); box-shadow: 0 0 16px rgb(var(--p-500) / .25); }
.mode-card .mini-preview {
  width: 100%; height: 56px; border-radius: .5rem; overflow: hidden; display: flex; flex-direction: column;
}
.mode-card.light .mini-preview { background: var(--slate-100); }
.mode-card.dark .mini-preview { background: var(--slate-900); }
.mode-card .mini-header {
  height: 12px; display: flex; align-items: center; gap: 4px; padding: 0 6px;
}
.mode-card.light .mini-header { background: #fff; }
.mode-card.dark .mini-header { background: var(--slate-800); }
.color-swatch-btn {
  width: 100%; padding: .5rem .25rem; border: 0; background: transparent;
  border-radius: .75rem; cursor: pointer; transition: background .15s;
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
}
.color-swatch-btn:hover { background: var(--slate-100); }
html.dark .color-swatch-btn:hover { background: rgb(51 65 85 / .5); }
.color-swatch-btn.active { background: var(--slate-100); outline: 2px solid; outline-offset: 1px; }
html.dark .color-swatch-btn.active { background: var(--slate-700); }
.color-swatch-btn .swatch {
  width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}
.color-swatch-btn .swatch-label { font-size: 10px; font-weight: 500; color: var(--slate-600); }
html.dark .color-swatch-btn .swatch-label { color: var(--slate-400); }
.setting-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 0; cursor: pointer;
}
.setting-toggle .toggle-label { font-size: 13px; font-weight: 500; color: var(--slate-700); }
html.dark .setting-toggle .toggle-label { color: var(--slate-300); }
.switch {
  position: relative; width: 44px; height: 24px;
  background: var(--slate-200); border-radius: 9999px;
  transition: background .2s;
}
html.dark .switch { background: var(--slate-600); }
.switch::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}
.switch.on { background: rgb(var(--p-500)); }
.switch.on::after { transform: translateX(20px); }
[dir="rtl"] .switch.on::after { transform: translateX(-20px); }

/* ---------- COMPONENTS -------------------------------------- */
.card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / .06);
}
.card-hover { transition: all .2s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .08); }

.badge { font-weight: 600; font-size: 11px; padding: .25em .55em; }
.badge-soft-primary { background: rgb(var(--p-500) / .15); color: rgb(var(--p-700)); }
.badge-soft-success { background: rgb(16 185 129 / .15); color: #047857; }
.badge-soft-warning { background: rgb(245 158 11 / .15); color: #b45309; }
.badge-soft-danger  { background: rgb(239 68 68 / .15); color: #b91c1c; }
.badge-soft-info    { background: rgb(6 182 212 / .15); color: #0e7490; }
.badge-soft-secondary { background: rgb(100 116 139 / .15); color: var(--slate-600); }
html.dark .badge-soft-primary { color: rgb(var(--p-300)); background: rgb(var(--p-500) / .25); }
html.dark .badge-soft-success { color: #6ee7b7; background: rgb(16 185 129 / .2); }
html.dark .badge-soft-warning { color: #fcd34d; background: rgb(245 158 11 / .2); }
html.dark .badge-soft-danger  { color: #fca5a5; background: rgb(239 68 68 / .2); }
html.dark .badge-soft-info    { color: #67e8f9; background: rgb(6 182 212 / .2); }
html.dark .badge-soft-secondary { color: var(--slate-300); background: rgb(100 116 139 / .25); }

.dot-badge {
  display: inline-flex; align-items: center; gap: .375rem;
}
.dot-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: rgb(var(--p-500));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 24px; height: 24px; font-size: 9px; }
.avatar-sm { width: 32px; height: 32px; font-size: 11px; }
.avatar-md { width: 40px; height: 40px; font-size: 13px; }
.avatar-lg { width: 48px; height: 48px; font-size: 15px; }
.avatar-xl { width: 64px; height: 64px; font-size: 18px; }
.avatar-2xl { width: 80px; height: 80px; font-size: 22px; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar:not(:first-child) { margin-inline-start: -10px; border: 2px solid var(--surface-bg); }

/* Buttons */
.btn { font-weight: 500; border-radius: .5rem; }
.btn-soft-primary {
  background: rgb(var(--p-500) / .12); color: rgb(var(--p-600)); border: 1px solid transparent;
}
.btn-soft-primary:hover { background: rgb(var(--p-500) / .2); color: rgb(var(--p-700)); }
.btn-soft-success { background: rgb(16 185 129 / .12); color: #047857; }
.btn-soft-success:hover { background: rgb(16 185 129 / .2); color: #065f46; }
.btn-soft-warning { background: rgb(245 158 11 / .12); color: #b45309; }
.btn-soft-warning:hover { background: rgb(245 158 11 / .2); color: #92400e; }
.btn-soft-danger { background: rgb(239 68 68 / .12); color: #b91c1c; }
.btn-soft-danger:hover { background: rgb(239 68 68 / .2); color: #991b1b; }
.btn-soft-info { background: rgb(6 182 212 / .12); color: #0e7490; }
.btn-soft-info:hover { background: rgb(6 182 212 / .2); color: #155e75; }
.btn-soft-secondary { background: rgb(100 116 139 / .12); color: var(--slate-700); }
.btn-soft-secondary:hover { background: rgb(100 116 139 / .2); color: var(--slate-800); }
html.dark .btn-soft-success { color: #6ee7b7; }
html.dark .btn-soft-warning { color: #fcd34d; }
html.dark .btn-soft-danger { color: #fca5a5; }
html.dark .btn-soft-info { color: #67e8f9; }
html.dark .btn-soft-secondary { color: var(--slate-200); }

.btn-icon {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon-sm { width: 28px; height: 28px; }
.btn-icon-lg { width: 44px; height: 44px; }

/* Stat tiles colors */
.tile-bg-primary { background: rgb(var(--p-50)); border-color: rgb(var(--p-100)); }
.tile-bg-cyan { background: #ecfeff; border-color: #cffafe; }
.tile-bg-emerald { background: #ecfdf5; border-color: #d1fae5; }
.tile-bg-amber { background: #fffbeb; border-color: #fef3c7; }
.tile-bg-rose { background: #fff1f2; border-color: #ffe4e6; }
.tile-bg-violet { background: #f5f3ff; border-color: #ede9fe; }
html.dark .tile-bg-primary { background: rgb(var(--p-900) / .2); border-color: rgb(var(--p-800) / .3); }
html.dark .tile-bg-cyan { background: rgb(8 145 178 / .15); border-color: rgb(14 116 144 / .3); }
html.dark .tile-bg-emerald { background: rgb(5 150 105 / .15); border-color: rgb(4 120 87 / .3); }
html.dark .tile-bg-amber { background: rgb(217 119 6 / .15); border-color: rgb(180 83 9 / .3); }
html.dark .tile-bg-rose { background: rgb(225 29 72 / .15); border-color: rgb(190 18 60 / .3); }
html.dark .tile-bg-violet { background: rgb(139 92 246 / .15); border-color: rgb(124 58 237 / .3); }

/* Page header */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 22px; font-weight: 700; margin: 0; }
.page-header p { color: var(--text-secondary); font-size: 13px; margin: .25rem 0 0; }

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 9999px; }
html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--slate-600); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Notification dropdown */
.notif-menu, .user-menu {
  min-width: 320px; padding: 0; overflow: hidden;
}
.user-menu { min-width: 260px; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--slate-100);
  cursor: pointer; transition: background .15s;
}
html.dark .notif-item { border-color: var(--slate-700); }
.notif-item:hover { background: var(--slate-50); }
html.dark .notif-item:hover { background: rgb(51 65 85 / .3); }
.notif-item.unread { background: rgb(var(--p-500) / .05); }
.notif-icon-wrap {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Chat bubble */
.chat-bubble {
  max-width: 70%; padding: .5rem .875rem; border-radius: 1rem;
  font-size: 13.5px; line-height: 1.4;
}
.chat-bubble.sent {
  background: rgb(var(--p-500)); color: #fff; border-top-right-radius: .25rem;
  margin-inline-start: auto;
}
[dir="rtl"] .chat-bubble.sent {
  border-top-right-radius: 1rem; border-top-left-radius: .25rem;
}
.chat-bubble.received {
  background: var(--surface-bg); color: var(--text-primary);
  border: 1px solid var(--surface-border); border-top-left-radius: .25rem;
}

/* Kanban */
.kanban-col {
  background: var(--slate-100); border-radius: .75rem; padding: 1rem;
  min-height: 200px;
}
html.dark .kanban-col { background: rgb(51 65 85 / .4); }
.kanban-card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: .5rem; padding: .75rem; margin-bottom: .75rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
  cursor: grab;
}

/* Email/contacts list */
.email-item {
  display: flex; gap: .75rem; padding: 1rem; cursor: pointer;
  border-bottom: 1px solid var(--surface-border); transition: background .15s;
}
.email-item:hover { background: var(--slate-50); }
html.dark .email-item:hover { background: rgb(51 65 85 / .3); }
.email-item.unread { background: rgb(var(--p-500) / .04); }
html.dark .email-item.unread { background: rgb(var(--p-500) / .08); }

/* FAQ */
.faq-card .accordion-button { font-weight: 600; }

/* Pricing */
.pricing-card { position: relative; overflow: hidden; }
.pricing-card.featured {
  background: rgb(var(--p-500)); color: #fff; border: 0;
}
.pricing-card.featured .text-muted,
.pricing-card.featured .text-primary { color: rgba(255,255,255,.85) !important; }

/* Calendar */
.calendar-day {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 13px; cursor: pointer; transition: background .15s;
}
.calendar-day:hover { background: var(--slate-100); }
html.dark .calendar-day:hover { background: var(--slate-700); }
.calendar-day.today {
  background: rgb(var(--p-500)); color: #fff; font-weight: 600;
}
.calendar-day.outside { color: var(--slate-300); }
html.dark .calendar-day.outside { color: var(--slate-600); }

/* Icon item */
.icon-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem .5rem; border: 1px solid var(--surface-border);
  border-radius: .75rem; transition: all .15s; cursor: pointer;
  text-align: center;
  background: var(--surface-bg);
}
.icon-tile:hover {
  border-color: rgb(var(--p-400));
  background: rgb(var(--p-50));
}
html.dark .icon-tile:hover { background: rgb(var(--p-900) / .25); }
.icon-tile .icon-tile-label { font-size: 11px; color: var(--slate-500); }
html.dark .icon-tile .icon-tile-label { color: var(--slate-400); }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.animate-fade-in { animation: fadeIn .2s ease-out; }
.skeleton {
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

/* RTL */
[dir="rtl"] .text-end { text-align: start !important; }
[dir="rtl"] .text-start { text-align: end !important; }

/* Spinner */
.spinner {
  width: 18px; height: 18px; border: 2px solid var(--slate-200);
  border-top-color: rgb(var(--p-500)); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Misc */
.shadow-card { box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.shadow-card-md { box-shadow: 0 4px 6px rgb(0 0 0 / .07); }
.shadow-card-lg { box-shadow: 0 10px 15px rgb(0 0 0 / .08); }
.shadow-glow-primary { box-shadow: 0 0 24px rgb(var(--p-500) / .35); }
.rounded-xl { border-radius: .75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }

/* Apex charts override */
.apexcharts-tooltip {
  background: var(--surface-bg) !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: 0 10px 24px rgb(0 0 0 / .12) !important;
  border-radius: .5rem !important;
}
html.dark .apexcharts-tooltip,
html.dark .apexcharts-tooltip-title { background: var(--slate-800) !important; color: var(--slate-100) !important; border-color: var(--slate-700) !important; }
html.dark .apexcharts-text tspan, html.dark .apexcharts-legend-text { fill: var(--slate-400) !important; color: var(--slate-400) !important; }
html.dark .apexcharts-gridline { stroke: var(--slate-700) !important; }

/* Auth pages */
.auth-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgb(var(--p-50)), #ffffff 60%, rgb(var(--p-100) / .5));
}
html.dark .auth-wrapper { background: linear-gradient(135deg, var(--slate-900), rgb(var(--p-900) / .5)); }
.auth-card {
  max-width: 440px; width: 100%; background: var(--surface-bg);
  border: 1px solid var(--surface-border); border-radius: 1rem;
  padding: 2rem; box-shadow: 0 20px 40px rgb(0 0 0 / .1);
}
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  margin-bottom: 1.5rem;
}
.auth-brand .logo {
  width: 40px; height: 40px; background: rgb(var(--p-500));
  border-radius: .625rem;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 800; font-size: 17px;
}

/* Generic small text */
.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 22px; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Lucide icon size helpers */
[data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.lucide-xs { width: 12px !important; height: 12px !important; }
.lucide-sm { width: 14px !important; height: 14px !important; }
.lucide-md { width: 18px !important; height: 18px !important; }
.lucide-lg { width: 22px !important; height: 22px !important; }
.lucide-xl { width: 28px !important; height: 28px !important; }
.lucide-2xl { width: 36px !important; height: 36px !important; }
.lucide-3xl { width: 48px !important; height: 48px !important; }
.lucide-4xl { width: 60px !important; height: 60px !important; }
.lucide-5xl { width: 96px !important; height: 96px !important; }

/* ---------- ADDITIONAL UTILITIES (replace inline styles) ---- */
.w-32 { width: 32px; }
.w-40 { width: 40px; }
.w-48 { width: 48px; }
.w-56 { width: 56px; }
.w-64 { width: 64px; }
.w-80 { width: 80px; }
.w-96 { width: 96px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-140 { width: 140px; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.w-200 { width: 200px; }
.w-220 { width: 220px; }
.w-240 { width: 240px; }
.w-260 { width: 260px; }
.w-280 { width: 280px; }
.w-300 { width: 300px; }
.w-320 { width: 320px; }
.w-360 { width: 360px; }
.w-420 { width: 420px; }
.w-440 { width: 440px; }
.w-480 { width: 480px; }
.h-32 { height: 32px; }
.h-40 { height: 160px; }
.h-44 { height: 176px; }
.h-48 { height: 192px; }
.h-52 { height: 208px; }
.h-56 { height: 224px; }
.h-64 { height: 256px; }
.h-56 { height: 56px; }
.h-60 { height: 60px; }
.h-64 { height: 64px; }
.h-80 { height: 80px; }
.h-96 { height: 96px; }
.h-120 { height: 120px; }
.h-140 { height: 140px; }
.h-160 { height: 160px; }
.h-180 { height: 180px; }
.h-200 { height: 200px; }
.h-220 { height: 220px; }
.h-240 { height: 240px; }
.h-280 { height: 280px; }
.h-300 { height: 300px; }
.h-320 { height: 320px; }
.h-screen-minus-header { height: calc(100vh - 120px); }
.aspect-square { aspect-ratio: 1; }
.aspect-card { aspect-ratio: 1.4; }
.min-w-260 { min-width: 260px; }
.min-w-280 { min-width: 280px; }
.min-w-320 { min-width: 320px; }
.max-w-240 { max-width: 240px; }
.max-w-280 { max-width: 280px; }
.max-w-420 { max-width: 420px; }
.max-w-480 { max-width: 480px; }
.max-w-640 { max-width: 640px; }

/* tiny status dots */
.dot { display: inline-block; border-radius: 50%; }
.dot-6 { width: 6px; height: 6px; }
.dot-7 { width: 7px; height: 7px; }
.dot-8 { width: 8px; height: 8px; }
.dot-10 { width: 10px; height: 10px; }
.bg-dot-primary { background: rgb(var(--p-500)); }
.bg-dot-cyan { background: #06b6d4; }
.bg-dot-emerald { background: #10b981; }
.bg-dot-amber { background: #f59e0b; }
.bg-dot-rose { background: #f43f5e; }
.bg-dot-violet { background: #8b5cf6; }

/* color helpers */
.text-cyan-500 { color: #06b6d4; }
.text-emerald-500 { color: #10b981; }
.text-amber-500 { color: #f59e0b; }
.text-rose-500 { color: #f43f5e; }
.text-violet-500 { color: #8b5cf6; }
.bg-cyan-500 { background: #06b6d4 !important; color: #fff; }
.bg-emerald-500 { background: #10b981 !important; color: #fff; }
.bg-amber-500 { background: #f59e0b !important; color: #fff; }
.bg-rose-500 { background: #f43f5e !important; color: #fff; }
.bg-violet-500 { background: #8b5cf6 !important; color: #fff; }

/* swatch colors as CSS variables */
.bg-swatch-navy { background: #004276; }
.bg-swatch-blue { background: #3b82f6; }
.bg-swatch-green { background: #10b981; }
.bg-swatch-orange { background: #f97316; }
.bg-swatch-red { background: #f43f5e; }

/* glass tile (used on auth visual) */
.glass-tile {
  background: rgb(255 255 255 / .12);
  backdrop-filter: blur(4px);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: .75rem;
  padding: 1rem;
  text-align: center;
}

/* search input with leading icon */
.search-wrap { position: relative; }
.search-wrap .search-input { padding-inline-start: 32px; }
.search-wrap .search-icon {
  position: absolute; inset-inline-start: 10px; top: 50%;
  transform: translateY(-50%); color: var(--slate-400);
}

/* eye toggle button inside an input */
.input-eye-btn {
  position: absolute; inset-inline-end: 12px; top: 50%;
  transform: translateY(-50%); color: var(--slate-400);
  background: transparent; border: 0; padding: 0;
}
.input-eye-wrap { position: relative; }
.input-eye-wrap input { padding-inline-end: 40px; }

/* gradient backgrounds */
.bg-gradient-primary-violet { background: linear-gradient(135deg, rgb(var(--p-500)) 0%, #8b5cf6 100%); color: #fff; }
.bg-gradient-primary-light  { background: linear-gradient(135deg, rgb(var(--p-50)), #ffffff 60%, rgb(var(--p-100) / .5)); }
html.dark .bg-gradient-primary-light { background: linear-gradient(135deg, var(--slate-900), rgb(var(--p-900) / .5)); }
.bg-gradient-auth-right { background: rgb(var(--p-600)); color: #fff; }
.bg-gradient-card { background: linear-gradient(135deg, rgb(var(--p-500)), rgba(255,255,255,.2)); color: #fff; }

/* fading blob circles (auth) */
.blob-wrap { position: absolute; inset: 0; opacity: .18; pointer-events: none; }
.blob-1 { position: absolute; top: 20%; left: 20%; width: 240px; height: 240px; border-radius: 50%; background: #fff; }
.blob-2 { position: absolute; bottom: 20%; right: 20%; width: 340px; height: 340px; border-radius: 50%; background: #c4b5fd; }

/* card cover (image-like header used on blog/product cards) */
.card-cover {
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .85;
}
.card-cover.cover-tall { height: 160px; }
.card-cover.cover-aspect { aspect-ratio: 1.4; }
.card-cover.cover-square { aspect-ratio: 1; }
.card-cover.cover-banner { height: 240px; }
.cover-primary { background: linear-gradient(135deg, rgb(var(--p-500)), rgba(255,255,255,.2)); }
.cover-cyan    { background: linear-gradient(135deg, #06b6d4, rgba(255,255,255,.2)); }
.cover-emerald { background: linear-gradient(135deg, #10b981, rgba(255,255,255,.2)); }
.cover-amber   { background: linear-gradient(135deg, #f59e0b, rgba(255,255,255,.2)); }
.cover-violet  { background: linear-gradient(135deg, #8b5cf6, rgba(255,255,255,.2)); }
.cover-rose    { background: linear-gradient(135deg, #f43f5e, rgba(255,255,255,.2)); }
.cover-primary-violet { background: linear-gradient(135deg, rgb(var(--p-500)), #8b5cf6); }
.cover-icon { width: 48px; height: 48px; opacity: .5; }
.cover-icon-lg { width: 96px; height: 96px; opacity: .5; }

/* OTP inputs */
.otp-input { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 600; }

/* music dashboard cover */
.music-cover {
  width: 160px; height: 160px;
  background: rgba(255,255,255,.2);
  border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.music-disc {
  width: 120px; height: 120px;
  background: rgb(var(--p-50));
  border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgb(var(--p-500));
}
html.dark .music-disc { background: rgb(var(--p-900) / .3); }

/* progress thin */
.progress-thin { height: 4px; }
.progress-thick { height: 8px; }
.progress-very-thin { height: 5px; }

/* sidebar bullet (todo/notes etc) */
.bullet { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* dashed border */
.border-dashed { border: 1px dashed var(--surface-border); }

/* note card border-left variants */
.note-card { border-left: 4px solid; }
.bl-primary { border-left-color: rgb(var(--p-500)); }
.bl-cyan { border-left-color: #06b6d4; }
.bl-emerald { border-left-color: #10b981; }
.bl-amber { border-left-color: #f59e0b; }
.bl-rose { border-left-color: #f43f5e; }
.bl-violet { border-left-color: #8b5cf6; }

/* icon-tile circle wrappers */
.icon-circle {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--p-50));
}
.icon-circle-sm { width: 32px; height: 32px; }
.icon-circle-md { width: 40px; height: 40px; }
.icon-circle-lg { width: 56px; height: 56px; }
.icon-circle-xl { width: 64px; height: 64px; }
.icon-circle-2xl { width: 80px; height: 80px; }
.icon-circle-3xl { width: 96px; height: 96px; }
.icon-circle-bg-light { background: var(--slate-100); }
html.dark .icon-circle-bg-light { background: rgb(51 65 85 / .5); }
.icon-circle-bg-primary-soft { background: rgb(var(--p-500) / .12); color: rgb(var(--p-600)); }
.icon-circle-bg-success-soft { background: rgb(16 185 129 / .12); color: #047857; }
.icon-circle-bg-warning-soft { background: rgb(245 158 11 / .12); color: #b45309; }
.icon-circle-bg-danger-soft  { background: rgb(239 68 68 / .12); color: #b91c1c; }
.icon-circle-bg-info-soft    { background: rgb(6 182 212 / .12); color: #0e7490; }
.icon-circle-bg-violet-soft  { background: rgb(139 92 246 / .15); color: #7c3aed; }
.icon-circle-bg-rose-soft    { background: rgb(244 63 94 / .15); color: #be123c; }
html.dark .icon-circle-bg-primary-soft { color: rgb(var(--p-300)); }
html.dark .icon-circle-bg-success-soft { color: #6ee7b7; }
html.dark .icon-circle-bg-warning-soft { color: #fcd34d; }
html.dark .icon-circle-bg-danger-soft  { color: #fca5a5; }
html.dark .icon-circle-bg-info-soft    { color: #67e8f9; }

/* avatar 2xl with border (profile page) */
.avatar-bordered { border: 4px solid var(--surface-bg); background: #fff; color: rgb(var(--p-500)); }

/* status dot on avatar */
.avatar-status-wrap { position: relative; }
.avatar-status-dot {
  position: absolute; bottom: 0; inset-inline-end: 0;
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff;
}
html.dark .avatar-status-dot { border-color: var(--slate-800); }

/* card body brand banner used on user profile */
.profile-banner { height: 160px; }
.profile-overlap { margin-top: -50px; }

/* category swatch in calendar etc. */
.swatch-12 { width: 12px; height: 12px; border-radius: 50%; }
.swatch-8 { width: 8px; height: 8px; border-radius: 50%; }

/* spark line svg */
.sparkline { width: 60px; height: 24px; }

/* counter input (e-com) */
.counter-input { width: 140px; }
.counter-input input { text-align: center; }

/* color swatch buttons in checkout/detail */
.swatch-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--surface-border); }
.swatch-btn.active { border: 2px solid rgb(var(--p-500)); }

/* product thumbnail box */
.thumb-80 { width: 80px; aspect-ratio: 1; }

/* image placeholder dummy color tiles */
.tile-color { aspect-ratio: 1; border: 1px solid var(--surface-border); border-radius: .375rem; }

/* email sidebar dot label */
.label-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }

/* settings color-swatch active outline color helpers */
.color-swatch-btn.active.outline-navy { outline-color: #004276; }
.color-swatch-btn.active.outline-blue { outline-color: #3b82f6; }
.color-swatch-btn.active.outline-green { outline-color: #10b981; }
.color-swatch-btn.active.outline-orange { outline-color: #f97316; }
.color-swatch-btn.active.outline-red { outline-color: #f43f5e; }

/* form-control with leading icon */
.form-icon-wrap { position: relative; }
.form-icon-wrap .form-icon {
  position: absolute; inset-inline-start: 10px; top: 50%;
  transform: translateY(-50%); color: var(--slate-400); pointer-events: none;
}
.form-icon-wrap .form-control { padding-inline-start: 32px; }

/* container width helpers for auth */
.auth-min-vh { min-height: 100vh; }

/* avatar group offset (already exists) — also "+N" tile */
.avatar-more { background: var(--slate-400); color: #fff; }

/* progress-bar primary gradient (used in widgets) */
.progress-bar-primary { background: rgb(var(--p-500)) !important; }
.progress-bar-cyan { background: #06b6d4 !important; }
.progress-bar-emerald { background: #10b981 !important; }
.progress-bar-amber { background: #f59e0b !important; }
.progress-bar-rose { background: #f43f5e !important; }
.progress-bar-violet { background: #8b5cf6 !important; }

/* card body inside hero gradient (music) */
.music-hero { padding: 2rem; }

/* chat sidebar widths */
.chat-list-col { max-width: 320px; }

/* email sidebar nav-link spacing */
.email-nav .nav-link { padding: .375rem .75rem; font-size: 13px; }

/* misc fixed sizes used in body */
.brand-logo-lg { width: 40px; height: 40px; background: rgb(var(--p-500)); border-radius: .625rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }

/* settings card mini preview lines */
.mini-bar { height: 4px; background: rgb(var(--p-500)); border-radius: 2px; }

/* aspect/cover for thumbs */
.thumb-cover { background: rgb(var(--p-100)); }

/* explicit padding helpers */
.p-4-imp { padding: 1rem !important; }

/* cursor */
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }

/* sparkline svg */
.spark-svg { width: 60px; height: 24px; }

/* aspect-ratio for shop product cards */
.shop-cover { aspect-ratio: 1.4; display: flex; align-items: center; justify-content: center; color: #fff; }

/* category swatch list grid */
.swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }

/* small swatch */
.swatch-circle-md { width: 36px; height: 36px; border-radius: 50%; }

/* select width helpers */
.select-160 { max-width: 160px; }
.select-180 { max-width: 180px; }

/* table sortable header */
.sortable { cursor: pointer; user-select: none; }

/* music album feature visual padding */
.feature-album { padding: 2rem; }

/* inline-flex helpers */
.center-flex { display: inline-flex; align-items: center; justify-content: center; }

/* file dropzone */
.dropzone {
  border: 2px dashed var(--surface-border);
  border-radius: .75rem;
  padding: 2rem; text-align: center;
  color: var(--text-secondary);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: rgb(var(--p-400)); background: rgb(var(--p-50)); }
html.dark .dropzone:hover { background: rgb(var(--p-900) / .2); }

/* fully filled wallpaper for music hero */
.music-banner { background: linear-gradient(135deg, rgb(var(--p-500)) 0%, #8b5cf6 100%); color: #fff; padding: 2rem; }

/* timeline activity line */
.activity-line { position: absolute; left: 13px; top: 8px; bottom: 8px; width: 1px; background: var(--surface-border); }
.activity-item { position: relative; padding-inline-start: 40px; padding-bottom: 1rem; }
.activity-dot {
  position: absolute; inset-inline-start: 0; top: 4px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .1);
}

/* radio button cards */
.radio-card { cursor: pointer; }
.radio-card input { margin-inline-end: .5rem; }

/* kanban add button */
.kanban-add { width: 100%; color: var(--text-muted); background: transparent; border: 0; padding: .5rem 0; font-size: 13px; }
.kanban-add:hover { color: rgb(var(--p-500)); }

/* email auth right-panel typography helpers */
.opacity-75 { opacity: .75; }

/* misc text utils */
.text-uppercase-xs { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--slate-400); }

/* hide on print, etc — kept for now */
.notif-row { font-size: 13px; }

/* fix accordion-button focus color to primary */
.accordion-button:not(.collapsed) { background: rgb(var(--p-500) / .08); color: rgb(var(--p-600)); }
.accordion-button:focus { border-color: rgb(var(--p-300)); box-shadow: 0 0 0 .2rem rgb(var(--p-500) / .15); }

/* aspect-square placeholder for music album thumbs */
.music-thumb { aspect-ratio: 1; border-radius: .5rem; display: flex; align-items: center; justify-content: center; color: #fff; }

/* generic icon size 32/48/96 helpers */
.icon-32 { width: 32px; height: 32px; }
.icon-48 { width: 48px; height: 48px; }
.icon-60 { width: 60px; height: 60px; }
.icon-96 { width: 96px; height: 96px; }

/* sidebar nav active link override (theme-pages account uses .nav-link active) */
.nav-pills .nav-link.active { background: rgb(var(--p-500)); color: #fff; }
.nav-pills .nav-link { color: var(--text-primary); }
html.dark .nav-pills .nav-link { color: var(--slate-300); }

/* horizontal bar dropdown anchor inside dark mode */
html.dark .nav-link.active { color: #fff; }

/* ---------- Layout-injected element classes (replace inline styles) ---- */
.brand-logo-lg { width: 34px; height: 34px; font-size: 14px; }
.brand-name { font-weight: 700; color: rgb(var(--p-500)); line-height: 1; }
html.dark .brand-name { color: var(--slate-300); }
.brand-sub { font-size: 10px; color: var(--slate-400); letter-spacing: .15em; text-transform: uppercase; font-weight: 500; margin-top: 2px; }
.user-mini-name { font-weight: 600; font-size: 13px; }
.user-mini-email { color: var(--text-secondary); font-size: 11px; }
.user-button { display: flex; align-items: center; gap: .5rem; padding: .25rem; background: transparent; border: 0; border-radius: .5rem; }
.user-button:hover { background: var(--slate-100); }
html.dark .user-button:hover { background: rgb(51 65 85 / .5); }
.user-name { font-weight: 600; font-size: 13px; line-height: 1; }
.user-role { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--surface-border); }
.notif-title { font-weight: 600; font-size: 13px; }
.notif-msg { color: var(--text-secondary); font-size: 12px; }
.notif-time { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.notif-footer { padding: .5rem; border-top: 1px solid var(--surface-border); text-align: center; }
.notif-footer-link { font-size: 12.5px; text-decoration: none; }
.user-menu-header { padding: .75rem 1rem; border-bottom: 1px solid var(--surface-border); }
.user-menu-item { display: flex; align-items: center; gap: .5rem; font-size: 13px; padding: .5rem 1rem; }

.mini-bg-light { background: #f1f5f9; }
.mini-bg-dark { background: var(--slate-900); }
.w-18 { width: 18px; }

.settings-footer { padding: 1.25rem; border-top: 1px solid var(--surface-border); }

/* sticky nav for landing */
.sticky-top { position: sticky; top: 0; z-index: 1020; }

/* page hero */
.hero-section { padding: 4rem 0; }

/* ── extra helpers added later ── */
.flag-badge { font-size: 10px; }
.text-uppercase-xs th, .text-uppercase-xs { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--slate-400); }
table thead th.text-uppercase-xs { color: var(--slate-400); }
.font-monospace { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.text-bg-primary { background: rgb(var(--p-500)) !important; color: #fff; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* auth right panel decoration */
.auth-right-wrapper { position: relative; overflow: hidden; }
.auth-right-content { position: relative; max-width: 420px; width: 100%; }

/* card-cover variations */
.card-cover-banner { height: 240px; }
.card-cover-160 { height: 160px; }

/* aspect-1 utility */
.aspect-1 { aspect-ratio: 1; }
.aspect-1-4 { aspect-ratio: 1.4; }

/* generic spans */
.span-icon-md { width: 14px; height: 14px; display: inline-block; }

/* settings panel mini-bar already defined */
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-90 { opacity: .9; }

/* progress bar percentages — keep flexibility via JS but provide common ones */
.w-100p { width: 100% !important; }
.w-90p { width: 90% !important; }
.w-80p { width: 80% !important; }
.w-75p { width: 75% !important; }
.w-70p { width: 70% !important; }
.w-65p { width: 65% !important; }
.w-60p { width: 60% !important; }
.w-50p { width: 50% !important; }
.w-45p { width: 45% !important; }
.w-40p { width: 40% !important; }
.w-35p { width: 35% !important; }
.w-30p { width: 30% !important; }
.w-25p { width: 25% !important; }
.w-20p { width: 20% !important; }
.w-15p { width: 15% !important; }
.w-10p { width: 10% !important; }

/* search input width */
.search-w-200 { width: 200px; }
.search-w-240 { width: 240px; }
.search-w-280 { width: 280px; }

/* dropzone media */
.media-thumb-md { width: 80px; height: 80px; border-radius: .5rem; background: rgb(var(--p-100)); display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--p-500)); }

/* misc */
.line-height-1 { line-height: 1; }
.text-decoration-none { text-decoration: none; }

/* chat / kanban specifics */
.chat-area { height: calc(100vh - 120px); }
.chat-sidebar { max-width: 320px; }
.chat-input-wrap { display: flex; gap: .5rem; align-items: center; }

/* gradient music banner heading */
.music-feature-title { font-weight: 700; margin-bottom: .5rem; }

/* footer credit on landing */
.footer-credit { font-size: 12px; color: var(--text-secondary); }

/* rating page stars */
.star { cursor: pointer; color: var(--slate-300); font-size: 24px; transition: color .15s; user-select: none; }
.star.on { color: #f59e0b; }
html.dark .star { color: var(--slate-600); }

/* misc widths used by pages */
.min-w-160 { min-width: 160px; }
.text-warning { color: #f59e0b !important; }
.text-danger { color: #ef4444 !important; }
.text-info { color: #06b6d4 !important; }
.text-success { color: #10b981 !important; }
.bg-success { background-color: #10b981 !important; }
.bg-danger  { background-color: #ef4444 !important; }
.bg-warning { background-color: #f59e0b !important; }
.bg-info    { background-color: #06b6d4 !important; }

/* bootstrap-icons size helper */
.bi-icon { font-size: 24px; }

/* pricing card light hr inside featured */
.pricing-card.featured .hr-light { border-color: rgba(255,255,255,.3); }

/* 404 display */
.display-404 { font-size: 120px; line-height: 1; }

/* ============================================================
   STAT SOLID CARDS — matching React StatCard (gradient bg, white text)
   ============================================================ */
.stat-solid {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}
.stat-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.stat-solid-primary { background: rgb(99,102,241); }
.stat-solid-cyan    { background: rgb(6,182,212); }
.stat-solid-emerald { background: rgb(16,185,129); }
.stat-solid-amber   { background: rgb(245,158,11); }
.stat-solid-rose    { background: rgb(244,63,94); }
.stat-solid-violet  { background: rgb(139,92,246); }
.stat-solid-decor {
  position: absolute; inset: 0; pointer-events: none;
}
.stat-solid-decor::before, .stat-solid-decor::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.stat-solid-decor::before {
  width: 128px; height: 128px; top: -32px; right: -32px;
}
.stat-solid-decor::after {
  width: 80px; height: 80px; bottom: -24px; left: -24px;
}
.stat-solid-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.stat-solid-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.75);
}
.stat-solid-value {
  font-size: 28px; font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.stat-solid-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.stat-solid-sub {
  font-size: 11px; color: rgba(255,255,255,.6);
}
.lucide-xs { width: 11px !important; height: 11px !important; }

/* Geo rank rows */
.geo-rank-num {
  width: 1rem; text-align: center; color: var(--slate-400);
  font-size: 11px; flex-shrink: 0;
}
.geo-rank-bar {
  height: 6px; background: var(--slate-100);
  border-radius: 999px; overflow: hidden;
}
html.dark .geo-rank-bar { background: var(--slate-700); }
.geo-rank-bar-fill {
  height: 100%; border-radius: 999px;
  background: rgb(var(--p-500));
}

/* Device % cards */
.device-card {
  padding: 12px; border-radius: 12px;
  background: var(--slate-50); text-align: center;
}
html.dark .device-card { background: var(--slate-700); }
.device-card .device-val { font-size: 1.25rem; font-weight: 700; }
.device-card .device-lbl { font-size: 11px; color: var(--slate-500); margin-top: 2px; }

/* Top pages traffic bar */
.traffic-bar {
  flex: 1; height: 6px; background: var(--slate-100);
  border-radius: 999px; overflow: hidden; max-width: 96px;
}
html.dark .traffic-bar { background: var(--slate-700); }
.traffic-bar-fill {
  height: 100%; background: rgb(var(--p-500));
  border-radius: 999px;
}

/* ============================================================
   REGISTER LEFT SIDEBAR — dark gradient with blobs
   ============================================================ */
.register-left {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15,23,42,.9), rgba(67,56,202,.8) 50%, rgba(91,33,182,.9)),
    #0f172a;
  color: #fff;
}
.register-left-overlay { position: absolute; inset: 0; pointer-events: none; }
.register-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  animation: pulse-orb 4s ease-in-out infinite;
}
.register-orb-1 { width: 280px; height: 280px; top: 10%; left: 15%; background: rgba(99,102,241,.2); }
.register-orb-2 { width: 380px; height: 380px; bottom: 15%; right: 10%; background: rgba(139,92,246,.15); animation-delay: 2s; }
.register-orb-3 { width: 180px; height: 180px; top: 55%; left: 60%; background: rgba(6,182,212,.1); animation-delay: 4s; }
@keyframes pulse-orb { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.register-grid-overlay {
  position: absolute; inset: 0; opacity: 0.03; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 60px 60px;
}
.register-logo-tile {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.1); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.register-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.07); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 6px 16px; width: fit-content;
}
.register-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: pulse 2s infinite; }
.register-badge-text { font-size: 11px; font-weight: 500; color: rgba(110,231,183,.9); letter-spacing: .05em; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.register-gradient-text {
  background: linear-gradient(90deg, #a5b4fc, #c4b5fd, #67e8f9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.register-feat {
  backdrop-filter: blur(20px); border-radius: 1rem; padding: 16px;
  transition: transform .3s ease;
}
.register-feat:hover { transform: scale(1.02); }
.register-feat-emerald { background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(16,185,129,.05)); border: 1px solid rgba(16,185,129,.2); }
.register-feat-amber { background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(245,158,11,.05)); border: 1px solid rgba(245,158,11,.2); }
.register-feat-cyan { background: linear-gradient(135deg, rgba(6,182,212,.2), rgba(6,182,212,.05)); border: 1px solid rgba(6,182,212,.2); }
.register-feat-violet { background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(139,92,246,.05)); border: 1px solid rgba(139,92,246,.2); }
.text-indigo-300 { color: #a5b4fc !important; }
.text-emerald-400 { color: #34d399 !important; }
.text-amber-400 { color: #fbbf24 !important; }
.text-cyan-400 { color: #22d3ee !important; }
.text-violet-400 { color: #a78bfa !important; }
.fill-amber { fill: #fbbf24; }
.register-testimonial {
  background: rgba(255,255,255,.05); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: 20px;
}
.register-verified {
  display: inline-flex; align-items: center; gap: .375rem;
  background: rgba(255,255,255,.07);
  border-radius: 999px; padding: 4px 12px;
}
.register-stats-bar { border-top: 1px solid rgba(255,255,255,.06); }
.register-avatar-stack { display: flex; }
.register-avatar-stack .avatar { margin-left: -8px; border: 2px solid #0f172a; }
.register-avatar-stack .avatar:first-child { margin-left: 0; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-560 { max-width: 560px; }
.opacity-35 { opacity: .35; }
.opacity-40 { opacity: .4; }
.opacity-50 { opacity: .5; }
.opacity-60 { opacity: .6; }
.opacity-75 { opacity: .75; }

/* Password strength bars */
.strength-bar { height: 4px; border-radius: 999px; background: var(--slate-200); transition: background .2s; }
html.dark .strength-bar { background: var(--slate-600); }
.strength-bar.weak    { background: #ef4444; }
.strength-bar.fair    { background: #f59e0b; }
.strength-bar.good    { background: #3b82f6; }
.strength-bar.strong  { background: #10b981; }

/* Input with leading icon */
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); color: var(--slate-400);
  pointer-events: none;
}
.input-icon-wrap .form-control.ps-9 { padding-left: 36px; }

.bg-slate-50 { background: var(--slate-50); }
.bg-slate-900 { background: var(--slate-900); }
html.dark .bg-slate-50 { background: var(--slate-900); }
.text-success { color: #10b981 !important; }
.lucide-xl { width: 32px !important; height: 32px !important; }
.max-w-420 { max-width: 420px; }
.max-w-480 { max-width: 480px; }
.max-w-560 { max-width: 560px; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.logo-lg { width: 56px; height: 56px; font-size: 24px; }
.register-content { min-height: 600px; }

/* Maintenance page */
.maintenance-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.maintenance-orb-1 { width: 288px; height: 288px; top: 25%; left: 25%; background: rgba(99,102,241,.1); }
.maintenance-orb-2 { width: 384px; height: 384px; bottom: 25%; right: 25%; background: rgba(139,92,246,.1); }
.maintenance-orb-3 { width: 600px; height: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(67,56,202,.2); }
.maintenance-gear { position: absolute; color: rgba(99,102,241,.1); animation: spin 20s linear infinite; }
.maintenance-gear-1 { top: 80px; right: 80px; animation-duration: 20s; }
.maintenance-gear-2 { bottom: 128px; left: 80px; color: rgba(139,92,246,.1); animation-duration: 35s; animation-direction: reverse; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.maintenance-icon-box {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,.1); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.maintenance-time-box {
  width: 80px; height: 80px; border-radius: 1rem;
  background: rgba(255,255,255,.1); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.maintenance-notify-card {
  background: rgba(255,255,255,.1); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 1rem; padding: 24px; text-align: left;
}
.maintenance-notify-success {
  background: rgba(16,185,129,.2);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 1rem; padding: 16px; text-align: left;
}
.bg-white-10 { background-color: rgba(255,255,255,.1) !important; }
.border-white-20 { border-color: rgba(255,255,255,.2) !important; }
.placeholder-white-40::placeholder { color: rgba(255,255,255,.4); }
.text-emerald-300 { color: #6ee7b7 !important; }
.text-cyan-500 { color: #06b6d4 !important; }
.opacity-25 { opacity: .25; }
.opacity-30 { opacity: .3; }
.opacity-65 { opacity: .65; }
.opacity-80 { opacity: .8; }

/* 404 dots */
.dot-rounded { border-radius: 50%; }
.dot-w-2 { width: 8px; }   .dot-h-2 { height: 8px; }
.dot-w-3 { width: 12px; }  .dot-h-3 { height: 12px; }
.dot-w-4 { width: 16px; }  .dot-h-4 { height: 16px; }
.dot-w-5 { width: 20px; }  .dot-h-5 { height: 20px; }
.dot-w-6 { width: 24px; }  .dot-h-6 { height: 24px; }
.bg-dot-primary { background: rgb(var(--p-400)); }
.page404-blur {
  width: 256px; height: 256px; border-radius: 50%;
  background: rgb(var(--p-500)); filter: blur(60px);
}

/* Error page blurs */
.error-blur { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; }
.error-blur-amber { width: 32px; height: 32px; top: 0; right: 48px; background: rgba(251,191,36,.6); }
.error-blur-red { width: 24px; height: 24px; bottom: 0; left: 48px; background: rgba(239,68,68,.4); }
.text-danger { color: #ef4444 !important; }

/* ===== eCommerce Dashboard ===== */

/* Quick stat tiles (top row of 6) */
.qs-tile { border-radius: 16px; padding: 16px; text-align: center; }
.qs-tile .qs-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.qs-tile .qs-label { font-size: 11px; font-weight: 600; margin: 0; }
.qs-tile .qs-value { font-size: 20px; font-weight: 700; margin-top: 2px; color: #1e293b; }
.qs-amber   { background: #fef3c7; } .qs-amber .qs-icon   { background: #fde68a; color: #d97706; }
.qs-amber .qs-label { color: #d97706; }
.qs-violet  { background: #ede9fe; } .qs-violet .qs-icon  { background: #ddd6fe; color: #7c3aed; }
.qs-violet .qs-label { color: #7c3aed; }
.qs-rose    { background: #ffe4e6; } .qs-rose .qs-icon    { background: #fecdd3; color: #e11d48; }
.qs-rose .qs-label { color: #e11d48; }
.qs-sky     { background: #e0f2fe; } .qs-sky .qs-icon     { background: #bae6fd; color: #0284c7; }
.qs-sky .qs-label { color: #0284c7; }
.qs-emerald { background: #d1fae5; } .qs-emerald .qs-icon { background: #a7f3d0; color: #059669; }
.qs-emerald .qs-label { color: #059669; }
.qs-pink    { background: #fce7f3; } .qs-pink .qs-icon    { background: #fbcfe8; color: #db2777; }
.qs-pink .qs-label { color: #db2777; }

/* Borders for split layouts */
.border-start-lg { border-left: 1px solid #e2e8f0; }
@media (max-width: 991.98px) {
  .border-start-lg { border-left: 0; }
  .border-top-lg-0 { border-top: 1px solid #e2e8f0; }
}

/* Chart sized boxes */
.chart-w-96 { width: 96px; height: 96px; }
.h-120 { height: 120px; }

/* Dots & legend squares */
.bg-primary-300 { background: rgb(var(--p-300)); }
.bg-primary-600 { background: rgb(var(--p-600)); }
.legend-square { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bg-dot-cyan { background: #06b6d4; }
.bg-dot-rose { background: #f43f5e; }

/* Store Overview card */
.store-overview-card { border: 1px solid #e2e8f0; }
.store-icon-box { width: 44px; height: 44px; border-radius: 16px; background: rgb(var(--p-500));
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -10px rgb(var(--p-500) / 0.5); }
.live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
.live-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #34d399;
  opacity: 0.6; animation: live-ping 1.5s ease-out infinite; }
@keyframes live-ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } }

.so-tile { position: relative; border-radius: 16px; padding: 14px; border: 1px solid rgba(0,0,0,.04); }
.so-tile .so-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.so-emerald { background: rgba(16,185,129,.08); } .so-emerald .so-icon { background: #10b981; }
.so-amber   { background: rgba(245,158,11,.08); } .so-amber .so-icon   { background: #f59e0b; }
.so-sky     { background: rgba(14,165,233,.08); } .so-sky .so-icon     { background: #0ea5e9; }
.so-rose    { background: rgba(244,63,94,.08); }  .so-rose .so-icon    { background: #f43f5e; }
.so-pill { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.so-pill-up   { color: #059669; background: rgba(16,185,129,.15); }
.so-pill-down { color: #d97706; background: rgba(245,158,11,.15); }

.insight-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500;
  color: #64748b; background: #f8fafc; padding: 6px 12px; border-radius: 999px; }

/* Cat-share text fallback color */
.text-emerald-500 { color: #10b981 !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-violet-500 { color: #8b5cf6 !important; }
.text-cyan-500 { color: #06b6d4 !important; }

/* KPI tiles */
.kpi-tile { border-radius: 12px; padding: 16px; border: 1px solid; }
.kpi-tile .kpi-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.kpi-tile .kpi-value { font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1.2; }
.kpi-tile .kpi-label { font-size: 10px; color: #64748b; margin-top: 2px; line-height: 1.2; }
.kpi-tile .kpi-change { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px;
  font-size: 10px; font-weight: 600; }
.kpi-primary { background: rgb(var(--p-50) / .8); border-color: rgb(var(--p-100) / .8); }
.kpi-primary .kpi-icon i { color: rgb(var(--p-600)); }
.kpi-cyan    { background: #ecfeff; border-color: #cffafe; }
.kpi-cyan .kpi-icon i { color: #0891b2; }
.kpi-emerald { background: #ecfdf5; border-color: #d1fae5; }
.kpi-emerald .kpi-icon i { color: #059669; }
.kpi-amber   { background: #fffbeb; border-color: #fde68a; }
.kpi-amber .kpi-icon i { color: #d97706; }
.kpi-violet  { background: #f5f3ff; border-color: #ede9fe; }
.kpi-violet .kpi-icon i { color: #7c3aed; }
.kpi-rose    { background: #fff1f2; border-color: #ffe4e6; }
.kpi-rose .kpi-icon i { color: #e11d48; }

/* Pipeline stage */
.pipeline-stage { border-radius: 12px; padding: 14px; border: 1px solid; }
.pipeline-amber   { background: #fffbeb; border-color: #fde68a; }
.pipeline-amber i, .pipeline-amber .fw-semibold { color: #d97706; }
.pipeline-cyan    { background: #ecfeff; border-color: #cffafe; }
.pipeline-cyan i, .pipeline-cyan .fw-semibold { color: #0891b2; }
.pipeline-primary { background: rgb(var(--p-50) / .8); border-color: rgb(var(--p-100) / .8); }
.pipeline-primary i, .pipeline-primary .fw-semibold { color: rgb(var(--p-600)); }
.pipeline-emerald { background: #ecfdf5; border-color: #d1fae5; }
.pipeline-emerald i, .pipeline-emerald .fw-semibold { color: #059669; }
.bar-amber   { background: #f59e0b !important; }
.bar-cyan    { background: #06b6d4 !important; }
.bar-primary { background: rgb(var(--p-500)) !important; }
.bar-emerald { background: #10b981 !important; }
.progress-thin { height: 6px; background: rgba(255,255,255,.6); border-radius: 999px; }
.progress-thin .progress-bar { border-radius: 999px; }

/* Product images & stars */
.prod-img { width: 36px; height: 36px; border-radius: 12px; background: rgb(var(--p-100) / 1);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  color: rgb(var(--p-600)); flex-shrink: 0; }
.star-on { color: #f59e0b; fill: #f59e0b; }
.star-off { color: #cbd5e1; }
.w-16 { width: 64px; text-align: right; }

/* Review cells */
.review-cell { border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.review-cell:last-child { border-right: 0; }
@media (max-width: 767.98px) {
  .review-cell { border-right: 0; }
  .review-cell:last-child { border-bottom: 0; }
}

/* Avatar small */
.avatar-sm { width: 28px; height: 28px; font-size: 10px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; background: rgb(var(--p-100) / 1);
  color: rgb(var(--p-600)); }
.avatar-sm.bg-primary-400 { background: rgb(var(--p-400)); color: #fff; }


/* ===== Music Dashboard ===== */

/* Welcome card */
.welcome-card { background: #f8fafc; border: 1px solid #e2e8f0; }
.welcome-card .emoji { font-size: 1em; }
.welcome-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.welcome-icon-primary { background: rgb(var(--p-100) / 1); color: rgb(var(--p-600)); }
.welcome-icon-amber   { background: #fef3c7; color: #d97706; }
.welcome-icon-emerald { background: #d1fae5; color: #059669; }

/* Equalizer in Now Playing header */
.eq-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; }
.eq-bars span { width: 3px; background: rgb(var(--p-500)); border-radius: 2px; animation: eq-bounce 0.8s ease-in-out infinite alternate; }
.eq-bars span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.eq-bars span:nth-child(2) { height: 14px; animation-delay: 0.2s; }
.eq-bars span:nth-child(3) { height: 10px; animation-delay: 0.1s; }
.eq-bars span:nth-child(4) { height: 16px; animation-delay: 0.3s; }
@keyframes eq-bounce { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* Now Playing album art */
.album-art { width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: rgb(var(--p-500)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -8px rgb(var(--p-500) / 0.5); position: relative; }
.album-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.15); pointer-events: none; }
.album-tag { position: absolute; bottom: 12px; left: 12px; font-size: 10px; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px); padding: 3px 8px; border-radius: 999px; z-index: 1; }
.disc-spin { animation: disc-spin 4s linear infinite; position: relative; z-index: 1; }
.disc-paused { animation-play-state: paused; }
@keyframes disc-spin { to { transform: rotate(360deg); } }
.text-white-70 { color: rgba(255,255,255,.7); }

/* Player controls */
.btn-icon-round { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: #64748b; transition: color 0.2s; }
.btn-icon-round:hover { color: #334155; }
.btn-icon-round.btn-like { background: #f1f5f9; }
.btn-icon-round.btn-like.liked { background: #f43f5e; color: #fff; }
.btn-icon-round.btn-shuffle.active { color: rgb(var(--p-500)); }
.play-btn-large { width: 56px; height: 56px; border-radius: 50%; background: rgb(var(--p-500)); color: #fff; border: 0;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgb(var(--p-500) / 0.5); }
.play-btn-large:hover { transform: scale(1.02); }
.play-btn-large:active { transform: scale(0.95); }
.w-42p { width: 42% !important; }
.w-72p { width: 72% !important; }
.w-76p { width: 76% !important; }
.w-45p { width: 45% !important; }
.progress-thinner { height: 4px; }
.w-7 { width: 28px; text-align: right; }

/* Solid stat cards */
.mstat-tile { position: relative; border-radius: 16px; padding: 16px; color: #fff; overflow: hidden; }
.mstat-tile .mstat-decor { position: absolute; top: -12px; right: -12px; width: 64px; height: 64px;
  border-radius: 50%; background: rgba(255,255,255,.1); }
.mstat-tile .mstat-icon { opacity: 0.8; margin-bottom: 12px; position: relative; }
.mstat-tile .mstat-value { font-size: 20px; font-weight: 700; margin: 0; position: relative; }
.mstat-tile .mstat-label { font-size: 11px; color: rgba(255,255,255,.7); margin: 2px 0 0 0; position: relative; }
.mstat-tile .mstat-sub { font-size: 10px; color: rgba(255,255,255,.5); margin: 4px 0 0 0; position: relative; }
.mstat-primary { background: rgb(var(--p-500)); }
.mstat-cyan    { background: #06b6d4; }
.mstat-rose    { background: #f43f5e; }
.mstat-emerald { background: #10b981; }
.mstat-amber   { background: #f59e0b; }

/* Avatar mini stack */
.avatar-stack-inline { display: flex; align-items: center; }
.avatar-mini { width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700;
  border: 2px solid #fff; margin-left: -6px; }
.avatar-mini:first-child { margin-left: 0; }
.bg-purple-400 { background: #c084fc; }
.bg-cyan-400 { background: #22d3ee; }
.bg-amber-400 { background: #fbbf24; }
.bg-emerald-400 { background: #34d399; }
.bg-cyan-200 { background: #a5f3fc; }
.chart-w-100 { width: 100px; height: 100px; }

/* Top artists colored thumbs */
.artist-thumb { width: 36px; height: 36px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* Trending rank */
.trending-rank { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.trending-rank.rank-top { background: rgb(var(--p-500)); color: #fff; }
.trending-rank.rank-other { background: #f1f5f9; color: #64748b; }

/* Featured artists row */
.featured-artist { border-radius: 16px; padding: 16px; text-align: center; border: 1px solid;
  transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; position: relative; }
.featured-artist:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.1); }
.featured-artist .fa-circle { width: 56px; height: 56px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700;
  margin: 0 auto 12px; }
.featured-artist .fa-name { font-size: 13px; font-weight: 700; margin: 0; }
.featured-artist .fa-play-btn { margin-top: 10px; width: 100%; padding: 6px; border-radius: 10px;
  border: 1px solid currentColor; background: rgba(255,255,255,.6); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.fa-pink    { background: #fce7f3; border-color: #fbcfe8; }
.fa-pink .fa-name, .fa-pink .fa-play-btn { color: #db2777; }
.fa-pink .fa-circle { background: #ec4899; color: #fff; }
.fa-amber   { background: #fef3c7; border-color: #fde68a; }
.fa-amber .fa-name, .fa-amber .fa-play-btn { color: #d97706; }
.fa-amber .fa-circle { background: #f59e0b; }
.fa-sky     { background: #e0f2fe; border-color: #bae6fd; }
.fa-sky .fa-name, .fa-sky .fa-play-btn { color: #0284c7; }
.fa-sky .fa-circle { background: #0ea5e9; }
.fa-violet  { background: #ede9fe; border-color: #ddd6fe; }
.fa-violet .fa-name, .fa-violet .fa-play-btn { color: #7c3aed; }
.fa-violet .fa-circle { background: #8b5cf6; }
.fa-emerald { background: #d1fae5; border-color: #a7f3d0; }
.fa-emerald .fa-name, .fa-emerald .fa-play-btn { color: #059669; }
.fa-emerald .fa-circle { background: #10b981; }
.fa-orange  { background: #ffedd5; border-color: #fed7aa; }
.fa-orange .fa-name, .fa-orange .fa-play-btn { color: #ea580c; }
.fa-orange .fa-circle { background: #f97316; }

/* Music card colored headers */
.music-card-header { padding: 20px; color: #fff; position: relative; overflow: hidden; }
.music-card-header h5, .music-card-header small { color: #fff; }
.bg-rose-500 { background: #f43f5e; }
.bg-amber-500 { background: #f59e0b; }
.bg-cyan-500 { background: #06b6d4; }
.bg-emerald-500 { background: #10b981; }
.bg-slate-700 { background: #334155; }

/* Radio row */
.radio-row { border-radius: 12px; transition: background 0.2s; }
.radio-row:hover { background: #f8fafc; }
.radio-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; position: relative; }
.radio-pulse { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
.radio-cyan { background: #06b6d4; }
.radio-orange { background: #f97316; }
.radio-amber { background: #f59e0b; }
.radio-violet { background: #8b5cf6; }

/* Mood tiles */
.mood-tile { border-radius: 12px; padding: 12px; cursor: pointer; transition: transform 0.2s; color: #fff; }
.mood-tile:hover { transform: scale(1.05); }
.mood-emoji { font-size: 20px; }
.mood-name { font-size: 13px; font-weight: 700; margin: 4px 0 0 0; color: #fff; }
.mood-sub { font-size: 10px; color: rgba(255,255,255,.7); margin: 0; }
.mood-yellow { background: #facc15; }
.mood-cyan { background: #22d3ee; }
.mood-pink { background: #f472b6; }
.mood-emerald { background: #34d399; }
.mood-slate { background: #94a3b8; }
.mood-violet { background: #a78bfa; }

/* User stats row */
.user-stat-row { background: #f8fafc; border-radius: 12px; }
.user-stat-sub { max-width: 120px; }

/* Shared playlist row */
.sp-row { border-radius: 12px; transition: background 0.2s; cursor: pointer; }
.sp-row:hover { background: #f8fafc; }
.sp-icon { width: 36px; height: 36px; border-radius: 12px; background: #d1fae5; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }

/* Sound Lab controls */
.ctrl-btn { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid #e2e8f0;
  background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 600; display: inline-flex;
  align-items: center; gap: 8px; justify-content: center; }
.ctrl-active { background: rgb(var(--p-50) / 1); border-color: rgb(var(--p-200) / 1);
  color: rgb(var(--p-600)); }
.bg-violet { background: #8b5cf6 !important; }

/* Dot colors needed */
.bg-dot-violet { background: #8b5cf6; }
.bg-dot-emerald { background: #10b981; }
.bg-dot-amber { background: #f59e0b; }
.bg-dot-rose { background: #f43f5e; }


/* ===== General Dashboard ===== */

/* Weather card */
.weather-card { background: #e0f2fe; }
.weather-illustration { position: absolute; bottom: 0; right: 0; width: 55%; height: 90%;
  background-image: linear-gradient(135deg, rgba(34,197,94,.15), rgba(99,102,241,.15));
  border-top-left-radius: 50%; opacity: 0.5; pointer-events: none; }
.weather-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #64748b;
  background: rgba(255,255,255,.6); backdrop-filter: blur(4px); padding: 6px 12px; border-radius: 8px; }
.weather-msg { max-width: 320px; line-height: 1.6; }

/* Banner stat cards */
.banner-card { position: relative; border-radius: 12px; padding: 16px; color: #fff; overflow: hidden;
  height: 100%; min-height: 110px; }
.banner-decor { position: absolute; top: -32px; right: -32px; width: 80px; height: 80px;
  border-radius: 50%; background: rgba(255,255,255,.1); }
.banner-decor-sm { position: absolute; bottom: -28px; left: -28px; width: 56px; height: 56px;
  border-radius: 50%; background: rgba(255,255,255,.05); }
.banner-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; position: relative; }
.banner-value { font-size: 22px; font-weight: 700; margin: 0; position: relative; }
.banner-label { font-size: 11px; color: rgba(255,255,255,.7); margin: 2px 0 0 0; position: relative; }
.banner-change { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; position: relative; }
.text-white-50 { color: rgba(255,255,255,.5); }
.text-emerald-200 { color: #a7f3d0; }
.banner-primary { background: rgb(var(--p-500)); }
.banner-violet  { background: #7c3aed; }
.banner-purple  { background: #a855f7; }
.banner-pink    { background: #ec4899; }

/* Quick stats strip */
.quick-bar { width: 3px; height: 40px; background: rgb(var(--p-500)); border-radius: 999px; flex-shrink: 0; }

/* KPI cards with sparkline */
.kpi-icon-box { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.kpi-icon-primary { background: rgb(var(--p-500)); }
.kpi-icon-cyan    { background: #06b6d4; }
.kpi-icon-emerald { background: #10b981; }
.kpi-icon-amber   { background: #f59e0b; }
.kpi-icon-rose    { background: #f43f5e; }
.kpi-spark { display: flex; align-items: flex-end; gap: 1px; height: 24px; }
.kpi-spark-bar { flex: 1; border-radius: 2px; }
.kpi-spark-bar.spark-up { background: rgb(var(--p-300) / 1); }
.kpi-spark-bar.spark-down { background: #fecaca; }

/* Live badge */
.live-badge { background: #d1fae5; color: #059669; font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.live-badge::before { content: ''; width: 6px; height: 6px; background: #10b981; border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }

.btn-xs { font-size: 11px; padding: 4px 10px; }
.bg-light-soft { background: rgba(248,250,252,.5); }
@media (min-width: 768px) {
  .border-end-md { border-right: 1px solid #e2e8f0; }
  .border-end-md:last-child { border-right: 0; }
}
.text-uppercase-xs { font-size: 10px; font-weight: 500; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }

/* Projects */
.proj-card { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s; }
.proj-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px -4px rgba(0,0,0,.06); }
.proj-stripe { height: 4px; }
.proj-stripe.proj-primary, .proj-icon.proj-primary { background: rgb(var(--p-500)); }
.proj-stripe.proj-cyan, .proj-icon.proj-cyan { background: #06b6d4; }
.proj-stripe.proj-emerald, .proj-icon.proj-emerald { background: #10b981; }
.proj-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bg-slate-400 { background: #94a3b8; color: #fff; }

/* Team list */
.team-row { border-radius: 12px; transition: background 0.2s; }
.team-row:hover { background: #f8fafc; }
.team-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.team-status { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.status-online { background: #10b981; }
.status-away { background: #f59e0b; }
.status-offline { background: #94a3b8; }
.bg-violet-400 { background: #a78bfa; }
.bg-rose-400 { background: #fb7185; }
.bg-primary-400 { background: rgb(var(--p-400)); }

/* Activity feed */
.activity-row { border-radius: 12px; transition: background 0.2s; cursor: pointer; }
.activity-row:hover { background: #f8fafc; }
.activity-avatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }
.activity-badge { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px;
  background: #fff; border-radius: 6px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.activity-tag { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: #64748b; }

/* Tasks */
.task-row { border: 1px solid #e2e8f0; border-radius: 12px; transition: background 0.2s; }
.task-row:hover { background: #f8fafc; }
.legend-line { width: 12px; height: 2px; border-radius: 2px; display: inline-block; }
.bg-emerald { background: #10b981; }
.chart-w-180 { width: 180px; height: 180px; }
.w-80 { width: 80px; }


/* ===== User Profile ===== */
.profile-banner { height: 200px; }
.profile-camera-btn { position: absolute; bottom: 4px; right: 4px; width: 28px; height: 28px;
  border-radius: 50%; background: #fff; border: 2px solid #fff; color: #64748b;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.social-link { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; transition: opacity 0.2s; }
.social-link:hover { opacity: 0.8; }
.social-twitter { background: #1da1f2; color: #fff; }
.social-github { background: #24292e; color: #fff; }
.social-linkedin { background: #0a66c2; color: #fff; }
.social-globe { background: #f1f5f9; color: #64748b; }

.badge-tile { border-radius: 12px; padding: 16px; text-align: center; }
.badge-tile-amber   { background: #fef3c7; color: #d97706; }
.badge-tile-primary { background: rgb(var(--p-50) / 1); color: rgb(var(--p-600)); }
.badge-tile-violet  { background: #ede9fe; color: #7c3aed; }
.badge-tile-emerald { background: #d1fae5; color: #059669; }

.activity-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; }

.gallery-card { transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.gallery-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(0,0,0,.1); }
.gallery-img { aspect-ratio: 4/3; }
.gallery-g1 { background: linear-gradient(135deg, #818cf8, #6366f1); }
.gallery-g2 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.gallery-g3 { background: linear-gradient(135deg, #f472b6, #ec4899); }
.gallery-g4 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.gallery-g5 { background: linear-gradient(135deg, #34d399, #10b981); }
.gallery-g6 { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.gallery-g7 { background: linear-gradient(135deg, #fb7185, #f43f5e); }
.gallery-g8 { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }


/* ===== FAQ ===== */
.faq-cat-tile { border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s; }
.faq-cat-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(0,0,0,.1); }
.cat-primary { background: rgb(var(--p-50) / 1); color: rgb(var(--p-600)); }
.cat-emerald { background: #d1fae5; color: #059669; }
.cat-amber   { background: #fef3c7; color: #d97706; }
.cat-rose    { background: #ffe4e6; color: #e11d48; }
.cat-violet  { background: #ede9fe; color: #7c3aed; }
.cat-cyan    { background: #ecfeff; color: #0891b2; }
.input-icon-wrap { position: relative; }
.input-icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.ps-icon { padding-left: 40px !important; }
.max-w-480 { max-width: 480px; }


/* ===== Modern Dashboard (dashboard.html) ===== */
.stat-tile { border-radius: 12px; }
.stat-tile-primary { background: rgba(99,102,241,.07); border-color: rgba(99,102,241,.18); }
.stat-tile-primary .stat-tile-icon { background: rgba(99,102,241,.18); color: rgb(99,102,241); }
.stat-tile-primary .stat-tile-value { color: rgb(67,56,202); }
.stat-tile-cyan { background: rgba(6,182,212,.07); border-color: rgba(6,182,212,.18); }
.stat-tile-cyan .stat-tile-icon { background: rgba(6,182,212,.18); color: #0891b2; }
.stat-tile-cyan .stat-tile-value { color: #0e7490; }
.stat-tile-emerald { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.18); }
.stat-tile-emerald .stat-tile-icon { background: rgba(16,185,129,.18); color: #059669; }
.stat-tile-emerald .stat-tile-value { color: #047857; }
.stat-tile-amber { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.18); }
.stat-tile-amber .stat-tile-icon { background: rgba(245,158,11,.18); color: #d97706; }
.stat-tile-amber .stat-tile-value { color: #b45309; }
.stat-tile-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.stat-tile-pill { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.stat-tile-pill.up { background: #d1fae5; color: #059669; }
.stat-tile-pill.down { background: #fee2e2; color: #ef4444; }
.stat-tile-spark { width: 60px; height: 30px; overflow: visible; }

.country-flag { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 20px;
  background: #e2e8f0; color: #334155; font-size: 9px; font-weight: 700; border-radius: 4px; }
.metric-row { transition: background 0.2s; }
.metric-row:hover { background: #f8fafc; }
.w-130 { width: 130px; }
.h-80 { height: 80px; }
.h-60 { height: 60px; }

.bg-cyan { background: #06b6d4; }
.bg-cyan-500 { background: #06b6d4; }
.bg-violet-500 { background: #8b5cf6; }
.bg-emerald-500 { background: #10b981; }
.bg-amber-500 { background: #f59e0b; }
.bg-rose-500 { background: #f43f5e; }
.w-34p { width: 34%; }
.w-17p { width: 17%; }
.w-13p { width: 13%; }
.w-11p { width: 11%; }
.bg-violet { background: #8b5cf6 !important; }

.activity-timeline { position: relative; }
.activity-timeline::before { content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 1px; background: #e2e8f0; }
.activity-item { position: relative; margin-bottom: 12px; }
.activity-item .activity-dot { z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,.06); margin-top: 2px; }
.activity-pulse { animation: pulse 1.5s ease-in-out infinite; }
.activity-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: #64748b; font-weight: 500; }

/* Width utilities for inline progress bars */
.w-100p { width: 100% !important; }
.w-71p { width: 71% !important; }
.w-64p { width: 64% !important; }
.w-54p { width: 54% !important; }
.w-47p { width: 47% !important; }
.w-41p { width: 41% !important; }
.w-38p { width: 38% !important; }
.w-36p { width: 36% !important; }
.w-27p { width: 27% !important; }
.w-18p { width: 18% !important; }
.w-10p { width: 10% !important; }
.w-8p { width: 8% !important; }
.w-7p { width: 7% !important; }
.w-5p { width: 5% !important; }
.w-4p { width: 4% !important; }

/* Music dashboard additions */
.bg-purple-500 { background: #a855f7; }
.bg-orange-500 { background: #f97316; }
.w-87p { width: 87% !important; }
.w-80p { width: 80% !important; }
.w-72p { width: 72% !important; }
.w-68p { width: 68% !important; }
.w-63p { width: 63% !important; }
.w-55p { width: 55% !important; }
.w-46p { width: 46% !important; }
.w-45p { width: 45% !important; }
.w-42p { width: 42% !important; }
.w-31p { width: 31% !important; }
.w-21p { width: 21% !important; }
.w-12p { width: 12% !important; }
.w-11p { width: 11% !important; }
.w-9p { width: 9% !important; }
.text-emerald-200 { color: #a7f3d0; }
.lucide-5xl { width: 72px; height: 72px; }

/* KPI mini-spark bar heights (height utility) */
.kpi-bar-h-33p { height: 33% !important; } .kpi-bar-h-38p { height: 38% !important; }
.kpi-bar-h-40p { height: 40% !important; } .kpi-bar-h-44p { height: 44% !important; }
.kpi-bar-h-50p { height: 50% !important; } .kpi-bar-h-58p { height: 58% !important; }
.kpi-bar-h-60p { height: 60% !important; } .kpi-bar-h-61p { height: 61% !important; }
.kpi-bar-h-62p { height: 62% !important; } .kpi-bar-h-64p { height: 64% !important; }
.kpi-bar-h-67p { height: 67% !important; } .kpi-bar-h-69p { height: 69% !important; }
.kpi-bar-h-70p { height: 70% !important; } .kpi-bar-h-73p { height: 73% !important; }
.kpi-bar-h-75p { height: 75% !important; } .kpi-bar-h-76p { height: 76% !important; }
.kpi-bar-h-78p { height: 78% !important; } .kpi-bar-h-80p { height: 80% !important; }
.kpi-bar-h-81p { height: 81% !important; } .kpi-bar-h-83p { height: 83% !important; }
.kpi-bar-h-84p { height: 84% !important; } .kpi-bar-h-87p { height: 87% !important; }
.kpi-bar-h-89p { height: 89% !important; } .kpi-bar-h-93p { height: 93% !important; }
.kpi-bar-h-94p { height: 94% !important; } .kpi-bar-h-95p { height: 95% !important; }
.kpi-bar-h-96p { height: 96% !important; } .kpi-bar-h-97p { height: 97% !important; }
.kpi-bar-h-98p { height: 98% !important; } .kpi-bar-h-99p { height: 99% !important; }
.kpi-bar-h-100p { height: 100% !important; }

.w-15p { width: 15% !important; }
.w-20p { width: 20% !important; }
.w-25p { width: 25% !important; }
.w-40p { width: 40% !important; }
.w-50p { width: 50% !important; }
.w-75p { width: 75% !important; }
.w-90p { width: 90% !important; }

/* ===== Calendar (calendar.html) ===== */
.cal-day-headers { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.cal-day-headers > div { text-align: center; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { min-height: 80px; padding: 6px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.cal-cell:hover { background: #f8fafc; border-color: #e2e8f0; }
.cal-cell.cal-today { background: rgb(var(--p-50) / 1); border-color: rgb(var(--p-200) / 1); }
.cal-day-num { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 500; color: #334155; margin-bottom: 4px; }
.cal-day-num.cal-other { color: #cbd5e1; }
.cal-day-num.cal-today-num { background: rgb(var(--p-500)); color: #fff; }
.cal-event { font-size: 10px; color: #fff; padding: 2px 6px; border-radius: 6px; margin-top: 2px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-up-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.calendar-upcoming { border-radius: 10px; cursor: pointer; transition: background 0.2s; }
.calendar-upcoming:hover { background: #f8fafc; }
.bg-pink-500 { background: #ec4899; }
.bg-teal-500 { background: #14b8a6; }
.bg-indigo-500 { background: #6366f1; }


/* ===== React/Tailwind Compatibility Layer =====
   Mirrors Tailwind utility classes used by Liner React so HTML
   markup can be copied directly from .jsx without re-mapping. */

/* Text colors — slate scale */
.text-slate-100 { color: #f1f5f9 !important; }
.text-slate-200 { color: #e2e8f0 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }

/* Background — slate scale */
.bg-slate-50 { background: #f8fafc !important; }
.bg-slate-100 { background: #f1f5f9 !important; }
.bg-slate-200 { background: #e2e8f0 !important; }
.bg-slate-700 { background: #334155 !important; }
.bg-slate-800 { background: #1e293b !important; }

/* Primary (preset-driven) */
.text-primary-300 { color: rgb(var(--p-300)) !important; }
.text-primary-400 { color: rgb(var(--p-400)) !important; }
.text-primary-500 { color: rgb(var(--p-500)) !important; }
.text-primary-600 { color: rgb(var(--p-600)) !important; }
.text-primary-700 { color: rgb(var(--p-700)) !important; }
.bg-primary-50  { background: rgb(var(--p-50)) !important; }
.bg-primary-100 { background: rgb(var(--p-100)) !important; }
.bg-primary-400 { background: rgb(var(--p-400)) !important; }
.bg-primary-500 { background: rgb(var(--p-500)) !important; }
.bg-primary-600 { background: rgb(var(--p-600)) !important; }

/* Cyan */
.text-cyan-400 { color: #22d3ee !important; }
.text-cyan-500 { color: #06b6d4 !important; }
.text-cyan-600 { color: #0891b2 !important; }
.text-cyan-700 { color: #0e7490 !important; }
.bg-cyan-50  { background: #ecfeff !important; }
.bg-cyan-100 { background: #cffafe !important; }
.bg-cyan-200 { background: #a5f3fc !important; }
.bg-cyan-400 { background: #22d3ee !important; }
.bg-cyan-500 { background: #06b6d4 !important; }

/* Emerald */
.text-emerald-400 { color: #34d399 !important; }
.text-emerald-500 { color: #10b981 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-700 { color: #047857 !important; }
.bg-emerald-50  { background: #ecfdf5 !important; }
.bg-emerald-100 { background: #d1fae5 !important; }
.bg-emerald-200 { background: #a7f3d0 !important; }
.bg-emerald-400 { background: #34d399 !important; }
.bg-emerald-500 { background: #10b981 !important; }

/* Amber */
.text-amber-400 { color: #fbbf24 !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-600 { color: #d97706 !important; }
.text-amber-700 { color: #b45309 !important; }
.bg-amber-50  { background: #fffbeb !important; }
.bg-amber-100 { background: #fef3c7 !important; }
.bg-amber-400 { background: #fbbf24 !important; }
.bg-amber-500 { background: #f59e0b !important; }

/* Red / Rose */
.text-red-400 { color: #f87171 !important; }
.text-red-500 { color: #ef4444 !important; }
.text-red-600 { color: #dc2626 !important; }
.text-rose-500 { color: #f43f5e !important; }
.bg-red-50 { background: #fef2f2 !important; }
.bg-red-100 { background: #fee2e2 !important; }
.bg-red-500 { background: #ef4444 !important; }
.bg-rose-500 { background: #f43f5e !important; }
.bg-rose-400 { background: #fb7185 !important; }
.bg-rose-50 { background: #fff1f2 !important; }

/* Violet / Purple / Indigo / Pink / Orange */
.text-violet-400 { color: #a78bfa !important; }
.text-violet-500 { color: #8b5cf6 !important; }
.text-violet-600 { color: #7c3aed !important; }
.bg-violet-100 { background: #ede9fe !important; }
.bg-violet-400 { background: #a78bfa !important; }
.bg-violet-500 { background: #8b5cf6 !important; }
.bg-violet-600 { background: #7c3aed !important; }
.bg-violet-50 { background: #f5f3ff !important; }
.bg-indigo-500 { background: #6366f1 !important; }
.bg-purple-400 { background: #c084fc !important; }
.bg-purple-500 { background: #a855f7 !important; }
.bg-pink-400 { background: #f472b6 !important; }
.bg-pink-500 { background: #ec4899 !important; }
.text-pink-600 { color: #db2777 !important; }
.bg-orange-400 { background: #fb923c !important; }
.bg-orange-500 { background: #f97316 !important; }
.text-orange-600 { color: #ea580c !important; }
.bg-teal-400 { background: #2dd4bf !important; }
.bg-teal-500 { background: #14b8a6 !important; }
.bg-sky-400 { background: #38bdf8 !important; }
.bg-sky-500 { background: #0ea5e9 !important; }
.text-sky-600 { color: #0284c7 !important; }
.bg-yellow-400 { background: #facc15 !important; }

/* Text sizes (Tailwind → CSS) */
.text-xs { font-size: 12px !important; line-height: 1.4 !important; }
.text-sm { font-size: 14px !important; line-height: 1.5 !important; }
.text-base { font-size: 16px !important; line-height: 1.5 !important; }
.text-lg { font-size: 18px !important; line-height: 1.55 !important; }
.text-xl { font-size: 20px !important; line-height: 1.4 !important; }
.text-2xl { font-size: 24px !important; line-height: 1.3 !important; }
.text-3xl { font-size: 30px !important; line-height: 1.25 !important; }
.text-4xl { font-size: 36px !important; line-height: 1.2 !important; }
.text-\[10px\] { font-size: 10px !important; }
.text-\[11px\] { font-size: 11px !important; }
.text-\[13px\] { font-size: 13px !important; }
.text-\[9px\] { font-size: 9px !important; }

/* Font weights */
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* Display & flex */
.flex { display: flex !important; flex-direction: row; }
.card.flex { flex-direction: row; }
.flex.flex-col, .flex-col { flex-direction: column !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.hidden { display: none !important; }
.flex-1 { flex: 1 1 0 !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.flex-grow { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.shrink-0 { flex-shrink: 0 !important; }

/* Gap */
.gap-0\.5 { gap: 2px !important; }
.gap-1 { gap: 4px !important; }
.gap-1\.5 { gap: 6px !important; }
.gap-2 { gap: 8px !important; }
.gap-2\.5 { gap: 10px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 20px !important; }
.gap-6 { gap: 24px !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-2\.5 { padding: 10px !important; }
.p-3 { padding: 12px !important; }
.p-3\.5 { padding: 14px !important; }
.p-4 { padding: 16px !important; }
.p-5 { padding: 20px !important; }
.p-6 { padding: 24px !important; }
.p-7 { padding: 28px !important; }
.p-8 { padding: 32px !important; }
.p-9 { padding: 36px !important; }
.p-10 { padding: 40px !important; }
.p-12 { padding: 48px !important; }
.px-7 { padding-left: 28px !important; padding-right: 28px !important; }
.px-8 { padding-left: 32px !important; padding-right: 32px !important; }
.py-7 { padding-top: 28px !important; padding-bottom: 28px !important; }
.py-8 { padding-top: 32px !important; padding-bottom: 32px !important; }
.pt-8 { padding-top: 32px !important; }
.pb-8 { padding-bottom: 32px !important; }
.mt-8 { margin-top: 32px !important; }
.mb-8 { margin-bottom: 32px !important; }
.px-6 { padding-left: 24px !important; padding-right: 24px !important; }
.py-6 { padding-top: 24px !important; padding-bottom: 24px !important; }
.pt-6 { padding-top: 24px !important; }
.pb-6 { padding-bottom: 24px !important; }
.pl-6 { padding-left: 24px !important; }
.pr-6 { padding-right: 24px !important; }
.mt-6 { margin-top: 24px !important; }
.mb-6 { margin-bottom: 24px !important; }
.ml-6 { margin-left: 24px !important; }
.mr-6 { margin-right: 24px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-2\.5 { padding-left: 10px !important; padding-right: 10px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.px-5 { padding-left: 20px !important; padding-right: 20px !important; }
.py-0\.5 { padding-top: 2px !important; padding-bottom: 2px !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-2\.5 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }

/* Margin */
.m-0 { margin: 0 !important; }
.mt-0\.5 { margin-top: 2px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-1\.5 { margin-top: 6px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-1\.5 { margin-bottom: 6px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 20px !important; }
.mb-6 { margin-bottom: 24px !important; }
.ms-1 { margin-inline-start: 4px !important; }
.ms-2 { margin-inline-start: 8px !important; }
.me-1 { margin-inline-end: 4px !important; }
.me-1\.5 { margin-inline-end: 6px !important; }
.me-2 { margin-inline-end: 8px !important; }

/* Width / Height (fixed sizes from Tailwind) */
.w-1\.5 { width: 6px !important; } .h-1\.5 { height: 6px !important; }
.w-2 { width: 8px !important; } .h-2 { height: 8px !important; }
.w-2\.5 { width: 10px !important; } .h-2\.5 { height: 10px !important; }
.w-3 { width: 12px !important; } .h-3 { height: 12px !important; }
.w-3\.5 { width: 14px !important; } .h-3\.5 { height: 14px !important; }
.w-4 { width: 16px !important; } .h-4 { height: 16px !important; }
.w-5 { width: 20px !important; } .h-5 { height: 20px !important; }
.w-6 { width: 24px !important; } .h-6 { height: 24px !important; }
.w-7 { width: 28px !important; } .h-7 { height: 28px !important; }
.w-8 { width: 32px !important; } .h-8 { height: 32px !important; }
.w-9 { width: 36px !important; } .h-9 { height: 36px !important; }
.w-10 { width: 40px !important; } .h-10 { height: 40px !important; }
.w-11 { width: 44px !important; } .h-11 { height: 44px !important; }
.w-12 { width: 48px !important; } .h-12 { height: 48px !important; }
.w-14 { width: 56px !important; } .h-14 { height: 56px !important; }
.w-16 { width: 64px !important; } .h-16 { height: 64px !important; }
.w-20 { width: 80px !important; } .h-20 { height: 80px !important; }
.w-24 { width: 96px !important; } .h-24 { height: 96px !important; }
.w-32 { width: 128px !important; } .h-32 { height: 128px !important; }
.w-44 { width: 176px !important; } .h-44 { height: 176px !important; }
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.min-w-0 { min-width: 0 !important; }
.min-h-screen { min-height: 100vh !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-xs { max-width: 20rem !important; }

/* Border radius */
.rounded { border-radius: 4px !important; }
.rounded-md { border-radius: 6px !important; }
.rounded-lg { border-radius: 8px !important; }
.rounded-xl { border-radius: 12px !important; }
.rounded-2xl { border-radius: 16px !important; }
.rounded-3xl { border-radius: 24px !important; }
.rounded-full { border-radius: 9999px !important; }
.rounded-sm { border-radius: 2px !important; }

/* Border */
.border { border: 1px solid #e2e8f0 !important; }
.border-2 { border: 2px solid currentColor !important; }
.border-t { border-top: 1px solid #e2e8f0 !important; }
.border-b { border-bottom: 1px solid #e2e8f0 !important; }
.border-l { border-left: 1px solid #e2e8f0 !important; }
.border-r { border-right: 1px solid #e2e8f0 !important; }
.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-white { border-color: #fff !important; }
.border-transparent { border-color: transparent !important; }

/* Position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.inset-0 { inset: 0 !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }
.start-0 { inset-inline-start: 0 !important; }
.end-0 { inset-inline-end: 0 !important; }

/* Overflow / Display helpers */
.overflow-hidden { overflow: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.whitespace-nowrap { white-space: nowrap !important; }

/* Cursor / Transition */
.cursor-pointer { cursor: pointer !important; }
.transition-all { transition: all .15s ease-in-out !important; }
.transition-colors { transition: background-color .15s, color .15s !important; }
.transition-shadow { transition: box-shadow .15s !important; }
.transition-transform { transition: transform .15s !important; }
.duration-150 { transition-duration: .15s !important; }
.duration-200 { transition-duration: .2s !important; }
.duration-300 { transition-duration: .3s !important; }

/* Shadows */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important; }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1) !important; }
.shadow-card { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important; }
.shadow-card-md { box-shadow: 0 4px 12px -4px rgb(0 0 0 / .08) !important; }
.shadow-card-lg { box-shadow: 0 12px 24px -8px rgb(0 0 0 / .1) !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-60 { opacity: .6 !important; }
.opacity-70 { opacity: .7 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-80 { opacity: .8 !important; }

/* z-index */
.z-10 { z-index: 10 !important; }
.z-50 { z-index: 50 !important; }

/* Grid template columns helpers */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .lg\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .lg\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .xl\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .xl\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .xl\:col-span-4 { grid-column: span 4 / span 4 !important; }
}

/* "space-y" helpers */
.space-y-1 > * + * { margin-top: 4px !important; }
.space-y-2 > * + * { margin-top: 8px !important; }
.space-y-3 > * + * { margin-top: 12px !important; }
.space-y-4 > * + * { margin-top: 16px !important; }
.space-y-5 > * + * { margin-top: 20px !important; }
.space-y-6 > * + * { margin-top: 24px !important; }

/* ===== Modern Dashboard helpers ===== */
.grid-cols-span-2 { grid-column: span 2 / span 2; }
.dash-sessions-card { grid-column: span 2 / span 2; }
.dash-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.dash-activity-line { position: absolute; left: 14px; top: 8px; bottom: 8px; width: 1px; background: #f1f5f9; }
.dash-activity-dot { margin-top: 2px; }
.bg-blue-500 { background: #3b82f6; }
.bg-indigo-500 { background: #6366f1; }

/* Make Apex charts respect container heights */
#chart-audience { min-height: 220px; }
#spark-bounce, #spark-users { min-height: 60px; }
#spark-sessions { min-height: 80px; }
#chart-revenue { min-height: 320px; }
#chart-radar { min-height: 200px; }
#chart-visitors { min-height: 240px; }

/* React StatCard (solid color w/ decoration) */
.statcard { transition: transform .2s, box-shadow .2s; }
.statcard:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0,0,0,.15); }
.statcard-decor-tr { position: absolute; top: 0; right: 0; width: 128px; height: 128px; opacity: .1; border-radius: 50%; background: #fff; transform: translate(32px, -32px); pointer-events: none; }
.statcard-decor-bl { position: absolute; bottom: 0; left: 0; width: 80px; height: 80px; opacity: .1; border-radius: 50%; background: #fff; transform: translate(-24px, 24px); pointer-events: none; }
.statcard-title { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.statcard-icon { background: rgba(255,255,255,.2); backdrop-filter: blur(4px); }
.statcard-pill { background: rgba(255,255,255,.2); color: #fff; }
.statcard-sub { color: rgba(255,255,255,.6); }

.max-w-24 { max-width: 96px; }
.h-1\.5 { height: 6px; }
.w-1\.5 { width: 6px; }

/* Notes page */
.notes-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.notes-search-input { padding-left: 36px; }
.notes-pre { white-space: pre-line; }
.bg-black-10 { background: rgba(0,0,0,0.08); }
.border-violet-500 { border-color: #8b5cf6; }
.border-blue-500 { border-color: #3b82f6; }
.border-emerald-500 { border-color: #10b981; }
.border-amber-500 { border-color: #f59e0b; }
.border-pink-500 { border-color: #ec4899; }
.border-orange-500 { border-color: #f97316; }
.bg-blue-50 { background: #eff6ff; }
.bg-pink-50 { background: #fdf2f8; }
.bg-orange-50 { background: #fff7ed; }
.bg-violet-50 { background: #f5f3ff; }
.min-w-48 { min-width: 192px; }
.max-w-xs { max-width: 320px; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pr-2 { padding-right: 8px; }
.pl-9 { padding-left: 36px; }

/* Dot/half-value utilities (escape-free names) */
.w-2-5 { width: 10px !important; }
.h-2-5 { height: 10px !important; }
.py-0-5 { padding-top: 2px !important; padding-bottom: 2px !important; }
.w-1-5 { width: 6px !important; }
.h-1-5 { height: 6px !important; }
.max-w-sm { max-width: 384px; }

/* ===== Tailwind Preflight Reset (mirror React behavior) =====
   When React JSX uses <h1>-<h6> directly with utility classes like
   `font-semibold text-slate-800` without a size class, Tailwind's
   preflight makes them inherit size from parent (body 14-16px).
   We do the same so card headers stay compact like React. */
.app-main h1, .app-main h2, .app-main h3,
.app-main h4, .app-main h5, .app-main h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
/* App main spacing matches React 'space-y-6' inside layout */
.app-main { padding: 24px; }
.app-main > * + * { margin-top: 24px; }
@media (max-width: 640px) {
  .app-main { padding: 16px; }
  .app-main > * + * { margin-top: 16px; }
}
/* React card matches */
.app-main .card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
/* Make sure h1 page title still gets the explicit text-2xl class */
.text-2xl { font-size: 24px !important; line-height: 1.3 !important; }
.text-3xl { font-size: 30px !important; line-height: 1.25 !important; }

/* ===== User Profile (user-profile.html) ===== */
.up-cover { height: 224px; background: linear-gradient(135deg, #0ea5e9, #6366f1, #ec4899); position: relative; overflow: hidden; }
@media (min-width: 640px) { .up-cover { height: 256px; } }
.up-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.up-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 50%); }
.up-avatar-img { width: 112px; height: 112px; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 10px 25px -5px rgba(0,0,0,.10); object-fit: cover; display: block; }
.up-article-img { width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0; object-fit: cover; }
.up-gallery-tile { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 1/1; cursor: pointer; }
.up-gallery-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.up-gallery-tile:hover .up-gallery-img { transform: scale(1.05); }
.up-follower-avatar-img { width: 80px; height: 80px; border-radius: 999px; object-fit: cover; margin: 0 auto; display: block; }
.up-follower-status { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; border-radius: 999px; background: #10b981; border: 2px solid #fff; }

/* User Profile — additional rebuild ===== */
.up-tabs { display: flex; gap: 4px; background: #f1f5f9; border-radius: 12px; padding: 4px; }
.up-tab { flex: 1; padding: 10px; text-align: center; font-size: 14px; font-weight: 500; border-radius: 8px; background: transparent; color: #64748b; border: 0; cursor: pointer; transition: all .15s; }
.up-tab:hover { color: #334155; }
.up-tab-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.up-tab-active:hover { color: #0f172a; }

.items-end-sm { align-items: flex-start; }
@media (min-width: 640px) {
  .items-start.items-end-sm,
  .items-end-sm { align-items: flex-end !important; }
}

.up-article-img { width: 128px; height: 96px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
@media (min-width: 640px) { .up-article-img { width: 160px; height: 112px; } }

.up-skill-bar { width: 100%; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.up-skill-fill { height: 100%; background: rgb(var(--p-500)); border-radius: 999px; transition: width .5s; }

.up-project { padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; transition: border-color .15s; cursor: pointer; }
.up-project:hover { border-color: rgb(var(--p-300)); }

.up-activity-line { width: 1px; flex: 1; background: #e2e8f0; margin: 4px 0; }

.up-social { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.up-social:hover { background: #f8fafc; }
.up-social-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.up-social-icon svg, .up-social-icon i {
  width: 20px !important; height: 20px !important;
  display: block !important; flex-shrink: 0;
  stroke-width: 2; fill: none;
}
.up-social-icon.text-sky-500 svg     { stroke: #0ea5e9 !important; color: #0ea5e9 !important; }
.up-social-icon.text-slate-700 svg   { stroke: #334155 !important; color: #334155 !important; }
.up-social-icon.text-blue-600 svg    { stroke: #2563eb !important; color: #2563eb !important; }
.up-social-icon.text-emerald-600 svg { stroke: #059669 !important; color: #059669 !important; }

.up-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: 12px; background: #f8fafc; }

.up-achievement { text-align: center; padding: 10px; border-radius: 12px; background: #f8fafc; cursor: pointer; transition: background .15s; }
.up-achievement:hover { background: rgb(var(--p-50)); }

.up-follow-btn { width: 100%; margin-top: 12px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; border: 1px solid; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.up-follow-not { background: rgb(var(--p-500)); color: #fff; border-color: rgb(var(--p-500)); }
.up-follow-not:hover { background: rgb(var(--p-600)); border-color: rgb(var(--p-600)); }
.up-follow-following { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.up-follow-following:hover { background: #e2e8f0; }

.up-friend-avatar { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }

/* Grid column helpers */
.grid-cols-sm-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-lg-3 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-lg-4 { grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px) {
  .grid-cols-2.grid-cols-sm-4,
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (min-width: 1024px) {
  .grid-cols-1.grid-cols-lg-2,
  .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  .lg-col-span-2 { grid-column: span 2 / span 2; }
  .lg-col-span-3 { grid-column: span 3 / span 3; }
}
.bg-teal-500 { background: #14b8a6 !important; }
.up-cover-change { position: absolute; bottom: 12px; right: 12px; padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 500;
  border: 0; display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .2s; }
.up-cover:hover .up-cover-change { opacity: 1; }
.up-pro-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: rgba(245,158,11,.9); backdrop-filter: blur(4px);
  color: #fff; font-size: 12px; font-weight: 600; }
.up-avatar-wrap { margin-top: -64px; }
.up-avatar { width: 112px; height: 112px; border-radius: 16px; background: rgb(var(--p-500));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; font-weight: 700;
  border: 4px solid #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.up-avatar-cam { position: absolute; bottom: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%;
  background: rgb(var(--p-500)); color: #fff; border: 2px solid #fff; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity .2s; }
.up-avatar-wrap:hover .up-avatar-cam { opacity: 1; }
.up-avatar-status { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px;
  background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.up-stat-icon { display: block; margin: 0 auto 4px; }

/* Legacy up-tab compatibility (rewrite uses .up-tab-active class) */
.up-tab-content.hidden { display: none; }

/* Article images */
.up-article-img { width: 128px; height: 96px; border-radius: 12px; flex-shrink: 0; }
@media (min-width: 640px) { .up-article-img { width: 160px; height: 112px; } }
.up-grad-1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.up-grad-2 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.up-grad-3 { background: linear-gradient(135deg, #10b981, #059669); }
.up-grad-4 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.up-grad-5 { background: linear-gradient(135deg, #ec4899, #db2777); }
.up-grad-6 { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.up-grad-7 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.up-grad-8 { background: linear-gradient(135deg, #f97316, #ea580c); }

/* Skill bars */
.skill-w-95 { width: 95%; } .skill-w-90 { width: 90%; } .skill-w-92 { width: 92%; }
.skill-w-85 { width: 85%; } .skill-w-80 { width: 80%; } .skill-w-78 { width: 78%; }
.skill-w-75 { width: 75%; } .skill-w-72 { width: 72%; } .skill-w-70 { width: 70%; } .skill-w-68 { width: 68%; }

/* Follower avatar */
.up-follower-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; }
.up-follower-status { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px;
  background: #10b981; border: 2px solid #fff; border-radius: 50%; }

/* Gallery */
.up-gallery-tile { aspect-ratio: 1; border-radius: 16px; position: relative; overflow: hidden; cursor: pointer; }
.up-gallery-overlay { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column;
  justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 50%);
  opacity: 0; transition: opacity .3s; }
.up-gallery-tile:hover .up-gallery-overlay { opacity: 1; }

/* line-clamp helper */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* misc */
.text-sky-500 { color: #0ea5e9; }
.text-blue-600 { color: #2563eb; }
.text-slate-700 { color: #334155; }
.bg-sky-50 { background: #f0f9ff; }
.bg-slate-100 { background: #f1f5f9; }
.bg-blue-50 { background: #eff6ff; }

/* Blog Post editor */
.bp-divider { width: 1px; height: 20px; background: #e2e8f0; margin: 0 4px; }
.bp-editor-area { min-height: 320px; resize: none; outline: none; }
.bp-dropzone { border: 2px dashed #e2e8f0; border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: border-color .15s; }
.bp-dropzone:hover { border-color: rgb(var(--p-400)); }

/* Blog detail */
.bd-hero { height: 288px; background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899); position: relative; }
.bd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.3) 50%, transparent); }
.bd-hero-content { position: absolute; bottom: 0; padding: 24px; color: #fff; }
.bg-white-20 { background: rgba(255,255,255,.2); }
.border-white-30 { border-color: rgba(255,255,255,.3); }
.backdrop-blur { backdrop-filter: blur(4px); }
.bd-code-block { background: #0f172a; border-radius: 12px; padding: 20px; margin-bottom: 24px; overflow-x: auto; }
.bd-code-block pre, .bd-code-block code { color: #f1f5f9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; margin: 0; }
.bd-quote { border-left: 4px solid rgb(var(--p-500)); padding: 4px 20px; margin: 24px 0; background: rgb(var(--p-50)); border-radius: 0 12px 12px 0; }
.bd-quote p { font-style: italic; color: #334155; }

/* Shop helpers */
.bg-white-80 { background: rgba(255,255,255,.8); backdrop-filter: blur(4px); }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bg-slate-900 { background: #0f172a; }
.bg-red-400 { background: #f87171; }
.bg-red-500 { background: #ef4444; }
.bg-emerald-200 { background: #a7f3d0; }
.bg-emerald-100 { background: #d1fae5; }
.bg-emerald-700 { background: #047857; }

/* Ecommerce Detail */
.ed-main-img { height: 320px; border-radius: 16px; }
.ed-thumb { width: 64px; height: 64px; border-radius: 12px; border: 0; opacity: 0.6; padding: 0; }
.ed-thumb-active { opacity: 1; outline: 2px solid rgb(var(--p-500)); outline-offset: 2px; }
.ed-color-active { outline: 2px solid rgb(var(--p-500)); outline-offset: 2px; }
.ed-qty-display { display: flex; align-items: center; justify-content: center; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; font-size: 14px; font-weight: 600; color: #1e293b; background: #fff; }
.ed-qty-left { border-radius: 12px 0 0 12px; }
.ed-qty-right { border-radius: 0 12px 12px 0; }
.line-through { text-decoration: line-through; }

/* Checkout step line */
/* ===== Ecommerce checkout progress steps (React-parity) ===== */
.ck-steps { display: flex; align-items: center; justify-content: center; gap: 0; }
.ck-step { display: flex; flex-direction: column; align-items: center; }
.ck-step-circle { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.ck-step-done    { background: rgb(var(--p-500)); color: #fff; }
.ck-step-current { background: rgb(var(--p-500)); color: #fff; }
.ck-step-pending { background: #f1f5f9; color: #94a3b8; }
.ck-step-label { font-size: 11px; color: #64748b; margin-top: 4px; display: none; }
@media (min-width: 640px) { .ck-step-label { display: block; } }
.ck-step-line { width: 64px; height: 2px; background: #e2e8f0; margin-bottom: 18px; flex-shrink: 0; }
.ck-step-line-done { background: rgb(var(--p-500)); }
@media (min-width: 640px) { .ck-step-line { width: 96px; } }

/* Additional color borders/bg for UI demos */
.bg-fuchsia-500 { background: #d946ef; }
.bg-primary-600 { background: rgb(var(--p-600)); }
.bg-emerald-600 { background: #059669; }
.bg-cyan-600 { background: #0891b2; }
.bg-red-600 { background: #dc2626; }
.bg-slate-600 { background: #475569; }
.border-primary-500 { border-color: rgb(var(--p-500)); }
.border-emerald-500 { border-color: #10b981; }
.border-cyan-500 { border-color: #06b6d4; }
.border-amber-500 { border-color: #f59e0b; }
.border-red-500 { border-color: #ef4444; }
.border-slate-400 { border-color: #94a3b8; }
.text-emerald-600 { color: #059669; }
.text-amber-600 { color: #d97706; }
.text-red-600 { color: #dc2626; }

/* Rating page */
.rt-lg { width: 28px; height: 28px; }
.rt-2xl { width: 36px; height: 36px; }
.rt-md { width: 24px; height: 24px; }
.lucide-2xl { width: 40px; height: 40px; }
.bg-lime-500 { background: #84cc16; }
.bg-orange-500 { background: #f97316; }
.bg-orange-100 { background: #ffedd5; }
.bg-lime-100 { background: #ecfccb; }
.text-lime-600 { color: #65a30d; }
.text-orange-600 { color: #ea580c; }
.w-78p { width: 78% !important; }
.w-14p { width: 14% !important; }
.w-5p { width: 5% !important; }
.w-2p { width: 2% !important; }
.w-1p { width: 1% !important; }
.w-6 { width: 24px; }
.w-3 { width: 12px; }
.text-rose-500 { color: #f43f5e; }
.text-amber-400 { color: #fbbf24; }
.text-slate-300 { color: #cbd5e1; }

/* List divides */
.list-divide > * + * { border-top: 1px solid #f1f5f9; }
.list-divide { list-style: none; }
.mt-0-5 { margin-top: 2px; }
.text-sky-700 { color: #0369a1; }
.text-violet-700 { color: #6d28d9; }
.text-amber-700 { color: #b45309; }
.text-emerald-700 { color: #047857; }
.bg-sky-100 { background: #e0f2fe; }
.bg-amber-100 { background: #fef3c7; }
.bg-violet-100 { background: #ede9fe; }
.bg-emerald-100 { background: #d1fae5; }
.bg-rose-50 { background: #fff1f2; }
.text-sky-500 { color: #0ea5e9; }
.text-violet-500 { color: #8b5cf6; }
.text-emerald-500 { color: #10b981; }
.text-rose-500 { color: #f43f5e; }
.text-amber-500 { color: #f59e0b; }
.text-amber-400 { color: #fbbf24; }

/* Alert page helpers */
.mb-0-5 { margin-bottom: 2px; }
.p-0-5 { padding: 2px; }
.w-62p { width: 62% !important; }
.w-0p { width: 0% !important; }
.bg-emerald-200 { background: #a7f3d0; }
.bg-primary-200 { background: rgb(var(--p-200)); }
.bg-amber-200 { background: #fde68a; }
.bg-red-200 { background: #fecaca; }
.bg-cyan-200 { background: #a5f3fc; }
.border-emerald-200 { border-color: #a7f3d0; }
.border-cyan-200 { border-color: #a5f3fc; }
.border-amber-200 { border-color: #fde68a; }
.border-red-200 { border-color: #fecaca; }
.border-primary-200 { border-color: rgb(var(--p-200)); }
.text-emerald-800 { color: #065f46; }
.text-cyan-800 { color: #155e75; }
.text-amber-800 { color: #92400e; }
.text-red-800 { color: #991b1b; }
.text-primary-800 { color: rgb(var(--p-800)); }
.text-primary-400 { color: rgb(var(--p-400)); }
.text-emerald-400 { color: #34d399; }
.text-cyan-400 { color: #22d3ee; }
.text-amber-400 { color: #fbbf24; }
.text-red-400 { color: #f87171; }

/* Buttons page */
.btn-xs { padding: 2px 8px; font-size: 11px; line-height: 1.4; border-radius: 6px; }
.btn-xl { padding: 16px 32px; font-size: 18px; border-radius: 12px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-split .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bg-blue-600 { background: #2563eb; }
.text-blue-600 { color: #2563eb; }

/* Cards page */
.bg-white-10 { background: rgba(255,255,255,.1); }
.ck-pricing-pop { transform: translateX(-50%) translateY(-50%); }
.profile-card-row { margin-top: -32px; }
.text-primary-700 { color: rgb(var(--p-700)); }
.bg-emerald-400 { background: #34d399; }

/* Chart sizes */
.h-280 { min-height: 280px; }

/* ===== FAQ page ===== */
.bg-pink-100 { background: #fce7f3 !important; }
.text-pink-600 { color: #db2777 !important; }
.gap-2-5 { gap: 10px !important; }
.gap-1-5 { gap: 6px !important; }
.ml-1-5 { margin-left: 6px !important; }
.px-2-5 { padding-left: 10px !important; padding-right: 10px !important; }
.py-2-5 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-7 { padding-top: 28px !important; padding-bottom: 28px !important; }
.py-3-5 { padding-top: 14px !important; padding-bottom: 14px !important; }
.mb-7 { margin-bottom: 28px !important; }
.mb-10 { margin-bottom: 40px !important; }
.mb-14 { margin-bottom: 56px !important; }
.grid-cols-sm-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-md-3 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-lg-6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 768px) { .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0,1fr)); } }

.faq-ping { position: relative; display: inline-flex; width: 8px; height: 8px; }
.faq-ping-ring { position: absolute; inset: 0; border-radius: 999px; background: #34d399; opacity: .75; animation: faqPing 1.4s cubic-bezier(0,0,.2,1) infinite; }
.faq-ping-dot { position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 999px; background: #10b981; }
@keyframes faqPing { 75%,100% { transform: scale(2); opacity: 0; } }

.faq-hero { position: relative; overflow: hidden; background: rgb(var(--p-50)); border: 1px solid rgb(var(--p-100)); }
.faq-blob { position: absolute; width: 208px; height: 208px; border-radius: 999px; filter: blur(48px); pointer-events: none; }
.faq-blob-tr { top: -40px; right: -40px; background: rgb(var(--p-200) / 0.30); }
.faq-blob-bl { bottom: -40px; left: -40px; background: rgba(139,92,246,0.20); }

.faq-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.faq-search-input { width: 100%; padding: 14px 16px 14px 44px; font-size: 14px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,.04); outline: none; transition: all .15s; }
.faq-search-input:focus { border-color: transparent; box-shadow: 0 0 0 2px rgb(var(--p-500)); }
.faq-search-input::placeholder { color: #94a3b8; }
.faq-search-clear { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #94a3b8; font-size: 12px; font-weight: 500; cursor: pointer; }
.faq-search-clear:hover { color: #475569; }

.faq-quick { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; color: #334155; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s; }
.faq-quick:hover { border-color: rgb(var(--p-300)); box-shadow: 0 4px 8px -4px rgba(0,0,0,.10); }

.faq-cat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; text-align: center; cursor: pointer; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; transition: all .2s; }
.faq-cat:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -10px rgba(0,0,0,.10); }
.faq-cat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }

.faq-pill { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; background: #fff; color: #475569; border: 1px solid #e2e8f0; cursor: pointer; transition: all .15s; }
.faq-pill:hover { border-color: rgb(var(--p-300)); }
.faq-pill-active { background: rgb(var(--p-500)); color: #fff; border-color: rgb(var(--p-500)); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.faq-pill-active:hover { border-color: rgb(var(--p-500)); }

.faq-item { overflow: hidden; transition: all .2s; }
.faq-item-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; text-align: left; background: none; border: 0; cursor: pointer; transition: background .15s; }
.faq-item-btn:hover { background: #f8fafc; }
.faq-q { font-weight: 600; color: #1e293b; font-size: 14px; line-height: 1.6; }
.faq-chevron { color: #94a3b8; flex-shrink: 0; transition: transform .2s; }
.faq-open .faq-chevron { transform: rotate(180deg); }
.faq-item-body { display: none; }
.faq-open .faq-item-body { display: block; animation: fadeIn .2s ease-out; }
.faq-item-inner { padding: 12px 20px 20px; border-top: 1px solid #f1f5f9; }
.faq-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 999px; font-weight: 500; }

.faq-link:hover { gap: 10px !important; }

.faq-article { transition: all .2s; cursor: pointer; }
.faq-article:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -10px rgba(0,0,0,.10); }

.faq-contact { display: flex; flex-direction: column; gap: 16px; transition: all .2s; }
.faq-contact:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -10px rgba(0,0,0,.10); }
.faq-contact-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.faq-contact-btn { width: 100%; padding: 10px 0; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff; border: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: all .15s; }
.faq-contact-btn:hover { filter: brightness(1.05); box-shadow: 0 4px 8px -2px rgba(0,0,0,.10); }
.bg-primary-500 { background: rgb(var(--p-500)) !important; }

/* ===== API Keys page ===== */
.text-xxs { font-size: 10px !important; line-height: 1.4 !important; }
.gap-0-5 { gap: 2px !important; }
.mb-1-5 { margin-bottom: 6px !important; }
.mt-1-5 { margin-top: 6px !important; }
.mt-0-5 { margin-top: 2px !important; }
.px-1-5 { padding-left: 6px !important; padding-right: 6px !important; }
.py-0-5 { padding-top: 2px !important; padding-bottom: 2px !important; }
.space-y-2-5 > * + * { margin-top: 10px !important; }
.space-y-3-5 > * + * { margin-top: 14px !important; }
.space-y-2 > * + * { margin-top: 8px !important; }
.divide-y > * + * { border-top: 1px solid #f1f5f9 !important; }
.nowrap { white-space: nowrap !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0 { min-width: 0 !important; }
.shrink-0 { flex-shrink: 0 !important; }
.resize-none { resize: none !important; }
.text-red-500 { color: #ef4444 !important; }
.border-primary-100 { border-color: rgb(var(--p-100)) !important; }
.border-emerald-100 { border-color: #d1fae5 !important; }
.border-violet-100 { border-color: #ede9fe !important; }
.border-amber-100 { border-color: #fef3c7 !important; }

@media (min-width: 1280px) {
  .grid-cols-xl-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .grid-cols-xl-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* Standalone React-style btn-primary (used when NOT combined with Bootstrap .btn) */
button.btn-primary:not(.btn), a.btn-primary:not(.btn) { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; background: rgb(var(--p-500)); color: #fff; border: 1px solid rgb(var(--p-500)); cursor: pointer; transition: all .15s; }
button.btn-primary:not(.btn):hover, a.btn-primary:not(.btn):hover { background: rgb(var(--p-600)); border-color: rgb(var(--p-600)); }
button.btn-primary:not(.btn):disabled { opacity: .5; cursor: not-allowed; }
.btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; background: transparent; color: #475569; border: 1px solid #e2e8f0; cursor: pointer; transition: all .15s; }
.btn-outline:hover { background: #f8fafc; color: #1e293b; }
.btn-outline.btn-sm { padding: 5px 10px; font-size: 12px; }

.input { width: 100%; padding: 9px 12px; font-size: 14px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #1e293b; outline: none; transition: all .15s; }
.input:focus { border-color: rgb(var(--p-500)); box-shadow: 0 0 0 3px rgb(var(--p-500) / 0.20); }
textarea.input { font-family: inherit; }

.ak-stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.ak-table-wrap { overflow-x: auto; }
.ak-table { width: 100%; border-collapse: collapse; }
.ak-table th, .ak-table td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.ak-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #94a3b8; background: #f8fafc; border-bottom: 1px solid #e2e8f0; letter-spacing: .04em; }
.ak-table td { font-size: 13px; color: #475569; border-bottom: 1px solid #f1f5f9; }
.ak-table tr:last-child td { border-bottom: 0; }
.ak-key-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ak-key-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: #f1f5f9; color: #475569; padding: 3px 8px; border-radius: 6px; }
.ak-icon-btn { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #94a3b8; cursor: pointer; transition: all .15s; }
.ak-icon-btn:hover { background: #f1f5f9; color: #475569; }
.ak-action-btn { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #94a3b8; cursor: pointer; transition: all .15s; }
.ak-action-btn:hover { background: #f1f5f9; color: #475569; }
.ak-revoke:hover { background: #fffbeb; color: #d97706; }
.ak-delete:hover { background: #fef2f2; color: #dc2626; }
.ak-link-btn { background: transparent; border: 0; cursor: pointer; }

.ak-bar { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.ak-bar-thin { height: 6px; }
.ak-bar-fill { height: 100%; border-radius: 999px; transition: width .3s; }
.ak-mw-160 { max-width: 160px; }
.ak-mw-170 { max-width: 170px; }
.bg-primary-400 { background: rgb(var(--p-400)) !important; }
.bg-cyan-500 { background: #06b6d4 !important; }
.bg-emerald-500 { background: #10b981 !important; }
.bg-amber-500 { background: #f59e0b !important; }
.bg-slate-200 { background: #e2e8f0 !important; }
.bg-slate-300 { background: #cbd5e1 !important; }

.ak-gauge { position: relative; width: 128px; height: 128px; }
.ak-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ak-gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ak-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }

.ak-wh-row { display: flex; }
.ak-wh-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 6px; flex-shrink: 0; transition: background .15s; }
.ak-toggle-sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #e2e8f0; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.ak-toggle-sw.ak-on { background: #10b981; }
.ak-toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .15s; }
.ak-toggle-sw.ak-on .ak-toggle-knob { transform: translateX(16px); }

.ak-sdk-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; background: transparent; color: #64748b; border: 0; cursor: pointer; transition: all .15s; }
.ak-sdk-tab:hover { color: #334155; }
.ak-sdk-tab-active { background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ak-sdk-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; background: transparent; color: #64748b; border: 0; cursor: pointer; transition: all .15s; }
.ak-sdk-copy:hover { background: #fff; color: #334155; }
.ak-code { background: #0f172a; padding: 20px 24px; overflow-x: auto; }
.ak-pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #cbd5e1; line-height: 1.6; margin: 0; white-space: pre; }
.ak-line { display: flex; gap: 16px; }
.ak-ln { user-select: none; color: #475569; min-width: 16px; text-align: right; flex-shrink: 0; }
.ak-code-text { white-space: pre; }

.ak-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ak-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.ak-modal-content { position: relative; background: #fff; border-radius: 16px; padding: 24px; width: 100%; max-width: 32rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); max-height: 90vh; overflow-y: auto; z-index: 10; }

.w-9 { width: 36px !important; } .h-9 { height: 36px !important; }
.w-10 { width: 40px !important; } .h-10 { height: 40px !important; }

/* ===== Widgets page ===== */
.grid-cols-md-2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-md-5 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-sm-2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-lg-3 { grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px) {
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 768px) {
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-cols-md-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .md-col-span-3 { grid-column: span 3 / span 3; }
  .md-col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.wg-divider { height: 1px; flex: 1; background: #e2e8f0; }

.wg-grad-card { border-radius: 16px; padding: 20px; color: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.10); }
.wg-grad-icon { width: 36px; height: 36px; border-radius: 12px; background: rgba(255,255,255,.20); display: flex; align-items: center; justify-content: center; }
.wg-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.wg-chip-up { background: rgba(255,255,255,.25); }
.wg-chip-down { background: rgba(0,0,0,.20); }

.wg-light-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.wg-profile-cover { height: 96px; border-radius: 12px 12px 0 0; overflow: hidden; position: relative; }
.wg-cover-img { width: 100%; height: 100%; object-fit: cover; }
.wg-profile-avatar { position: absolute; bottom: -24px; left: 20px; width: 64px; height: 64px; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 4px 8px -2px rgba(0,0,0,.10); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.wg-profile-avatar-img { position: absolute; bottom: -24px; left: 20px; width: 64px; height: 64px; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 4px 8px -2px rgba(0,0,0,.10); object-fit: cover; }
.wg-team-avatar { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.wg-team-avatar-img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.wg-avatar-img { object-fit: cover; flex-shrink: 0; }
.wg-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.wg-media-card:hover .wg-media-img { transform: scale(1.05); }
.wg-status-dot { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 999px; border: 2px solid #fff; }
.wg-divide-x > * + * { border-left: 1px solid #f1f5f9; }
.wg-star { color: #fbbf24; fill: #fbbf24; }

.wg-progress { width: 100%; height: 10px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.wg-progress-bar { height: 100%; border-radius: 999px; transition: width .7s; }

.wg-todo-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; transition: background .15s; }
.wg-todo-item:hover { background: #f8fafc; }
.wg-todo-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; transition: all .15s; }
.wg-todo-check:hover { border-color: rgb(var(--p-400)); }
.wg-todo-check.wg-checked { background: rgb(var(--p-500)); border-color: rgb(var(--p-500)); }
.wg-todo-text { flex: 1; font-size: 14px; color: #334155; transition: color .15s; }
[data-done="true"] .wg-todo-text { text-decoration: line-through; color: #94a3b8; }
.wg-todo-del { background: transparent; border: 0; padding: 4px; border-radius: 8px; color: #94a3b8; cursor: pointer; opacity: 0; transition: all .15s; }
.wg-todo-item:hover .wg-todo-del { opacity: 1; }
.wg-todo-del:hover { background: #fef2f2; color: #ef4444; }

.bg-blue-700 { background: #1d4ed8 !important; color: #fff; }
.text-yellow-200 { color: #fef08a; }
.wg-weather-border { border-top: 1px solid rgba(255,255,255,.20); }

.wg-quick { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid #f1f5f9; background: #fff; cursor: pointer; transition: all .2s; }
.wg-quick:hover { box-shadow: 0 10px 16px -6px rgba(0,0,0,.10); transform: translateY(-2px); }
.wg-quick-label { font-size: 11px; font-weight: 600; color: #475569; }

.wg-bell-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 999px; background: #f43f5e; color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.wg-act-row { display: flex; align-items: center; gap: 12px; padding: 14px 8px; margin: 0 -8px; border-bottom: 1px solid #f1f5f9; border-radius: 12px; cursor: pointer; transition: background .15s; }
.wg-act-row:last-child { border-bottom: 0; }
.wg-act-row:hover { background: #f8fafc; }
.wg-act-img { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 10px; flex-shrink: 0; }
.wg-eng-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); flex-shrink: 0; }
.wg-rot-90 { transform: rotate(90deg); }

.wg-cal-day { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 500; color: #334155; }
.wg-cal-today { background: rgb(var(--p-500)); color: #fff; }
.wg-cal-evt { color: rgb(var(--p-700)); font-weight: 600; }
.wg-cal-dot { width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--p-400)); margin-top: -4px; margin-bottom: 2px; align-self: center; }
.wg-cal-dot-today { background: rgba(255,255,255,.60); }
.wg-cal-nav { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 0; color: #64748b; font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s; }
.wg-cal-nav:hover { background: #f1f5f9; }
.wg-day-col { width: 48px; }

.wg-feat { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 16px; border: 1px solid rgba(241,245,249,0.80); }
.wg-lb-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; transition: background .15s; }
.wg-lb-row:hover { background: #f8fafc; }
.wg-lb-rank { font-size: 14px; font-weight: 700; color: #94a3b8; width: 20px; text-align: center; }
.wg-lb-avatar { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 10px; flex-shrink: 0; }

.wg-media-card { transition: all .3s; }
.wg-media-card:hover { transform: translateY(-4px); box-shadow: 0 20px 32px -12px rgba(0,0,0,.15); }
.wg-media-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.40), transparent); }
.wg-media-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.20) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.30); backdrop-filter: blur(4px); }
.wg-media-avatar { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 9px; }
.wg-read-btn { font-size: 11px !important; padding: 4px 12px !important; }

.wg-cd-head { padding: 32px; }
.wg-cd-chip { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); padding: 6px 16px; border-radius: 999px; margin-bottom: 16px; }
.wg-tracking { text-transform: uppercase; letter-spacing: .15em; }
.wg-cd-box { background: rgba(255,255,255,.15); border-radius: 16px; padding: 16px; border: 1px solid rgba(255,255,255,.20); }
.wg-pulse { animation: wgPulse 2s ease-in-out infinite; }
@keyframes wgPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.wg-cd-foot { padding-left: 32px; padding-right: 32px; }
.wg-cd-input { max-width: 208px; }
.wg-plan-btn { padding: 10px 0 !important; }

.lucide-2xl { width: 32px !important; height: 32px !important; }
.lucide-3xl { width: 36px !important; height: 36px !important; }
.text-5xl { font-size: 48px !important; line-height: 1.1 !important; }
.h-12 { height: 48px; }
.h-10 { height: 40px; }
.h-24 { height: 96px; }
.h-44 { height: 176px; }
.w-7 { width: 28px !important; }
.h-7 { height: 28px !important; }
.w-8 { width: 32px !important; }
.h-8 { height: 32px !important; }
.w-5 { width: 20px !important; }
.h-5 { height: 20px !important; }
.opacity-70 { opacity: .70 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-80 { opacity: .80 !important; }
.opacity-90 { opacity: .90 !important; }
.up-grad-2 { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }
.up-grad-3 { background: linear-gradient(135deg, #10b981, #059669) !important; }
.up-grad-4 { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }

/* ===== Account page ===== */
.grid-cols-sm-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-md-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-xl-2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px) {
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1280px) {
  .grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xl-col-span-2 { grid-column: span 2 / span 2; }
}

.lucide-xxs { width: 10px !important; height: 10px !important; }
.text-3xl { font-size: 30px !important; line-height: 1.2 !important; }
.text-lg { font-size: 18px !important; line-height: 1.4 !important; }
.text-xl { font-size: 20px !important; line-height: 1.4 !important; }
.w-1-5 { width: 6px !important; } .h-1-5 { height: 6px !important; }
.w-4 { width: 16px !important; } .h-4 { height: 16px !important; }
.h-28 { height: 112px !important; }
.bg-slate-400 { background: #94a3b8 !important; }
.bg-slate-50 { background: #f8fafc !important; }
.text-yellow-500 { color: #eab308 !important; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.text-white { color: #fff !important; }
.bg-slate-900 { background: #0f172a !important; }
.bg-blue-600 { background: #2563eb !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-primary-200 { border-color: rgb(var(--p-200)) !important; }
.text-primary-700 { color: rgb(var(--p-700)) !important; }
.text-primary-500 { color: rgb(var(--p-500)) !important; }
.text-violet-500 { color: #8b5cf6 !important; }
.text-pink-500 { color: #ec4899 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-900 { color: #0f172a !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.bg-pink-50 { background: #fdf2f8 !important; }
.bg-violet-50 { background: #f5f3ff !important; }

.acc-cover { position: relative; overflow: hidden; border-radius: 16px; height: 208px; }
.acc-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-avatar-img { width: 112px; height: 112px; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 20px 25px -5px rgba(0,0,0,.10); object-fit: cover; display: block; }
.acc-port-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.acc-port-tile:hover .acc-port-img { transform: scale(1.05); }
.acc-help-img { width: 100%; height: 112px; object-fit: cover; }
.acc-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.60), rgba(0,0,0,.20), transparent); }
.acc-edit-cover { position: absolute; top: 16px; right: 16px; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.20); backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.20); cursor: pointer; }
.acc-edit-cover:hover { background: rgba(255,255,255,.30); }
.acc-cover-name { position: absolute; bottom: 16px; left: 176px; }
.acc-cover-sub { color: rgba(255,255,255,.80); font-size: 14px; }
.acc-cover-stats { position: absolute; bottom: 16px; right: 24px; display: flex; align-items: center; gap: 16px; }
@media (max-width: 767px) { .acc-cover-stats { display: none; } .acc-cover-name { left: 32px; } }
.acc-cover-stat-lbl { color: rgba(255,255,255,.60); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.acc-avatar-wrap { position: absolute; bottom: 0; left: 32px; transform: translateY(50%); z-index: 10; }
.acc-avatar { width: 112px; height: 112px; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 20px 25px -5px rgba(0,0,0,.10); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 28px; }
.acc-avatar-dot { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 999px; border: 2px solid #fff; }

.acc-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-sec-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.acc-tabs { display: inline-flex; gap: 4px; margin-bottom: 24px; background: #f1f5f9; padding: 4px; border-radius: 12px; }
.acc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; background: transparent; color: #64748b; border: 0; cursor: pointer; transition: all .15s; }
.acc-tab:hover { color: #334155; }
.acc-tab-active { background: #fff; color: rgb(var(--p-600)); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.acc-input-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px; }
.acc-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.acc-input-pl7 { padding-left: 28px !important; }
.acc-input-pl9 { padding-left: 36px !important; }
.acc-input-pr10 { padding-right: 40px !important; }
.acc-pwd-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #94a3b8; cursor: pointer; }
.acc-pwd-toggle:hover { color: #475569; }

.acc-port-tile { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4/3; cursor: pointer; }
.acc-port-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; opacity: 0; transform: translateY(100%); transition: all .3s; background: linear-gradient(to top, rgba(0,0,0,.60), transparent); }
.acc-port-tile:hover .acc-port-info { opacity: 1; transform: translateY(0); }
.acc-heart { color: #f87171; fill: #f87171; }
.acc-port-likes { color: rgba(255,255,255,.80); font-size: 10px; }

.acc-pc-bar { width: 100%; height: 10px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.acc-pc-fill { height: 100%; border-radius: 999px; background: linear-gradient(to right, rgb(var(--p-500)), #8b5cf6); }
.acc-check-circle { width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-empty-dot { width: 6px; height: 6px; border-radius: 999px; background: #cbd5e1; }

.acc-toggle { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #e2e8f0; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.acc-toggle-on { background: rgb(var(--p-500)); }
.acc-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .15s; }
.acc-toggle-on .acc-toggle-knob { transform: translateX(20px); }

.acc-skill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: rgb(var(--p-50)); color: rgb(var(--p-700)); border: 1px solid rgb(var(--p-200)); }

.acc-team-avatar { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 10px; }
.acc-team-status { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 999px; border: 2px solid #fff; }
.acc-msg-btn { width: 28px; height: 28px; border-radius: 8px; background: transparent; border: 0; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.acc-msg-btn:hover { color: rgb(var(--p-600)); background: rgb(var(--p-50)); }

.acc-act-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; transition: background .15s; }
.acc-act-row:hover { background: #f8fafc; }
.acc-act-icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-mini-avatar { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 7px; }
.acc-link-btn { background: transparent; border: 0; cursor: pointer; }
.acc-link-btn:hover { text-decoration: underline; }

.acc-strength-bar { flex: 1; height: 6px; border-radius: 999px; background: #e2e8f0; transition: background .15s; }

.acc-session { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; border: 1px solid; }
.acc-session-current { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #d1fae5; color: #047857; }
.acc-danger-btn { color: #dc2626 !important; border-color: #fecaca !important; }
.acc-danger-btn:hover { background: #fef2f2 !important; }
.acc-danger-zone { border-color: #fecaca !important; }

.acc-sec-gauge { position: relative; width: 112px; height: 112px; }
.acc-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.acc-gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.acc-freq-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; text-align: left; cursor: pointer; transition: all .15s; }
.acc-freq-btn:hover { border-color: #cbd5e1; }
.acc-freq-active { border-color: rgb(var(--p-500)); background: rgb(var(--p-50)); box-shadow: 0 0 0 2px rgb(var(--p-500) / 0.30); }
.acc-freq-icon { width: 36px; height: 36px; border-radius: 12px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #64748b; }
.acc-freq-active .acc-freq-icon { background: rgb(var(--p-100)); color: rgb(var(--p-600)); }
.acc-freq-active p:first-child { color: rgb(var(--p-700)); }

.acc-radio { display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.acc-radio:hover { background: #f8fafc; }
.acc-radio input { display: none; }
.acc-radio-dot { width: 16px; height: 16px; border-radius: 999px; border: 2px solid #cbd5e1; flex-shrink: 0; margin-top: 2px; transition: all .15s; position: relative; }
.acc-radio input:checked + .acc-radio-dot { border-color: rgb(var(--p-500)); }
.acc-radio input:checked + .acc-radio-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: rgb(var(--p-500)); }

.acc-plan-head { color: #fff; }
.acc-plan-starter { background: linear-gradient(135deg, #475569, #1e293b); }
.acc-plan-pro { background: linear-gradient(135deg, rgb(var(--p-600)), #8b5cf6); }
.acc-plan-ent { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.acc-plan-period { color: rgba(255,255,255,.70); font-size: 14px; }
.acc-plan-desc { color: rgba(255,255,255,.70); font-size: 12px; }
.acc-plan-badge { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.20); backdrop-filter: blur(4px); }
.acc-plan-features { list-style: none; padding: 0; margin: 0 0 20px 0; }
.acc-plan-features li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #475569; }
.acc-plan-current { box-shadow: 0 0 0 2px rgb(var(--p-500)); }

.acc-card-visual { position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #1e293b, #0f172a, #020617); padding: 24px; color: #fff; margin-bottom: 20px; max-width: 384px; }
.acc-card-bg-1 { position: absolute; top: -32px; right: -32px; width: 128px; height: 128px; border-radius: 999px; background: rgba(255,255,255,.05); }
.acc-card-bg-2 { position: absolute; bottom: 16px; right: 24px; width: 80px; height: 80px; border-radius: 999px; background: rgba(255,255,255,.05); }
.acc-card-chip { width: 40px; height: 28px; border-radius: 4px; background: linear-gradient(135deg, #fcd34d, #f59e0b); }
.acc-card-brand { font-size: 12px; color: rgba(255,255,255,.50); font-weight: 500; }
.acc-card-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: .2em; margin-bottom: 16px; }
.acc-card-lbl { font-size: 10px; color: rgba(255,255,255,.50); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }

.acc-paid-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #d1fae5; color: #047857; }

.acc-usage-bar { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.acc-usage-fill { height: 100%; border-radius: 999px; }

.btn-outline.justify-center, .btn-primary.justify-center { justify-content: center; }
.w-full { width: 100% !important; }

/* ===== Pricing page ===== */
.grid-cols-lg-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 1024px) { .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.text-left-lg { text-align: center; }
.flex-row-lg { flex-direction: column; }
.flex-row-sm { flex-direction: column; }
@media (min-width: 640px) {
  .flex-row-sm,
  .flex.flex-row-sm,
  .flex.flex-col.flex-row-sm { flex-direction: row !important; }
}
@media (min-width: 1024px) {
  .flex-row-lg,
  .flex.flex-row-lg,
  .flex.flex-col.flex-row-lg { flex-direction: row !important; }
  .text-left-lg { text-align: left !important; }
}
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }

.pr-toggle-wrap { display: inline-flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px 24px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pr-toggle { position: relative; width: 56px; height: 28px; border-radius: 999px; background: #e2e8f0; border: 0; cursor: pointer; transition: background .2s; }
.pr-toggle-on { background: rgb(var(--p-500)); }
.pr-toggle-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .2s; }
.pr-toggle-on .pr-toggle-knob { transform: translateX(28px); }
.pr-save-badge { font-size: 12px; background: #d1fae5; color: #047857; padding: 2px 8px; border-radius: 999px; font-weight: 700; }

.pr-trust-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.pr-card { overflow: hidden; transition: all .2s; }
.pr-card:hover { transform: translateY(-4px); box-shadow: 0 20px 32px -12px rgba(0,0,0,.15); }
.pr-card-featured { box-shadow: 0 0 0 2px rgb(var(--p-500)), 0 20px 40px -12px rgba(0,0,0,.20); transform: scale(1.03); }
.pr-card-featured:hover { transform: scale(1.03) translateY(-2px); }
.pr-banner { background: rgb(var(--p-500)); color: #fff; text-align: center; font-size: 12px; font-weight: 700; padding: 8px 0; letter-spacing: .15em; text-transform: uppercase; }
.pr-card-head { color: #fff; }
.pr-plan-icon { width: 48px; height: 48px; background: rgba(255,255,255,.20); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; backdrop-filter: blur(4px); }
.pr-plan-desc { color: rgba(255,255,255,.75); font-size: 14px; margin: 6px 0 0 0; line-height: 1.5; }
.pr-plan-suffix { color: rgba(255,255,255,.70); font-size: 14px; margin-bottom: 6px; line-height: 1; }
.pr-currency { font-size: 32px; vertical-align: top; }
.pr-yearly-note { color: rgba(255,255,255,.60); font-size: 12px; margin-top: 4px; }
.font-black { font-weight: 900 !important; }

.pr-cta { width: 100%; margin-bottom: 28px; font-weight: 600; padding: 10px 0; border-radius: 12px; border: 0; cursor: pointer; font-size: 14px; transition: all .15s; }
.pr-cta-primary { background: rgb(var(--p-500)); color: #fff; box-shadow: 0 4px 8px -2px rgba(0,0,0,.10); }
.pr-cta-primary:hover { background: rgb(var(--p-600)); }
.pr-cta-info { background: #06b6d4; color: #fff; box-shadow: 0 4px 8px -2px rgba(0,0,0,.10); }
.pr-cta-info:hover { background: #0891b2; }
.pr-cta-secondary { background: #f1f5f9; color: #334155; }
.pr-cta-secondary:hover { background: #e2e8f0; }

.pr-feature-list { list-style: none; padding: 0; }
.pr-feature-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #334155; }
.pr-feat-off { color: #94a3b8 !important; }
.pr-check { width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pr-check-yes { background: #d1fae5; }
.pr-check-no { background: #f1f5f9; }

.pr-comp-table { width: 100%; border-collapse: collapse; }
.pr-comp-table th { padding: 20px; font-size: 14px; font-weight: 700; color: #334155; border-bottom: 1px solid #f1f5f9; }
.pr-comp-table th:first-child { color: #64748b; font-weight: 600; width: 50%; }
.pr-comp-pro-col { color: rgb(var(--p-600)) !important; background: rgb(var(--p-500) / 0.05); }
.pr-comp-table td { padding: 14px 20px; font-size: 14px; color: #334155; border-bottom: 1px solid #f8fafc; }
.pr-comp-table tr:hover td { background: rgba(248, 250, 252, .5); }
.pr-comp-cat td { background: #f8fafc; padding: 10px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: #94a3b8; }
.pr-dash { display: block; width: 16px; height: 2px; background: #e2e8f0; margin: 0 auto; border-radius: 2px; }

.pr-ent-chip { display: inline-flex; align-items: center; gap: 8px; background: rgb(var(--p-100)); color: rgb(var(--p-700)); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 16px; }
.pr-cta-large { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all .15s; white-space: nowrap; border: 1px solid transparent; }
.pr-cta-large-primary { background: rgb(var(--p-500)); color: #fff; border-color: rgb(var(--p-500)); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06); }
.pr-cta-large-primary:hover { background: rgb(var(--p-600)); border-color: rgb(var(--p-600)); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); color: #fff; }
.pr-cta-large-outline { background: #fff; color: #334155; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pr-cta-large-outline:hover { background: #f8fafc; box-shadow: 0 4px 6px -1px rgba(0,0,0,.07); color: #334155; }
/* Enterprise CTA banner — overflow hidden + max-w on paragraph (matches React) */
.pr-cta-banner-text p { max-width: 28rem; }

.pr-faq-wrap { max-width: 42rem; margin: 0 auto; }
.bg-slate-500 { background: #64748b !important; }

/* Force radar series fill to a light translucent value (ApexCharts default is too dark) */
.apexcharts-radar-series .apexcharts-series path { fill-opacity: 0.18 !important; }
.apexcharts-radar-series .apexcharts-series polygon { fill-opacity: 0.18 !important; }

/* React-parity table override (used together with Bootstrap's .table) */
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrapper > .table { min-width: 100%; }
.table-wrapper > .table.table-react { white-space: nowrap; }
.table-wrapper > .table.table-react .max-w-xs { white-space: normal; }
.table-wrapper > .table.table-react .truncate { display: block; }
.table.table-react { width: 100%; font-size: 13px; margin-bottom: 0; }
.table.table-react > :not(caption) > * > * { padding: 12px 16px; background: transparent; box-shadow: none; }
.table.table-react thead tr { border-bottom: 1px solid #e2e8f0; }
.table.table-react thead th { text-align: start; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; border: 0; background: transparent; }
.table.table-react tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .15s; }
.table.table-react tbody tr:hover { background: #f8fafc; }
.table.table-react tbody tr:last-child { border-bottom: 0; }
.table.table-react tbody td { color: #334155; border: 0; vertical-align: middle; }
/* Round avatars in table cells must keep their aspect ratio (target only sized boxes, not text pills) */
.table.table-react .rounded-full.w-8,
.table.table-react .rounded-full.w-10,
.table.table-react .rounded-full.w-12 { flex-shrink: 0; aspect-ratio: 1 / 1; }

/* React-parity pill tabs (used in ecommerce Top Products etc.) */
.ec-tab-pill { font-size: 12px; padding: 6px 10px; border-radius: 8px; font-weight: 500; text-transform: capitalize; background: transparent; color: #64748b; border: 0; cursor: pointer; transition: all .15s; }
.ec-tab-pill:hover { background: #f1f5f9; }
.ec-tab-pill-active { background: rgb(var(--p-500)); color: #fff; }
.ec-tab-pill-active:hover { background: rgb(var(--p-500)); }

/* Revenue Updates card — React-parity layout */
.rev-body { display: flex; flex-direction: column; }
.rev-side { padding: 20px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
@media (min-width: 1024px) {
  .rev-body { flex-direction: row; }
  .rev-side { width: 224px; border-top: 0; border-left: 1px solid #f1f5f9; }
  .text-start-lg { text-align: start !important; }
}
.rev-select { font-size: 12px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 12px; background: #fff; color: #475569; outline: none; transition: box-shadow .15s; cursor: pointer; }
.rev-select:focus { box-shadow: 0 0 0 2px rgb(var(--p-500) / 0.20); border-color: rgb(var(--p-500)); }

.w-2-5 { width: 10px !important; }
.h-2-5 { height: 10px !important; }
.bg-blue-500 { background: #3b82f6 !important; }
.bg-blue-300 { background: #93c5fd !important; }
.btn-primary.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.btn-primary.btn-sm.w-full { display: flex !important; }

/* Music dashboard — Welcome banner */
.mu-welcome { background: #f8fafc; border: 1px solid #f1f5f9; }
.mu-welcome-content { position: relative; z-index: 10; }
.mu-welcome-svg { position: absolute; bottom: 0; right: 0; width: 176px; height: 176px; opacity: .60; pointer-events: none; }
[dir="rtl"] .mu-welcome-svg { right: auto; left: 0; }

/* Music dashboard — Artist Spotlight (Aurora Waves) */
@media (min-width: 1024px) { .grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
.mu-spot-head { background: rgb(var(--p-500)); padding: 24px 24px 64px; position: relative; overflow: hidden; }
.mu-spot-bg { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: .05; pointer-events: none; }
.mu-spot-chip { padding: 2px 8px; background: rgba(255,255,255,.20); border-radius: 999px; font-size: 10px; color: #fff; font-weight: 500; }
.mu-spot-genre { color: rgba(255,255,255,.70); }
.mu-spot-mic { width: 80px; height: 80px; border-radius: 16px; background: #f472b6; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px -5px rgba(168,85,247,.30); flex-shrink: 0; }
.mu-spot-stats { position: relative; margin: -40px 20px 0; background: #fff; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0,0,0,.10); padding: 20px; }
.mu-spot-play { flex: 1; padding: 8px; background: rgb(var(--p-500)); color: #fff; border: 0; border-radius: 12px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: all .15s; }
.mu-spot-play:hover { box-shadow: 0 10px 16px -6px rgb(var(--p-500) / .30); }
.mu-spot-follow { padding: 8px 16px; background: transparent; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 14px; font-weight: 600; color: #475569; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .15s; }
.mu-spot-follow:hover { background: #f8fafc; }
.mu-spot-share { padding: 8px 12px; background: transparent; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: background .15s; }
.mu-spot-share:hover { background: #f8fafc; }
.mu-spot-track { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.mu-spot-track:hover { background: #f8fafc; }
.mu-spot-rank { width: 20px; font-size: 11px; font-weight: 700; color: #94a3b8; text-align: center; }
.mu-spot-track-thumb { width: 32px; height: 32px; border-radius: 8px; background: rgb(var(--p-500)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mu-spot-play-icon { opacity: 0; transition: opacity .15s; }
.mu-spot-track:hover .mu-spot-play-icon { opacity: 1; }

/* Music dashboard — Podcast Picks + Upcoming Events rows */
.mu-pod-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.mu-pod-row:hover { background: #f8fafc; }
.mu-pod-dur { font-size: 10px; background: #f1f5f9; color: #64748b; padding: 4px 8px; border-radius: 8px; flex-shrink: 0; }
.mu-event-date { width: 48px; height: 56px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.mu-event-badge { font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 8px; flex-shrink: 0; }
.bg-violet-100 { background: #ede9fe !important; }
.text-violet-700 { color: #6d28d9 !important; }
.bg-pink-100 { background: #fce7f3 !important; }
.text-pink-700 { color: #be185d !important; }

/* General dashboard — Task Board */
.gd-task { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #f1f5f9; transition: all .15s; cursor: pointer; }
.gd-task:hover { border-color: rgb(var(--p-200)); background: #f8fafc; }
.gd-task-spinner { width: 14px; height: 14px; border-radius: 999px; border: 2px solid rgb(var(--p-500)); border-top-color: transparent; animation: gdSpin .9s linear infinite; flex-shrink: 0; }
@keyframes gdSpin { to { transform: rotate(360deg); } }
.gd-task-asg { width: 16px; height: 16px; border-radius: 999px; background: #cbd5e1; color: #fff; font-size: 7px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.gd-task-done { text-decoration: line-through; color: #94a3b8 !important; }
.gd-prio { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: capitalize; }
.gd-prio-high { color: #dc2626; background: #fef2f2; }
.gd-prio-medium { color: #d97706; background: #fffbeb; }
.gd-prio-low { color: #64748b; background: #f8fafc; }
.gd-task-add { width: 100%; border: 2px dashed #e2e8f0; border-radius: 12px; padding: 10px; background: transparent; font-size: 14px; color: #94a3b8; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all .15s; }
.gd-task-add:hover { border-color: rgb(var(--p-300)); color: rgb(var(--p-500)); }

/* General dashboard — Upcoming Deadlines */
.gd-deadline { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid #f1f5f9; transition: all .15s; cursor: pointer; }
.gd-deadline:hover { border-color: #e2e8f0; box-shadow: 0 4px 8px -2px rgba(0,0,0,.06); }
.gd-deadline-icon { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.gd-deadline-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.gd-urgency-red { color: #ef4444; background: #fef2f2; }
.gd-urgency-amber { color: #f59e0b; background: #fffbeb; }
.gd-urgency-slate { color: #64748b; background: #f8fafc; }
.gd-deadline-type { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: #64748b; }
.gd-deadline-summary > * + * { border-left: 1px solid #f1f5f9; }
.h-1-5 { height: 6px !important; }

/* Tickets / Invoice / shared — search bar with left icon */
.tk-search-wrap { position: relative; min-width: 12rem; }
.tk-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.tk-search-input { padding-left: 32px !important; width: 100%; }

/* ===== React-style pagination (default for entire template) ===== */
/* Reusable: works with both Bootstrap's <ul class="pagination"> markup AND the React-style flex-gap-1 button strip */

.pagination, .pg-strip { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; list-style: none; align-items: center; }

/* Bootstrap <li class="page-item"><a class="page-link"> ... </a></li> rendering */
.pagination .page-item { display: inline-flex; }
.pagination .page-item .page-link,
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  font-size: 12px; font-weight: 500;
  background: transparent; color: #475569;
  border: 1px solid #e2e8f0; border-radius: 8px;
  cursor: pointer; transition: all .15s;
  text-decoration: none;
}
.pagination .page-item .page-link:hover,
.pg-btn:hover { background: #f8fafc; color: #1e293b; border-color: #cbd5e1; }
.pagination .page-item.active .page-link,
.pg-btn.pg-btn-active {
  background: rgb(var(--p-500)); color: #fff; border-color: rgb(var(--p-500));
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.pagination .page-item.active .page-link:hover,
.pg-btn.pg-btn-active:hover {
  background: rgb(var(--p-600)); color: #fff; border-color: rgb(var(--p-600));
}
.pagination .page-item.disabled .page-link,
.pg-btn:disabled,
.pg-btn[disabled] { opacity: .40; cursor: not-allowed; pointer-events: none; }
.pagination-sm .page-item .page-link { min-width: 28px; height: 28px; padding: 0 8px; font-size: 11px; }

/* Strip wrapper for the "Showing X–Y of N" + buttons pattern */
.pg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }
.pg-info { font-size: 13px; color: #64748b; margin: 0; }

/* ===== Blog Detail page ===== */
.bd-hero { position: relative; height: 288px; }
.bd-hero-img { width: 100%; height: 100%; object-fit: cover; }
.bd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.30), transparent); }
.bd-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; }
.bd-hero-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.20); color: #fff; border: 1px solid rgba(255,255,255,.30); backdrop-filter: blur(4px); margin-bottom: 12px; }
.bd-hero-meta { color: rgba(255,255,255,.80); }
.bd-author-mini { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255,255,255,.30); }

.bd-like-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; background: transparent; color: #475569; border: 1px solid #e2e8f0; cursor: pointer; transition: all .15s; }
.bd-like-btn:hover { background: #f8fafc; color: #1e293b; }
.bd-like-btn[data-liked="true"] { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.bd-like-btn[data-liked="true"] svg { fill: currentColor; }
.bd-icon-btn { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #475569; border: 1px solid #e2e8f0; cursor: pointer; transition: all .15s; }
.bd-icon-btn:hover { background: #f8fafc; color: #1e293b; }
.bd-icon-btn[data-bookmarked="true"] { background: rgb(var(--p-50)); color: rgb(var(--p-600)); border-color: rgb(var(--p-200)); }
.bd-icon-btn[data-bookmarked="true"] svg { fill: currentColor; }
.bd-share-twitter, .bd-share-linkedin, .bd-author-twitter, .bd-author-linkedin { width: 36px; height: 36px; border-radius: 12px; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: filter .15s; }
.bd-share-twitter, .bd-author-twitter { background: #f0f9ff; color: #0ea5e9; }
.bd-share-linkedin, .bd-author-linkedin { background: #eff6ff; color: #2563eb; }
.bd-author-twitter, .bd-author-linkedin { width: 32px; height: 32px; border-radius: 8px; }
.bd-share-twitter:hover, .bd-author-twitter:hover { background: #e0f2fe; }
.bd-share-linkedin:hover, .bd-author-linkedin:hover { background: #dbeafe; }

.bd-prose h2 { color: #1e293b; font-weight: 700; }
.bd-prose p { color: #475569; line-height: 1.7; }
.bd-code { background: #0f172a; border-radius: 12px; padding: 20px; margin-bottom: 24px; overflow-x: auto; }
.bd-code pre { margin: 0; }
.bd-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #e2e8f0; }
.bd-quote { border-left: 4px solid rgb(var(--p-500)); padding: 4px 20px; margin: 24px 0; background: rgb(var(--p-50)); border-radius: 0 12px 12px 0; }
.bd-quote p { font-style: italic; }
.bd-tag { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #f1f5f9; color: #475569; cursor: pointer; transition: all .15s; }
.bd-tag:hover { background: rgb(var(--p-50)); color: rgb(var(--p-600)); }

.bd-author-img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.bd-comment-avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.bd-comment-action { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #94a3b8; background: transparent; border: 0; cursor: pointer; padding: 0; transition: color .15s; }
.bd-comment-action:hover { color: rgb(var(--p-600)); }

.bd-related { cursor: pointer; }
.bd-related-img { width: 100%; height: 96px; border-radius: 12px; object-fit: cover; margin-bottom: 8px; display: block; }
.bd-related-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #f1f5f9; color: #475569; }

/* ===== List page ===== */
.ls-reset { list-style: none; padding: 0; margin: 0; }
.ls-basic { list-style: none; padding: 0; margin: 0; }
.ls-basic > li:first-child { padding-top: 0 !important; }
.ls-basic > li:last-child { padding-bottom: 0 !important; }
.ls-num { width: 24px; height: 24px; border-radius: 999px; background: rgb(var(--p-500)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.ls-interactive { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; text-align: left; background: transparent; border: 0; cursor: pointer; transition: background .15s; color: #64748b; }
.ls-interactive:hover { background: #f8fafc; }
.ls-interactive-active { background: rgb(var(--p-50)); color: rgb(var(--p-600)); }
.ls-interactive-active .ls-interactive-label { color: rgb(var(--p-700)); }
.ls-interactive-label { color: inherit; }
.ls-check { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: transparent; border: 0; cursor: pointer; text-align: left; transition: background .15s; }
.ls-check:hover { background: #f8fafc; }
.ls-check-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.ls-check-icon { opacity: 0; }
.ls-check.ls-checked .ls-check-box { background: rgb(var(--p-500)); border-color: rgb(var(--p-500)); }
.ls-check.ls-checked .ls-check-icon { opacity: 1; }
.ls-check.ls-checked .ls-check-label { text-decoration: line-through; color: #94a3b8; }
.ls-nested { list-style: none; padding-left: 12px; margin-left: 20px; border-left: 2px solid #e2e8f0; }
.ls-nested > li + li { margin-top: 4px; }
.ls-avatar-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 999px; border: 2px solid #fff; }
.ls-rich { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #f8fafc; transition: background .15s; }
.ls-rich:hover { background: #f1f5f9; }
.ls-rich-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 999px; border: 2px solid #f8fafc; }
.ls-rich:hover .ls-rich-status { border-color: #f1f5f9; }
.ls-more-btn { padding: 6px; border-radius: 8px; background: transparent; border: 0; cursor: pointer; transition: background .15s; }
.ls-more-btn:hover { background: #e2e8f0; }
.ls-horiz { display: flex; gap: 12px; overflow-x: auto; padding: 0 4px 8px; margin: 0 -4px; }
.ls-horiz-tile { flex-shrink: 0; width: 112px; padding: 12px; border-radius: 12px; background: #f8fafc; text-align: center; cursor: pointer; transition: background .15s; }
.ls-horiz-tile:hover { background: #f1f5f9; }
.ls-horiz-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; transition: transform .15s; }
.ls-horiz-tile:hover .ls-horiz-icon { transform: scale(1.10); }
.ls-activity-chip { flex-shrink: 0; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 500; }

.hidden-sm-flex { display: none; }
@media (min-width: 640px) { .hidden-sm-flex { display: inline-flex; } }

/* ===== Dialog / Modal page ===== */
.dlg { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.50); backdrop-filter: blur(2px); }
.dlg-panel { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.30); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.dlg-sm { width: 100%; max-width: 384px; }
.dlg-md { width: 100%; max-width: 512px; }
.dlg-lg { width: 100%; max-width: 768px; }
.dlg-xl { width: 100%; max-width: 1024px; }
.dlg-full { width: 100%; max-width: 1200px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #f1f5f9; }
.dlg-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.dlg-no-border .dlg-body { padding: 0; }
.dlg-footer { padding: 16px 24px; border-top: 1px solid #f1f5f9; }
.dlg-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 0; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.dlg-close:hover { background: #f1f5f9; color: #1e293b; }
.dlg-close-float { position: absolute; top: 12px; right: 12px; z-index: 10; background: rgba(255,255,255,.85); }
.dlg-no-border .dlg-close-float { background: rgba(0,0,0,.40); color: #fff; }
.dlg-no-border .dlg-close-float:hover { background: rgba(0,0,0,.60); color: #fff; }

/* Trigger button variants */
.dlg-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; color: #fff; border: 0; cursor: pointer; transition: filter .15s; }
.dlg-trigger:hover { filter: brightness(1.05); }
.dlg-trigger-danger  { background: #ef4444; }
.dlg-trigger-success { background: #10b981; }
.dlg-trigger-info    { background: #06b6d4; }
.dlg-trigger-amber   { background: #f59e0b; }
.dlg-trigger-orange  { background: #f97316; }
.dlg-trigger-primary { background: rgb(var(--p-500)); }
.dlg-trigger-grad { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; color: #fff; border: 0; cursor: pointer; transition: opacity .15s; background: linear-gradient(to right, #7c3aed, rgb(var(--p-600))); }
.dlg-trigger-grad:hover { opacity: .90; }

/* Action button variants inside dialogs */
.dlg-btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: 8px; background: #f1f5f9; color: #475569; border: 0; cursor: pointer; transition: background .15s; }
.dlg-btn-secondary:hover { background: #e2e8f0; }
.dlg-btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; background: #ef4444; color: #fff; border: 0; cursor: pointer; }
.dlg-btn-danger:hover { background: #dc2626; }
.dlg-btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-size: 14px; font-weight: 600; border-radius: 12px; background: #10b981; color: #fff; border: 0; cursor: pointer; }
.dlg-btn-success:hover { background: #059669; }
.dlg-btn-info { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-size: 14px; font-weight: 600; border-radius: 12px; background: #06b6d4; color: #fff; border: 0; cursor: pointer; }
.dlg-btn-info:hover { background: #0891b2; }
.dlg-btn-amber { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; background: #f59e0b; color: #fff; border: 0; cursor: pointer; }
.dlg-btn-amber:hover { background: #d97706; }
.dlg-btn-orange { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; background: #f97316; color: #fff; border: 0; cursor: pointer; }
.dlg-btn-orange:hover { background: #ea580c; }

/* Specific modal layouts */
.dlg-image-gallery, .dlg-image-single { background: #0f172a; border-radius: 16px; overflow: hidden; }
.dlg-image-head { background: #0f172a; padding: 16px; display: flex; align-items: center; justify-content: space-between; }
.dlg-image-stage { background: #0f172a; padding: 16px; }
.dlg-image-foot { background: #0f172a; padding: 12px; }
.dlg-image-zoom { background: #0f172a; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.dlg-image-icon-btn { width: 32px; height: 32px; border-radius: 8px; background: #1e293b; color: #94a3b8; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.dlg-image-icon-btn:hover { background: #334155; color: #fff; }
.dlg-image-thumb { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .60; transition: opacity .15s; }
.dlg-image-thumb-active { opacity: 1; outline: 2px solid rgb(var(--p-500)); }

.dlg-profile { background: #fff; border-radius: 16px; }
.dlg-profile-cover { height: 128px; border-radius: 16px 16px 0 0; overflow: hidden; position: relative; }
.dlg-profile-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.60), transparent); }
.dlg-profile-avatar-row { margin-top: -40px; position: relative; z-index: 10; }
.dlg-profile-avatar { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; border: 4px solid #fff; box-shadow: 0 10px 25px -5px rgba(0,0,0,.10); }

.dlg-upgrade { background: #fff; border-radius: 16px; overflow: hidden; }
.dlg-upgrade-hero { background: linear-gradient(135deg, #7c3aed, rgb(var(--p-600)), #06b6d4); padding: 32px; text-align: center; position: relative; }
.dlg-upgrade-save { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: rgb(var(--p-500)); color: #fff; font-size: 10px; font-weight: 700; }
.dlg-upgrade-cta { width: 100%; padding: 12px; border-radius: 12px; background: linear-gradient(to right, #7c3aed, rgb(var(--p-600))); color: #fff; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s; }
.dlg-upgrade-cta:hover { opacity: .90; }

.dlg-cc { padding: 16px; border-radius: 12px; background: linear-gradient(to right, #1e293b, #0f172a); color: #fff; position: relative; overflow: hidden; }
.dlg-cc-num { letter-spacing: .2em; }
.dlg-share-btn { padding: 14px; border-radius: 12px; background: #f1f5f9; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.dlg-share-btn:hover { background: #e2e8f0; }
.dlg-share-btn svg { display: block; }

/* Utility helpers used in dialogs */
.bg-white-20 { background: rgba(255,255,255,.20) !important; }
.bg-white-80 { background: rgba(255,255,255,.80) !important; }
.text-white-40 { color: rgba(255,255,255,.40) !important; }
.text-white-50 { color: rgba(255,255,255,.50) !important; }
.text-white-80 { color: rgba(255,255,255,.80) !important; }
.hover-bg-slate-100:hover { background: #f1f5f9 !important; }
.lucide-xxs { width: 10px !important; height: 10px !important; }

/* ===== Avatar page ===== */
.av { object-fit: cover; flex-shrink: 0; display: block; }
.av-xs { width: 28px; height: 28px; }
.av-sm { width: 36px; height: 36px; }
.av-md { width: 44px; height: 44px; }
.av-lg { width: 56px; height: 56px; }
.av-xl { width: 80px; height: 80px; }
.av-circle  { border-radius: 999px; }
.av-rounded { border-radius: 12px; }
.av-square  { border-radius: 8px; }
.av-status { position: absolute; bottom: 0; right: 0; border-radius: 999px; border: 2px solid #fff; }
.av-status-xs { width: 8px; height: 8px; }
.av-status-sm { width: 10px; height: 10px; }
.av-status-md { width: 12px; height: 12px; }
.av-status-lg { width: 14px; height: 14px; }
.av-status-xl { width: 16px; height: 16px; }
.av-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 999px; background: #ef4444; border: 2px solid #fff; color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.av-stack { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 2px solid #fff; margin-left: -8px; }
.av-stack:first-child { margin-left: 0; }
.av-stack-more { background: #f1f5f9; color: #475569; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }

.av-editable { position: relative; cursor: pointer; }
.av-edit-overlay { position: absolute; inset: 0; border-radius: 999px; background: rgba(0,0,0,.40); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.av-editable:hover .av-edit-overlay { opacity: 1; }

.av-photo { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; box-shadow: 0 10px 15px -3px rgba(0,0,0,.10); }

.av-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #f8fafc; transition: background .15s; cursor: pointer; }
.av-card:hover { background: #f1f5f9; }
.av-card-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 999px; border: 2px solid #f8fafc; }

.hidden-sm-block { display: none; }
@media (min-width: 640px) { .hidden-sm-block { display: block; } }

/* ===== Accordion page ===== */
.ac-group { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.ac-group > * + * { border-top: 1px solid #e2e8f0; }
.ac-item, .ac-item-bordered { overflow: hidden; }
.ac-item-bordered { border: 1px solid #e2e8f0; border-radius: 12px; }
.ac-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; text-align: left; background: transparent; border: 0; cursor: pointer; transition: background .15s; }
.ac-btn:hover { background: #f8fafc; }
.ac-open > .ac-btn { background: rgb(var(--p-50)); }
.ac-title { flex: 1; font-size: 14px; font-weight: 500; color: #334155; }
.ac-open > .ac-btn .ac-title { color: rgb(var(--p-600)); }
.ac-chev { color: #94a3b8; transition: transform .3s; flex-shrink: 0; }
.ac-open > .ac-btn .ac-chev { transform: rotate(180deg); color: rgb(var(--p-500)); }
.ac-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s, opacity .3s; font-size: 14px; color: #475569; line-height: 1.7; }
.ac-open > .ac-body { max-height: 600px; opacity: 1; }
.ac-icon-box { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Colored left-border variants */
.ac-color { border: 1px solid #e2e8f0; border-left-width: 4px; border-radius: 0 12px 12px 0; overflow: hidden; }
.ac-color-primary { border-left-color: rgb(var(--p-500)); }
.ac-color-emerald { border-left-color: #10b981; }
.ac-color-amber   { border-left-color: #f59e0b; }
.ac-color-red     { border-left-color: #ef4444; }
.ac-color.ac-open .ac-btn { background: transparent; }
.ac-color-primary.ac-open .ac-btn { background: rgb(var(--p-50)); }
.ac-color-emerald.ac-open .ac-btn { background: #ecfdf5; }
.ac-color-emerald.ac-open .ac-title, .ac-color-emerald.ac-open .ac-chev { color: #047857; }
.ac-color-amber.ac-open .ac-btn { background: #fffbeb; }
.ac-color-amber.ac-open .ac-title, .ac-color-amber.ac-open .ac-chev { color: #b45309; }
.ac-color-red.ac-open .ac-btn { background: #fef2f2; }
.ac-color-red.ac-open .ac-title, .ac-color-red.ac-open .ac-chev { color: #b91c1c; }

/* Gradient (open header turns primary-500) */
.ac-gradient { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ac-gradient.ac-open .ac-btn { background: rgb(var(--p-500)) !important; }
.ac-gradient.ac-open .ac-title { color: #fff !important; }
.ac-gradient.ac-open .ac-chev { color: #fff !important; }

/* Flush (divider-only) */
.ac-flush-item { transition: background .15s; }
.ac-flush-item .ac-btn { padding-left: 0; padding-right: 0; }
.ac-flush-icon { width: 36px; height: 36px; border-radius: 12px; background: #f1f5f9; color: #64748b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.ac-flush-item.ac-open .ac-flush-icon { background: rgb(var(--p-500)); color: #fff; box-shadow: 0 4px 8px -2px rgb(var(--p-500) / .30); }
.ac-flush-item.ac-open .ac-title { color: rgb(var(--p-600)); }

/* Accent (colored icon + tinted open bg) */
.ac-accent { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.ac-accent .ac-btn { background: #fff; }
.ac-accent-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-accent-icon-primary { background: rgb(var(--p-100)); color: rgb(var(--p-600)); }
.ac-accent-icon-emerald { background: #d1fae5; color: #047857; }
.ac-accent-icon-cyan    { background: #cffafe; color: #0891b2; }
.ac-accent-icon-amber   { background: #fef3c7; color: #b45309; }
.ac-accent.ac-open .ac-btn { background: #f8fafc; }

/* Stepper (numbered) */
.ac-step { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.ac-step-num { width: 32px; height: 32px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.ac-step.ac-open .ac-step-num { background: rgb(var(--p-500)); color: #fff; }
.ac-step.ac-open .ac-title { color: rgb(var(--p-600)); }

/* Animated (no extra styles needed — uses base transitions) */
.ac-animated { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.ac-anim-chev-wrap { width: 28px; height: 28px; border-radius: 999px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.ac-animated.ac-open .ac-anim-chev-wrap { background: rgb(var(--p-100)); }
.ac-animated.ac-open .ac-anim-chev-wrap .ac-chev { color: rgb(var(--p-600)); }

/* Premium card */
.ac-premium { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .2s; }
.ac-premium:hover { box-shadow: 0 8px 16px -4px rgba(0,0,0,.10); }
.ac-prem-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-prem-icon-primary { background: rgb(var(--p-100)); color: rgb(var(--p-600)); }
.ac-prem-icon-emerald { background: #d1fae5; color: #047857; }
.ac-prem-icon-violet  { background: #ede9fe; color: #6d28d9; }
.ac-prem-detail { font-size: 11px; color: #94a3b8; font-weight: 500; }
.ac-premium.ac-open .ac-title { color: rgb(var(--p-600)); }

/* Override Bootstrap default outline buttons to use React's slate-200 border */
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
  --bs-btn-color: #475569 !important;
  --bs-btn-border-color: #e2e8f0 !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-hover-bg: #f8fafc !important;
  --bs-btn-hover-color: #1e293b !important;
  --bs-btn-hover-border-color: #cbd5e1 !important;
  --bs-btn-active-bg: #f1f5f9 !important;
  --bs-btn-active-color: #1e293b !important;
  --bs-btn-active-border-color: #cbd5e1 !important;
  --bs-btn-disabled-color: #94a3b8 !important;
  --bs-btn-disabled-border-color: #e2e8f0 !important;
}

/* Ecommerce shop — view-mode toggle (grid/list) */
.es-view-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: transparent; color: #475569; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; flex-shrink: 0; }
.es-view-btn:hover { background: #f8fafc; color: #1e293b; }
.es-view-active { background: rgb(var(--p-50)); color: rgb(var(--p-600)); border-color: rgb(var(--p-200)); }
.es-view-active:hover { background: rgb(var(--p-50)); color: rgb(var(--p-600)); }

/* Blog posts — category pill buttons (React: btn btn-sm with active=primary, inactive=outline) */
.bp-cat { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; background: transparent; color: #475569; border: 1px solid #e2e8f0; cursor: pointer; transition: all .15s; white-space: nowrap; }
.bp-cat:hover { background: #f8fafc; color: #1e293b; }
.bp-cat-active { background: rgb(var(--p-500)); color: #fff; border-color: rgb(var(--p-500)); }
.bp-cat-active:hover { background: rgb(var(--p-600)); color: #fff; border-color: rgb(var(--p-600)); }

/* Invoice list — filter pill buttons (React style: btn btn-sm with active=primary, inactive=outline) */
.inv-filter { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; background: transparent; color: #475569; border: 1px solid #e2e8f0; cursor: pointer; transition: all .15s; }
.inv-filter:hover { background: #f8fafc; color: #1e293b; }
.inv-filter-active { background: rgb(var(--p-500)); color: #fff; border-color: rgb(var(--p-500)); }
.inv-filter-active:hover { background: rgb(var(--p-600)); color: #fff; border-color: rgb(var(--p-600)); }

/* ========== Email page (3-pane app layout) ========== */
.em-app { display: flex; height: calc(100vh - 8rem); border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; background: #fff; position: relative; }

.em-sidebar { width: 208px; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; flex-shrink: 0; }
.em-compose-btn { width: 100%; background: linear-gradient(135deg, rgb(var(--p-500)), #8b5cf6); color: #fff; border: 0; border-radius: 12px; padding: 10px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: filter .15s; }
.em-compose-btn:hover { filter: brightness(1.05); box-shadow: 0 8px 16px -6px rgb(var(--p-500) / .30); }
.em-nav { flex: 1; padding: 0 12px; overflow-y: auto; }
.em-nav > * + * { margin-top: 2px; }
.em-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: 8px 12px; margin: 0; }
.em-folder { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 500; color: #475569; background: transparent; border: 0; cursor: pointer; transition: background .15s; text-align: left; }
.em-folder > span:first-of-type { text-align: left; }
.em-folder .lucide-sm { width: 16px !important; height: 16px !important; flex-shrink: 0; }
.em-folder:hover { background: #f1f5f9; }
.em-folder-active { background: rgb(var(--p-50)); color: rgb(var(--p-600)); }
.em-folder-active:hover { background: rgb(var(--p-50)); }
.em-folder-count { font-size: 11px; background: rgb(var(--p-100)); color: rgb(var(--p-700)); padding: 2px 6px; border-radius: 999px; font-weight: 600; }
.em-label { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; font-size: 14px; color: #475569; background: transparent; border: 0; cursor: pointer; transition: background .15s; text-align: left; }
.em-label:hover { background: #f1f5f9; }

.em-list { display: flex; flex-direction: column; border-right: 1px solid #e2e8f0; flex: 1; }
.em-list.em-list-narrow { width: 288px; flex: none; flex-shrink: 0; }
.em-list-head { padding: 16px; border-bottom: 1px solid #e2e8f0; }
.em-icon-btn { padding: 6px; border-radius: 8px; background: transparent; border: 0; color: #64748b; cursor: pointer; transition: background .15s; }
.em-icon-btn:hover { background: #f1f5f9; }
.em-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.em-search-input { padding-left: 32px !important; font-size: 14px; }
.em-items { flex: 1; overflow-y: auto; }
.em-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background .15s; }
.em-item:hover { background: #f8fafc; }
.em-item-selected { background: rgb(var(--p-50)) !important; }
.em-item.unread .em-from-unread { font-weight: 600; color: #1e293b; }
.em-item.unread .em-subject-unread { font-weight: 500; color: #334155; }
.em-from, .em-from-unread { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.em-from { color: #64748b; }
.em-time { font-size: 11px; color: #94a3b8; flex-shrink: 0; margin-left: 8px; }
.em-subject, .em-subject-unread { font-size: 12px; margin: 0 0 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-subject { color: #64748b; }
.em-preview { font-size: 12px; color: #94a3b8; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-star { padding: 4px; background: transparent; border: 0; cursor: pointer; flex-shrink: 0; }
.em-star-on { color: #fbbf24 !important; fill: #fbbf24 !important; }
.em-star-off { color: #cbd5e1; }

.em-avatar { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.em-avatar-lg { width: 56px; height: 56px; font-size: 18px; }

.em-detail { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.em-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8fafc; }
.em-empty-icon { width: 80px; height: 80px; background: #f1f5f9; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.em-detail-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.em-detail-head { display: flex; align-items: center; justify-content: between; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #e2e8f0; }
.em-back-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #64748b; background: transparent; border: 0; cursor: pointer; }
.em-back-btn:hover { color: #1e293b; }
.em-btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; cursor: pointer; transition: background .15s; }
.em-btn-danger:hover { background: #fee2e2; }
.em-detail-body { flex: 1; overflow-y: auto; padding: 24px; }
.em-body { white-space: pre-wrap; font-family: inherit; font-size: 14px; color: #334155; line-height: 1.7; margin: 0; }

.em-compose { position: absolute; bottom: 0; right: 0; width: 384px; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.20); border: 1px solid #e2e8f0; z-index: 50; }
.em-compose-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(135deg, rgb(var(--p-500)), #8b5cf6); border-radius: 16px 16px 0 0; }
.em-compose-close { background: transparent; border: 0; color: rgba(255,255,255,.80); cursor: pointer; padding: 4px; }
.em-compose-close:hover { color: #fff; }

.bg-slate-700 { background: #334155 !important; }

/* General dashboard — weather banner card */
.gd-weather { background: #e0f2fe; border-radius: 12px; min-height: 220px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.gd-weather-svg { position: absolute; bottom: 0; right: 0; width: 55%; height: 90%; opacity: .80; pointer-events: none; }
[dir="rtl"] .gd-weather-svg { right: auto; left: 0; }
.gd-weather-content { z-index: 10; }
.gd-weather-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; background: rgba(255,255,255,.60); backdrop-filter: blur(4px); border-radius: 8px; padding: 6px 12px; }
.gd-weather-msg { max-width: 20rem; }

/* Brand logo images (replacing the old letter-placeholder divs) */
.brand-logo-lg-img { width: 40px; height: 40px; object-fit: contain; display: inline-block; }
.sidebar-collapsed .brand-logo-lg-img,
.app-sidebar.collapsed .brand-logo-lg-img { width: 34px; height: 34px; }
.logo.logo-img { width: 40px; height: 40px; object-fit: contain; padding: 0; background: transparent !important; border-radius: 0 !important; }
.logo.logo-lg.logo-img { width: 56px; height: 56px; }

/* Cards page images */
.card-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-prof-avatar { width: 64px; height: 64px; border-radius: 16px; border: 2px solid #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.10); object-fit: cover; }
.card-product-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-blog-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-hor-img { width: 100%; height: 100%; object-fit: cover; }

/* Ecommerce / blog images */
.ec-prod-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ec-prod-img-wrap:hover .ec-prod-img { transform: scale(1.05); }
.ec-list-thumb { object-fit: cover; }
.ed-main-img { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4/3; background: #f1f5f9; }
.ed-main-img-tag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bp-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-pop-thumb { object-fit: cover; }

/* ===== Rating page ===== */
.rt-star-on { color: #fbbf24; fill: #fbbf24; }
.rt-star-off { color: #cbd5e1; fill: transparent; }
.rt-btn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; transition: transform .15s; }
.rt-btn:hover { transform: scale(1.1); }
.rt-interactive { gap: 2px; }
.cr-bar { flex: 1; height: 12px; border-radius: 9999px; border: 0; cursor: pointer; transition: opacity .15s, transform .15s; }
.cr-bar:hover { opacity: .8; }
.cr-bar-active { transform: scaleY(1.1); }
.em-rate { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; transition: transform .2s, background-color .2s; }
.em-rate:hover { background-color: rgb(248 250 252); transform: scale(1.05); }
.em-rate-active { transform: scale(1.1); }
.em-rate.bg-red-100, .em-rate.bg-orange-100, .em-rate.bg-amber-100, .em-rate.bg-lime-100, .em-rate.bg-emerald-100 { background-color: var(--em-bg, #fee2e2); }
.em-rate.ring-2 { box-shadow: 0 0 0 2px currentColor; }
.em-rate.ring-red-500 { color: #ef4444; }
.em-rate.ring-orange-500 { color: #f97316; }
.em-rate.ring-amber-500 { color: #f59e0b; }
.em-rate.ring-lime-500 { color: #84cc16; }
.em-rate.ring-emerald-500 { color: #10b981; }

/* ===== Tooltip page ===== */
.tt-wrap { position: relative; display: inline-flex; }
.tt-trigger { display: inline-flex; }
.tt-bubble { position: absolute; z-index: 50; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; white-space: nowrap; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.tt-wrap:hover .tt-bubble, .tt-wrap:hover .tt-rich { opacity: 1; visibility: visible; }
.tt-bubble.tt-default, .tt-color-default { background: #1e293b; color: #fff; }
.tt-color-primary { background: var(--primary-600, #0e7490); color: #fff; }
.tt-color-success { background: #059669; color: #fff; }
.tt-color-warning { background: #f59e0b; color: #fff; }
.tt-color-danger { background: #e11d48; color: #fff; }
.tt-color-info { background: #0891b2; color: #fff; }
.tt-sm { padding: 4px 8px; font-size: 10px; }
.tt-default { padding: 6px 12px; font-size: 12px; }
.tt-lg { padding: 10px 16px; font-size: 14px; }
.tt-top { bottom: 100%; margin-bottom: 8px; left: 50%; transform: translateX(-50%); }
.tt-bottom { top: 100%; margin-top: 8px; left: 50%; transform: translateX(-50%); }
.tt-left { right: 100%; margin-right: 8px; top: 50%; transform: translateY(-50%); }
.tt-right { left: 100%; margin-left: 8px; top: 50%; transform: translateY(-50%); }
.tt-rich { position: absolute; z-index: 50; opacity: 0; visibility: hidden; transition: opacity .15s; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 24px rgba(15,23,42,.12); padding: 16px; min-width: 224px; }
.tt-rich.tt-top { bottom: 100%; margin-bottom: 8px; left: 50%; transform: translateX(-50%); }
.tt-rich.tt-bottom { top: 100%; margin-top: 8px; left: 50%; transform: translateX(-50%); }
.tt-rich.tt-left { right: 100%; margin-right: 8px; top: 50%; transform: translateY(-50%); }
.tt-rich.tt-right { left: 100%; margin-left: 8px; top: 50%; transform: translateY(-50%); }
.tt-rich-bubble { background: #1e293b; color: #fff; padding: 12px; min-width: 192px; white-space: normal; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.2); border: 0; }
.tt-rich-bubble .tt-kbd, .tt-kbd { display: inline-flex; padding: 2px 6px; background: #475569; border-radius: 4px; font-size: 10px; color: #fff; }
.tt-icon-btn { width: 40px; height: 40px; border-radius: 12px; background: transparent; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s; }
.tt-icon-btn:hover { background: rgb(241 245 249); }
.tt-avatar-wrap { position: relative; cursor: pointer; }
.tt-avatar-img { box-shadow: 0 0 0 2px #fff; transition: box-shadow .2s; }
.tt-avatar-img:hover { box-shadow: 0 0 0 2px var(--primary-400, #38bdf8); }
.tt-avatar-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 9999px; border: 2px solid #fff; }
.tt-rich-status { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border-radius: 9999px; border: 2px solid #fff; }
.tt-rich-cover { position: relative; margin: -16px -16px 0 -16px; border-top-left-radius: 12px; border-top-right-radius: 12px; overflow: hidden; }
.tt-rich-cover img { width: 100%; height: 100%; object-fit: cover; }
.tt-rich-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 9999px; color: #fff; font-size: 10px; font-weight: 700; }
.tt-prod-trigger { background: #fff; cursor: pointer; transition: border-color .15s; }
.tt-prod-trigger:hover { border-color: var(--primary-300, #93c5fd); }
.tt-tbl-btn { width: 28px; height: 28px; border-radius: 8px; background: transparent; border: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; cursor: pointer; transition: background-color .15s, color .15s; }
.tt-tbl-view:hover { background: var(--p-50, #eff6ff); color: var(--primary-600, #2563eb); }
.tt-tbl-edit:hover { background: #ecfeff; color: #0891b2; }
.tt-tbl-del:hover { background: #fef2f2; color: #dc2626; }
.tt-star-on { color: #fbbf24; fill: #fbbf24; }
.tt-star-off { color: #cbd5e1; fill: transparent; }
.tt-gradient-btn { background: linear-gradient(to right, #7c3aed, var(--primary-600, #2563eb)); color: #fff; }
.tt-premium-header { margin: -16px -16px 16px -16px; padding: 16px; border-top-left-radius: 12px; border-top-right-radius: 12px; background: linear-gradient(to right, #7c3aed, var(--primary-600, #2563eb)); text-align: center; position: relative; overflow: hidden; }
.tt-premium-content { position: relative; z-index: 1; }
.tt-premium-glow { position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(circle at 25% 25%, #fff 0%, transparent 30%), radial-gradient(circle at 75% 75%, #fff 0%, transparent 30%); }
.tt-amber-grad { background: linear-gradient(to bottom right, #fbbf24, #f97316); }
.tt-cover-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); }
.tt-cover-text { position: absolute; bottom: 8px; left: 12px; }
.tt-event-header { margin: -16px -16px 12px -16px; padding: 12px 16px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.tt-stack-img { width: 24px; height: 24px; border-radius: 9999px; object-fit: cover; border: 2px solid #fff; margin-left: -6px; }
.tt-stack-img:first-child { margin-left: 0; }
.tt-stat-card { cursor: pointer; transition: background-color .15s; }
.tt-stat-card:hover { background: rgb(241 245 249); }
.tt-pro-badge { background: linear-gradient(to right, #fbbf24, #f97316); color: #fff; }
.w-1-5 { width: 6px !important; }
.h-1-5 { height: 6px !important; }
.w-2-5 { width: 10px !important; }
.h-2-5 { height: 10px !important; }
.gap-1-5 { gap: 6px !important; }
.space-y-1-5 > * + * { margin-top: 6px !important; }
.py-1-5 { padding-top: 6px !important; padding-bottom: 6px !important; }
.px-2-5 { padding-left: 10px !important; padding-right: 10px !important; }
.py-0-5 { padding-top: 2px !important; padding-bottom: 2px !important; }
.mt-0-5 { margin-top: 2px !important; }
.mb-0-5 { margin-bottom: 2px !important; }
.mb-1-5 { margin-bottom: 6px !important; }
.p-1-5 { padding: 6px !important; }
.tt-bubble svg { vertical-align: middle; }

/* ===== Popover page ===== */
.po-wrap { position: relative; display: inline-block; }
.po-trigger { display: inline-block; cursor: pointer; }
.po-panel { position: absolute; z-index: 50; opacity: 0; visibility: hidden; transform-origin: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 24px rgba(15,23,42,.12); padding: 16px; min-width: 192px; transition: opacity .15s; }
.po-wrap.po-open .po-panel { opacity: 1; visibility: visible; }
.po-top { bottom: 100%; margin-bottom: 8px; left: 50%; transform: translateX(-50%); }
.po-bottom { top: 100%; margin-top: 8px; left: 50%; transform: translateX(-50%); }
.po-left { right: 100%; margin-right: 8px; top: 50%; transform: translateY(-50%); }
.po-right { left: 100%; margin-left: 8px; top: 50%; transform: translateY(-50%); }
.po-arrow { position: absolute; width: 0; height: 0; border: 4px solid transparent; }
.po-arrow-top { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #e2e8f0; border-bottom: 0; }
.po-arrow-bottom { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #e2e8f0; border-top: 0; }
.po-arrow-left { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #e2e8f0; border-right: 0; }
.po-arrow-right { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #e2e8f0; border-left: 0; }
.po-color-header { margin: -16px -16px 12px -16px; padding: 12px 16px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.po-trigger-card { background: #fff; transition: border-color .15s; }
.po-trigger-card:hover { border-color: var(--primary-300, #93c5fd); }
.po-cover { position: relative; margin: -16px -16px 0 -16px; height: 80px; border-top-left-radius: 12px; border-top-right-radius: 12px; overflow: hidden; }
.po-cover img { width: 100%; height: 100%; object-fit: cover; }
.po-cover-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent); }
.po-cover-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 9999px; color: #fff; font-size: 10px; font-weight: 700; }
.po-cover-text { position: absolute; bottom: 12px; left: 16px; }
.po-profile-center { margin-top: -32px; margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.po-profile-avatar { width: 56px; height: 56px; border-radius: 9999px; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.po-menu-btn { background: transparent; border: 0; cursor: pointer; transition: background-color .15s, color .15s; }
.po-menu-btn:hover { background: rgb(248 250 252); color: var(--primary-600, #2563eb); }
.po-info-btn { border: 0; cursor: pointer; transition: background-color .15s; }
.po-info-btn:hover { background: rgb(219 234 254); }
.po-notif { padding: 10px 8px; border-bottom: 1px solid #f1f5f9; margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background-color .15s; }
.po-notif:hover { background: rgb(248 250 252); }
.po-notif:last-child { border-bottom: 0; }
.po-grad-1 { background: linear-gradient(to right, var(--primary-500, #0ea5e9), #06b6d4); }
.po-grad-2 { background: linear-gradient(to right, #8b5cf6, #f43f5e); }
.po-event-header { margin: -16px -16px 12px -16px; padding: 12px 16px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.po-stack-img { width: 28px; height: 28px; border-radius: 9999px; object-fit: cover; border: 2px solid #fff; margin-left: -6px; }
.po-stack-img:first-child { margin-left: 0; }
.po-gradient-btn { background: linear-gradient(to right, #7c3aed, var(--primary-600, #2563eb)); color: #fff !important; border: 0; }
.po-premium-header { margin: -16px -16px 16px -16px; padding: 16px; border-top-left-radius: 12px; border-top-right-radius: 12px; background: linear-gradient(to bottom right, #7c3aed, var(--primary-600, #2563eb), #06b6d4); text-align: center; position: relative; overflow: hidden; }
.po-premium-content { position: relative; z-index: 1; }
.po-premium-glow { position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(circle at 25% 25%, #fff 0%, transparent 35%), radial-gradient(circle at 75% 75%, #fff 0%, transparent 35%); }
.po-amber-grad { background: linear-gradient(to bottom right, #fbbf24, #f97316); }
.po-amber-footer { margin: 12px -16px -16px -16px; padding: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background: rgb(254 243 199 / .5); border-top: 1px solid rgb(254 215 170); }
.po-circle { width: 56px; height: 56px; border-radius: 9999px; border: 4px solid var(--primary-500, #0ea5e9); display: flex; align-items: center; justify-content: center; }
.po-share-btn { background: transparent; border: 0; cursor: pointer; transition: background-color .15s; }
.po-share-btn:hover { background: rgb(248 250 252); }
.po-del-btn { background: transparent; border: 0; cursor: pointer; transition: background-color .15s; }
.po-del-btn:hover { background: rgb(254 226 226); }
.po-toggle-row:last-child { border-bottom: 0; }
.po-toggle { width: 32px; height: 20px; border-radius: 9999px; background: #cbd5e1; display: flex; align-items: center; padding: 2px; cursor: pointer; transition: background-color .15s; justify-content: flex-start; }
.po-toggle-on { background: var(--primary-500, #0ea5e9); justify-content: flex-end; }
.po-toggle-dot { width: 14px; height: 14px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.po-status-emerald:hover { background: rgb(236 253 245); }
.po-status-amber:hover { background: rgb(254 243 199); }
.po-status-sky:hover { background: rgb(224 242 254); }
.po-status-rose:hover { background: rgb(255 228 230); }
.po-status-violet:hover { background: rgb(245 243 255); }
.po-status-emerald, .po-status-amber, .po-status-sky, .po-status-rose, .po-status-violet { background: transparent; border: 0; transition: background-color .15s; cursor: pointer; }
.po-star-on { color: #fbbf24; fill: #fbbf24; }
.po-star-off { color: #cbd5e1; fill: transparent; }
.space-y-2-5 > * + * { margin-top: 10px !important; }
.gap-2-5 { gap: 10px !important; }
.p-2-5 { padding: 10px !important; }

/* ===== Tabs page ===== */
.tb-pane { display: none; }
.tb-pane-active { display: block; }
.tb-line-list { display: flex; border-bottom: 1px solid #e2e8f0; }
.tb-scroll { overflow-x: auto; }
.tb-scroll::-webkit-scrollbar { display: none; }
.tb-line-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; font-weight: 500; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #64748b; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; margin-bottom: -1px; flex: none; }
.tb-line-tab:hover { color: #334155; border-bottom-color: #cbd5e1; }
.tb-line-tab.tb-active { color: var(--primary-600, #2563eb); border-bottom-color: var(--primary-500, #0ea5e9); }
.tb-line-badge { min-width: 1.1rem; height: 1.1rem; padding: 0 2px; border-radius: 9999px; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #475569; }
.tb-line-tab.tb-active .tb-line-badge { background: var(--p-100, #dbeafe); color: var(--primary-700, #1d4ed8); }
.tb-line-content { margin-top: 16px; font-size: 14px; color: #475569; }

.tb-pill-list { display: inline-flex; gap: 4px; background: #f1f5f9; border-radius: 12px; padding: 4px; }
.tb-pill-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 8px; background: transparent; border: 0; color: #64748b; cursor: pointer; transition: background-color .15s, color .15s; white-space: nowrap; }
.tb-pill-tab:hover { color: #334155; }
.tb-pill-tab.tb-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.tb-pill-badge { min-width: 1.1rem; height: 1.1rem; padding: 0 2px; border-radius: 9999px; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #475569; }
.tb-pill-tab.tb-active .tb-pill-badge { background: var(--p-100, #dbeafe); color: var(--primary-700, #1d4ed8); }

.tb-btn-list { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-btn-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 8px; border: 1px solid #e2e8f0; background: transparent; color: #64748b; cursor: pointer; transition: all .15s; white-space: nowrap; }
.tb-btn-tab:hover { border-color: var(--primary-300, #93c5fd); color: var(--primary-600, #2563eb); }
.tb-btn-tab.tb-active { background: var(--primary-500, #0ea5e9); color: #fff; border-color: var(--primary-500, #0ea5e9); box-shadow: 0 4px 6px rgba(14,165,233,.3); }

.tb-vert { display: flex; gap: 0; }
.tb-vert-list { display: flex; flex-direction: column; border-right: 1px solid #e2e8f0; min-width: 160px; }
.tb-vert-tab { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; font-weight: 500; background: transparent; border: 0; border-right: 2px solid transparent; color: #64748b; cursor: pointer; transition: color .15s, border-color .15s; text-align: left; margin-right: -1px; }
.tb-vert-tab:hover { color: #334155; }
.tb-vert-tab.tb-active { color: var(--primary-600, #2563eb); border-right-color: var(--primary-500, #0ea5e9); }
.tb-vert-content { flex: 1; padding-left: 20px; font-size: 14px; color: #475569; }

.tb-folder-list { display: flex; gap: 0; }
.tb-folder-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 500; background: #f1f5f9; border: 1px solid transparent; border-bottom: 0; color: #94a3b8; cursor: pointer; transition: color .15s; white-space: nowrap; }
.tb-folder-tab:first-child { border-top-left-radius: 12px; }
.tb-folder-tab:last-child { border-top-right-radius: 12px; }
.tb-folder-tab:hover { color: #64748b; }
.tb-folder-tab.tb-active { background: #fff; border-color: #e2e8f0; color: #1e293b; margin-bottom: -1px; padding-bottom: 12px; position: relative; z-index: 1; }
.tb-folder-content { border: 1px solid #e2e8f0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; padding: 16px; background: #fff; margin-top: 0; }

.tb-icon-list { display: inline-flex; gap: 4px; background: #f1f5f9; border-radius: 12px; padding: 6px; }
.tb-icon-tab { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #94a3b8; cursor: pointer; transition: all .2s; }
.tb-icon-tab:hover { color: #64748b; background: rgba(255,255,255,.5); }
.tb-icon-tab.tb-active { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.tb-status-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; border: 1px solid #e2e8f0; background: transparent; color: #475569; cursor: pointer; transition: all .15s; }
.tb-status-tab:hover { background: #f8fafc; border-color: #cbd5e1; }
.tb-status-tab.tb-active { background: #1e293b; color: #fff; border-color: #1e293b; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.tb-status-badge { min-width: 1.3rem; height: 20px; padding: 0 4px; border-radius: 9999px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.tb-bordered-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 14px; font-weight: 600; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #94a3b8; cursor: pointer; transition: all .15s; }
.tb-bordered-tab:hover { color: #64748b; }
.tb-bordered-tab.tb-active { background: #fff; color: #1e293b; border-bottom-color: var(--primary-500, #0ea5e9); }

.tb-faq-num { transition: all .15s; }
.tb-faq-q { transition: color .15s; }
.tb-faq-chev { transition: transform .3s, color .15s; }
.tb-faq-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s, opacity .3s; }
.tb-faq-btn { background: transparent; border: 0; cursor: pointer; transition: background-color .15s; }
.tb-faq-btn:hover { background: #f8fafc; }
.tb-faq-open .tb-faq-btn { background: var(--p-50, #eff6ff); }
.tb-faq-open .tb-faq-num { background: var(--primary-500, #0ea5e9); color: #fff; }
.tb-faq-open .tb-faq-q { color: var(--primary-700, #1d4ed8); }
.tb-faq-open .tb-faq-chev { transform: rotate(180deg); color: var(--primary-500, #0ea5e9); }
.tb-faq-open .tb-faq-body { max-height: 160px; opacity: 1; }

.tb-switch { width: 40px; height: 20px; border-radius: 9999px; background: #e2e8f0; transition: background-color .15s; flex-shrink: 0; }
.tb-switch-on { background: var(--primary-600, #2563eb); }
.tb-switch-dot { width: 16px; height: 16px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); transform: translate(2px, 2px); transition: transform .2s; }
.tb-switch-on .tb-switch-dot { transform: translate(22px, 2px); }
.tb-security-row { border-bottom: 1px solid #f1f5f9; }
.tb-security-row:last-child { border-bottom: 0; }

.tb-team-dot { position: absolute; bottom: -2px; right: -2px; border: 2px solid #fff; }

.tb-star-on { color: #fbbf24; fill: #fbbf24; }
.tb-star-off { color: #cbd5e1; fill: #cbd5e1; }

.tb-activity-row { border-bottom: 1px solid #f1f5f9; }
.tb-activity-row:last-child { border-bottom: 0; }

.grid-cols-sm-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hidden-sm-block { display: none; }
@media (min-width: 640px) {
  .hidden-sm-block { display: block; }
}
.py-2-5 { padding-top: 10px !important; padding-bottom: 10px !important; }

/* ===== Typography page ===== */
.ty-label { display: inline-block; font-size: 10px; font-family: monospace; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.ty-tag { font-size: 10px; font-family: monospace; font-weight: 700; color: #94a3b8; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; }
.ty-meta { font-size: 10px; font-family: monospace; color: #94a3b8; }
.ty-code { padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: var(--primary-600, #2563eb); font-family: monospace; font-size: 12px; }
.ty-code-violet { color: #7c3aed; }
.ty-kbd { padding: 2px 6px; border-radius: 4px; border: 1px solid #cbd5e1; background: #f1f5f9; font-family: monospace; font-size: 12px; color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ty-underline-primary { text-decoration: underline; text-decoration-color: var(--primary-500, #0ea5e9); text-underline-offset: 2px; }
.ty-underline-wavy { text-decoration: underline wavy #ef4444; text-underline-offset: 2px; }
.ty-underline-dotted { text-decoration: underline dotted #64748b; text-underline-offset: 2px; }
.ty-quote { padding: 8px 20px; border-radius: 0 12px 12px 0; }
.ty-quote-primary { border-left: 4px solid var(--primary-500, #0ea5e9); background: var(--p-50, #eff6ff); }
.ty-quote-emerald { border-left: 4px solid #10b981; background: rgb(236 253 245 / .5); }
.ty-quote-violet { position: relative; padding: 12px 24px; border: 1px solid #ddd6fe; background: rgb(245 243 255 / .5); border-radius: 12px; overflow: hidden; }
.ty-violet-bar { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #8b5cf6; border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.ty-cite { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #64748b; font-style: normal; }
.ty-check { width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #cbd5e1; }
.ty-check-done { background: #10b981; border-color: #10b981; }
.ty-mark-amber { background: #fde68a; color: #78350f; padding: 0 2px; border-radius: 2px; }
.ty-mark-primary { background: var(--p-100, #dbeafe); color: var(--primary-800, #1e40af); padding: 0 2px; border-radius: 2px; }
.ty-del { background: #fee2e2; color: #b91c1c; padding: 0 2px; border-radius: 2px; text-decoration: line-through; }
.ty-ins { background: #d1fae5; color: #047857; padding: 0 2px; border-radius: 2px; text-decoration: none; }
.ty-pre { background: #0f172a; border-radius: 12px; padding: 16px; overflow-x: auto; font-size: 14px; margin-top: 6px; font-family: monospace; color: #cbd5e1; }
.ty-pre code { white-space: pre; font-family: monospace; }
.ty-callout { display: flex; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid; font-size: 12px; }
.ty-callout-primary { background: var(--p-50, #eff6ff); border-color: #bfdbfe; color: #1e40af; }
.ty-callout-amber { background: rgb(254 243 199 / .5); border-color: #fde68a; color: #92400e; }
.ty-callout-emerald { background: rgb(236 253 245 / .5); border-color: #a7f3d0; color: #065f46; }
.ty-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ty-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ty-border-bottom { border-bottom: 1px solid #f1f5f9; }
.ty-border-bottom:last-child { border-bottom: 0; }
.ty-menu-row { transition: background-color .15s; cursor: pointer; }
.ty-menu-row:hover { background: #f8fafc; }
.ty-hover-underline { transition: text-decoration .15s; }
.ty-hover-underline:hover { text-decoration: underline; }
.ty-u-solid { text-decoration: underline solid var(--primary-500, #0ea5e9); text-underline-offset: 2px; }
.ty-u-dashed { text-decoration: underline dashed #f59e0b; text-underline-offset: 2px; }
.ty-u-dotted { text-decoration: underline dotted #10b981; text-underline-offset: 2px; }
.ty-u-wavy { text-decoration: underline wavy #f43f5e; text-underline-offset: 4px; }
.ty-u-double { text-decoration: underline double #8b5cf6; text-underline-offset: 2px; }
.hidden-sm-inline { display: none; }
@media (min-width: 640px) { .hidden-sm-inline { display: inline; } }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose { line-height: 2 !important; }
.font-thin { font-weight: 100 !important; }
.font-extralight { font-weight: 200 !important; }
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }
.text-6xl { font-size: 60px !important; }
.text-7xl { font-size: 72px !important; }
.text-8xl { font-size: 96px !important; }
.text-pink-500 { color: #ec4899 !important; }
.bg-pink-500 { background-color: #ec4899 !important; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.grid-cols-sm-2 { grid-template-columns: 1fr; }
.grid-cols-lg-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ===== Forms (form-elements, form-layouts, form-horizontal, form-validation) ===== */
.fe-icon-l { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.fe-icon-r { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.fe-eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; background: transparent; border: 0; cursor: pointer; transition: color .15s; }
.fe-eye-btn:hover { color: #475569; }
.fe-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.fe-cb { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; flex-shrink: 0; background: #fff; }
.fe-cb:hover { border-color: var(--primary-400, #38bdf8); }
.fe-cb-on { background: var(--primary-500, #0ea5e9); border-color: var(--primary-500, #0ea5e9); }
.fe-cb-check { opacity: 0; }
.fe-cb-on .fe-cb-check { opacity: 1; }
.fe-cb-indeterminate { background: var(--primary-500, #0ea5e9); border-color: var(--primary-500, #0ea5e9); }
.fe-cb-dash { width: 10px; height: 2px; background: #fff; border-radius: 1px; }

.fe-card-cb { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 12px; border: 2px solid #e2e8f0; cursor: pointer; transition: all .15s; background: #fff; }
.fe-card-cb:hover { border-color: #cbd5e1; }
.fe-card-cb-on { border-color: var(--primary-500, #0ea5e9); background: var(--p-50, #eff6ff); }

.fe-radio { width: 20px; height: 20px; border-radius: 9999px; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.fe-radio-on { border-color: var(--primary-500, #0ea5e9); }
.fe-radio-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--primary-500, #0ea5e9); opacity: 0; transition: opacity .15s; }
.fe-radio-on .fe-radio-dot { opacity: 1; }
.fe-radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; border: 2px solid #e2e8f0; cursor: pointer; transition: all .15s; }
.fe-radio-card:hover { border-color: #cbd5e1; }
.fe-radio-card-on { border-color: var(--primary-500, #0ea5e9); background: var(--p-50, #eff6ff); }
.fe-radio-card-col { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px; }

.fe-toggle { position: relative; width: 44px; height: 24px; border-radius: 9999px; background: #e2e8f0; cursor: pointer; transition: background-color .2s; flex-shrink: 0; }
.fe-toggle-dot { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .2s; }
.fe-toggle-on .fe-toggle-dot { transform: translateX(20px); }
.fe-toggle-on { background: var(--primary-500, #0ea5e9); }
.fe-toggle-on[data-fe-toggle-color="bg-violet-500"] { background: #8b5cf6; }
.fe-toggle-on[data-fe-toggle-color="bg-emerald-500"] { background: #10b981; }
.fe-toggle-on[data-fe-toggle-color="bg-amber-500"] { background: #f59e0b; }
.fe-toggle-on[data-fe-toggle-color="bg-primary-600"] { background: var(--primary-600, #2563eb); }
.fe-toggle-on[data-fe-toggle-color="bg-violet-600"] { background: #7c3aed; }
.fe-toggle-sm { position: relative; width: 32px; height: 16px; border-radius: 9999px; background: #e2e8f0; cursor: pointer; transition: background-color .2s; flex-shrink: 0; }
.fe-toggle-sm .fe-toggle-dot { width: 12px; height: 12px; top: 2px; left: 2px; }
.fe-toggle-sm.fe-toggle-on .fe-toggle-dot { transform: translateX(16px); }
.fe-toggle-sm.fe-toggle-on { background: var(--primary-500, #0ea5e9); }
.fe-toggle-lg { position: relative; width: 56px; height: 28px; border-radius: 9999px; background: #e2e8f0; cursor: pointer; transition: background-color .2s; flex-shrink: 0; }
.fe-toggle-lg .fe-toggle-dot { width: 24px; height: 24px; top: 2px; left: 2px; }
.fe-toggle-lg.fe-toggle-on .fe-toggle-dot { transform: translateX(28px); }
.fe-toggle-lg.fe-toggle-on { background: var(--primary-500, #0ea5e9); }

.fe-range { width: 100%; height: 8px; background: #e2e8f0; border-radius: 9999px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.fe-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 9999px; background: var(--primary-500, #0ea5e9); cursor: pointer; border: 0; }
.fe-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 9999px; background: var(--primary-500, #0ea5e9); cursor: pointer; border: 0; }
.fe-range-violet::-webkit-slider-thumb { background: #8b5cf6; }
.fe-range-violet::-moz-range-thumb { background: #8b5cf6; }

.fe-dropzone { border: 2px dashed #e2e8f0; border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: all .15s; }
.fe-dropzone:hover { border-color: var(--primary-400, #38bdf8); }
.fe-dropzone.fe-dropzone-active { border-color: var(--primary-500, #0ea5e9); background: var(--p-50, #eff6ff); }

.fe-color-input { width: 48px; height: 48px; border-radius: 12px; cursor: pointer; border: 2px solid #e2e8f0; background: transparent; padding: 2px; }
.fe-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform .15s; }
.fe-swatch:hover { transform: scale(1.1); }
.fe-swatch-on { border-color: #1e293b; transform: scale(1.1); }
.fe-mono { font-family: monospace; }

.fe-group { display: flex; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.fe-group:focus-within { border-color: var(--primary-400, #38bdf8); box-shadow: 0 0 0 2px rgb(56 189 248 / .2); }
.fe-group-addon { display: flex; align-items: center; padding: 0 12px; background: #f8fafc; border-right: 1px solid #e2e8f0; color: #64748b; font-size: 14px; font-weight: 500; white-space: nowrap; }
.fe-group-addon-r { border-right: 0; border-left: 1px solid #e2e8f0; }
.fe-group-input { flex: 1; padding: 9px 12px; background: transparent; font-size: 14px; color: #1e293b; outline: none; border: 0; }
.fe-search-input { border-radius: 8px 0 0 8px; border-right: 0; flex: 1; }
.fe-search-btn { padding: 0 16px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(to right, var(--primary-500, #0ea5e9), var(--primary-600, #2563eb)); border: 0; border-radius: 0 8px 8px 0; cursor: pointer; }

.fe-float { position: relative; }
.fe-float-input { padding-top: 20px; padding-bottom: 6px; }
.fe-float-label { position: absolute; left: 12px; top: 14px; font-size: 14px; color: #94a3b8; pointer-events: none; transition: all .2s; }
.fe-float-input:focus ~ .fe-float-label,
.fe-float-input:not(:placeholder-shown) ~ .fe-float-label { top: 6px; font-size: 10px; color: var(--primary-500, #0ea5e9); font-weight: 600; }

.fe-input-success { border-color: #10b981 !important; }
.fe-input-success:focus { box-shadow: 0 0 0 3px rgb(16 185 129 / .2); border-color: #10b981; }
.fe-input-error { border-color: #f87171 !important; }
.fe-input-error:focus { box-shadow: 0 0 0 3px rgb(248 113 113 / .2); border-color: #f87171; }
.fe-input-warning { border-color: #fbbf24 !important; }
.fe-input-warning:focus { box-shadow: 0 0 0 3px rgb(251 191 36 / .2); border-color: #fbbf24; }

.fe-tag-input { min-height: 40px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding: 8px 12px; }
.fe-tags-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fe-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--p-100, #dbeafe); color: var(--primary-700, #1d4ed8); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 9999px; }
.fe-tag-x { background: transparent; border: 0; color: var(--primary-500, #0ea5e9); cursor: pointer; padding: 0; margin-left: 2px; display: flex; align-items: center; }
.fe-tag-x:hover { color: var(--primary-700, #1d4ed8); }
.fe-tag-input-el { flex: 1; min-width: 96px; background: transparent; outline: none; border: 0; font-size: 14px; color: #1e293b; padding: 0; }
.fe-kbd { padding: 2px 6px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; font-family: monospace; font-size: 11px; color: #475569; }

.fl-avatar-box { width: 80px; height: 80px; border-radius: 16px; background: #f1f5f9; border: 2px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fl-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.fl-avatar-btn { position: absolute; bottom: -6px; right: -6px; width: 28px; height: 28px; border-radius: 9999px; background: var(--primary-600, #2563eb); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.fl-card-circle-tr { position: absolute; top: -16px; right: -16px; width: 96px; height: 96px; border-radius: 9999px; background: rgba(255,255,255,.05); }
.fl-card-circle-bl { position: absolute; bottom: -24px; left: -24px; width: 128px; height: 128px; border-radius: 9999px; background: rgba(255,255,255,.05); }
.fl-priority { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 2px solid #e2e8f0; font-size: 12px; font-weight: 600; color: #94a3b8; transition: all .15s; cursor: pointer; }
.fl-priority-off:hover { border-color: #cbd5e1; }
.fl-priority-emerald { border-color: #10b981; background: rgb(236 253 245); color: #047857; }
.fl-priority-amber { border-color: #f59e0b; background: rgb(254 243 199); color: #92400e; }
.fl-priority-orange { border-color: #f97316; background: rgb(255 237 213); color: #9a3412; }
.fl-priority-red { border-color: #ef4444; background: rgb(254 226 226); color: #b91c1c; }
.fl-attach { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all .15s; }
.fl-attach:hover { border-color: var(--primary-400, #38bdf8); background: var(--p-50, #eff6ff); }

.fh-color-primary { background: var(--p-50, #eff6ff); color: var(--primary-600, #2563eb); }
.fh-color-emerald { background: rgb(236 253 245); color: #059669; }
.fh-color-violet { background: rgb(245 243 255); color: #7c3aed; }
.fh-color-amber { background: rgb(254 243 199); color: #d97706; }
.fh-color-slate { background: #f1f5f9; color: #475569; }
.fh-regen { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 500; color: var(--primary-600, #2563eb); background: transparent; border: 0; cursor: pointer; padding: 4px 8px; }
.fh-regen:hover { text-decoration: underline; }
.fh-notif-row { transition: background-color .15s; border-bottom: 1px solid #e2e8f0; }
.fh-notif-row:last-child { border-bottom: 0; }
.fh-notif-row:hover { background: #f8fafc; }

.fv-status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.fv-step { background: #e2e8f0; color: #94a3b8; transition: all .3s; }
.fv-step-current { background: var(--primary-600, #2563eb); color: #fff; box-shadow: 0 8px 16px rgba(14,165,233,.4); }
.fv-step-done { background: #10b981; color: #fff; }
.fv-step-future { background: #e2e8f0; color: #94a3b8; }
.fv-step-label { color: #94a3b8; }
.fv-step-line { transition: background-color .5s; height: 2px; }
.fv-step-line-done { background: #6ee7b7 !important; }
.fv-back { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 8px; border: 0; background: transparent; color: #64748b; cursor: pointer; transition: background-color .15s; }
.fv-back:hover:not(:disabled) { background: #f1f5f9; }
.fv-back:disabled { color: #cbd5e1; cursor: not-allowed; }
.fv-next { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: 0; background: var(--primary-600, #2563eb); color: #fff; cursor: pointer; transition: background-color .15s; }
.fv-next:hover:not(:disabled) { background: var(--primary-700, #1d4ed8); }
.fv-next:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }
.fv-finish { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 8px 20px; border-radius: 8px; border: 0; background: #10b981; color: #fff; cursor: pointer; transition: background-color .15s; }
.fv-finish:hover { background: #059669; }
.fv-social { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer; transition: background-color .15s; font-size: 14px; font-weight: 500; color: #334155; }
.fv-social:hover { background: #f8fafc; }
.fv-card-circle-tr { position: absolute; top: -32px; right: -32px; width: 160px; height: 160px; border-radius: 9999px; background: rgba(255,255,255,.05); }
.fv-card-circle-bl { position: absolute; bottom: -48px; left: -24px; width: 192px; height: 192px; border-radius: 9999px; background: rgba(255,255,255,.05); }
.fv-ow-step { transition: all .3s; }
.fv-ow-step-current { color: #fff; box-shadow: 0 4px 8px rgba(14,165,233,.3); }
.fv-ow-step-done { background: #10b981 !important; color: #fff; }
.fv-ow-step-future { background: #fff; color: #94a3b8; border: 1px solid #e2e8f0; }
.fv-ow-step-label { color: #94a3b8; }
.fv-ow-step-label-current { color: var(--primary-600, #2563eb); }
.fv-ow-step-label-done { color: #059669; }
.fv-ow-line { transition: background-color .5s; }
.fv-ow-line-done { background: #6ee7b7 !important; }

.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-sm-4 { grid-column: span 12 / span 12; }
.col-span-sm-8 { grid-column: span 12 / span 12; }
.col-start-sm-5 { grid-column-start: auto; }
@media (min-width: 640px) {
  .col-span-sm-4 { grid-column: span 4 / span 4; }
  .col-span-sm-8 { grid-column: span 8 / span 8; }
  .col-start-sm-5 { grid-column-start: 5; }
  .sm-text-right { text-align: right; }
  .sm-col-span-2 { grid-column: span 2 / span 2; }
  .sm-col-span-3 { grid-column: span 3 / span 3; }
}
.gap-x-4 { column-gap: 16px; }
.gap-y-1 { row-gap: 4px; }
.items-start { align-items: flex-start; }

.xl-col-span-2 { grid-column: span 1 / span 1; }
.grid-cols-xl-2 { grid-template-columns: 1fr; }
@media (min-width: 1280px) {
  .xl-col-span-2 { grid-column: span 2 / span 2; }
  .grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.h-0-5 { height: 2px; }
.w-0-5 { width: 2px; }
.mb-2-5 { margin-bottom: 10px !important; }
.bg-primary-100 { background-color: rgb(219 234 254) !important; }
.bg-violet-100 { background-color: rgb(237 233 254) !important; }
.bg-emerald-100 { background-color: rgb(209 250 229) !important; }
.bg-amber-100 { background-color: rgb(254 243 199) !important; }
.bg-red-100 { background-color: rgb(254 226 226) !important; }
.text-primary-100 { color: rgb(219 234 254) !important; }
.text-blue-500 { color: #3b82f6 !important; }


/* ===== Forms — React-match overrides ===== */
/* Override Bootstrap .btn-secondary to match React's slate-100 light variant */
.btn.btn-secondary,
.btn-secondary {
  --bs-btn-bg: #f1f5f9;
  --bs-btn-color: #334155;
  --bs-btn-border-color: #f1f5f9;
  --bs-btn-hover-bg: #e2e8f0;
  --bs-btn-hover-color: #334155;
  --bs-btn-hover-border-color: #e2e8f0;
  --bs-btn-active-bg: #cbd5e1;
  --bs-btn-active-color: #1e293b;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #f1f5f9 !important;
}
.btn.btn-secondary:hover,
.btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

/* Ensure form-section .btn alignment + size matches React */
.app-main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-weight: 500; font-size: 14px; transition: all .15s; border: 0; cursor: pointer; }
.app-main .btn-sm { padding: 6px 12px; font-size: 12px; }
.app-main .btn-lg { padding: 12px 24px; font-size: 16px; }

/* Match React's .input exactly (px-3.5 py-2.5) */
.input { padding: 10px 14px !important; border-radius: 8px !important; font-size: 14px; }
.input:focus { outline: 0; border-color: var(--primary-500, #0ea5e9) !important; box-shadow: 0 0 0 3px rgb(14 165 233 / .2); }
.input[disabled], .input:disabled { background: #f8fafc; cursor: not-allowed; }
textarea.input { padding: 10px 14px !important; line-height: 1.5; }
select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px !important; appearance: none; -webkit-appearance: none; }
select.input[multiple] { background-image: none; padding-right: 14px !important; }

/* Ensure inputs with pl-9 have icon space */
.input.pl-9 { padding-left: 36px !important; }
.input.pr-9 { padding-right: 36px !important; }
.input.pr-10 { padding-right: 40px !important; }
.input.pr-14 { padding-right: 56px !important; }
.input.pr-16 { padding-right: 64px !important; }
.input.pr-20 { padding-right: 80px !important; }
.input.pl-7 { padding-left: 28px !important; }

/* Floating label: re-anchor for new input padding */
.fe-float-input { padding-top: 20px !important; padding-bottom: 4px !important; }
.fe-float-label { top: 14px; }

/* Card section header (form pages) — ensure spacing is right */
.card .text-sm.font-semibold.uppercase.tracking-wider { letter-spacing: .05em; }

/* Form Horizontal — Hide hint on mobile but show on desktop */
.hidden-sm-block { display: none; }
@media (min-width: 640px) { .hidden-sm-block { display: block; } }

/* Fix the validation summary in form-elements (the sm-col-span-3) */
.sm-col-span-3 { grid-column: span 3 / span 3; }

/* Tag input — wrap horizontally not vertical */
.fe-tag-input { flex-direction: row !important; flex-wrap: wrap; align-items: center; min-height: 44px; }
.fe-tags-list { display: contents; }

/* fix Spacing in fe-card-cb */
.fe-card-cb { gap: 8px; padding: 16px; }

/* xl-col-span-2 in xl grid */
.grid-cols-1.grid-cols-xl-2 { grid-template-columns: 1fr; }
@media (min-width: 1280px) {
  .grid-cols-1.grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Form Horizontal alignment */
.items-start { align-items: flex-start; }

/* Form section card padding tweaks */
.card.p-6 .input { width: 100%; }

/* Wizard step indicator: ensure step circle has proper sizing */
.fv-step { width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* Onboarding step indicator */
.fv-ow-step { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Login/Card success state */
[data-fv-login-success].flex,
[data-fv-card-success].flex,
[data-fv-w-success].flex,
[data-fv-ow-success].flex { display: flex !important; flex-direction: column; align-items: center; }

/* Eye button in input */
.fe-eye-btn { background: transparent; border: 0; padding: 4px; }
.fe-eye-btn:hover { color: #475569; }

/* Card heading colors (form layouts) */
.bg-primary-500 { background-color: rgb(14 165 233) !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.bg-violet-600 { background-color: #7c3aed !important; }
.bg-slate-700 { background-color: #334155 !important; }

/* Fix grid auto-rows for cards */
.grid-cols-1.grid-cols-xl-2 > .card { align-self: start; }

/* Match input number arrows look */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Date input native look */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Hover and focus on swatch */
.fe-swatch { transition: transform .15s, border-color .15s; }

/* Color input native picker */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }

/* Helper for required asterisk position in horizontal forms */
.col-span-12.col-span-sm-4 label { display: inline-block; }

/* Improve labels for horizontal form */
@media (min-width: 640px) {
  .col-span-12.col-span-sm-4.sm-text-right label { display: block; text-align: right; }
}

/* Items-start utility */
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }

/* Strong padding for textarea in horizontal form bio */
.col-span-sm-8 textarea.input { min-height: 96px; }

/* Make uppercase actually uppercase */
.uppercase { text-transform: uppercase !important; }

/* Ensure checkbox in card-style is positioned at bottom */
.fe-card-cb { position: relative; }
.fe-card-cb .fe-cb { margin-top: auto; }

/* Hidden helper utility */
.hidden { display: none !important; }


/* ===== Forms — Primary color variable aliases ===== */
:root {
  --primary-400: rgb(var(--p-400));
  --primary-500: rgb(var(--p-500));
  --primary-600: rgb(var(--p-600));
  --primary-700: rgb(var(--p-700));
}

/* Toggles — use real primary */
.fe-toggle-on { background: rgb(var(--p-500)) !important; }
.fe-toggle-on[data-fe-toggle-color="bg-violet-500"] { background: #8b5cf6 !important; }
.fe-toggle-on[data-fe-toggle-color="bg-emerald-500"] { background: #10b981 !important; }
.fe-toggle-on[data-fe-toggle-color="bg-amber-500"] { background: #f59e0b !important; }
.fe-toggle-on[data-fe-toggle-color="bg-primary-600"] { background: rgb(var(--p-600)) !important; }
.fe-toggle-on[data-fe-toggle-color="bg-violet-600"] { background: #7c3aed !important; }

/* Wizard step current */
.fv-step-current { background: rgb(var(--p-600)) !important; color: #fff !important; box-shadow: 0 8px 16px rgb(var(--p-500) / .4) !important; }
.fv-step-done { background: #10b981 !important; color: #fff !important; }

/* Onboarding step current */
.fv-ow-step-current { color: #fff !important; box-shadow: 0 4px 8px rgb(var(--p-500) / .3) !important; }
.fv-ow-step-done { background: #10b981 !important; color: #fff !important; }

/* Radio dot, checkbox, card-cb selected */
.fe-cb-on { background: rgb(var(--p-500)) !important; border-color: rgb(var(--p-500)) !important; }
.fe-cb-indeterminate { background: rgb(var(--p-500)) !important; border-color: rgb(var(--p-500)) !important; }
.fe-cb:hover { border-color: rgb(var(--p-400)) !important; }
.fe-radio-on { border-color: rgb(var(--p-500)) !important; }
.fe-radio-dot { background: rgb(var(--p-500)) !important; }
.fe-radio-card-on { border-color: rgb(var(--p-500)) !important; background: rgb(var(--p-500) / .08) !important; }
.fe-card-cb-on { border-color: rgb(var(--p-500)) !important; background: rgb(var(--p-500) / .08) !important; }

/* Dropzone active */
.fe-dropzone.fe-dropzone-active { border-color: rgb(var(--p-500)) !important; background: rgb(var(--p-500) / .08) !important; }

/* Input focus */
.input:focus { outline: 0; border-color: rgb(var(--p-500)) !important; box-shadow: 0 0 0 3px rgb(var(--p-500) / .2) !important; }

/* Group focus */
.fe-group:focus-within { border-color: rgb(var(--p-500)) !important; box-shadow: 0 0 0 3px rgb(var(--p-500) / .15) !important; }

/* Floating label active color */
.fe-float-input:focus ~ .fe-float-label,
.fe-float-input:not(:placeholder-shown) ~ .fe-float-label { color: rgb(var(--p-500)) !important; }

/* Buttons that use primary tones */
.fv-next:not(:disabled) { background: rgb(var(--p-600)) !important; }
.fv-next:not(:disabled):hover { background: rgb(var(--p-700)) !important; }

/* Color-coded tags (priority) — match React */
.fl-priority-emerald { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.fl-priority-amber { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.fl-priority-orange { border-color: #f97316; background: #fff7ed; color: #9a3412; }
.fl-priority-red { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }

/* Range track color */
.fe-range::-webkit-slider-thumb { background: rgb(var(--p-500)) !important; }
.fe-range::-moz-range-thumb { background: rgb(var(--p-500)) !important; }

/* Tag pill */
.fe-tag { background: rgb(var(--p-100, 219 234 254)) !important; color: rgb(var(--p-700, 29 78 216)) !important; }
.fe-tag-x { color: rgb(var(--p-500)) !important; }
.fe-tag-x:hover { color: rgb(var(--p-700)) !important; }

/* Submit primary buttons */
button[type="submit"].bg-primary-500 { background: rgb(var(--p-500)) !important; }
button[type="submit"].bg-primary-500:hover { background: rgb(var(--p-600)) !important; }

/* Card section borders inside form cards */
.card .border-t, .card .border-b { border-color: #e2e8f0; }

/* Color picker swatch active */
.fe-swatch-on { border-color: #1e293b !important; }

/* Card-cb badge selected pulse */
.fe-card-cb:hover { border-color: #cbd5e1; }
.fe-card-cb-on:hover { border-color: rgb(var(--p-500)) !important; }

/* Sm visibility helpers used in horizontal form */
@media (min-width: 640px) {
  .hidden-sm-block { display: block !important; }
}

/* Ensure forms input fields have white background even with form-control inherited */
.input { background-color: #fff; }

/* For "Service is active" toggle - the text color */
.text-emerald-600 { color: #059669 !important; }

/* For the "successful" green state */
.bg-emerald-100 { background-color: #d1fae5 !important; }
.text-emerald-700 { color: #047857 !important; }

/* Make sure pricing badge looks right */
.btn-secondary { font-weight: 500; }

/* Fix wizard step circle text/icon centering */
.fv-step i, .fv-ow-step i { display: block; }

/* Submit btn primary direct full width fix */
.bg-primary-500.text-white { background: rgb(var(--p-500)) !important; color: #fff !important; }
.bg-primary-500.text-white:hover { background: rgb(var(--p-600)) !important; }
.bg-violet-600.text-white:hover { background: #6d28d9 !important; }

/* Re-anchor file dropzone helper */
.fe-dropzone:hover { border-color: rgb(var(--p-400)) !important; }


/* ===== Tables (basic-table, enhanced-table) ===== */
.bt-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.bt-table thead tr { border-bottom: 1px solid #e2e8f0; }
.bt-table thead th { padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.bt-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background-color .15s; }
.bt-table tbody tr:hover { background-color: rgb(248 250 252); }
.bt-table tbody td { padding: 12px 16px; color: #334155; vertical-align: middle; }
.bt-table tbody tr:last-child { border-bottom: 0; }

.bt-bordered-table { width: 100%; text-align: left; border-collapse: collapse; }
.bt-bordered-table thead th { padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; border: 1px solid #e2e8f0; background: #f8fafc; }
.bt-bordered-table tbody td { padding: 12px 16px; font-size: 14px; border: 1px solid #e2e8f0; }

.bt-compact-table { width: 100%; text-align: left; border-collapse: collapse; }
.bt-compact-table thead th { padding: 8px 12px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.bt-compact-table tbody tr { border-top: 1px solid #f1f5f9; transition: background-color .15s; }
.bt-compact-table tbody tr:hover { background: #f8fafc; }
.bt-compact-table tbody td { padding: 6px 12px; font-size: 12px; }

.bt-gradient-table { width: 100%; text-align: left; border-collapse: collapse; }
.bt-gradient-table .bt-grad-header { background: linear-gradient(to right, rgb(var(--p-600)), #4f46e5); }
.bt-gradient-table thead th { padding: 14px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgb(255 255 255 / .9); text-align: left; }
.bt-gradient-table tbody tr { border-top: 1px solid #f1f5f9; transition: background-color .15s; }
.bt-gradient-table tbody tr:hover { background: #f8fafc; }
.bt-gradient-table tbody td { padding: 12px 16px; }

.bt-dark-table { width: 100%; text-align: left; border-collapse: collapse; }
.bt-dark-table .bt-dark-header { background: #0f172a; }
.bt-dark-table thead th { padding: 14px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #cbd5e1; text-align: left; }
.bt-dark-table tbody tr { border-top: 1px solid #f1f5f9; transition: background-color .15s; }
.bt-dark-table tbody tr:hover { background: #f8fafc; }
.bt-dark-table tbody td { padding: 12px 16px; }

.bt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.bt-badge-dot { width: 6px; height: 6px; border-radius: 9999px; }
.bt-dept { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.bt-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.bt-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; margin-right: 6px; vertical-align: middle; }
.bt-cb { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #cbd5e1; cursor: pointer; accent-color: rgb(var(--p-500)); }
.bt-card-row { transition: all .2s; cursor: pointer; }
.bt-card-row:hover { box-shadow: 0 10px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.bt-card-row:hover .bt-card-arrow { opacity: 1; }
.bt-card-arrow { opacity: 0; transition: opacity .2s; }
.bt-icon-l { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.bt-filter-sel { padding-left: 32px !important; padding-right: 32px !important; font-size: 14px; }

/* Dept color variants */
.bg-indigo-100 { background-color: #e0e7ff !important; }
.bg-pink-100   { background-color: #fce7f3 !important; }
.bg-teal-100   { background-color: #ccfbf1 !important; }
.bg-blue-100   { background-color: #dbeafe !important; }
.bg-rose-100   { background-color: #ffe4e6 !important; }
.bg-orange-100 { background-color: #ffedd5 !important; }
.bg-lime-100   { background-color: #ecfccb !important; }
.bg-sky-100    { background-color: #e0f2fe !important; }
.bg-cyan-100   { background-color: #cffafe !important; }
.text-indigo-700 { color: #4338ca !important; }
.text-pink-700   { color: #be185d !important; }
.text-teal-700   { color: #0f766e !important; }
.text-blue-700   { color: #1d4ed8 !important; }
.text-rose-700   { color: #be123c !important; }
.text-orange-700 { color: #c2410c !important; }
.text-lime-700   { color: #4d7c0f !important; }
.text-sky-700    { color: #0369a1 !important; }
.text-cyan-700   { color: #0e7490 !important; }
.text-violet-700 { color: #6d28d9 !important; }
.bg-pink-500     { background-color: #ec4899 !important; }
.text-pink-500   { color: #ec4899 !important; }

/* Pagination buttons */
.bt-pager-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #64748b; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color .15s; }
.bt-pager-btn:hover { background: #f1f5f9; }
.bt-pager-btn.bt-pager-active { background: rgb(var(--p-500)); color: #fff; }
.bt-pager-nav { padding: 6px; border-radius: 8px; background: transparent; border: 0; color: #64748b; cursor: pointer; transition: background-color .15s; }
.bt-pager-nav:hover:not(:disabled) { background: #f1f5f9; }
.bt-pager-nav:disabled { opacity: .4; cursor: not-allowed; }

/* Action buttons inside table */
.bt-action-btn { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #94a3b8; cursor: pointer; transition: all .15s; }
.bt-action-btn:hover { color: rgb(var(--p-600)); background: rgb(var(--p-50, 239 246 255)); }
.bt-action-cyan:hover { color: #0891b2; background: #ecfeff; }
.bt-action-red:hover  { color: #ef4444; background: #fef2f2; }

/* Enhanced table specific */
.et-status-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 9999px; border: 2px solid #fff; }
.et-skill-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 10px; font-weight: 600; background: rgb(var(--p-100, 219 234 254)); color: rgb(var(--p-700, 29 78 216)); }
.et-action-btn { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #94a3b8; cursor: pointer; transition: all .15s; }
.et-action-primary:hover { color: rgb(var(--p-600)); background: rgb(var(--p-50, 239 246 255)); }
.et-action-cyan:hover    { color: #0891b2; background: #ecfeff; }
.et-action-emerald:hover { color: #059669; background: #ecfdf5; }
.et-action-red:hover     { color: #ef4444; background: #fef2f2; }

.et-exp-row { cursor: pointer; }
.et-exp-chev { display: inline-block; transition: transform .2s; }
.et-exp-row.et-exp-open .et-exp-chev { transform: rotate(180deg); }
.et-exp-pane > td { padding: 0 !important; }

.et-star-btn { background: transparent; border: 0; cursor: pointer; color: #cbd5e1; transition: color .15s; padding: 4px; }
.et-file-row:hover .et-star-btn { color: #94a3b8; }
.et-star-btn.et-star-on { color: #fbbf24; }
.et-row-actions { opacity: 0; transition: opacity .15s; }
.et-file-row:hover .et-row-actions { opacity: 1; }

.et-changelog-header { background: linear-gradient(to right, #0f172a, #1e293b); }
.et-changelog-header th { color: #cbd5e1 !important; }
.et-timeline-line { position: absolute; top: 12px; left: 4px; width: 2px; height: 32px; background: #e2e8f0; }

.et-del-btn { color: #ef4444 !important; border-color: #fecaca !important; }
.et-del-btn:hover { background: #fef2f2 !important; }
.et-arch-btn { color: #ef4444 !important; border-color: #fecaca !important; }

/* xl grid 3-col */
.grid-cols-xl-3 { grid-template-columns: 1fr; }
@media (min-width: 1280px) {
  .grid-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl-col-span-2 { grid-column: span 2 / span 2; }
}

/* md 3-col for expandable details */
.grid-cols-md-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* lg 4-col stat */
.grid-cols-lg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.grid-cols-lg-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid-cols-lg-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Flex row at sm+ */
.flex-row-sm { flex-direction: column; }
@media (min-width: 640px) {
  .flex-row-sm { flex-direction: row !important; }
  .flex-col.flex-row-sm { flex-direction: row !important; }
  .items-center-sm { align-items: center !important; }
}

/* Hidden helpers */
.hidden-sm-flex { display: none; }
@media (min-width: 640px) { .hidden-sm-flex { display: flex !important; } }
.hidden-md-block { display: none; }
@media (min-width: 768px) { .hidden-md-block { display: block !important; } }

/* Table wrapper */
.table-wrapper { overflow-x: auto; }
.table-wrapper::-webkit-scrollbar { height: 8px; }
.table-wrapper::-webkit-scrollbar-track { background: #f1f5f9; }
.table-wrapper::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }


/* ===== Button styles — React-match overrides ===== */
/* React's base .btn — make standalone classes work properly */
.btn-outline,
.btn-gradient,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  transition: all .15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Outline — React: border slate-200, hover slate-50, text slate-700 */
.btn-outline {
  background: transparent !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}
.btn-outline:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; }
.btn-outline:focus { outline: 0; box-shadow: 0 0 0 2px rgb(148 163 184 / .4); }

/* Gradient — React: bg-primary-500 hover-primary-600 white */
.btn-gradient {
  background: rgb(var(--p-500)) !important;
  color: #fff !important;
  border-color: rgb(var(--p-500)) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
.btn-gradient:hover { background: rgb(var(--p-600)) !important; border-color: rgb(var(--p-600)) !important; box-shadow: 0 4px 6px rgb(0 0 0 / .07); color: #fff !important; }
.btn-gradient:focus { outline: 0; box-shadow: 0 0 0 2px rgb(var(--p-500) / .5); }

/* Secondary — light slate (React: bg-slate-100 text-slate-700) */
.btn.btn-secondary, .btn-secondary {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #f1f5f9 !important;
}
.btn.btn-secondary:hover, .btn-secondary:hover { background: #e2e8f0 !important; color: #334155 !important; }

/* Standalone .btn-sm — React: px-3 py-1.5 text-xs */
.btn-sm,
.btn-outline.btn-sm,
.btn-gradient.btn-sm,
.btn-secondary.btn-sm,
.btn.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  gap: 6px !important;
}

/* .text-xs combined with btn-outline/btn-gradient — same as .btn-sm */
.btn-outline.text-xs,
.btn-gradient.text-xs,
.btn-secondary.text-xs {
  padding: 6px 12px !important;
  font-size: 12px !important;
  gap: 6px !important;
}

/* Icon sizing inside small buttons */
.btn-outline.btn-sm svg, .btn-gradient.btn-sm svg, .btn-secondary.btn-sm svg,
.btn-outline.text-xs svg, .btn-gradient.text-xs svg, .btn-secondary.text-xs svg {
  width: 13px !important; height: 13px !important;
}

/* Lucide icons inside btn — flex-shrink fix */
.btn-outline > svg, .btn-gradient > svg, .btn-secondary > svg,
.btn-outline > i, .btn-gradient > i, .btn-secondary > i { flex-shrink: 0; }

/* The .app-main scope override that was clobbering border to 0 */
.app-main .btn-outline { border: 1px solid #e2e8f0 !important; }

/* React .btn-primary should still work — Bootstrap-style with our primary color */
.btn.btn-primary {
  background: rgb(var(--p-600)) !important;
  border-color: rgb(var(--p-600)) !important;
  color: #fff !important;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}
.btn.btn-primary:hover { background: rgb(var(--p-700)) !important; border-color: rgb(var(--p-700)) !important; color: #fff !important; }

/* Disabled state */
.btn-outline:disabled, .btn-gradient:disabled, .btn-secondary:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

/* Button color variants used in some sections (status-colored outline buttons) */
.btn-outline.text-red-500 { color: #ef4444 !important; border-color: #fecaca !important; }
.btn-outline.text-red-500:hover { background: #fef2f2 !important; }


/* ===== Widgets page ===== */
/* Todo widget */
.wg-todo-row { transition: background-color .15s; }
.wg-todo-row:hover { background: #f8fafc; }
.wg-todo-row:hover .wg-todo-rm { opacity: 1; }
.wg-todo-cb { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; flex-shrink: 0; background: #fff; padding: 0; }
.wg-todo-cb:hover { border-color: rgb(var(--p-400)); }
.wg-todo-cb-on { background: rgb(var(--p-500)); border-color: rgb(var(--p-500)); }
.wg-todo-text-done { text-decoration: line-through; color: #94a3b8; }
.wg-todo-rm { opacity: 0; transition: opacity .15s, background-color .15s, color .15s; padding: 4px; border-radius: 8px; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.wg-todo-rm:hover { background: #fef2f2; color: #ef4444; }

/* Quick actions */
.wg-quick-action { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid #f1f5f9; background: #fff; cursor: pointer; transition: all .2s; }
.wg-quick-action:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.08); transform: translateY(-2px); }
.wg-quick-action:hover .wg-quick-icon { transform: scale(1.1); }
.wg-quick-icon { transition: transform .2s; }
.wg-quick-label { font-size: 11px; font-weight: 600; color: #475569; transition: color .15s; }
.wg-quick-action:hover .wg-quick-label { color: #0f172a; }

/* Activity feed rows */
.wg-activity-row { border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background-color .15s; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 12px; }
.wg-activity-row:last-child { border-bottom: 0; }
.wg-activity-row:hover { background: #f8fafc; }
.py-3-5 { padding-top: 14px !important; padding-bottom: 14px !important; }

/* Calendar widget */
.wg-cal-day { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 500; }
.wg-cal-today { background: rgb(var(--p-500)); color: #fff !important; }
.wg-cal-event { color: rgb(var(--p-600)); }
.wg-cal-nav { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: #64748b; cursor: pointer; font-size: 18px; line-height: 1; transition: background-color .15s; }
.wg-cal-nav:hover { background: #f1f5f9; }

/* Leaderboard */
.wg-lb-row { transition: background-color .15s; }
.wg-lb-row:hover { background: #f8fafc; }

/* Media cards */
.wg-media-card { transition: all .3s; }
.wg-media-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05); transform: translateY(-4px); }
.wg-media-img { transition: transform .3s; }
.wg-media-card:hover .wg-media-img { transform: scale(1.05); }
.wg-media-card:hover h4 { color: rgb(var(--p-600)); transition: color .2s; }

/* Countdown */
.wg-cd-cell { background: rgb(255 255 255 / .15); backdrop-filter: blur(4px); border: 1px solid rgb(255 255 255 / .2); border-radius: 16px; padding: 16px; }
.wg-pulse { animation: wg-pulse 2s infinite; }
@keyframes wg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* md:col-span helpers */
.md-col-span-2 { grid-column: span 2 / span 2; }
.md-col-span-3 { grid-column: span 3 / span 3; }

/* Utility additions used by widgets */
.text-yellow-200 { color: #fef08a !important; }
.lucide-xl { width: 36px !important; height: 36px !important; }
.lucide-xxl { width: 44px !important; height: 44px !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; }