.anim-demo-box span,
.blog-cat,
.date-group,
.expand-item label,
.form-divider,
.form-label,
.nav-label,
.pricing-plan,
.proj-table th,
.section-divider,
.stat-card h6,
.sub-label,
th {
  text-transform: uppercase;
}
.input-wrap textarea,
textarea.form-control {
  resize: vertical;
  resize: vertical;
}
.addon,
.badge,
.btn,
.cat-tab,
.icon-count,
.ntab,
.p-tab,
.plan-badge,
.pricing-badge,
.sec-action,
.social-url,
.stat-card .percent,
.usage-code,
th {
  white-space: nowrap;
}
.page-header h1,
.sidebar-header {
  font-family: "Playfair Display", serif;
}
.btn-draft,
.btn-edit-profile,
.btn-msg,
.btn-submit,
body {
  font-family: Sora, sans-serif;
}
.breadcrumb a,
.btn,
.dropdown-item,
.info-val a,
.social-item {
  text-decoration: none;
}
.breadcrumb a:hover,
.date-group-mark:hover,
.file-drop-browse,
.info-val a:hover {
  text-decoration: underline;
}
#toastContainer,
.card::before,
.input-icon,
.select-arrow {
  pointer-events: none;
}
.proj-table,
table {
  border-collapse: collapse;
}
.proj-table td,
td {
  vertical-align: middle;
}
.cs-trigger,
.role-chip,
.sortable th,
.switch-wrap,
th {
  user-select: none;
}
.blog-meta,
.nav-title,
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.action-left b,
.activity-content h6,
.badge-dot,
.badge-pulse,
.chart-card h5,
.cs-opt,
.cs-search input,
.empty-title,
.inline-demo p,
.mini-card-val,
.ni-title,
.page-header h1,
.page-info b,
.search-box input,
.social-card h3,
.stat-info h4,
.tag-input,
.tbl-select,
.toast-body h5,
.toast-close:hover,
body,
td {
  color: var(--text-primary);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --accent: #06b6d4;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --dark: #0f172a;
  --light: #f8fafc;
  --card-bg: rgba(255, 255, 255, 0.99);
  --card-border: rgba(99, 102, 241, 0.1);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --border-color: rgba(148, 163, 184, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
  --sidebar-width: 280px;
}
body.dark-mode {
  --card-bg: rgba(30, 41, 59, 1);
  --card-border: rgba(99, 102, 241, 0.15);
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --border-color: rgba(148, 163, 184, 0.15);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, #0f172a 0, #1e293b 100%);
}
body {
  background: linear-gradient(135deg, #f8fafc 0, #e2e8f0 100%);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background 0.3s;
}
.proj-table tbody tr,
.tbl-hover tbody tr,
tbody tr,
th {
  transition: 0.2s;
}
.wrapper {
  display: flex;
  height: 100vh;
  background: var(--bg-secondary);
}
.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(
    180deg,
    var(--bg-primary) 0,
    var(--bg-secondary) 100%
  );
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  padding: 24px 16px;
  transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 100;
}
.sidebar.collapsed {
  --sidebar-width: 80px;
  padding: 24px 8px;
}
#avatarInput,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-title span,
.sidebar.collapsed .sidebar-header span {
  display: none;
}
.sidebar.collapsed .badge-new {
  position: absolute;
  right: -8px;
  top: 2px;
}
.sidebar.collapsed .chevron,
.sidebar.collapsed .submenu {
  display: none !important;
}
.submenu a{text-decoration: none;}
.sidebar-menu{text-decoration: none;color: var(--text-secondary);}
.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.sidebar-header {
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
  transition: gap 0.3s;
}
.nav-item,
.nav-label {
  color: var(--text-secondary);
}
.sidebar.collapsed .sidebar-header {
  gap: 0;
  justify-content: center;
  margin-bottom: 24px;
}
.sidebar-header i {
  font-size: 24px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.btn-loading .btn-text,
.sidebar-toggle {
  opacity: 0;
}
.sidebar.collapsed .sidebar-toggle {
  width: calc(100% - 16px);
  left: 8px;
  right: 8px;
}
.sidebar-toggle:hover {
  background: rgba(99, 102, 241, 0.2);
  transform: scale(1.05);
}
.nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 24px;
  margin-bottom: 12px;
  padding: 0 12px;
}
.nav-item {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.dropdown-item:hover,
.nav-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  transform: translateX(4px);
}
.nav-item.active-link {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15),
    rgba(6, 182, 212, 0.08)
  );
  color: var(--primary);
  font-weight: 600;
  border-left: 3px solid var(--primary);
  padding-left: 13px;
}
.content-area,
.earnings-footer div,
.integ-info,
.key-info,
.member-info,
.nav-title,
.notif-content,
.sec-info,
.sec-text,
.session-info,
.skel-lines,
.step-item {
  flex: 1;
}
.nav-title i {
  width: 20px;
  text-align: center;
}
.badge-new {
  background: linear-gradient(135deg, var(--danger), var(--warning));
  color: #fff;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 6px;
}
.submenu {
  display: none;
  padding-left: 28px;
  animation: 0.3s slideDown;
}
.submenu-item,
.top-nav {
  display: flex;
  transition: 0.3s;
}
.custom-select.open .cs-dropdown,
.dropdown-menu.active,
.empty-state.show,
.submenu.active,
.tab-panel.active {
  display: block;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.submenu-item {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.cs-search input,
.ghost-btn,
.search-box,
.tbl-bordered td,
.tbl-bordered th,
.tbl-search,
.tbl-select,
.theme-toggle {
  border: 1px solid var(--border-color);
}
.form-actions.between,
.modal-footer.between,
.stat-card .value,
.top-nav {
  justify-content: space-between;
}
.submenu-item:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  transform: translateX(4px);
}
.top-nav {
  background: linear-gradient(90deg, var(--bg-primary), var(--bg-secondary));
  border-bottom: 1px solid var(--border-color);
  padding: 12px 20px;
  align-items: center;
  gap: 20px;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: 15px;
}
.card-title,
.cs-trigger,
.file-icon,
.file-preview-item,
.info-row,
.mini-icon,
.mini-stat,
.product-fav,
.product-img,
.product-price,
.product-rating,
.search-box,
.section-title,
.social-card,
.social-card i,
.sub-label,
.switch-wrap,
.table-toolbar,
.tbl-search,
.user-actions {
  display: flex;
  align-items: center;
}
.search-box {
  gap: 8px;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 320px;
  transition: 0.3s;
}
.search-box:focus-within {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.btn-ghost:hover,
.ib-btn-ghost:hover,
.icon-btn:hover,
.mark-all-btn:hover,
.theme-toggle:hover {
  background: rgba(99, 102, 241, 0.15);
}
.card:hover,
.drawer,
.dropdown-menu,
.modal,
.toast {
  box-shadow: var(--shadow-lg);
}
.avatar-card,
.card,
.mini-stat,
.product-fav,
.skel-card,
.table-card {
  box-shadow: var(--shadow-sm);
}
.search-box input {
  flex: 1;
  border: none;
  background: 0 0;
  outline: 0;
  font-size: 14px;
}
.search-box input::placeholder {
  color: var(--text-secondary);
}
.user-actions {
  gap: 12px;
}
.icon-btn,
.theme-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-primary);
  transition: 0.3s;
  background: rgba(99, 102, 241, 0.05);
}
.theme-toggle {
  border-radius: 10px;
  justify-content: center;
}
.av-preview:hover,
.theme-toggle:hover {
  transform: scale(1.05);
}
.icon-btn {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  justify-content: center;
  position: relative;
}
.notif-dot {
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 8px;
  animation: 2s infinite pulse;
}
.card,
.dropdown-menu {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.badge-pulse,
.btn,
.btn-badge,
.btn-border-anim,
.char-wrap,
.code-block,
.custom-select,
.dropdown-container,
.input-wrap,
.modal,
.prog-indeterminate,
.pulse-ring,
.range-wrap,
.ribbon-wrap,
.section,
.sp-grad,
.split-btn,
.step-circle,
.step-item {
  position: relative;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  width: 320px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  z-index: 1000;
  animation: 0.3s slideDown;
}
.activity-item,
.drawer-header,
.dropdown-header,
.dropdown-item,
.info-row,
.notif-card,
.proj-table td,
.proj-table th,
.tl-item,
td,
th {
  border-bottom: 1px solid var(--border-color);
}
.dropdown-header {
  padding: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}
.dropdown-item,
td,
th {
  padding: 12px 16px;
}
.act-btn,
.av-email,
.breadcrumb,
.card-footer,
.card-text,
.chart-legend,
.confirm-text,
.dropdown-item,
.empty-state,
.eye-icon,
.fa-search,
.form-label,
.h-card .h-text,
.hint,
.img-caption,
.info-lbl,
.input-icon,
.meta-item,
.mini-card-label,
.p-tab,
.page-btn,
.page-header p,
.per-page,
.per-page-wrap,
.profile-bio,
.section-divider,
.select-arrow,
.stat-card h6,
.stat-info p,
.step-circle,
.sub-label,
.sub-text,
.table-count,
.tbl-empty,
.tbl-search i,
.toast-close,
.toggle-sub,
.user-email,
th {
  color: var(--text-secondary);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: 0.3s;
}
.activity-item:last-child,
.dropdown-item:last-child,
.info-row:last-child,
.notif-card:last-child,
.notif-item:last-child,
.pref-row:last-child,
.proj-table tr:last-child td,
.toggle-row:last-child,
.user-row:last-child,
tr:last-child td {
  border-bottom: none;
}
.dropdown-item i {
  font-size: 16px;
  width: 20px;
}
.sub-text {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}
.main-panel {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.avatar-card,
.avatar-preview,
.btn-shimmer,
.card,
.earnings-card,
.overlay-demo,
.pbar-mini,
.pbar-track,
.prog-bar,
.progress-bar,
.table-card {
  overflow: hidden;
}
.main-panel::-webkit-scrollbar {
  width: 8px;
}
.main-panel::-webkit-scrollbar-track {
  background: 0 0;
}
.main-panel::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 4px;
}
.main-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}
.page-header,
.page-header h1 {
  margin-top: 0;
}
.stat-card h6,
th {
  letter-spacing: 0.5px;
}
.section-divider,
.sub-label,
th {
  letter-spacing: 0.8px;
}
.page-header p {
  margin: 0;
  font-weight: 400;
}
.dashboard-grid {
  display: grid;
  gap: 20px;
  grid-auto-rows: auto;
  padding-left: 30px;
  padding-right: 15px;
  padding-bottom: 30px;
}
.card {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  transition: 0.3s;
  position: relative;
  animation: 0.6s fadeInUp;
}
.card::before {
  content: "";
  width: 100%;
}
.card:hover {
  transform: translateY(-8px);
  border-color: rgba(99, 102, 241, 0.2);
}
.card:hover::before {
  right: -10%;
  opacity: 1;
}
.col-4,
.stat-card {
  grid-column: span 1;
}
.stat-card h6 {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}
.chart-card h5,
.chart-legend {
  display: flex;
  margin-bottom: 18px;
}
.stat-card .value {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  gap: 8px;
}
.stat-card .value span:first-child {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.stat-card .percent {
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 6px;
}
.earnings-card::after,
.earnings-card::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.6s;
}
.col-full {
  grid-column: 1/-1;
}
.chart-card,
.col-6,
.table-card {
  grid-column: span 2;
}
@media (max-width: 1200px) {
  .col-6 {
    grid-column: span 1;
  }
  .col-full {
    grid-column: 1/-1;
  }
}
.chart-card h5 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  justify-content: space-between;
  align-items: center;
}
.chart-legend {
  gap: 20px;
  font-size: 13px;
}
.legend-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  margin-right: 6px;
}
.chart-container {
  position: relative;
  height: 280px;
  margin-bottom: 0;
}
.earnings-card {
  background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
  color: #fff;
  grid-column: span 1;
  position: relative;
}
.earnings-card::before {
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
}
.earnings-card::after {
  bottom: -30%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.08);
}
.earnings-card h5 {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 8px;
  margin-top: 0;
}
.earnings-card h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.1;
}
.earnings-card p {
  font-size: 10px;
  opacity: 0.8;
  margin-bottom: 16px;
  margin-top: 0;
}
.earnings-chart-wrapper {
  position: relative;
  height: 150px;
  margin-bottom: 14px;
}
.earnings-footer {
  display: flex;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 12px;
}
.earnings-footer p {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}
.earnings-footer small {
  display: block;
  font-size: 9px;
  opacity: 0.7;
  margin-top: 2px;
}
.social-card {
  gap: 14px;
  grid-column: span 1;
}
.social-card i {
  font-size: 28px;
  width: 48px;
  height: 48px;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.social-card .facebook {
  background: rgba(59, 89, 152, 0.15);
  color: #3b5998;
}
.social-card .twitter {
  background: rgba(29, 161, 242, 0.15);
  color: #1da1f2;
}
.social-card .google {
  background: rgba(234, 67, 53, 0.15);
  color: #ea4335;
}
.social-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
  margin-top: 0;
}
.expand-btn,
.expand-item label,
.perm-item-sub,
.proj-table th,
.social-card small,
.tl-time,
.uc-stat p,
th {
  font-size: 11px;
  color: var(--text-secondary);
}
.social-card small,
.stat-info p {
  margin: 0;
}
.notif-card.unread,
.tbl-hover tbody tr:hover td,
tr:hover {
  background: rgba(99, 102, 241, 0.05);
}
.anim-bounce,
.anim-fade,
.anim-flip,
.anim-float,
.anim-heartbeat,
.anim-pulse,
.anim-shake,
.anim-spin,
.anim-spin-rev,
.anim-swing,
.badge,
.spinner {
  display: inline-block;
}
.activity-icon.success,
.badge-success,
.ti-success,
.toast-icon.success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}
.activity-icon.warning,
.badge-warning,
.ti-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}
.activity-icon.danger,
.badge-danger,
.ti-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}
.activity-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
}
.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.activity-content h6 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  margin-top: 0;
}
.activity-time {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  padding-top: 5px;
}
@media (max-width: 768px) {
  .sidebar.collapsed,
  :root {
    --sidebar-width: 280px;
  }
  .sidebar {
    position: absolute;
    left: -280px;
    height: 100vh;
    z-index: 200;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 280px !important;
    padding-bottom: 80px;
  }
  .sidebar.open {
    left: 0;
  }
  .sidebar.collapsed {
    padding: 24px 16px;
  }
  .sidebar.collapsed .nav-title span,
  .sidebar.collapsed .sidebar-header span {
    display: inline;
  }
  .sidebar.collapsed .nav-label {
    display: block;
  }
  .sidebar-toggle {
    position: static;
    width: calc(100% - 32px) !important;
    margin-top: 24px;
  }
  .wrapper.sidebar-open .main-panel {
    filter: brightness(0.95);
    pointer-events: none;
  }
  .top-nav {
    padding: 12px 16px;
  }
  .search-box {
    display: none;
  }
  .main-panel {
    padding: 16px;
  }
  .dashboard-grid {
    gap: 16px;
  }
  .chart-card,
  .col-6,
  .table-card {
    grid-column: 1/-1;
  }
  .page-header h1 {
    font-size: 24px;
  }
  .earnings-chart-wrapper {
    height: 140px;
  }
}
@media (max-width: 480px) {
  .sidebar {
    width: 100%;
    left: -100%;
  }
  .chart-card,
  .col-4,
  .col-6,
  .table-card {
    grid-column: 1/-1;
  }
  .top-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .earnings-chart-wrapper {
    height: 130px;
    margin-bottom: 12px;
  }
}
.topnavdiv {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
#menuToggleBtn {
  border: none;
  background: 0 0;
}
.copy-toast i,
.fa-shopping-cart,
.icon-cell.copied i,
.ss-ok,
.step-item.done .step-label,
.success,
.trend-up {
  color: var(--success);
}
.Revenue,
.card-title i,
.eye-icon:hover,
.fa-user-plus,
.info-label i,
.info-val a,
.input-wrap .eye-icon:hover,
.input-wrap input:focus ~ .input-icon,
.input-wrap select:focus ~ .input-icon,
.input-wrap textarea:focus ~ .input-icon,
.p-tab.active,
.p-tab:hover,
.section-title i,
.step-item.active .step-label,
th:hover {
  color: var(--primary);
}
.Growth,
.char-count.warn,
.fa-exclamation-circle,
.ss-warn,
.star.active {
  color: var(--warning);
}
.viewallnoti {
  justify-content: center;
  color: var(--primary);
}
.char-count.over,
.file-remove:hover,
.logout,
.prio-critical,
.req,
.ss-bad,
.tag-chip button:hover,
.trend-down {
  color: var(--danger);
}
.progress-fill {
  width: 72%;
  background: linear-gradient(90deg, var(--success), #34d399);
}
.pfill {
  width: 68%;
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
}
.pfilly {
  width: 85%;
  background: linear-gradient(90deg, var(--warning), #fbbf24) !important;
}
.total-user {
  color: var(--accent);
}
.pfillb {
  width: 92%;
  background: linear-gradient(90deg, var(--accent), #22d3ee) !important;
}
.fa-ellipsis-h {
  color: var(--text-secondary);
  cursor: pointer;
}
.activityh5,
.mb {
  margin-bottom: 20px;
}
.card {
  padding: 16px;
}
.locationsdiv {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.location-row,
.locationssubdiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.location-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.location-users,
.notif-search i,
.tbl-search i {
  color: var(--text-secondary);
  font-size: 12px;
}
.location-percentage {
  font-weight: 700;
  color: var(--primary);
}
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 10px;
}
.avatar-card,
.profile-identity,
.quick-card,
.table-card {
  border: 1px solid var(--card-border);
}
.w-85 {
  width: 85%;
}
.w-70 {
  width: 70%;
}
.w-60 {
  width: 60%;
}
.w-15 {
  width: 15%;
}
.locationsdiv,
.notif-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
.form-row-2,
.form-row.cols-2,
.perm-grid {
  grid-template-columns: 1fr 1fr;
}
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.avatar-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  animation: 0.5s 50ms both fadeInUp;
  position: relative;
}
.avatar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--accent),
    var(--success)
  );
}
.avatar-upload-ring {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}
.avatar-edit-btn,
.avatar-preview {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  transition: 0.3s;
}
.avatar-preview {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
  margin: 0 auto;
  border: 4px solid rgba(99, 102, 241, 0.15);
}
.av-preview img,
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.avatar-edit-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
  border: 2px solid var(--card-bg);
}
.alert,
.badge-shimmer-anim,
.btn-submit,
.section-card,
.toast {
  position: relative;
  overflow: hidden;
}
.avatar-name,
.mini-info h4,
.quick-card h4,
.section-title-text h3,
.table-title {
  font-weight: 700;
  color: var(--text-primary);
}
.avatar-cam:hover,
.avatar-edit-btn:hover {
  transform: scale(1.1);
}
.avatar-name {
  font-size: 17px;
  margin-bottom: 4px;
}
.avatar-role-badge {
  display: inline-block;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 3px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}
.profile-identity,
.quick-card,
.section-card,
.stat-card {
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.avatar-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.quick-card {
  border-radius: 16px;
  padding: 20px;
  animation: 0.5s 0.1s both fadeInUp;
}
.quick-card h4 {
  font-size: 13px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-header i,
.quick-card h4 i {
  color: var(--primary);
  font-size: 13px;
}
.section-card {
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 24px;
  animation: 0.5s both fadeInUp;
  margin-bottom: 20px;
}
.bar:nth-child(2),
.mini-stat:nth-child(2),
.section-card:first-child,
.stat-card:nth-child(2) {
  animation-delay: 0.1s;
}
.dot:nth-child(2),
.mini-stat:nth-child(3),
.section-card:nth-child(2),
.stat-card:nth-child(3) {
  animation-delay: 0.15s;
}
.bar:nth-child(3),
.mini-stat:nth-child(4),
.section-card:nth-child(3),
.stat-card:nth-child(4) {
  animation-delay: 0.2s;
}
.section-card:nth-child(4) {
  animation-delay: 0.25s;
}
.section-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transition: 0.3s;
}
.input-wrap .eye-icon,
.input-wrap .input-icon {
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.3s;
  position: absolute;
}
.icon-cell.copied .copy-flash,
.section-card:hover::before,
.tag .tag-x:hover {
  opacity: 1;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.badge-admin,
.badge-soft-primary,
.ci-primary,
.ib-primary,
.mhi-primary,
.mini-icon.blue,
.ni-blue,
.r-admin,
.role-badge.admin,
.sec-icon.info,
.section-icon.purple,
.si-blue,
.stat-icon.blue,
.ti-info,
.tl-dot.edit,
.toast-icon.draft {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
}
.badge-soft-accent,
.ib-accent,
.mhi-info,
.ni-cyan,
.r-editor,
.role-badge.editor,
.section-icon.cyan,
.si-cyan,
.stat-icon.cyan,
.status-review,
.ti-accent,
.tl-dot.upload {
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent);
}
.b-active,
.badge-active,
.badge-soft-success,
.ci-success,
.ib-success,
.mhi-success,
.mini-icon.green,
.ni-green,
.s-website,
.sec-icon.ok,
.section-icon.green,
.session-current,
.si-green,
.stat-icon.green,
.status-active,
.tl-dot.login {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}
.b-pending,
.badge-pending,
.badge-soft-warning,
.ci-warning,
.ib-warning,
.mhi-warning,
.mini-icon.yellow,
.ni-orange,
.r-manager,
.role-badge.manager,
.sec-icon.warn,
.section-icon.orange,
.si-orange,
.si-yellow,
.stat-icon.orange,
.status-pending,
.tl-dot.security {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}
.section-title-text h3 {
  font-size: 14px;
  margin-bottom: 1px;
}
.section-title-text p,
.session-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
}
.form-row,
.form-row-1,
.form-row-2 {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.form-row-1,
.form-row.cols-1 {
  grid-template-columns: 1fr;
}
.form-group:last-child,
.skill-item:last-child {
  margin-bottom: 0;
}
.form-label {
  color: var(--text-secondary);
  align-items: center;
}
.required {
  color: var(--danger);
  font-size: 13px;
}
.input-wrap .input-icon {
  left: 13px;
  color: var(--text-secondary);
  font-size: 13px;
  pointer-events: none;
}
.input-wrap.no-icon input,
.input-wrap.no-icon select,
.input-wrap.no-icon textarea,
.no-icon input,
.no-icon select,
.no-icon textarea {
  padding-left: 13px;
}
.input-wrap .eye-icon {
  right: 12px;
  color: var(--text-secondary);
  font-size: 13px;
}
.input-wrap .pw-input {
  padding-right: 38px;
}
.form-control.is-invalid,
.input-wrap.error input,
.input-wrap.error select {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.04);
}
.error-msg {
  font-size: 11.5px;
  color: var(--danger);
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  display: none;
}
.input-wrap.error ~ .error-msg,
.theme-opt.selected .theme-tick {
  display: flex;
}
.err-visible {
  display: flex !important;
}
.input-hint,
.toggle-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.strength-wrap {
  margin-top: 8px;
}
.pw-bars,
.strength-bars {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.pw-bar,
.str-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border-color);
  transition: background 0.4s;
}
.cat-tab,
.icon-btn-demo,
.icon-cell,
.perm-item,
.role-chip {
  cursor: pointer;
  transition: 0.25s;
}
.strength-label {
  font-size: 11px;
  font-weight: 600;
}
.role-option-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  border: 2px solid transparent;
}
.filter-item.active,
.role-chip.admin,
.sn-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}
.icon-box.warning,
.prio-medium,
.role-chip.manager {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}
.icon-box.accent,
.role-chip.editor {
  background: rgba(6, 182, 212, 0.1);
  color: var(--accent);
}
.b-inactive,
.r-viewer,
.role-badge.viewer,
.role-chip.viewer,
.status-inactive {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-secondary);
}
.role-chip.selected.admin {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.18);
}
.role-chip.selected.manager {
  border-color: var(--warning);
  background: rgba(245, 158, 11, 0.18);
}
.role-chip.selected.editor {
  border-color: var(--accent);
  background: rgba(6, 182, 212, 0.18);
}
.role-chip.selected.viewer {
  border-color: var(--text-secondary);
  background: rgba(100, 116, 139, 0.18);
}
.perm-grid {
  display: grid;
  gap: 10px;
}
.perm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.btn-draft,
.btn-submit {
  cursor: pointer;
  transition: 0.3s;
}
.anim-demo-box:hover,
.check-item:hover,
.form-control-ghost:focus,
.perm-item:hover,
.plan-card.selected,
.radio-item:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.04);
}
.perm-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.blog-author,
.perm-item-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.action-bar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  animation: 0.5s 0.3s both fadeInUp;
  margin-bottom: 20px;
}
.action-left,
.empty-sub {
  font-size: 13px;
  color: var(--text-secondary);
}
.action-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-cancel,
.btn-draft,
.btn-export {
  align-items: center;
  display: inline-flex;
  background: var(--bg-secondary);
}
.btn-cancel,
.btn-export,
.btn-outline {
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.btn-cancel:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.06);
}
.btn-draft:hover,
.sec-action:hover,
.submenu-item.sub-active {
  background: rgba(99, 102, 241, 0.08);
}
.breadcrumb a,
.btn-draft,
.submenu-item.sub-active {
  color: var(--primary);
  font-weight: 600;
}
.btn-draft {
  gap: 7px;
  border: 1px solid var(--primary);
  border-radius: 11px;
  padding: 11px 22px;
  font-size: 13px;
}
.act-btn,
.av,
.badge,
.badge-dot,
.badge-pulse,
.btn-save,
.btn-submit,
.cs-opt,
.cs-tag,
.role-b,
.stat-card,
.sub-label,
.tag,
.toast {
  align-items: center;
}
.btn-draft:hover {
  transform: translateY(-1px);
}
.btn-submit {
  display: inline-flex;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 11px 28px;
  font-size: 13px;
  font-weight: 700;
}
.mini-stat,
.toast {
  background: var(--card-bg);
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}
.btn-slide-up:hover::before,
.btn-submit:active,
.toast.show {
  transform: translateY(0);
}
.toast {
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
  display: flex;
}
.ni-avatar,
.stat-icon,
.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .left-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
@media (max-width: 768px) {
  :root {
    --sidebar-width: 280px;
  }
  .sidebar {
    position: absolute;
    left: -280px;
    height: 100vh;
    z-index: 200;
    transition: left 0.35s;
    width: 280px !important;
  }
  .sidebar.open {
    left: 0;
  }
  .sidebar.collapsed .nav-title span,
  .sidebar.collapsed .sidebar-header span {
    display: inline;
  }
  .sidebar.collapsed .nav-label {
    display: block;
  }
  .search-box {
    display: none;
  }
  .content-area,
  .page-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .form-row.cols-2,
  .form-row.cols-3,
  .perm-grid {
    grid-template-columns: 1fr;
  }
  .left-panel {
    display: flex;
    flex-direction: column;
  }
  .action-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}
.stat-row,
.stats-row {
  grid-template-columns: repeat(4, 1fr);
}
.pref-row,
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}
.info-row:last-child,
.toggle-row:last-child {
  padding-bottom: 0;
}
.slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.switch input:checked + .slider::before,
.switch input:checked + .slider:before {
  transform: translateX(18px);
}
input[type="range"] {
  background-color: #e7f0fa;
}
.page-header {
  padding: 20px 30px 0;
  margin-bottom: 20px;
}
.page-header h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -1px;
  line-height: 1.2;
}
.cover-edit-btn,
.per-page-wrap select {
  font-family: Sora, sans-serif;
  cursor: pointer;
}
.card-title i,
.empty-state p,
.no-results p,
.page-header p,
.tbl-empty p {
  font-size: 14px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 8px;
}
.act-btn,
.mini-icon {
  justify-content: center;
}
.breadcrumb i,
.tl-time i {
  font-size: 10px;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stat-row {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}
.mini-stat {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  gap: 16px;
  animation: 0.5s both fadeInUp;
  transition: 0.3s;
}
.mini-stat:hover,
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.mini-stat:first-child,
.stat-card:first-child {
  animation-delay: 50ms;
}
.mini-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
}
.b-blocked,
.badge-inactive,
.badge-soft-danger,
.ci-danger,
.fc-red,
.filter-count.red,
.ib-danger,
.mhi-danger,
.mini-icon.red,
.ni-red,
.sec-icon.danger,
.si-red,
.status-blocked,
.tl-dot.delete {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}
.mini-info h4 {
  font-size: 20px;
  margin-bottom: 2px;
}
.mini-info p,
.toast-body p,
.toast-text p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}
.table-card {
  background: var(--card-bg);
  border-radius: 16px;
  animation: 0.5s 0.25s both fadeInUp;
}
.profile-hero,
.stat-card {
  animation: 0.5s both fadeInUp;
}
.table-toolbar {
  justify-content: space-between;
  padding: 20px 22px 16px;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
}
.table-title {
  font-size: 16px;
}
.table-count {
  font-size: 12px;
  background: rgba(99, 102, 241, 0.08);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.avatar,
.p-tab i,
td {
  font-size: 13px;
}
.tbl-search:focus-within {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}
.tbl-select {
  background: var(--card-bg);
  transition: 0.3s;
}
.form-control:focus,
.tbl-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.btn-add {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.btn-add:hover {
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.btn-export:hover,
.btn-msg:hover,
.btn-outline:hover,
.ni-more-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.06);
}
.table-wrapper {
  overflow-x: auto;
}
.cs-search input,
.file-drop,
.file-preview-item,
thead,
thead tr {
  background: var(--bg-secondary);
}
.proj-table th,
th {
  letter-spacing: 0.7px;
}
th .sort-icon {
  margin-left: 5px;
  opacity: 0.4;
  font-size: 10px;
}
th.sorted .sort-icon {
  opacity: 1;
  color: var(--primary);
}
.notif-card:hover,
.notif-item:hover,
.proj-table tbody tr:hover,
.tbl-striped tbody tr:nth-child(2n) td,
tbody tr:hover {
  background: rgba(99, 102, 241, 0.04);
}
.sc-title-wrap,
.tbl-avatar,
.user-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.badge,
.badge-dot,
.badge-pulse,
.bars,
.btn,
.btn-group,
.btn-group-outline,
.dots,
.notif-badge,
.ripple-wrap,
.role-badge,
.split-btn,
.status-badge {
  display: inline-flex;
}
.av-2,
.avatar.av-green,
.pa-green,
.uavatar.g {
  background: linear-gradient(135deg, var(--success), #34d399);
}
.av-3,
.avatar.av-orange,
.pa-orange,
.uavatar.o {
  background: linear-gradient(135deg, var(--warning), #fbbf24);
}
.av-4,
.avatar.av-red,
.pa-red,
.uavatar.r {
  background: linear-gradient(135deg, var(--danger), #f87171);
}
.avatar.av-cyan {
  background: linear-gradient(135deg, var(--accent), #22d3ee);
}
.avatar.av-purple {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}
.avatar.av-pink {
  background: linear-gradient(135deg, #ec4899, #f472b6);
}
.av-name,
.user-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}
.av-email,
.user-email {
  font-size: 11.5px;
  margin-top: 1px;
}
.role-badge {
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.b-blocked::before,
.badge-inactive::before,
.bar-danger,
.dot-danger,
.dot-danger::before,
.pulse-red .pulse-ring::after,
.ribbon-danger,
.ripple-wrap.rw-danger .ripple-core,
.sp-grow.sp-danger,
.switch.s-danger input:checked + .slider {
  background: var(--danger);
}
.act-btns,
.action-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}
.act-btn,
.card-footer,
.cb-wrap,
.form-divider,
.form-label,
.hint.err,
.info-label,
.loader-label,
.modal-close,
.modal-footer,
.modal-header,
.modal-overlay,
.pagination-bar,
.social-item,
.tl-dot,
.tl-time,
.toast-fixed {
  align-items: center;
  display: flex;
}
.act-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.btn-full,
.cb-wrap,
.form-actions.center,
.profile-avatar {
  justify-content: center;
}
input[type="checkbox"] {
  accent-color: var(--primary);
  border-radius: 4px;
}
.pagination-bar {
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 12px;
}
.per-page,
.per-page-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.per-page-wrap select {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--card-bg);
  outline: 0;
}
.card-hover-border:hover,
.card-outline-primary,
.cs-search input:focus,
.font-opt:hover,
.form-control-filled:focus,
.per-page-wrap select:focus,
.plan-card:hover,
.tbl-select:focus,
.theme-prev:hover {
  border-color: var(--primary);
}
.page-btn {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-wrap,
.profile-hero {
  position: relative;
  border-radius: 20px;
}
.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}
.page-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35);
}
.empty-state,
.tbl-empty {
  text-align: center;
  padding: 50px 20px;
}
.empty-state i {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
}
.profile-hero {
  margin-bottom: 0;
  overflow: visible;
}
.cover-wrap {
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1 0, #06b6d4 50%, #10b981 100%);
}
.cover-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: radial-gradient(
      circle at 20% 50%,
      #fff 1px,
      transparent 1px
    ),
    radial-gradient(circle at 80% 20%, #fff 1px, transparent 1px);
  background-size: 40px 40px;
}
.cover-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  transition: 0.3s;
}
.cover-edit-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}
.avatar-strip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px;
  margin-top: -52px;
  position: relative;
  z-index: 10;
  flex-wrap: wrap;
  gap: 12px;
}
.avatar-cam,
.profile-avatar {
  align-items: center;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.avatar-ring,
.icon-badge-wrap {
  position: relative;
  display: inline-block;
}
.profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: 5px solid var(--card-bg);
  display: flex;
  font-size: 38px;
  font-weight: 700;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.avatar-cam,
.info-label i,
.meta-item i {
  font-size: 12px;
}
.profile-avatar:hover {
  transform: scale(1.04);
}
.avatar-cam {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}
.avatar-strip-right {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 8px;
}
.btn-edit-profile,
.btn-msg {
  display: inline-flex;
  gap: 7px;
  padding: 9px 18px;
  font-size: 13px;
  transition: 0.3s;
  cursor: pointer;
}
.btn-msg {
  align-items: center;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-weight: 600;
}
.btn-add,
.btn-edit-profile,
.page-btn.active,
.switch input:checked + .slider {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.btn-edit-profile {
  align-items: center;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
}
.add-to-cart:hover,
.btn-edit-profile:hover,
.btn-save:hover,
.overlay-btn:hover,
.pb-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.profile-identity {
  border-top: none;
  border-radius: 0 0 20px 20px;
  padding: 16px 28px 22px;
}
.profile-name {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.meta-item i,
.tag {
  color: var(--primary);
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.profile-bio {
  font-size: 13.5px;
  max-width: 680px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  display: inline-flex;
  gap: 5px;
}
.stats-row {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}
.stat-card {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  display: flex;
  gap: 14px;
  transition: 0.3s;
}
.profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
  overflow-x: auto;
}
.btn,
.modal,
.section,
.skill-bar,
.social-url,
.split-menu {
  overflow: hidden;
}
.profile-tabs::-webkit-scrollbar {
  display: none;
}
.p-tab {
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.p-tab.active {
  border-bottom-color: var(--primary);
}
.tab-panel {
  display: none;
  animation: 0.4s fadeInUp;
}
.three-col,
.two-col {
  display: grid;
  gap: 20px;
}
.two-col {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.three-col {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transition: 0.3s;
  border-radius: 16px 16px 0 0;
}
.card-title {
  color: var(--text-primary);
  gap: 8px;
}
.card-title .card-badge {
  margin-left: auto;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.info-list,
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.info-row {
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
}
.info-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  gap: 8px;
  flex-shrink: 0;
}
.info-label i {
  width: 16px;
  text-align: center;
}
.info-val {
  color: var(--text-primary);
  text-align: right;
}
.confirm-text,
.confirm-title,
.file-drop,
.img-caption,
.otp-box,
.pricing-card,
.range-val,
.step-item,
.uc-stat {
  text-align: center;
}
.badge::before {
  content: "";
  flex-shrink: 0;
}
.b-active::before,
.badge-active::before,
.bar-success,
.dot-success,
.dot-success::before,
.notif-badge.notif-success,
.pulse-green .pulse-ring::after,
.ribbon-success,
.ripple-wrap.rw-success .ripple-core,
.sp-grow.sp-success,
.switch.s-success input:checked + .slider {
  background: var(--success);
}
.b-pending::before,
.badge-pending::before,
.bar-warning,
.dot-warning,
.dot-warning::before,
.notif-badge.notif-warning,
.pulse-orange .pulse-ring::after,
.ribbon-warning,
.ripple-wrap.rw-warning .ripple-core,
.sp-grow.sp-warning,
.switch.s-warning input:checked + .slider {
  background: var(--warning);
}
.pbar-wrap,
.skill-item {
  margin-bottom: 14px;
}
.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.overlay-loader p,
.pref-label,
.skill-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.skill-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.skill-bar {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
}
.skill-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.check-group,
.radio-group,
.social-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-item {
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: 0.3s;
  color: var(--text-primary);
}
.eye-icon,
.input-icon {
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.3s;
}
.social-item:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
  transform: translateX(4px);
}
.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.s-linkedin {
  background: rgba(10, 102, 194, 0.12);
  color: #0a66c2;
}
.s-github {
  background: rgba(36, 41, 46, 0.1);
  color: #24292e;
}
.s-twitter {
  background: rgba(29, 155, 240, 0.12);
  color: #1d9bf0;
}
.alert-body,
.ni-body,
.social-info,
.tl-content,
.toast-body {
  flex: 1;
  min-width: 0;
}
.social-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 1px;
}
.session-name,
.social-url,
.tl-title {
  font-weight: 600;
  color: var(--text-primary);
}
.social-url {
  font-size: 13px;
  truncate: ellipsis;
  text-overflow: ellipsis;
}
.tl-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}
.btn::after,
.eye-icon,
.input-icon,
.section::before,
.select-arrow {
  position: absolute;
}
.danger-item:last-child,
.integ-item:last-child,
.key-item:last-child,
.member-item:last-child,
.sec-item:last-child,
.security-item:last-child,
.session-item:last-child,
.switch-row:last-child,
.tl-item:last-child,
.toggle-row:last-child,
.usage-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.tl-dot {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.session-name,
.tl-title {
  font-size: 13px;
  margin-bottom: 2px;
}
.tl-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 3px;
  line-height: 1.5;
}
.tl-time {
  gap: 4px;
}
.btn-full,
.proj-table,
.skel-text.w-full {
  width: 100%;
}
.proj-table th {
  font-weight: 700;
  padding: 8px 12px;
  text-align: left;
}
.proj-table td {
  padding: 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.proj-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.av-1,
.blog-avatar,
.card-img-placeholder,
.h-card .h-img,
.pa-blue,
.user-card-cover {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.prog-bar {
  background: var(--border-color);
  width: 80px;
}
.ctg-primary::before,
.pbar-primary,
.prog-fill,
.ribbon-grad,
.scard-primary::before {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.form-group {
  display: flex;
  flex-direction: column;
}
.input-wrap input,
.input-wrap select,
.input-wrap textarea {
  width: 100%;
  padding: 11px 13px 11px 38px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  font-family: Sora, sans-serif;
  font-size: 13.5px;
  color: var(--text-primary);
  background: rgba(99, 102, 241, 0.02);
  outline: 0;
  transition: 0.3s;
  appearance: none;
}
.input-wrap textarea {
  min-height: 90px;
  padding-top: 12px;
  line-height: 1.5;
}
.input-wrap input::placeholder,
.input-wrap textarea::placeholder {
  color: #94a3b8;
}
.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.select-arrow {
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
}
.eye-icon {
  right: 12px;
  font-size: 13px;
  cursor: pointer;
}
.btn-revoke,
.sec-action {
  cursor: pointer;
  font-family: Sora, sans-serif;
  transition: 0.2s;
}
.section-divider {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 16px;
}
.form-divider::after,
.form-divider::before,
.section-divider::after,
.sub-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.switch {
  display: inline-block;
  flex-shrink: 0;
}
.security-item,
.switch-row,
.toggle-row {
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  display: flex;
}
.slider {
  inset: 0;
  background: var(--border-color);
}
.slider::before {
  content: "";
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.switch-row,
.toggle-row {
  justify-content: space-between;
  padding: 12px 0;
}
.info-val,
.toggle-label {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.btn,
.btn-cancel,
.btn-revoke,
.char-count,
.pbar-head,
.sec-action,
.sec-text h5,
.session-badge,
.tag-chip {
  font-weight: 600;
}
.security-item {
  gap: 14px;
  padding: 14px 0;
}
.key-icon,
.ni-icon,
.notif-icon,
.sec-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sec-text h5 {
  font-size: 13.5px;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.blog-date,
.file-size,
.integ-desc,
.member-email,
.product-rating span,
.sec-info p,
.sec-text p,
.session-meta,
.sn-sub,
.switch-sub {
  font-size: 12px;
  color: var(--text-secondary);
}
.sec-action {
  font-size: 12.5px;
  color: var(--primary);
  padding: 6px 14px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: 0 0;
}
.sec-action.danger-btn {
  color: var(--danger);
  border-color: var(--danger);
}
.sec-action.danger-btn:hover {
  background: rgba(239, 68, 68, 0.06);
}
.session-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border-color);
}
.session-device {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.session-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
}
.btn-revoke {
  font-size: 11.5px;
  color: var(--danger);
  padding: 4px 10px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  background: 0 0;
}
.btn-danger-outline:hover,
.btn-revoke:hover {
  background: rgba(239, 68, 68, 0.08);
}
.save-bar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.btn-cancel,
.btn-save {
  display: inline-flex;
  gap: 7px;
  font-size: 13px;
  font-family: Sora, sans-serif;
  transition: 0.3s;
  cursor: pointer;
}
.btn-cancel {
  align-items: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 20px;
}
.btn-cancel:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.btn-save {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-weight: 700;
}
.section,
.toast {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.toast {
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: 14px;
}
.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
  flex-shrink: 0;
}
.integ-name,
.key-name,
.member-name,
.sec-info h5,
.toast-text h5,
.toast-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.toast-close {
  color: var(--text-secondary);
  padding: 4px;
}
@media (max-width: 1100px) {
  .three-col,
  .two-col {
    grid-template-columns: 1fr;
  }
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .search-box {
    display: none;
    min-width: unset;
    flex: 1;
  }
  .content-area {
    padding: 0 14px 30px;
  }
  .avatar-strip {
    padding: 0 16px;
  }
  .profile-identity {
    padding: 14px 16px 18px;
  }
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }
  :root {
    --sidebar-width: 280px;
  }
  .sidebar {
    position: absolute;
    left: -280px;
    height: 100vh;
    z-index: 200;
    transition: left 0.35s;
    width: 280px !important;
  }
  .sidebar.open {
    left: 0;
  }
  .sidebar.collapsed .nav-title span,
  .sidebar.collapsed .sidebar-header span {
    display: inline;
  }
  .sidebar.collapsed .nav-label {
    display: block;
  }
  .content-area,
  .page-header {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.btn-slide,
.btn-slide-r,
.btn-slide-up {
  z-index: 0;
  overflow: hidden;
}
@media (max-width: 480px) {
  .stat-row,
  .stats-row {
    grid-template-columns: 1fr;
  }
  .pagination-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .avatar-strip-right {
    flex-wrap: wrap;
  }
}
.section {
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  animation: 0.5s both fadeInUp;
}
.section::before {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--accent),
    var(--success)
  );
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 12px;
  flex-wrap: wrap;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  gap: 8px;
}
.section-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.5;
}
.code-tag {
  font-size: 11px;
  font-family: monospace;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.code-tag:hover {
  background: rgba(99, 102, 241, 0.18);
}
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.sub-divider {
  height: 1px;
  background: var(--border-color);
  margin: 20px 0;
}
.form-divider,
.sub-label {
  color: var(--text-secondary);
}
.btn {
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
}
.btn::after {
  content: "";
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: transform 0.5s, opacity 0.5s;
  opacity: 0;
}
.btn-slide-r::before,
.btn-slide-up::before,
.btn-slide::before {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  position: absolute;
  inset: 0;
  content: "";
}
.btn:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  transition: none;
}
.btn:focus-visible {
  outline: rgba(99, 102, 241, 0.5) solid 3px;
  outline-offset: 2px;
}
.btn-primary:hover {
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.45);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn-accent:hover,
.btn-dark:hover,
.btn-ghost-accent:hover,
.btn-ghost-danger:hover,
.btn-ghost-success:hover,
.btn-ghost-warning:hover,
.btn-grad-1:hover,
.btn-grad-2:hover,
.btn-grad-3:hover,
.btn-grad-4:hover,
.btn-light:hover,
.btn-neon:hover,
.btn-outline-accent:hover,
.btn-outline-danger:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-warning:hover {
  transform: translateY(-2px);
}
.btn-accent:hover {
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.45);
}
.btn-success:hover {
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.45);
}
.btn-warning:hover {
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45);
}
.btn-danger:hover {
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.45);
}
.btn-dark {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
}
.btn-dark:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.5);
}
.badge-light,
.btn-light {
  background: #f1f5f9;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.btn-light:hover {
  background: #e2e8f0;
}
.alert-outline-primary,
.btn-outline-primary,
.btn-slide {
  background: 0 0;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}
.alert-outline-info,
.btn-outline-accent {
  background: 0 0;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.badge-accent,
.btn-outline-accent:hover {
  background: var(--accent);
  color: #fff;
}
.alert-outline-success,
.btn-outline-success,
.btn-slide-r {
  background: 0 0;
  color: var(--success);
  border: 2px solid var(--success);
}
.badge-success,
.btn-outline-success:hover,
.thead-success th {
  background: var(--success);
  color: #fff;
}
.alert-outline-warning,
.btn-outline-warning {
  background: 0 0;
  color: var(--warning);
  border: 2px solid var(--warning);
}
.badge-warning,
.btn-outline-warning:hover,
.thead-warning th {
  background: var(--warning);
  color: #fff;
}
.alert-outline-danger,
.btn-outline-danger,
.btn-slide-up {
  background: 0 0;
  color: var(--danger);
  border: 2px solid var(--danger);
}
.badge-danger,
.btn-outline-danger:hover,
.filter-item.active .fc-red,
.filter-item.active .filter-count.red,
.thead-danger th {
  background: var(--danger);
  color: #fff;
}
.btn-outline-dark {
  background: 0 0;
  color: var(--text-primary);
  border: 2px solid var(--border-color);
}
.btn-outline-dark:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.btn-ghost-primary {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.btn-ghost-primary:hover,
.icon-box:hover {
  background: rgba(99, 102, 241, 0.18);
  transform: translateY(-2px);
}
.btn-ghost-accent {
  background: rgba(6, 182, 212, 0.1);
  color: var(--accent);
  border: 1px solid rgba(6, 182, 212, 0.15);
}
.btn-ghost-accent:hover {
  background: rgba(6, 182, 212, 0.18);
}
.btn-ghost-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.15);
}
.btn-ghost-success:hover {
  background: rgba(16, 185, 129, 0.18);
}
.btn-ghost-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.15);
}
.btn-ghost-warning:hover {
  background: rgba(245, 158, 11, 0.18);
}
.btn-ghost-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.15);
}
.btn-ghost-danger:hover,
.nab-danger:hover {
  background: rgba(239, 68, 68, 0.18);
}
.btn-xs {
  gap: 5px;
}
.btn-sm {
  gap: 6px;
}
.btn-md {
  padding: 10px 22px;
  font-size: 14px;
}
.btn-lg {
  padding: 13px 28px;
  font-size: 15.5px;
  gap: 10px;
}
.btn-xl {
  padding: 16px 36px;
  font-size: 17px;
  gap: 12px;
  border-radius: 14px;
}
.badge-pill,
.btn-pill {
  border-radius: 100px;
}
.btn-square {
  border-radius: var(--radius-sm);
}
.btn-circle {
  border-radius: 50%;
  padding: 0;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.btn-circle.btn-xs {
  width: 28px;
  height: 28px;
}
.btn-circle.btn-sm {
  width: 34px;
  height: 34px;
}
.btn-circle.btn-lg {
  width: 52px;
  height: 52px;
  font-size: 18px;
}
.btn-circle.btn-xl {
  width: 62px;
  height: 62px;
  font-size: 22px;
}
.btn-disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.cs-dropdown,
.split-menu {
  box-shadow: var(--shadow-md);
}
.btn-loading {
  cursor: wait;
  opacity: 0.8;
}
.btn-loading::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: 0.7s linear infinite spin;
}
.btn-icon-left i,
.btn-icon-right i {
  font-size: 13px;
  transition: transform 0.25s;
}
.btn-icon-left:hover i {
  transform: translateX(-2px);
}
.btn-icon-right:hover i {
  transform: translateX(2px);
}
.btn-icon-spin:hover i {
  animation: 0.6s linear infinite spin;
}
.btn-icon-bounce:hover i {
  animation: 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both shake;
}
@keyframes shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-2px);
  }
}
.badge-grad-1,
.btn-grad-1 {
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  color: #fff;
}
.btn-grad-1:hover {
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
  filter: brightness(1.05);
}
.badge-grad-2,
.btn-grad-2 {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
}
.btn-grad-2:hover {
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
.badge-grad-3,
.btn-grad-3 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
}
.btn-grad-3:hover {
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}
.badge-grad-4,
.btn-grad-4,
.btn-jelly {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
}
.btn-grad-4:hover {
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}
.btn-glow:hover,
.btn-grad-5:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
}
.badge-grad-5,
.btn-grad-5 {
  background: linear-gradient(135deg, #0f172a, #6366f1);
  color: #fff;
}
.btn-glow,
.btn-primary,
.btn-shimmer,
.pb-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
}
.btn-glow {
  animation: 2s ease-in-out infinite glowPulse;
}
@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 22px rgba(99, 102, 241, 0.8),
      0 0 40px rgba(99, 102, 241, 0.3);
  }
}
.btn-glow:hover {
  animation: none;
}
.btn-shimmer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  animation: 2.4s infinite shimmer;
}
@keyframes shimmer {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
.btn-3d {
  background: var(--primary);
  color: #fff;
  border-bottom: 4px solid var(--primary-dark);
  border-radius: var(--radius-md);
  transform: translateY(0);
}
.btn-3d:hover {
  transform: translateY(-3px);
  border-bottom-width: 6px;
}
.btn-3d:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: none;
}
.btn-slide::before {
  background: var(--primary);
  transform: translateX(-101%);
}
.btn-slide-r:hover::before,
.btn-slide:hover::before,
.drawer-overlay.open .drawer,
.drawer-overlay.open .drawer-left {
  transform: translateX(0);
}
.btn-slide-r:hover,
.btn-slide-up:hover,
.btn-slide:hover,
.card-grad .card-title,
.input-group .fa-search {
  color: #fff;
}
.btn-slide-r::before {
  background: var(--success);
  transform: translateX(101%);
}
.btn-slide-up::before {
  background: var(--danger);
  transform: translateY(101%);
}
.btn-border-anim {
  background: 0 0;
  color: var(--accent);
}
.btn-border-anim::after,
.btn-border-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.btn-border-anim::before {
  border: 2px solid var(--accent);
  transition: transform 0.3s;
}
.btn-border-anim::after {
  border: 2px solid var(--accent);
  transform: scale(1.08);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}
.btn-border-anim:hover::before {
  transform: scale(0.96);
  opacity: 0;
}
.btn-border-anim:hover::after {
  transform: scale(1);
  opacity: 1;
}
.btn-jelly:hover {
  animation: 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) jelly;
}
@keyframes jelly {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.06, 0.94);
  }
  50% {
    transform: scale(0.96, 1.06);
  }
  75% {
    transform: scale(1.04, 0.97);
  }
}
.btn-neon {
  background: 0 0;
  color: #a78bfa;
  border: 2px solid #a78bfa;
  transition: 0.3s;
}
.alert-btn,
.alert-close,
.cs-opt,
.split-menu-item,
.star,
.toast-close-btn {
  transition: 0.2s;
  cursor: pointer;
}
.btn-neon:hover {
  background: #a78bfa;
  color: #fff;
  box-shadow: 0 0 10px #a78bfa, 0 0 30px #a78bfa,
    0 0 60px rgba(167, 139, 250, 0.4);
}
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:first-child,
.btn-group-outline .btn:first-child,
.split-btn .btn-main {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.btn-group .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.btn-group .btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-group-outline .btn {
  border-radius: 0;
  border-right-width: 0;
}
.btn-group-outline .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-right-width: 2px;
}
.split-btn .btn-caret {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.split-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  z-index: 100;
  min-width: 160px;
}
.split-menu.open {
  display: block;
  animation: 0.25s slideDown;
}
.split-menu-item {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 9px;
}
.cs-opt:hover,
.sn-item:hover,
.split-menu-item:hover {
  background: rgba(99, 102, 241, 0.07);
  color: var(--primary);
}
.btn-badge .badge {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--card-bg);
}
.btn-toggle {
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.badge-primary,
.btn-toggle.toggled,
.filter-item.active .filter-count,
.ib-btn-outline:hover,
.nab-primary,
.thead-primary th {
  background: var(--primary);
  color: #fff;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-warning {
  background: linear-gradient(135deg, var(--warning), #d97706);
  color: #fff;
}
.btn-warning:hover {
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}
.btn-accent {
  background: linear-gradient(135deg, var(--accent), #0ea5e9);
  color: #fff;
}
.btn-accent:hover {
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.4);
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  margin-bottom: 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.alert-icon {
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
}
.alert-msg {
  font-size: 13px;
  opacity: 0.9;
}
.alert-close {
  background: 0 0;
  border: none;
  font-size: 14px;
  opacity: 0.5;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: auto;
  align-self: flex-start;
  flex-shrink: 0;
  color: inherit;
}
.alert-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
.alert-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.alert-btn {
  padding: 5px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  font-family: Sora, sans-serif;
}
.confirm-title,
.modal-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}
.alert-primary-s {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-dark);
}
.alert-success-s {
  background: var(--success);
  color: #fff;
  border-color: #059669;
}
.alert-warning-s {
  background: var(--warning);
  color: #fff;
  border-color: #d97706;
}
.alert-danger-s {
  background: var(--danger);
  color: #fff;
  border-color: #dc2626;
}
.alert-info-s {
  background: var(--accent);
  color: #fff;
  border-color: #0ea5e9;
}
.alert-dark-s {
  background: #1e293b;
  color: #fff;
  border-color: #0f172a;
}
.alert-primary {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.2);
}
.alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.2);
}
.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.2);
}
.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.2);
}
.alert-info {
  background: rgba(6, 182, 212, 0.1);
  color: #0369a1;
  border-color: rgba(6, 182, 212, 0.2);
}
.alert-purple {
  background: rgba(139, 92, 246, 0.1);
  color: #6d28d9;
  border-color: rgba(139, 92, 246, 0.2);
}
.alert-border-primary,
.alert-border-success {
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
body.dark-mode .alert-primary {
  color: #a5b4fc;
}
.body.dark-mode .alert-success {
  color: #6ee7b7;
}
body.dark-mode .alert-warning {
  color: #fcd34d;
}
.body.dark-mode .alert-danger {
  color: #fca5a5;
}
.code-block .cls,
body.dark-mode .alert-info {
  color: #67e8f9;
}
.body.dark-mode .alert-purple {
  color: #c4b5fd;
}
.alert-border-primary {
  background: rgba(99, 102, 241, 0.07);
  border-left: 4px solid var(--primary);
}
.alert-border-success {
  background: rgba(16, 185, 129, 0.07);
  border-left: 4px solid var(--success);
}
.alert-border-danger,
.alert-border-warning {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
.alert-border-warning {
  background: rgba(245, 158, 11, 0.07);
  border-left: 4px solid var(--warning);
}
.alert-border-danger {
  background: rgba(239, 68, 68, 0.07);
  border-left: 4px solid var(--danger);
}
.alert-border-info {
  background: rgba(6, 182, 212, 0.07);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
}
.alert-grad-primary {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15),
    rgba(6, 182, 212, 0.1)
  );
  color: var(--primary);
  border-color: rgba(99, 102, 241, 0.25);
}
.alert-grad-success {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.15),
    rgba(6, 182, 212, 0.1)
  );
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.25);
}
.alert-grad-danger {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.15),
    rgba(245, 158, 11, 0.1)
  );
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.25);
}
.alert-grad-purple {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.15),
    rgba(236, 72, 153, 0.1)
  );
  color: var(--purple);
  border-color: rgba(139, 92, 246, 0.25);
}
.alert.dismissing {
  animation: 0.35s forwards alertDismiss;
}
@keyframes alertDismiss {
  to {
    opacity: 0;
    transform: translateX(30px);
    max-height: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
  }
}
#toastContainer {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast-tl {
  top: 24px;
  left: 24px;
}
.toast-tr {
  top: 24px;
  right: 24px;
}
.toast-bl {
  bottom: 24px;
  left: 24px;
}
.toast-br {
  bottom: 24px;
  right: 24px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  max-width: 380px;
  pointer-events: all;
  transform: translateX(40px);
}
.toast-left.show,
.toast.show {
  opacity: 1;
  transform: translateX(0);
}
.toast.hide {
  opacity: 0;
  transform: translateX(40px);
}
.toast-left,
.toast-left.hide {
  opacity: 0;
  transform: translateX(-40px);
}
.toast-top,
.toast-top.hide {
  opacity: 0;
  transform: translateY(-30px);
}
.toast-bottom.show,
.toast-top.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-bottom,
.toast-bottom.hide {
  opacity: 0;
  transform: translateY(30px);
}
.notif-msg,
.toast-msg {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.toast-close-btn {
  background: 0 0;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  margin-top: 2px;
  flex-shrink: 0;
}
.toast-close-btn:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.06);
}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 14px 14px;
  animation: linear forwards toastProg;
}
@keyframes toastProg {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.drawer-overlay.open,
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
.modal-overlay:not(.open) .modal {
  transform: scale(0.92) translateY(20px);
  opacity: 0;
}
.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-slide-bottom .modal,
.modal-slide-top .modal {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.modal-slide-top:not(.open) .modal {
  transform: translateY(-60px);
  opacity: 0;
}
.modal-slide-bottom:not(.open) .modal {
  transform: translateY(60px);
  opacity: 0;
}
.modal-flip .modal {
  transition: transform 0.4s, opacity 0.3s;
  transform-style: preserve-3d;
}
.modal-flip:not(.open) .modal {
  transform: rotateX(20deg);
  opacity: 0;
}
.modal-sm {
  max-width: 420px;
}
.modal-md {
  max-width: 560px;
}
.modal-lg {
  max-width: 720px;
}
.modal-xl {
  max-width: 900px;
}
.modal-full {
  max-width: 100%;
  max-height: 100vh;
  border-radius: 0;
  height: 100vh;
}
.modal-header {
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.modal-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.badge-soft-purple,
.ib-purple,
.mhi-purple,
.ni-purple,
.si-purple,
.status-draft {
  background: rgba(139, 92, 246, 0.12);
  color: var(--purple);
}
.modal-title {
  font-size: 18px;
  color: var(--text-primary);
  flex: 1;
}
.modal-subtitle,
.urole {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  justify-content: center;
  font-size: 13px;
  transition: 0.2s;
  flex-shrink: 0;
}
.modal-close:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--danger);
  color: var(--danger);
}
.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.confirm-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.confirm-title {
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.confirm-text {
  font-size: 13.5px;
  line-height: 1.6;
}
.form-label {
  margin-bottom: 6px;
  display: block;
}
.form-control {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  background: rgba(99, 102, 241, 0.02);
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.img-preview {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.img-caption {
  font-size: 12.5px;
  margin-top: 10px;
}
.steps-bar {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
}
.step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border-color);
}
.bar,
.dot,
.dot-primary::before,
.notif-badge.notif-primary,
.ntab.active .ntab-count,
.pulse-blue .pulse-ring::after,
.ribbon-primary,
.ripple-core,
.sp-grow,
.step-item.done::after,
.switch input:checked + .slider {
  background: var(--primary);
}
.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin: 0 auto 6px;
  z-index: 1;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  transition: 0.3s;
}
.step-item.active .step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
.step-item.done .step-circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.font-opt .fl,
.icon-color-box span,
.size-item span,
.stat-item p,
.step-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.check-inline .check-sub,
.check-item input[type="checkbox"],
.expand-row,
.radio-inline .check-sub,
.radio-item input[type="radio"],
.step-panel {
  display: none;
}
.step-panel.active {
  display: block;
  animation: 0.35s fadeInUp;
}
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
}
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--card-bg);
  border-left: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-left {
  left: 0;
  right: auto;
  border-left: none;
  border-right: 1px solid var(--card-border);
  transform: translateX(-100%);
}
.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  flex-shrink: 0;
}
.demo-row,
.drawer-footer,
.info-row {
  gap: 10px;
  display: flex;
}
.drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.drawer-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}
.drawer-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
  flex-shrink: 0;
}
.info-row {
  align-items: center;
  padding: 10px 0;
}
.info-lbl {
  font-size: 12.5px;
  width: 110px;
  flex-shrink: 0;
  font-weight: 600;
}
.demo-row {
  flex-wrap: wrap;
  align-items: center;
}
.badge,
.notif-badge {
  justify-content: center;
}
.demo-row + .demo-row {
  margin-top: 14px;
}
.sub-label {
  font-size: 11px;
  font-weight: 700;
  margin: 18px 0 10px;
  display: flex;
  gap: 8px;
}
.badge-dot,
.badge-pulse {
  font-weight: 500;
  gap: 7px;
  font-size: 13px;
}
.code-block {
  background: #0f172a;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 16px;
  font-family: monospace;
  font-size: 12.5px;
  color: #e2e8f0;
  line-height: 1.8;
  overflow-x: auto;
  display: none;
}
.add-to-cart,
.badge,
.btn,
.btn-export,
.cs-search input,
.form-control,
.ghost-btn,
.otp-box,
.overlay-btn,
.pricing-btn,
.pricing-price sup,
.tag .tag-x,
.tag-input,
.tbl-search input,
.tbl-select,
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  font-family: Sora, sans-serif;
}
.code-block.visible {
  display: block;
  animation: 0.3s slideDown;
}
.code-block .kw {
  color: #a78bfa;
}
.code-block .str {
  color: #34d399;
}
.code-block .cmt {
  color: #64748b;
}
.badge {
  border-radius: var(--radius-md);
  transition: 0.25s;
  line-height: 1.2;
}
.badge-dark {
  background: #1e293b;
  color: #fff;
}
.badge-purple {
  background: var(--purple);
  color: #fff;
}
.badge-pink {
  background: var(--pink);
  color: #fff;
}
.badge-orange {
  background: var(--orange);
  color: #fff;
}
.badge-teal {
  background: var(--teal);
  color: #fff;
}
.badge-soft-dark,
.ib-dark {
  background: rgba(30, 41, 59, 0.1);
  color: var(--text-primary);
}
.badge-soft-pink,
.ib-pink,
.ni-pink {
  background: rgba(236, 72, 153, 0.12);
  color: var(--pink);
}
.badge-soft-orange,
.ib-orange {
  background: rgba(249, 115, 22, 0.12);
  color: var(--orange);
}
.badge-soft-teal,
.ib-teal,
.ni-teal {
  background: rgba(20, 184, 166, 0.12);
  color: var(--teal);
}
.badge-outline-primary {
  background: 0 0;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.badge-outline-accent {
  background: 0 0;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.badge-outline-success {
  background: 0 0;
  color: var(--success);
  border: 1.5px solid var(--success);
}
.badge-outline-warning,
.btn-warn-outline {
  background: 0 0;
  color: var(--warning);
  border: 1.5px solid var(--warning);
}
.badge-outline-danger,
.btn-danger-outline {
  background: 0 0;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}
.badge-outline-dark {
  background: 0 0;
  color: var(--text-primary);
  border: 1.5px solid var(--border-color);
}
.badge-outline-purple {
  background: 0 0;
  color: var(--purple);
  border: 1.5px solid var(--purple);
}
.badge-outline-pink {
  background: 0 0;
  color: var(--pink);
  border: 1.5px solid var(--pink);
}
.badge-grad-6 {
  background: linear-gradient(135deg, #14b8a6, #10b981);
  color: #fff;
}
.badge-xs {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 5px;
  gap: 3px;
}
.badge-sm {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 7px;
  gap: 4px;
}
.badge-md {
  font-size: 12px;
  padding: 4px 11px;
}
.badge-lg {
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 10px;
  gap: 6px;
}
.badge-xl {
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 12px;
  gap: 7px;
}
.badge-square {
  border-radius: 4px;
}
.badge-circle {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 11px;
}
.badge-circle.badge-sm {
  width: 20px;
  height: 20px;
  font-size: 10px;
}
.badge-circle.badge-lg {
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.badge-circle.badge-xl {
  width: 38px;
  height: 38px;
  font-size: 15px;
}
.badge-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.bar-accent,
.dot-accent,
.dot-accent::before,
.notif-badge.notif-accent,
.ripple-wrap.rw-accent .ripple-core,
.switch.s-accent input:checked + .slider {
  background: var(--accent);
}
.dot-purple,
.dot-purple::before,
.ribbon-purple {
  background: var(--purple);
}
.dot-pink::before {
  background: var(--pink);
}
.dot-gray::before {
  background: #94a3b8;
}
.pulse-ring {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.pulse-ring::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: 1.6s ease-out infinite ringPulse;
  opacity: 0.7;
}
.pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.pulse-green .pulse-ring::before {
  background: rgba(16, 185, 129, 0.3);
}
.pulse-red .pulse-ring::before {
  background: rgba(239, 68, 68, 0.3);
}
.pulse-orange .pulse-ring::before {
  background: rgba(245, 158, 11, 0.3);
}
.pulse-blue .pulse-ring::before {
  background: rgba(99, 102, 241, 0.3);
}
@keyframes ringPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
.status-badge {
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
}
.notif-badge,
.status-badge i {
  font-size: 11px;
}
.status-archived {
  background: rgba(30, 41, 59, 0.08);
  color: var(--text-secondary);
}
.status-new {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15),
    rgba(6, 182, 212, 0.1)
  );
  color: var(--primary);
}
.icon-badge-wrap .badge-counter,
.notif-badge {
  align-items: center;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
}
.notif-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 6px;
}
.icon-badge-wrap .badge-counter {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  border: 2px solid var(--card-bg);
}
.badge-dismissible,
.icon-box {
  align-items: center;
  transition: 0.3s;
}
.icon-box {
  display: flex;
  justify-content: center;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  cursor: pointer;
}
.icon-box.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}
.icon-box.danger,
.prio-high {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}
.ribbon-wrap {
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  width: 180px;
}
.ribbon {
  position: absolute;
  top: 14px;
  right: -26px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  padding: 4px 32px;
  transform: rotate(45deg);
  letter-spacing: 0.5px;
}
.badge-dismissible,
.tag {
  gap: 6px;
  font-weight: 600;
}
.ribbon-tl {
  top: -2px;
  right: auto;
  left: -30px;
  transform: rotate(-45deg);
}
.badge-dismissible {
  display: inline-flex;
  padding: 5px 8px 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
}
.badge-dismiss-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  border: none;
  color: inherit;
}
.badge-dismiss-btn:hover {
  background: rgba(0, 0, 0, 0.25);
}
.badge-blink {
  animation: 1.2s infinite blink;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.badge-bounce {
  animation: 1.5s infinite badgeBounce;
}
@keyframes badgeBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}
.badge-shake {
  animation: 1.8s infinite badgeShake;
}
@keyframes badgeShake {
  0%,
  100%,
  90% {
    transform: translateX(0);
  }
  93% {
    transform: translateX(-3px);
  }
  96% {
    transform: translateX(3px);
  }
}
.badge-spin-icon i {
  animation: 0.9s linear infinite spin;
}
.badge-scale:hover {
  transform: scale(1.12);
  cursor: default;
}
.badge-shimmer-anim::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: 1.8s infinite shimmerMove;
}
@keyframes shimmerMove {
  0% {
    left: -60%;
  }
  100% {
    left: 120%;
  }
}
.badge-glow-anim {
  animation: 2s infinite glowBadge;
}
@keyframes glowBadge {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.8),
      0 0 26px rgba(99, 102, 241, 0.3);
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  border: 1px solid rgba(99, 102, 241, 0.15);
  transition: 0.25s;
  cursor: default;
}
.tag:hover {
  background: rgba(99, 102, 241, 0.16);
}
.tag-green {
  background: rgba(16, 185, 129, 0.08);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.15);
}
.tag-green:hover {
  background: rgba(16, 185, 129, 0.16);
}
.tag-red {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.15);
}
.tag-red:hover {
  background: rgba(239, 68, 68, 0.16);
}
.tag-yellow {
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.15);
}
.tag-yellow:hover {
  background: rgba(245, 158, 11, 0.16);
}
.tag-cyan {
  background: rgba(6, 182, 212, 0.08);
  color: var(--accent);
  border-color: rgba(6, 182, 212, 0.15);
}
.tag-cyan:hover {
  background: rgba(6, 182, 212, 0.16);
}
.tag-purple {
  background: rgba(139, 92, 246, 0.08);
  color: var(--purple);
  border-color: rgba(139, 92, 246, 0.15);
}
.tag-purple:hover {
  background: rgba(139, 92, 246, 0.16);
}
.tag-pink {
  background: rgba(236, 72, 153, 0.08);
  color: var(--pink);
  border-color: rgba(236, 72, 153, 0.15);
}
.tag-pink:hover {
  background: rgba(236, 72, 153, 0.16);
}
.tag-gray {
  background: rgba(100, 116, 139, 0.08);
  color: var(--text-secondary);
  border-color: rgba(100, 116, 139, 0.15);
}
.tag .tag-x,
.uavatar {
  color: #fff;
  display: flex;
}
.form-control,
.uname {
  color: var(--text-primary);
}
.tag-gray:hover {
  background: rgba(100, 116, 139, 0.16);
}
.tag .tag-x {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  background: currentColor;
  opacity: 0.7;
  cursor: pointer;
  border: none;
  transition: 0.2s;
  flex-shrink: 0;
}
.input-wrap .input-icon-l,
.input-wrap .input-icon-r {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  transition: color 0.3s;
  top: 50%;
  transform: translateY(-50%);
}
.inline-demo {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
}
.inline-demo p {
  font-size: 13.5px;
  line-height: 2.2;
}
.usage-row,
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.uavatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.addon,
.uname {
  font-weight: 600;
}
.av-5,
.uavatar.p {
  background: linear-gradient(135deg, var(--purple), #a78bfa);
}
.uname {
  flex: 1;
  font-size: 13.5px;
}
.cards-grid-2,
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.form-label {
  gap: 5px;
}
.hint {
  font-size: 11.5px;
  margin-top: 3px;
}
.hint.err {
  color: var(--danger);
  gap: 4px;
}
.hint.ok {
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-control {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-primary);
  appearance: none;
}
.form-control.is-valid {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.04);
}
.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.form-control.is-warning {
  border-color: var(--warning);
  background: rgba(245, 158, 11, 0.04);
}
.form-control-filled:focus,
.tbl-striped.tbl-hover tbody tr:hover td {
  background: rgba(99, 102, 241, 0.09);
}
.form-control.is-warning:focus {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.form-control-xs {
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 8px;
}
.form-control-sm {
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 9px;
}
.form-control-md {
  padding: 11px 14px;
  font-size: 13.5px;
}
.form-control-lg {
  padding: 13px 16px;
  font-size: 15px;
  border-radius: 13px;
}
.form-control-xl {
  padding: 16px 18px;
  font-size: 16px;
  border-radius: 14px;
}
.form-control-filled {
  background: rgba(99, 102, 241, 0.06);
  border-color: transparent;
}
.form-control-flat {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom-width: 2px;
  padding-left: 0;
  padding-right: 0;
  background: 0 0;
}
.form-control-flat:focus {
  box-shadow: none;
  border-bottom-color: var(--primary);
  background: 0 0;
}
.form-control-ghost {
  background: 0 0;
  border-color: transparent;
}
.input-wrap .input-icon-l {
  left: 13px;
  color: var(--text-secondary);
}
.input-wrap .input-icon-r {
  right: 13px;
  color: var(--text-secondary);
}
.input-wrap .eye-icon {
  pointer-events: all;
  cursor: pointer;
}
.char-count,
.copy-toast,
.input-icon {
  pointer-events: none;
}
.has-icon,
.input-wrap.has-l .form-control {
  padding-left: 40px;
}
.input-wrap.has-r .form-control {
  padding-right: 40px;
}
.input-wrap.has-l.has-r .form-control {
  padding-left: 40px;
  padding-right: 40px;
}
.input-wrap:focus-within .input-icon-l,
.input-wrap:focus-within .input-icon-r {
  color: var(--primary);
}
.h-card,
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .form-control {
  border-radius: 0;
  flex: 1;
  z-index: 1;
}
.input-group .addon:first-child,
.input-group .form-control:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.input-group .addon:last-child,
.input-group .form-control:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.input-group .form-control:only-child {
  border-radius: var(--radius);
}
.addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  font-size: 13px;
  color: var(--text-secondary);
  transition: 0.3s;
}
.addon-btn {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  cursor: pointer;
}
.addon-btn:hover,
.nab-primary:hover {
  background: var(--primary-dark);
}
.input-group .addon:not(:first-child),
.input-group .form-control:not(:first-child) {
  border-left: none;
}
.input-group .addon:not(:last-child),
.input-group .form-control:not(:last-child) {
  border-right: none;
}
.check-item,
.radio-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  user-select: none;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  transition: 0.3s;
}
.check-item.checked,
.radio-item.selected {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.07);
}
.custom-checkbox,
.custom-radio {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.3s;
  margin-top: 1px;
  background: var(--bg-primary);
}
.custom-radio,
.dot,
.ib-btn-icon.circle,
.ib-circle,
.orbit,
.skel-circle,
.slider::before,
.sp-grad::before,
.sp-grow,
.spinner {
  border-radius: 50%;
}
.check-item.checked .custom-checkbox,
.radio-item.selected .custom-radio {
  background: var(--primary);
  border-color: var(--primary);
}
.check-item.checked .custom-checkbox::after {
  content: "✓";
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.badge::before,
.card-top-grad::before,
.orbit::before,
.plan-card.selected .plan-radio::after,
.scard::before,
.slider::before,
.sp-grad::before {
  content: "";
  content: "";
}
.radio-item.selected .custom-radio::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  display: block;
}
.check-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}
.check-sub,
.sc-desc,
.tgl-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.check-inline,
.color-row,
.radio-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.check-inline .check-item,
.radio-inline .radio-item {
  flex: 0 0 auto;
  padding: 8px 14px;
  gap: 8px;
}
.check-item.c-success.checked .custom-checkbox {
  background: var(--success);
  border-color: var(--success);
}
.card-outline-success,
.check-item.c-success:hover,
.ripple-wrap.rw-success .ripple-ring {
  border-color: var(--success);
}
.check-item.c-danger.checked .custom-checkbox {
  background: var(--danger);
  border-color: var(--danger);
}
.card-outline-danger,
.check-item.c-danger:hover,
.ripple-wrap.rw-danger .ripple-ring {
  border-color: var(--danger);
}
.check-item.c-warning.checked .custom-checkbox {
  background: var(--warning);
  border-color: var(--warning);
}
.card-outline-warning,
.check-item.c-warning:hover,
.ripple-wrap.rw-warning .ripple-ring {
  border-color: var(--warning);
}
.check-item.c-accent.checked .custom-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}
.check-item.c-accent:hover,
.ripple-wrap.rw-accent .ripple-ring {
  border-color: var(--accent);
}
.native-cb,
.native-radio {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.native-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
}
.skel-avatar,
.switch {
  flex-shrink: 0;
}
.switch-wrap {
  gap: 12px;
  cursor: pointer;
}
.slider::before {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.switch.s-lg {
  width: 56px;
  height: 30px;
}
.switch.s-lg .slider::before {
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
}
.switch.s-lg input:checked + .slider::before {
  transform: translateX(26px);
}
.switch.s-sm {
  width: 34px;
  height: 18px;
}
.switch.s-sm .slider::before {
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
}
.switch.s-sm input:checked + .slider::before {
  transform: translateX(16px);
}
.loader-label span,
.switch-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: 0;
  cursor: pointer;
  transition: 0.3s;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
  transition: 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
input[type="range"].r-success {
  accent-color: var(--success);
}
input[type="range"].r-success::-webkit-slider-thumb {
  background: var(--success);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}
input[type="range"].r-warning {
  accent-color: var(--warning);
}
input[type="range"].r-warning::-webkit-slider-thumb {
  background: var(--warning);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}
input[type="range"].r-danger {
  accent-color: var(--danger);
}
input[type="range"].r-danger::-webkit-slider-thumb {
  background: var(--danger);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.range-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 4px;
}
.file-drop {
  border: 2px dashed var(--border-color);
  border-radius: 14px;
  padding: 36px 20px;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.file-drop.dragover,
.file-drop:hover,
.font-opt.selected {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}
.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.file-drop-icon {
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 12px;
  opacity: 0.7;
}
.file-drop-title,
.product-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.danger-info p,
.file-drop-sub,
.page-info,
.stat-info p {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.file-drop-browse {
  color: var(--primary);
  font-weight: 700;
}
.col-primary,
.cs-opt.selected,
.cs-tag {
  font-weight: 600;
  color: var(--primary);
}
.file-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.file-preview-item {
  gap: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
}
.file-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}
.cs-tag button,
.file-remove {
  background: 0 0;
  cursor: pointer;
}
.file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.file-remove {
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  transition: 0.2s;
  padding: 4px;
}
.cs-trigger {
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: 0.3s;
  background: var(--bg-primary);
  font-size: 13.5px;
  color: var(--text-primary);
}
.cs-trigger:hover,
.custom-select.open .cs-trigger {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.03);
}
.cs-trigger-icon {
  color: var(--text-secondary);
  font-size: 12px;
  transition: transform 0.3s;
}
.custom-select.open .cs-trigger-icon {
  transform: rotate(180deg);
}
.cs-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  z-index: 100;
  overflow: hidden;
  animation: 0.25s slideDown;
}
.cs-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}
.cs-search input {
  width: 100%;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  outline: 0;
}
.cs-options {
  max-height: 200px;
  overflow-y: auto;
}
.cs-opt {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
}
.cs-opt.selected::after {
  content: "✓";
  margin-left: auto;
  font-size: 12px;
}
.cs-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.cs-tag {
  display: inline-flex;
  gap: 4px;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
}
.cs-tag button {
  border: none;
  color: var(--primary);
  font-size: 10px;
  padding: 0 1px;
}
input[type="color"] {
  padding: 4px 8px;
  height: 44px;
  cursor: pointer;
  border-radius: var(--radius);
}
.page-btns,
.stars {
  display: flex;
  gap: 4px;
}
.star {
  font-size: 24px;
  color: #d1d5db;
}
.star.hover,
.star:hover {
  color: var(--warning);
  transform: scale(1.15);
}
.otp-wrap {
  display: flex;
  gap: 10px;
}
.otp-box {
  width: 48px;
  height: 54px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-primary);
  outline: 0;
  transition: 0.3s;
}
.otp-box:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.btn-primary:hover,
.ib-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
}
.btn-success:hover {
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
}
.btn-danger:hover {
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}
.pbar-head {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.pbar-track {
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
}
.pbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pbar-success {
  background: linear-gradient(90deg, var(--success), #34d399);
}
.pbar-warning {
  background: linear-gradient(90deg, var(--warning), #fbbf24);
}
.pbar-danger {
  background: linear-gradient(90deg, var(--danger), #f87171);
}
.pbar-thin .pbar-track {
  height: 4px;
}
.pbar-thick .pbar-track {
  height: 14px;
  border-radius: 7px;
}
.pbar-striped .pbar-fill {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: 1s linear infinite stripes;
}
.sp-grad::before,
.spinner {
  animation: 0.75s linear infinite spin;
}
@keyframes stripes {
  to {
    background-position: 20px 0;
  }
}
.char-count {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 11px;
  color: var(--text-secondary);
}
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  min-height: 46px;
  align-items: center;
  transition: 0.3s;
  background: var(--bg-primary);
  cursor: text;
}
.tag-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12.5px;
}
.tag-chip button {
  background: 0 0;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: var(--primary);
  padding: 0 1px;
  line-height: 1;
}
.tag-input {
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 13px;
  min-width: 80px;
  flex: 1;
}
.tag-input::placeholder {
  color: #94a3b8;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.toast-fixed {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  gap: 12px;
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 280px;
}
.toast-fixed.show,
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.sp-border {
  border-style: solid;
  border-color: rgba(99, 102, 241, 0.2);
  border-top-color: var(--primary);
}
.sp-xs {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.sp-sm {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
}
.sp-md {
  width: 36px;
  height: 36px;
  border-width: 3px;
}
.sp-lg {
  width: 52px;
  height: 52px;
  border-width: 4px;
}
.sp-xl {
  width: 68px;
  height: 68px;
  border-width: 5px;
}
.sp-success {
  border-color: rgba(16, 185, 129, 0.2);
  border-top-color: var(--success);
}
.sp-warning {
  border-color: rgba(245, 158, 11, 0.2);
  border-top-color: var(--warning);
}
.sp-danger {
  border-color: rgba(239, 68, 68, 0.2);
  border-top-color: var(--danger);
}
.sp-accent {
  border-color: rgba(6, 182, 212, 0.2);
  border-top-color: var(--accent);
}
.sp-purple {
  border-color: rgba(139, 92, 246, 0.2);
  border-top-color: var(--purple);
}
.sp-dark {
  border-color: rgba(30, 41, 59, 0.2);
  border-top-color: #1e293b;
}
.sp-white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}
.sp-dual {
  border-style: solid;
  border-top-color: var(--primary);
  border-bottom-color: var(--primary);
  border-left-color: transparent;
  border-right-color: transparent;
}
.sp-dual.sp-accent {
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
}
.sp-dual.sp-success {
  border-top-color: var(--success);
  border-bottom-color: var(--success);
}
.sp-grad::before {
  position: absolute;
  inset: 0;
  background: conic-gradient(transparent 10%, var(--primary));
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #fff 0
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff 0);
}
.sp-grad.sp-success::before {
  background: conic-gradient(transparent 10%, var(--success));
}
.sp-grad.sp-warning::before {
  background: conic-gradient(transparent 10%, var(--warning));
}
.sp-grad.sp-danger::before {
  background: conic-gradient(transparent 10%, var(--danger));
}
.sp-grow {
  animation: 0.9s ease-in-out infinite growPulse;
}
@keyframes growPulse {
  0%,
  100% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.4;
  }
}
.dots {
  gap: 6px;
  align-items: center;
}
.dot {
  width: 10px;
  height: 10px;
  animation: 0.9s ease-in-out infinite dotBounce;
}
.bar:first-child,
.dot:first-child {
  animation-delay: 0s;
}
.bar:nth-child(4),
.dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dotBounce {
  0%,
  100%,
  80% {
    transform: scale(0);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.dot.dot-sm {
  width: 7px;
  height: 7px;
}
.dot.dot-lg {
  width: 14px;
  height: 14px;
}
.dot-wave .dot {
  border-radius: 3px;
  animation: 1.2s ease-in-out infinite dotWave;
}
@keyframes dotWave {
  0%,
  100%,
  60% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}
.dot-fade .dot {
  animation: 1.2s ease-in-out infinite dotFade;
}
@keyframes dotFade {
  0%,
  100%,
  80% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}
.bars {
  gap: 4px;
  align-items: flex-end;
  height: 32px;
}
.bar {
  width: 5px;
  border-radius: 3px;
  animation: 1.1s ease-in-out infinite barGrow;
}
.bar:nth-child(5) {
  animation-delay: 0.4s;
}
@keyframes barGrow {
  0%,
  100% {
    height: 8px;
    opacity: 0.5;
  }
  50% {
    height: 28px;
    opacity: 1;
  }
}
.orbit {
  position: relative;
  border: 3px solid rgba(99, 102, 241, 0.15);
}
.orbit::before {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary);
  animation: 0.8s linear infinite spin;
}
.orbit-success::before {
  border-top-color: var(--success);
}
.orbit-warning::before {
  border-top-color: var(--warning);
}
.ripple-wrap {
  position: relative;
  align-items: center;
  justify-content: center;
}
.ripple-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: 1.4s ease-out infinite rippleAnim;
}
.ripple-ring:nth-child(2) {
  animation-delay: 0.5s;
}
.ripple-ring:nth-child(3) {
  animation-delay: 1s;
}
.ripple-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
@keyframes rippleAnim {
  0% {
    width: 14px;
    height: 14px;
    opacity: 0.8;
  }
  100% {
    width: 52px;
    height: 52px;
    opacity: 0;
  }
}
.prog-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(99, 102, 241, 0.15);
  position: relative;
}
.prog-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.prog-indeterminate .prog-fill {
  width: 40%;
  animation: 1.4s ease-in-out infinite indeterminate;
  position: absolute;
}
@keyframes indeterminate {
  0% {
    left: -40%;
    right: 100%;
  }
  100%,
  60% {
    left: 100%;
    right: -40%;
  }
}
.ctg-success::before,
.prog-success .prog-fill,
.scard-success::before {
  background: linear-gradient(90deg, var(--success), var(--teal));
}
.ctg-warning::before,
.prog-warning .prog-fill,
.scard-warning::before {
  background: linear-gradient(90deg, var(--warning), var(--orange));
}
.ctg-danger::before,
.prog-danger .prog-fill,
.scard-danger::before {
  background: linear-gradient(90deg, var(--danger), var(--pink));
}
.skel {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--border-color) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: 1.5s ease-in-out infinite skelShimmer;
  border-radius: 6px;
}
@keyframes skelShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skel-text {
  height: 14px;
  margin-bottom: 10px;
}
.skel-text.w-75 {
  width: 75%;
}
.skel-text.w-50 {
  width: 50%;
}
.skel-text.w-33 {
  width: 33%;
}
.skel-rect {
  border-radius: 10px;
}
.skel-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.skel-avatar-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skel-btn {
  height: 36px;
  border-radius: 10px;
}
.skel-badge {
  height: 22px;
  border-radius: 20px;
}
.skel-img {
  width: 100%;
  border-radius: 12px;
}
.skel-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px;
}
.ghost-btn,
.overlay-btn {
  padding: 9px 20px;
  font-size: 13px;
  transition: 0.3s;
  cursor: pointer;
}
.skel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.overlay-demo {
  position: relative;
  border-radius: 14px;
}
.overlay-loader {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  border-radius: 14px;
  transition: 0.3s;
}
body.dark-mode .overlay-loader {
  background: rgba(15, 23, 42, 0.85);
}
.overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
}
.ghost-btn {
  background: 0 0;
  color: var(--text-secondary);
  border-radius: 10px;
  font-weight: 600;
}
.card-header-title,
.card-title,
.stat-info h4 {
  color: var(--text-primary);
}
.btn-export:hover,
.btn-outline:hover,
.cat-tab:hover,
.expand-btn:hover,
.ghost-btn:hover,
.nab-outline:hover,
.ni-more:hover,
.page-btn:hover:not(:disabled),
.pb-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.loader-label {
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card-body {
  padding: 20px;
}
.card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.card-text {
  font-size: 13px;
  line-height: 1.65;
}
.card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header-title {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}
.card-img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cards-grid-4,
.expand-grid {
  grid-template-columns: repeat(4, 1fr);
}
.cards-grid-4 {
  display: grid;
  gap: 16px;
}
.stat-card {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stat-info h4 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 2px;
}
.stat-trend {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
.card-top-grad::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
}
.card-grad-1,
.card-grad-2,
.card-grad-3,
.card-grad-4,
.card-grad-5 {
  color: #fff;
  border: none;
}
.ctg-purple::before,
.scard-purple::before {
  background: linear-gradient(90deg, var(--purple), var(--pink));
}
.card-grad-1 {
  background: linear-gradient(135deg, #6366f1, #06b6d4);
}
.card-grad-2 {
  background: linear-gradient(135deg, #10b981, #06b6d4);
}
.card-grad-3 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.card-grad-4 {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}
.card-grad-5 {
  background: linear-gradient(135deg, #0f172a, #6366f1);
}
.card-grad .card-text {
  color: rgba(255, 255, 255, 0.85);
}
.card-grad .card-footer {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.card-img-placeholder {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.6);
}
.user-card-cover {
  height: 80px;
  position: relative;
}
.user-card-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success), #34d399);
  border: 4px solid var(--card-bg);
  position: absolute;
  bottom: -30px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.user-card-body {
  padding: 40px 20px 18px;
}
.user-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.user-card-role {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.user-card-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
}
.uc-stat h5 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}
.user-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.uc-tag {
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}
.pricing-card {
  padding: 28px 24px;
  position: relative;
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
}
.pb-outline,
.tbl-borderless thead {
  background: 0 0;
}
.pricing-plan {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.pricing-price {
  font-family: "Playfair Display", serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.btn-add,
.icon-btn-demo,
.icon-search-wrap input,
.page-btn,
.per-page select {
  font-family: Sora, sans-serif;
}
.pricing-price sup {
  font-size: 20px;
  vertical-align: top;
  margin-top: 10px;
}
.pricing-period {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cb-col,
.empty-state,
.filter-item-left i,
.stat-item {
  text-align: center;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-primary);
}
.pricing-features li i {
  color: var(--success);
  font-size: 12px;
  width: 14px;
}
.pricing-features li.off {
  color: var(--text-secondary);
  text-decoration: line-through;
}
.plan-feat.off i,
.pricing-features li.off i {
  color: var(--border-color);
}
.pricing-btn {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}
.blog-cat,
.product-badge {
  font-weight: 700;
  padding: 3px 10px;
}
.pb-outline {
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
}
.blog-cat {
  display: inline-block;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  font-size: 11px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.blog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.blog-excerpt {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}
.blog-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--bg-secondary), var(--border-color));
  justify-content: center;
  font-size: 50px;
  position: relative;
}
.av,
.product-fav {
  justify-content: center;
}
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  border-radius: 6px;
}
.product-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: var(--card-bg);
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}
.product-fav:hover {
  transform: scale(1.1);
  color: var(--danger);
}
.product-cat {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.anim-demo-box i,
.filter-item.active .filter-item-left,
.ib-btn-ghost,
.ib-btn-icon,
.ib-btn-outline,
.icon-cell:hover i,
.ni-title b,
.ntab:hover,
.price-now,
.sortable th.asc,
.sortable th.asc::after,
.sortable th.desc {
  color: var(--primary);
}
.product-rating {
  gap: 4px;
  margin-bottom: 10px;
}
.product-rating .stars {
  color: var(--warning);
  font-size: 13px;
}
.product-price {
  gap: 8px;
}
.price-now {
  font-size: 20px;
  font-weight: 800;
}
.price-was {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: line-through;
}
.add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}
.notif-card {
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  transition: 0.3s;
  cursor: pointer;
}
.notif-title {
  color: var(--text-primary);
  margin-bottom: 3px;
}
.notif-time {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 5px;
}
.h-card .h-img {
  width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: rgba(255, 255, 255, 0.8);
}
.h-card .h-body {
  padding: 18px;
  flex: 1;
}
.h-card .h-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.h-card .h-text {
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 10px;
}
.card-hover-lift {
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card-hover-glow:hover {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), var(--shadow-lg);
}
.card-hover-border,
.card-hover-scale {
  transition: 0.3s;
}
.card-hover-scale:hover {
  transform: scale(1.02);
}
.mini-card {
  padding: 18px 20px;
}
.mini-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.icon-box,
.mini-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.mini-card-label {
  font-size: 12px;
  margin-bottom: 2px;
}
.mini-card-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
}
.av,
th {
  font-weight: 700;
}
.mini-card-sub {
  font-size: 12px;
  margin-top: 4px;
}
.pbar-mini {
  height: 5px;
  border-radius: 3px;
  background: var(--border-color);
  margin-top: 12px;
}
.pbar-mini-fill,
.tbl-prog-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.tbl-wrap {
  overflow-x: auto;
  border-radius: 0 0 14px 14px;
}
.tbl-wrap::-webkit-scrollbar {
  height: 6px;
}
.tbl-wrap::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 3px;
}
table {
  width: 100%;
  font-size: 13.5px;
}
th {
  cursor: pointer;
  text-align: left;
  font-size: 11px;
}
td {
  padding: 13px 16px;
  transition: background 0.2s;
}
.tbl-borderless td,
.tbl-borderless th {
  border: none;
}
.tbl-compact td,
.tbl-compact th {
  padding: 8px 12px;
}
.tbl-cozy td,
.tbl-cozy th {
  padding: 16px 18px;
}
.thead-dark th {
  background: #1e293b;
  color: #f1f5f9;
}
.thead-grad th {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff;
}
.row-success td {
  background: rgba(16, 185, 129, 0.07) !important;
}
.row-warning td {
  background: rgba(245, 158, 11, 0.07) !important;
}
.row-danger td {
  background: rgba(239, 68, 68, 0.07) !important;
}
.row-primary td {
  background: rgba(99, 102, 241, 0.07) !important;
}
.sortable th {
  cursor: pointer;
  position: relative;
  padding-right: 28px;
}
.sortable th::after {
  content: "⇅";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  font-size: 12px;
}
.sortable th.asc::after {
  content: "↑";
  opacity: 1;
}
.sortable th.desc::after {
  content: "↓";
  opacity: 1;
  color: var(--primary);
}
.cb-col {
  width: 40px;
}
input[type="checkbox"] {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.cb-col input {
  display: block;
  margin: 0 auto;
}
.av {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}
.badge,
.role-b {
  display: inline-flex;
  gap: 5px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}
.av-6 {
  background: linear-gradient(135deg, var(--pink), #f472b6);
}
.av-7 {
  background: linear-gradient(135deg, var(--teal), #34d399);
}
.av-8 {
  background: linear-gradient(135deg, #f97316, #fbbf24);
}
.badge {
  border-radius: 20px;
}
.badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.b-inactive::before {
  background: var(--text-secondary);
}
.role-b {
  border-radius: 6px;
}
.tbl-prog-wrap {
  min-width: 100px;
}
.tbl-prog-bar {
  height: 5px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}
.act-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.act-btn:hover.view {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(6, 182, 212, 0.08);
}
.act-btn:hover.edit {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}
.act-btn:hover.del {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}
.tbl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
}
.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-add,
.btn-export,
.tbl-search {
  align-items: center;
  gap: 7px;
  transition: 0.3s;
}
.notif-title,
.tbl-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.btn-add,
.cat-tab,
.col-danger,
.col-success,
.col-warning,
.icon-btn-demo,
.icon-count,
.tbl-count {
  font-weight: 600;
}
.tbl-count {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(99, 102, 241, 0.08);
  padding: 2px 10px;
  border-radius: 20px;
}
.per-page select,
.tbl-search input,
.tbl-select {
  color: var(--text-primary);
  outline: 0;
}
.tbl-search {
  display: flex;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 9px;
  padding: 7px 12px;
  min-width: 200px;
}
.tbl-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.tbl-search input {
  border: none;
  background: 0 0;
  font-size: 13px;
  width: 100%;
}
.tbl-search input::placeholder {
  color: var(--text-secondary);
}
.tbl-select {
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 13px;
  background: var(--card-bg);
  cursor: pointer;
}
.btn-add,
.btn-export {
  display: inline-flex;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
}
.btn-export,
.page-btn {
  color: var(--text-secondary);
  font-weight: 600;
}
.btn-export {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 9px;
}
.btn-add {
  color: #fff;
  border: none;
  border-radius: 9px;
}
.page-btn,
.per-page select {
  background: var(--card-bg);
}
.expand-btn,
.page-btn {
  cursor: pointer;
  display: flex;
  transition: 0.2s;
}
.btn-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.tbl-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 10px;
}
.per-page select {
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 12px;
}
.page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  font-size: 12.5px;
  align-items: center;
  justify-content: center;
}
.page-btn.active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.expand-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  align-items: center;
  justify-content: center;
}
.cat-tab.active,
.expand-btn.open {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.expand-row.open {
  display: table-row;
  animation: 0.3s slideDown;
}
.expand-content {
  padding: 16px 20px;
  background: rgba(99, 102, 241, 0.04);
  border-bottom: 1px solid var(--border-color);
}
.expand-grid {
  display: grid;
  gap: 14px;
}
.expand-item label {
  font-weight: 700;
  letter-spacing: 0.6px;
  display: block;
  margin-bottom: 3px;
}
.expand-item span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.tbl-empty i {
  font-size: 38px;
  margin-bottom: 12px;
  opacity: 0.3;
  display: block;
}
.col-success {
  color: var(--success);
}
.col-danger {
  color: var(--danger);
}
.col-warning {
  color: var(--warning);
}
.tbl-stars {
  color: var(--warning);
  font-size: 12px;
}
.icon-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.icon-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(99, 102, 241, 0.06);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
  flex: 1;
  min-width: 260px;
  transition: 0.3s;
}
.cat-tab,
.icon-count {
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 7px 14px;
}
.icon-search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.icon-search-wrap i {
  color: var(--text-secondary);
  font-size: 14px;
}
.icon-search-wrap input {
  border: none;
  background: 0 0;
  outline: 0;
  font-size: 14px;
  color: var(--text-primary);
  width: 100%;
}
.icon-search-wrap input::placeholder {
  color: var(--text-secondary);
}
.cat-tabs,
.ni-actions,
.ni-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.icon-cell,
.size-item {
  flex-direction: column;
}
.cat-tab {
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: var(--card-bg);
}
.icon-count {
  background: rgba(99, 102, 241, 0.06);
  border-radius: 8px;
}
.icon-cell,
.icon-color-box {
  background: var(--bg-primary);
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.icon-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  position: relative;
  overflow: hidden;
}
.icon-cell:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.icon-cell i {
  font-size: 20px;
  color: var(--text-primary);
  transition: color 0.25s;
}
.icon-cell span,
.no-results {
  text-align: center;
  color: var(--text-secondary);
}
.icon-cell span {
  font-size: 10px;
  word-break: break-all;
  line-height: 1.3;
  max-width: 90px;
}
.icon-cell .copy-flash {
  position: absolute;
  inset: 0;
  background: rgba(99, 102, 241, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.no-results {
  padding: 40px 20px;
}
.no-results i {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.3;
}
.size-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.size-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-color-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  min-width: 80px;
}
.ib-grad-1 {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
}
.ib-grad-2 {
  background: linear-gradient(135deg, var(--success), var(--teal));
  color: #fff;
}
.ib-grad-3 {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
}
.ib-grad-4 {
  background: linear-gradient(135deg, var(--warning), var(--orange));
  color: #fff;
}
.ib-xs {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 12px;
}
.ib-sm {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: 15px;
}
.ib-md {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 19px;
}
.ib-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 24px;
}
.ib-xl {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  font-size: 30px;
}
.icon-btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  border: none;
  font-size: 13.5px;
}
.ib-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 10px 20px;
}
.ib-btn-outline {
  background: 0 0;
  border: 1.5px solid var(--primary);
  padding: 9px 18px;
}
.ib-btn-ghost {
  background: rgba(99, 102, 241, 0.08);
  padding: 10px 20px;
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.ib-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.ib-btn-icon:hover {
  background: rgba(99, 102, 241, 0.2);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinRev {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes iconBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(-3px);
  }
}
@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes iconShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@keyframes iconSwing {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-3deg);
  }
}
@keyframes iconFade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@keyframes iconHeartbeat {
  0%,
  100%,
  28%,
  70% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.2);
  }
  42% {
    transform: scale(1.15);
  }
}
@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes iconFlip {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}
.anim-spin {
  animation: 0.8s linear infinite spin;
}
.anim-spin-rev {
  animation: 1.2s linear infinite spinRev;
}
.anim-bounce {
  animation: 1.2s ease-in-out infinite iconBounce;
}
.anim-pulse {
  animation: 1s ease-in-out infinite iconPulse;
}
.anim-shake {
  animation: 1.5s ease-in-out infinite iconShake;
}
.anim-swing {
  animation: 1.5s ease-in-out infinite iconSwing;
  transform-origin: top center;
}
.anim-fade {
  animation: 1.5s ease-in-out infinite iconFade;
}
.anim-heartbeat {
  animation: 1.4s ease-in-out infinite iconHeartbeat;
}
.anim-float {
  animation: 2s ease-in-out infinite iconFloat;
}
.anim-flip {
  animation: 2s ease-in-out infinite iconFlip;
}
.anim-demo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  min-width: 100px;
  transition: 0.3s;
  cursor: default;
}
.anim-demo-box i {
  font-size: 26px;
}
.anim-demo-box span {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.usage-label {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  font-weight: 500;
}
.copy-toast,
.filter-header {
  display: flex;
  align-items: center;
}
.usage-code {
  font-size: 12px;
  font-family: monospace;
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 6px;
}
.copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1e293b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.copy-toast.show {
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 1100px) {
  .cards-grid-3,
  .cards-grid-4,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}
@media (max-width: 768px) {
  .drawer,
  .ribbon-wrap,
  .tbl-search,
  .toolbar-right {
    width: 100%;
  }
  .cards-grid-2,
  .cards-grid-3,
  .cards-grid-4,
  .form-grid-2,
  .form-grid-3,
  .form-grid-4,
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .drawer {
    max-width: 100%;
  }
  .otp-wrap {
    gap: 6px;
  }
  .otp-box {
    width: 40px;
    height: 48px;
    font-size: 18px;
  }
  .h-card {
    flex-direction: column;
  }
  .h-card .h-img {
    width: 100%;
    height: 100px;
  }
  .tbl-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .expand-grid {
    grid-template-columns: 1fr 1fr;
  }
  :root {
    --sidebar-width: 280px;
  }
  .sidebar {
    position: absolute;
    left: -280px;
    height: 100vh;
    z-index: 200;
    transition: left 0.35s;
    width: 280px !important;
  }
  .sidebar.open {
    left: 0;
  }
  .sidebar.collapsed .nav-title span,
  .sidebar.collapsed .sidebar-header span {
    display: inline;
  }
  .sidebar.collapsed .nav-label {
    display: block;
  }
  .search-box {
    min-width: unset;
    flex: 1;
  }
  .content-area,
  .page-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  .icon-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}
.filter-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
}
.filter-header,
.notif-toolbar {
  border-bottom: 1px solid var(--border-color);
}
.filter-header {
  color: var(--text-primary);
}
.filter-item,
.notif-toolbar {
  display: flex;
  align-items: center;
}
.filter-item {
  justify-content: space-between;
}
.empty-sub,
.ni-msg,
.pref-sub {
  color: var(--text-secondary);
}
.notif-main,
.settings-content {
  animation: 0.5s 0.06s both fadeUp;
}
.notif-toolbar {
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.notif-search,
.toolbar-right {
  display: flex;
  align-items: center;
}
.toolbar-right {
  gap: 8px;
}
.unread-badge {
  font-size: 12px;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  padding: 2px 9px;
  border-radius: 20px;
}
.notif-search {
  border: 1px solid var(--border-color);
}
.mark-all-btn,
.ntab {
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
  align-items: center;
}
.mark-all-btn {
  display: inline-flex;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-family: Sora, sans-serif;
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.notif-search input,
.ntab {
  font-size: 13px;
  font-family: Sora, sans-serif;
}
.notif-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px;
  overflow-x: auto;
}
.notif-tabs::-webkit-scrollbar {
  display: none;
}
.ntab {
  padding: 12px 16px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  display: flex;
  gap: 6px;
  background: 0 0;
  border-top: none;
  border-left: none;
  border-right: none;
}
.ntab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.date-group,
.notif-item {
  border-bottom: 1px solid var(--border-color);
  display: flex;
}
.ntab-count {
  font-size: 10px;
  font-weight: 800;
  background: var(--danger);
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
}
.date-group,
.ni-more-btn,
.ni-time,
.ni-time-badge {
  color: var(--text-secondary);
}
.date-group {
  background: var(--bg-secondary);
  align-items: center;
  justify-content: space-between;
}
.notif-item {
  align-items: flex-start;
  gap: 14px;
}
.unread-line {
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.ni-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.2s;
}
.ni-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ni-time,
.ni-time-badge {
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.ni-action-btn,
.ni-more-btn {
  font-size: 12px;
  transition: 0.2s;
  cursor: pointer;
}
.ni-tag,
.prio-badge {
  display: inline-flex;
  align-items: center;
}
.ni-actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ni-action-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-family: Sora, sans-serif;
  border: none;
}
.ni-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.ni-dot,
.ni-dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
  transition: 0.2s;
  flex-shrink: 0;
}
.ni-dot-btn:hover {
  background: var(--primary-dark);
  transform: scale(1.3);
}
.ni-more-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1100px) {
  .page-wrap {
    grid-template-columns: 1fr;
  }
  .notif-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .nav-search-btn {
    display: none;
  }
  .page-wrap {
    padding: 16px 14px 40px;
  }
  .sub-nav {
    padding: 0 16px;
  }
  .notif-sidebar {
    grid-template-columns: 1fr;
  }
  .notif-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .toolbar-right {
    width: 100%;
    justify-content: flex-end;
  }
}
.notif-search,
.notif-toolbar {
  display: flex;
  align-items: center;
}
.notif-toolbar {
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
  flex-wrap: wrap;
}
.notif-search {
  gap: 7px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 7px 12px;
  flex: 1;
  min-width: 180px;
  transition: 0.3s;
}
.notif-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.date-group,
.notif-item {
  border-bottom: 1px solid var(--border-color);
  display: flex;
}
.notif-search input {
  border: none;
  background: 0 0;
  outline: 0;
  color: var(--text-primary);
  width: 100%;
}
.notif-search input::placeholder {
  color: var(--text-secondary);
}
.date-group {
  padding: 9px 18px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  background: var(--bg-secondary);
  align-items: center;
  justify-content: space-between;
}
.date-group-mark {
  font-size: 11.5px;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.ni-avatar,
.ni-title {
  font-size: 13px;
  font-weight: 700;
}
.form-divider,
.form-label,
.plan-name {
  text-transform: uppercase;
}
.notif-item {
  align-items: flex-start;
  gap: 13px;
  padding: 15px 18px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.notif-item.unread {
  background: rgba(99, 102, 241, 0.035);
}
.notif-item.unread:hover {
  background: rgba(99, 102, 241, 0.07);
}
.unread-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 0 2px 2px 0;
}
.ni-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ni-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.ni-title {
  color: var(--text-primary);
  line-height: 1.4;
}
.nab-outline,
.ni-msg {
  color: var(--text-secondary);
}
.ni-msg {
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 7px;
}
.ni-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ni-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.nab,
.ni-more {
  font-size: 12px;
  transition: 0.2s;
  cursor: pointer;
}
.empty-title,
.filter-header,
.nab,
.prio-badge {
  font-weight: 700;
}
.nab {
  padding: 5px 12px;
  border-radius: 7px;
  font-family: Sora, sans-serif;
  border: none;
}
.empty-title,
.sn-title {
  font-family: "Playfair Display", serif;
}
.nab-outline {
  background: 0 0;
  border: 1px solid var(--border-color);
}
.nab-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.ni-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
}
.ni-dot:hover {
  transform: scale(1.4);
}
.ni-more {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: 0 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
}
.prio-critical {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.prio-low {
  background: rgba(100, 116, 139, 0.08);
  color: var(--text-secondary);
}
.empty-title,
.filter-header,
.filter-item-left,
.stat-item h4 {
  color: var(--text-primary);
}
.empty-state {
  padding: 50px 20px;
  display: none;
}
.empty-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(99, 102, 241, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 14px;
}
.empty-title {
  font-size: 19px;
  margin-bottom: 6px;
}
.right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: 0.5s 0.08s both fadeUp;
}
.filter-card,
.settings-nav {
  animation: 0.5s both fadeUp;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
}
.filter-header,
.filter-item {
  display: flex;
  align-items: center;
}
.stat-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
}
.stat-item h4 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 2px;
}
.filter-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}
.filter-header,
.pref-row {
  border-bottom: 1px solid var(--border-color);
}
.filter-header {
  padding: 14px 16px;
  font-size: 13.5px;
  gap: 8px;
}
.filter-list,
.sn-list {
  padding: 6px;
}
.filter-item {
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: 0.2s;
  font-size: 13px;
  font-weight: 600;
}
.filter-item-left,
.pref-row {
  align-items: center;
  display: flex;
}
.filter-item:hover {
  background: rgba(99, 102, 241, 0.06);
}
.filter-item-left {
  gap: 9px;
}
.filter-item-left i {
  width: 15px;
  font-size: 13px;
}
.filter-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 20px;
}
.pref-row {
  justify-content: space-between;
  padding: 12px 16px;
}
.pref-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}
@media (max-width: 1100px) {
  .content-area {
    grid-template-columns: 1fr;
  }
  .right-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
.sc-header,
.sn-item {
  align-items: center;
  gap: 10px;
}
.settings-nav {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  position: sticky;
  top: 20px;
}
.scard,
.sn-item {
  position: relative;
}
.sn-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-color);
}
.sn-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.btn,
.form-control,
.plan-price sup,
.sn-item {
  font-family: Sora, sans-serif;
}
.sn-item {
  display: flex;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: 0.2s;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border: none;
  background: 0 0;
  width: 100%;
  text-align: left;
}
.sn-item i {
  width: 17px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
}
.sn-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  background: var(--danger);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
}
.av-info h4,
.av-preview,
.form-divider,
.form-label,
.sc-title {
  font-weight: 700;
}
.sn-divider {
  height: 1px;
  background: var(--border-color);
  margin: 6px 0;
}
.settings-panel {
  display: none;
}
.settings-panel.active {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.scard {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.scard::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}
.scard-accent::before {
  background: linear-gradient(90deg, var(--accent), var(--teal));
}
.sc-header {
  display: flex;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-color);
}
.sc-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.form-grid-2,
.form-grid-3 {
  display: grid;
  gap: 16px;
}
.sc-title {
  font-size: 14.5px;
  color: var(--text-primary);
}
.form-label,
.input-icon {
  color: var(--text-secondary);
}
.sc-body {
  padding: 22px;
}
.form-grid-2 {
  grid-template-columns: 1fr 1fr;
}
.form-grid-3,
.theme-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
.fg-mb {
  margin-bottom: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 11.5px;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  transition: color 0.3s;
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 11px;
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg-primary);
  outline: 0;
  transition: 0.3s;
  appearance: none;
}
.form-divider,
.form-hint {
  color: var(--text-secondary);
}
.form-control::placeholder {
  color: #94a3b8;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  background: rgba(99, 102, 241, 0.02);
}
.form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-secondary);
}
.input-wrap:focus-within .input-icon {
  color: var(--primary);
}
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}
textarea.form-control {
  min-height: 88px;
  line-height: 1.6;
  padding-top: 12px;
}
.form-hint {
  font-size: 12px;
  margin-top: 3px;
}
.form-divider {
  font-size: 11px;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
}
.av-cam,
.av-preview {
  border-radius: 50%;
  color: #fff;
}
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
  margin-top: 20px;
}
.av-preview,
.avatar-section {
  align-items: center;
  display: flex;
}
.avatar-section {
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
.av-preview {
  width: 84px;
  height: 84px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  justify-content: center;
  font-size: 28px;
  border: 4px solid var(--card-bg);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.av-cam {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: var(--primary);
  border: 2px solid var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.btn,
.tgl-label {
  font-weight: 600;
  font-size: 13.5px;
}
.av-info h4,
.tgl-label {
  color: var(--text-primary);
}
.av-info h4 {
  font-size: 14px;
  margin-bottom: 3px;
}
.av-info p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.av-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.btn,
.toggle-row {
  align-items: center;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-color);
  border-radius: 22px;
  transition: 0.3s;
}
.slider::before {
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-color);
  gap: 14px;
}
.btn {
  display: inline-flex;
  gap: 7px;
  cursor: pointer;
  transition: 0.25s;
  border-radius: 10px;
  border: none;
  padding: 10px 20px;
}
.sec-icon,
.sec-item {
  display: flex;
  align-items: center;
}
.color-swatch,
.font-opt,
.plan-card,
.plan-radio,
.theme-prev {
  transition: 0.3s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.btn-success {
  background: linear-gradient(135deg, var(--success), #059669);
  color: #fff;
}
.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}
.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  color: #fff;
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}
.btn-outline {
  background: 0 0;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-color);
}
.btn-ghost {
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.sec-item,
.session-item {
  border-bottom: 1px solid var(--border-color);
}
.btn-warn-outline:hover {
  background: rgba(245, 158, 11, 0.08);
}
.btn-sm {
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 9px;
}
.btn-xs {
  padding: 5px 10px;
  font-size: 11.5px;
  border-radius: 7px;
}
.sec-item {
  gap: 14px;
  padding: 14px 0;
}
.sec-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.sec-status,
.session-item {
  align-items: center;
  display: flex;
}
.sec-status {
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}
.session-item {
  gap: 13px;
  padding: 12px 0;
}
.session-dev {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.session-name,
.toast-body h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.badge-current,
.plan-badge,
.pw-label {
  font-size: 11px;
  font-weight: 700;
}
.badge-current {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  padding: 2px 9px;
  border-radius: 20px;
}
.pw-strength {
  margin-top: 8px;
  display: none;
}
.plan-card {
  border: 2px solid var(--border-color);
  border-radius: 13px;
  padding: 18px;
  cursor: pointer;
  position: relative;
}
.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  padding: 3px 14px;
  border-radius: 20px;
}
.plan-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}
.plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  margin-bottom: 2px;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.plan-feat.off,
.plan-period {
  color: var(--text-secondary);
}
.plan-price sup {
  font-size: 14px;
  margin-top: 7px;
  font-weight: 700;
}
.plan-period {
  font-size: 12px;
  margin-bottom: 14px;
}
.is-connected,
.plan-feat i {
  color: var(--success);
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.plan-feat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}
.plan-feat i {
  font-size: 11px;
  width: 13px;
}
.plan-radio {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
}
.plan-card.selected .plan-radio {
  border-color: var(--primary);
  background: var(--primary);
}
.integ-item,
.key-item,
.member-item {
  border-bottom: 1px solid var(--border-color);
}
.plan-card.selected .plan-radio::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.integ-item,
.key-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0;
}
.integ-logo,
.is-connected {
  display: flex;
  align-items: center;
}
.integ-logo {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
}
.is-connected,
.is-disconnected {
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}
.is-disconnected,
.member-item {
  align-items: center;
  display: flex;
}
.is-disconnected {
  color: var(--text-secondary);
}
.member-item {
  gap: 13px;
  padding: 13px 0;
}
.member-av {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.key-val {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: monospace;
}
.theme-grid {
  display: grid;
  gap: 12px;
}
.theme-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.theme-prev {
  width: 100%;
  height: 70px;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  overflow: hidden;
  position: relative;
}
.theme-opt.selected .theme-prev {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.theme-tick {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
}
.danger-info h5,
.font-opt .fn,
.theme-lbl {
  font-weight: 700;
  color: var(--text-primary);
}
.theme-lbl {
  font-size: 12.5px;
}
.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  flex-shrink: 0;
}
.danger-item,
.toast {
  align-items: center;
  display: flex;
}
.color-swatch:hover {
  transform: scale(1.12);
}
.color-swatch.selected {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
}
.font-opt {
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  cursor: pointer;
  text-align: center;
}
.font-opt .fn {
  font-size: 14px;
  margin-bottom: 2px;
}
.danger-item {
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.danger-info h5 {
  font-size: 13.5px;
  margin-bottom: 3px;
}
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  gap: 12px;
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 280px;
}
.toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.toast-close {
  margin-left: auto;
  cursor: pointer;
  color: var(--text-secondary);
  background: 0 0;
  border: none;
  font-size: 13px;
}
@media (max-width: 1200px) {
  .content-area {
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 1100px) {
  .content-area {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
  }
}
@media (max-width: 768px) {
  .form-grid-2,
  .form-grid-3,
  .right-sidebar {
    grid-template-columns: 1fr;
  }
  :root {
    --sidebar-width: 280px;
  }
  .sidebar {
    position: absolute;
    left: -280px;
    height: 100vh;
    z-index: 200;
    transition: left 0.35s;
    width: 280px !important;
  }
  .sidebar.open {
    left: 0;
  }
  .search-box {
    min-width: unset;
    flex: 1;
  }
  .content-area {
    padding: 14px 14px 50px;
  }
  .page-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .theme-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.content-area {
  padding: 20px 30px 50px;
  flex: 1;
 
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: start;
}

.content-area-settings{
 display: grid;
}
.dashboard-grid .stat-card{display: block;}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



 /* Mail nav in sidebar */
        .mail-nav{margin-top:10px}
        .mail-nav-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary);transition:.3s;user-select:none}
        .mail-nav-item:hover{background:rgba(99,102,241,.08);color:var(--primary)}
        .mail-nav-item.active{background:rgba(99,102,241,.1);color:var(--primary)}
        .mail-nav-left{display:flex;align-items:center;gap:9px}
        .mail-nav-left i{width:16px;text-align:center;font-size:13px}
        .mail-count{font-size:11px;font-weight:700;background:var(--danger);color:#fff;padding:1px 7px;border-radius:20px}
        .mail-count.gray{background:rgba(100,116,139,.15);color:var(--text-secondary)}
        .sidebar.collapsed .mail-nav-item span,.sidebar.collapsed .mail-count{display:none}
        .compose-btn{width:40%;padding:11px 16px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;font-family:Sora,sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.3s;margin-bottom:18px;box-shadow:0 4px 12px rgba(99,102,241,.35);flex-shrink:0;margin-left: 2%;}
        .compose-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(99,102,241,.45)}
        .sidebar.collapsed .compose-btn span{display:none}
        .sidebar.collapsed .compose-btn{padding:11px;border-radius:50%;width:46px;height:46px;margin:0 auto 14px}

        /* ══ MAIN PANEL ══════════════════════════════════════════ */
        .main-panel-inbox{flex:1;display:flex;flex-direction:column;overflow:hidden}

        /* ── TOP NAV ────────────────────────────────────────────── */
        .top-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(90deg,var(--bg-primary),var(--bg-secondary));border-bottom:1px solid var(--border-color);padding:11px 20px;flex-shrink:0;z-index:50}
        .topnavdiv{display:flex;align-items:center;gap:12px;flex:1}
        #menuToggleBtn{border:none;background:transparent;cursor:pointer}
        .search-box{display:flex;align-items:center;gap:8px;background:rgba(99,102,241,.07);border:1px solid var(--border-color);border-radius:11px;padding:8px 14px;min-width:280px;transition:.3s}
        .search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
        .search-box input{flex:1;border:none;background:0 0;outline:0;font-size:13.5px;font-family:Sora,sans-serif;color:var(--text-primary)}
        .search-box input::placeholder{color:var(--text-secondary)}
        .user-actions{display:flex;align-items:center;gap:10px}
        .icon-btn,.theme-toggle{width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--text-primary);transition:.3s;background:rgba(99,102,241,.05);border:1px solid var(--border-color);border-radius:9px;flex-shrink:0}
        .icon-btn:hover,.theme-toggle:hover{background:rgba(99,102,241,.15);transform:scale(1.05)}
        .ndot{width:7px;height:7px;background:var(--danger);border-radius:50%;position:absolute;top:7px;right:7px;animation:2s infinite pulse}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
        .drop-container{position:relative}
        .drop-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:260px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:13px;z-index:9999;box-shadow:var(--shadow-lg);overflow:hidden}
        .drop-menu.active{display:block;animation:.22s fadeIn}
        @keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
        .drop-header{padding:14px 16px;border-bottom:1px solid var(--border-color)}
        .drop-header .dh-name{font-size:14px;font-weight:700;color:var(--text-primary)}
        .drop-header .dh-role{font-size:12px;color:var(--text-secondary)}
        .drop-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:var(--text-secondary);cursor:pointer;border-bottom:1px solid var(--border-color);text-decoration:none;transition:.2s}
        .drop-item:last-child{border-bottom:none}
        .drop-item:hover{background:rgba(99,102,241,.06);color:var(--primary)}
        .drop-item i{width:15px}
        .drop-item.logout{color:var(--danger)}

        /* ══ INBOX BODY (3-col) ══════════════════════════════════ */
        .inbox-body{flex:1;display:flex;overflow:hidden}

        /* ── EMAIL LIST ─────────────────────────────────────────── */
        .email-list-panel{width:340px;flex-shrink:0;border-right:1px solid var(--border-color);display:flex;flex-direction:column;background:var(--bg-primary)}
        .elp-header{padding:14px 16px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
        .elp-title{font-size:14px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px}
        .unread-chip{background:rgba(99,102,241,.1);color:var(--primary);font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
        .elp-actions{display:flex;gap:6px}
        .elp-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:.2s}
        .elp-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(99,102,241,.06)}
        .elp-search{padding:10px 14px;border-bottom:1px solid var(--border-color);flex-shrink:0}
        .elp-search-box{display:flex;align-items:center;gap:7px;background:rgba(99,102,241,.06);border:1px solid var(--border-color);border-radius:9px;padding:7px 12px;transition:.3s}
        .elp-search-box:focus-within{border-color:var(--primary)}
        .elp-search-box i{color:var(--text-secondary);font-size:12px}
        .elp-search-box input{border:none;background:0 0;outline:0;font-size:13px;font-family:Sora,sans-serif;color:var(--text-primary);width:100%}
        .elp-search-box input::placeholder{color:var(--text-secondary)}
        .email-list{flex:1;overflow-y:auto}
        .email-list::-webkit-scrollbar{width:5px}
        .email-list::-webkit-scrollbar-thumb{background:rgba(99,102,241,.2);border-radius:3px}
        .email-item{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:.2s;position:relative}
        .email-item:hover{background:rgba(99,102,241,.04)}
        .email-item.selected{background:rgba(99,102,241,.08);border-left:3px solid var(--primary)}
        .email-item.unread .email-sender{font-weight:700;color:var(--text-primary)}
        .email-item.unread .email-subject{font-weight:600;color:var(--text-primary)}
        .email-item.unread::after{content:"";position:absolute;top:50%;left:5px;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--primary)}
        .email-item.selected.unread::after{background:var(--card-bg)}
        .email-av{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;margin-top:1px}
        .email-content{flex:1;min-width:0}
        .email-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
        .email-sender{font-size:13px;font-weight:500;color:var(--text-secondary);truncate:ellipsis;white-space:nowrap;overflow:hidden;max-width:140px;text-overflow:ellipsis}
        .email-time{font-size:11px;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}
        .email-subject{font-size:13px;font-weight:500;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
        .email-preview{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75}
        .email-tags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
        .etag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px}
        .star-btn{color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;flex-shrink:0;background:none;border:none;padding:2px;margin-top:2px}
        .star-btn.starred,.star-btn:hover{color:var(--warning)}

        /* ── EMAIL VIEW ─────────────────────────────────────────── */
        .email-view-panel{flex:1;display:flex;flex-direction:column;background:var(--bg-secondary);overflow:hidden;transition:.3s}
        .email-view-panel.empty{align-items:center;justify-content:center}
        .empty-inbox{text-align:center;animation:.5s fadeUp}
        @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
        .empty-icon{width:80px;height:80px;border-radius:20px;background:rgba(99,102,241,.08);display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 18px;color:var(--primary)}
        .empty-title{font-family:"Playfair Display",serif;font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
        .empty-sub{font-size:13.5px;color:var(--text-secondary)}

        /* Email view header */
        .ev-header{padding:16px 24px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;background:var(--bg-primary)}
        .ev-actions{display:flex;gap:6px;align-items:center}
        .ev-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:600;font-family:Sora,sans-serif;cursor:pointer;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);transition:.25s}
        .ev-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(99,102,241,.06)}
        .ev-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-color:transparent}
        .ev-btn.primary:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(99,102,241,.4)}
        .ev-btn.danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(239,68,68,.06)}

        /* Email view body */
        .ev-body{flex:1;overflow-y:auto;padding:24px}
        .ev-body::-webkit-scrollbar{width:6px}
        .ev-body::-webkit-scrollbar-thumb{background:rgba(99,102,241,.25);border-radius:3px}
        .ev-subject{font-family:"Playfair Display",serif;font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:16px;letter-spacing:-.5px;line-height:1.3}
        .ev-meta{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:16px 20px;margin-bottom:22px;display:flex;align-items:center;gap:14px}
        .ev-sender-av{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
        .ev-sender-info{flex:1}
        .ev-sender-name{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
        .ev-sender-email{font-size:12.5px;color:var(--text-secondary)}
        .ev-recipients{font-size:12px;color:var(--text-secondary);margin-top:3px}
        .ev-date{font-size:12px;color:var(--text-secondary);white-space:nowrap;flex-shrink:0;text-align:right}
        .ev-date .ev-time{font-size:13px;font-weight:700;color:var(--text-primary);display:block;margin-top:2px}
        .ev-content{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:24px;margin-bottom:20px;line-height:1.8;font-size:14px;color:var(--text-primary)}
        .ev-content p{margin-bottom:14px}
        .ev-content p:last-child{margin-bottom:0}
        .ev-content .greeting{font-size:15px;font-weight:600;margin-bottom:16px}
        .ev-content .signature{border-top:1px solid var(--border-color);padding-top:14px;margin-top:20px;font-size:13px;color:var(--text-secondary)}
        .ev-attachments{margin-bottom:20px}
        .ev-attachments h4{font-size:13px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
        .attachments-row{display:flex;gap:10px;flex-wrap:wrap}
        .attachment{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;cursor:pointer;transition:.2s}
        .attachment:hover{border-color:var(--primary);background:rgba(99,102,241,.04)}
        .att-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
        .att-info .att-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:1px}
        .att-info .att-size{font-size:11.5px;color:var(--text-secondary)}
        .att-download{color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;background:none;border:none;padding:4px}
        .att-download:hover{color:var(--primary)}

        /* Reply area */
        .ev-reply{border-top:1px solid var(--border-color);padding:16px 24px;flex-shrink:0;background:var(--bg-primary)}
        .reply-box{border:1.5px solid var(--border-color);border-radius:12px;overflow:hidden;transition:.3s}
        .reply-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
        .reply-to{padding:10px 14px;border-bottom:1px solid var(--border-color);font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
        .reply-to b{color:var(--text-primary)}
        .reply-input{width:100%;padding:12px 14px;border:none;background:transparent;outline:none;font-family:Sora,sans-serif;font-size:13.5px;color:var(--text-primary);resize:none;min-height:90px;line-height:1.6}
        .reply-input::placeholder{color:var(--text-secondary)}
        .reply-toolbar{padding:10px 12px;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:8px}
        .reply-format-btns{display:flex;gap:4px}
        .rfmt-btn{width:30px;height:30px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
        .rfmt-btn:hover{background:rgba(99,102,241,.08);color:var(--primary);border-color:rgba(99,102,241,.15)}
        .reply-send-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;font-family:Sora,sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:.3s}
        .reply-send-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(99,102,241,.4)}

        /* ══ COMPOSE MODAL ════════════════════════════════════════ */
        .modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:flex-end;justify-content:flex-end;padding:24px}
        .modal-overlay.open{display:flex;animation:.25s fadeIn}
        .compose-modal{width:580px;max-height:90vh;background:var(--card-bg);border-radius:18px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:.3s slideUp}
        @keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
        .cm-header{padding:16px 20px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
        .cm-title{font-size:15px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px}
        .cm-title i{color:var(--primary)}
        .cm-header-actions{display:flex;gap:6px}
        .cm-hbtn{width:30px;height:30px;border-radius:7px;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:.2s}
        .cm-hbtn:hover{border-color:var(--primary);color:var(--primary)}
        .cm-hbtn.danger:hover{border-color:var(--danger);color:var(--danger)}
        .cm-fields{flex-shrink:0}
        .cm-field{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border-color)}
        .cm-field-label{font-size:12px;font-weight:700;color:var(--text-secondary);padding:11px 16px;width:56px;flex-shrink:0;text-transform:uppercase;letter-spacing:.5px}
        .cm-field input{flex:1;border:none;background:transparent;outline:none;font-family:Sora,sans-serif;font-size:13.5px;color:var(--text-primary);padding:11px 0}
        .cm-field input::placeholder{color:var(--text-secondary)}
        .cm-cc-btn{font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer;padding:0 14px;transition:.2s;background:none;border:none;font-family:Sora,sans-serif}
        .cm-cc-btn:hover{color:var(--primary)}
        .cm-cc-row{display:none;border-bottom:1px solid var(--border-color)}
        .cm-cc-row.show{display:flex}
        .cm-subject-field{border-bottom:1px solid var(--border-color)}
        .cm-subject-field input{font-size:14px;font-weight:600;padding:12px 16px;border:none;background:transparent;outline:none;width:100%;font-family:Sora,sans-serif;color:var(--text-primary)}
        .cm-subject-field input::placeholder{color:var(--text-secondary)}
        .cm-body{flex:1;overflow-y:auto;min-height:220px;max-height:350px}
        .cm-body::-webkit-scrollbar{width:5px}
        .cm-body::-webkit-scrollbar-thumb{background:rgba(99,102,241,.2);border-radius:3px}
        .cm-body textarea{width:100%;height:100%;min-height:220px;border:none;background:transparent;outline:none;font-family:Sora,sans-serif;font-size:13.5px;color:var(--text-primary);padding:16px;resize:none;line-height:1.7}
        .cm-body textarea::placeholder{color:var(--text-secondary)}
        .cm-footer{padding:12px 16px;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
        .cm-format-btns{display:flex;gap:4px}
        .cmf-btn{width:30px;height:30px;border-radius:7px;border:none;background:transparent;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
        .cmf-btn:hover{background:rgba(99,102,241,.08);color:var(--primary)}
        .cm-send-actions{display:flex;gap:6px;align-items:center}
        .cm-send-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;font-family:Sora,sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;transition:.3s}
        .cm-send-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(99,102,241,.4)}
        .cm-draft-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);font-family:Sora,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:.3s}
        .cm-draft-btn:hover{border-color:var(--primary);color:var(--primary)}

        /* ── TOAST ───────────────────────────────────────────────── */
        .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:13px 20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;z-index:9999;opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1);min-width:280px}
        .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
        .toast-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
        .toast-body h5{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
        .toast-body p{font-size:12px;color:var(--text-secondary);margin:0}
        .toast-close{margin-left:auto;cursor:pointer;color:var(--text-secondary);background:none;border:none;font-size:13px}

        /* ── RESPONSIVE ───────────────────────────────────────────── */
        @media(max-width:1100px){.email-view-panel{display:none}.email-view-panel.visible{display:flex}.email-list-panel{width:100%}}
        @media(max-width:768px){
            :root{--sidebar-width:260px}
            .sidebar{position:absolute;left:-260px;height:100vh;z-index:200;transition:left .35s;width:260px!important}
            .sidebar.open{left:0}
            .search-box{min-width:unset;flex:1}
            .compose-modal{width:100%;margin:0;border-radius:18px 18px 0 0;max-height:95vh}
            .modal-overlay{padding:0;align-items:flex-end;justify-content:center}
        }