/* =====================================================================
   McMenon / Verve Admin — Dashboard Theme
   ---------------------------------------------------------------------
   One place for every dashboard color. Change a token here and the
   topbar, sidebar, cards, badges and footer all follow.

   Themes (set on <html data-dash-theme="...">):
     ink   — deep navy sidebar + green primary   (default)
     light — white sidebar + green primary
     blue  — refined McMenon blue sidebar + blue primary
   The default is chosen in inclued/header.php ($dash_theme_default);
   users can switch from the palette icon in the topbar.
   ===================================================================== */

:root,
[data-dash-theme="ink"] {
  /* Brand (sampled from the McMenon logo) */
  --dt-green: #5FAE46;
  --dt-green-ink: #3F8A2B;          /* text-safe green on white  */
  --dt-green-soft: rgba(95, 174, 70, .12);
  --dt-blue: #2C86B8;
  --dt-blue-ink: #1F6E99;
  --dt-blue-soft: rgba(44, 134, 184, .11);
  --dt-orange: #F29A1A;             /* icons only                */
  --dt-orange-ink: #A8600A;         /* text-safe orange on white */
  --dt-orange-soft: rgba(242, 154, 26, .14);
  --dt-teal: #1E9E8F;
  --dt-teal-ink: #137A6E;
  --dt-teal-soft: rgba(30, 158, 143, .12);

  /* Primary action color */
  --dt-primary: #4A9A34;
  --dt-primary-hover: #3F8A2B;
  --dt-primary-soft: var(--dt-green-soft);
  --dt-primary-ink: var(--dt-green-ink);

  /* Neutrals */
  --dt-bg: #F4F6F9;
  --dt-surface: #FFFFFF;
  --dt-surface-2: #F8FAFC;
  --dt-border: #E6EAF0;
  --dt-border-strong: #D5DCE5;
  --dt-ink: #16212E;
  --dt-text: #334155;
  --dt-muted: #5B6B7E;
  --dt-faint: #8A97A8;

  /* Shape */
  --dt-radius: 14px;
  --dt-radius-sm: 10px;
  --dt-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --dt-shadow-hover: 0 4px 8px -2px rgba(16, 24, 40, .06), 0 12px 24px -6px rgba(16, 24, 40, .10);

  /* Sidebar */
  --sb-bg: #0F1E2E;
  --sb-border: transparent;
  --sb-text: #A9B6C6;
  --sb-icon: #7D8DA1;
  --sb-hover-bg: rgba(255, 255, 255, .06);
  --sb-hover-text: #FFFFFF;
  --sb-active-bg: rgba(95, 174, 70, .16);
  --sb-active-text: #9BD97F;
  --sb-active-bar: #5FAE46;
  --sb-title: #5E7187;
  --sb-sub-text: #93A2B4;
  --sb-popout-bg: #13263A;

  /* Topbar */
  --tb-bg: #FFFFFF;
  --tb-border: #E6EAF0;
  --tb-icon: #475569;
}

[data-dash-theme="light"] {
  --sb-bg: #FFFFFF;
  --sb-border: #E6EAF0;
  --sb-text: #475569;
  --sb-icon: #8A97A8;
  --sb-hover-bg: #F3F6F9;
  --sb-hover-text: #16212E;
  --sb-active-bg: #EEF7EA;
  --sb-active-text: #3F8A2B;
  --sb-active-bar: #5FAE46;
  --sb-title: #94A3B8;
  --sb-sub-text: #5B6B7E;
  --sb-popout-bg: #FFFFFF;
  --dt-bg: #F6F8FA;
}

[data-dash-theme="blue"] {
  --dt-primary: #1871B3;
  --dt-primary-hover: #135E96;
  --dt-primary-soft: rgba(24, 113, 179, .11);
  --dt-primary-ink: #135E96;

  --sb-bg: #14588C;
  --sb-border: transparent;
  --sb-text: rgba(255, 255, 255, .80);
  --sb-icon: rgba(255, 255, 255, .62);
  --sb-hover-bg: rgba(255, 255, 255, .08);
  --sb-hover-text: #FFFFFF;
  --sb-active-bg: rgba(255, 255, 255, .14);
  --sb-active-text: #FFFFFF;
  --sb-active-bar: #7BC862;
  --sb-title: rgba(255, 255, 255, .55);
  --sb-sub-text: rgba(255, 255, 255, .72);
  --sb-popout-bg: #114B78;
}

/* Dark — the "Command Center" mood. Works for both roles. */
[data-dash-theme="dark"] {
  --dt-green: #5FC14A;
  --dt-green-ink: #7FD46B;
  --dt-green-soft: rgba(95, 193, 74, .15);
  --dt-blue: #4BA3DA;
  --dt-blue-ink: #6FBCEC;
  --dt-blue-soft: rgba(75, 163, 218, .15);
  --dt-orange: #F2A93B;
  --dt-orange-ink: #F6BD63;
  --dt-orange-soft: rgba(242, 169, 59, .16);
  --dt-teal: #2BBFAE;
  --dt-teal-ink: #4FD3C3;
  --dt-teal-soft: rgba(43, 191, 174, .15);

  --dt-primary: #5FC14A;
  --dt-primary-hover: #6FD059;
  --dt-primary-soft: rgba(95, 193, 74, .15);
  --dt-primary-ink: #7FD46B;

  --dt-bg: #0B1220;
  --dt-surface: #121C2D;
  --dt-surface-2: #1A2638;
  --dt-border: #223049;
  --dt-border-strong: #2E405E;
  --dt-ink: #EEF3FA;
  --dt-text: #C3CFDF;
  --dt-muted: #92A2B8;
  --dt-faint: #6E8098;

  --dt-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --dt-shadow-hover: 0 8px 24px -6px rgba(0, 0, 0, .5);

  --sb-bg: #0A1120;
  --sb-border: #1A2638;
  --sb-text: #92A2B8;
  --sb-icon: #6E8098;
  --sb-hover-bg: rgba(255, 255, 255, .05);
  --sb-hover-text: #EEF3FA;
  --sb-active-bg: rgba(95, 193, 74, .15);
  --sb-active-text: #7FD46B;
  --sb-active-bar: #5FC14A;
  --sb-title: #566A85;
  --sb-sub-text: #8496AE;
  --sb-popout-bg: #16233A;

  --tb-bg: #0E1727;
  --tb-border: #1E2B41;
  --tb-icon: #A4B4C9;
}

/* In dark mode the dark logo is invisible — lift it. */
[data-dash-theme="dark"] .logo-box img { filter: brightness(0) invert(1); opacity: .92; }
[data-dash-theme="dark"] .dropdown-menu {
  background: var(--dt-surface);
  border-color: var(--dt-border);
  color: var(--dt-text);
}
[data-dash-theme="dark"] .dropdown-item { color: var(--dt-text); }
[data-dash-theme="dark"] .dropdown-item:hover { background: var(--dt-surface-2); color: var(--dt-ink); }
[data-dash-theme="dark"] .dropdown-divider { border-color: var(--dt-border); }
[data-dash-theme="dark"] .noti-title { background: var(--dt-surface-2); }
[data-dash-theme="dark"] .text-muted { color: var(--dt-muted) !important; }

/* =====================================================================
   Base
   ===================================================================== */
body {
  background: var(--dt-bg);
  color: var(--dt-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--dt-ink); font-family: inherit; }

.btn-primary {
  background: var(--dt-primary);
  border-color: var(--dt-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--dt-primary-hover);
  border-color: var(--dt-primary-hover);
}

/* =====================================================================
   Topbar
   ===================================================================== */
.navbar-custom {
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  box-shadow: none;
}
.logo-box { background: var(--tb-bg); }
.navbar-custom .button-menu-mobile { color: var(--tb-icon); }
.navbar-custom .topnav-menu .nav-link { color: var(--tb-icon); }
.navbar-custom .noti-icon-badge { background: #E5484D; }

.tb-user {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.tb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--dt-primary-soft);
  color: var(--dt-primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex: 0 0 auto;
}
.tb-user-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.tb-user-name { color: var(--dt-ink); font-weight: 600; font-size: 14px; }
.tb-user-role { color: var(--dt-faint); font-size: 12px; }
.tb-user .mdi-chevron-down { color: var(--dt-faint); }
@media (max-width: 767.98px) { .tb-user-text { display: none; } }

.profile-dropdown { min-width: 200px; border-radius: var(--dt-radius-sm); border-color: var(--dt-border); }
.profile-dropdown form { margin: 0; }
.profile-dropdown .tb-logout {
  width: 100%;
  border: 0; background: none;
  text-align: left;
  color: #C2353A;
  font-weight: 600;
}
.profile-dropdown .tb-logout:hover { background: #FDF0F0; }

/* Theme switcher */
.tb-theme-menu { min-width: 220px; padding: 8px; border-radius: var(--dt-radius-sm); border-color: var(--dt-border); }
.tb-theme-menu .tb-theme-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--dt-faint); padding: 4px 8px 8px; text-transform: uppercase; }
.tb-theme-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px; border: 0; background: none;
  border-radius: 8px; color: var(--dt-text); font-size: 14px; text-align: left;
}
.tb-theme-opt:hover { background: var(--dt-surface-2); }
.tb-theme-opt.is-active { background: var(--dt-primary-soft); color: var(--dt-primary-ink); font-weight: 600; }
.tb-swatch { display: inline-flex; width: 30px; height: 20px; border-radius: 5px; overflow: hidden; border: 1px solid var(--dt-border); flex: 0 0 auto; }
.tb-swatch i { flex: 1; }

/* =====================================================================
   Sidebar
   ===================================================================== */
.left-side-menu {
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  box-shadow: none;
}
#sidebar-menu .menu-title {
  color: var(--sb-title);
  font-weight: 700;
  letter-spacing: .1em;
  padding: 14px 24px 8px;
}
#sidebar-menu > ul > li { padding: 0 12px; }
#sidebar-menu > ul > li > a {
  color: var(--sb-text);
  border-radius: 10px;
  padding: 11px 12px;
  margin: 2px 0;
  border-bottom: 0;
  font-weight: 500;
  font-size: 14.5px;
  transition: background .15s ease, color .15s ease;
}
#sidebar-menu > ul > li > a i { color: var(--sb-icon); font-size: 18px; transition: color .15s ease; }
#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus,
#sidebar-menu > ul > li > a:active {
  background: var(--sb-hover-bg);
  color: var(--sb-hover-text);
  border-bottom: 0;
}
#sidebar-menu > ul > li > a:hover i { color: var(--sb-hover-text); }

#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li.mm-active > a {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sb-active-bar);
}
#sidebar-menu > ul > li > a.active i,
#sidebar-menu > ul > li.mm-active > a i { color: var(--sb-active-text); }
#sidebar-menu .menu-arrow { right: 14px; }

#sidebar-menu > ul > li > ul { padding-left: 34px; }
.nav-second-level li a,
.nav-thrid-level li a {
  color: var(--sb-sub-text);
  padding: 7px 12px;
  font-size: 14px;
  border-radius: 8px;
}
.nav-second-level li a:hover,
.nav-second-level li a:focus,
.nav-thrid-level li a:hover,
.nav-thrid-level li a:focus { color: var(--sb-hover-text); }
.nav-second-level li.mm-active > a,
.nav-second-level li > a.active { color: var(--sb-active-text); font-weight: 600; }

/* Collapsed (icon-only) sidebar */
.enlarged .left-side-menu #sidebar-menu > ul > li { padding: 0; }
.enlarged .left-side-menu #sidebar-menu > ul > li > a { border-radius: 0; margin: 0; box-shadow: none; }
.enlarged .left-side-menu #sidebar-menu > ul > li > a:hover,
.enlarged .left-side-menu #sidebar-menu > ul > li:hover > a {
  background: var(--sb-popout-bg);
  color: var(--sb-hover-text);
}
.enlarged .left-side-menu #sidebar-menu > ul > li:hover > ul {
  background-color: var(--sb-popout-bg);
}
.enlarged .left-side-menu #sidebar-menu > ul > li:hover > ul a { color: var(--sb-sub-text); }
.enlarged .left-side-menu #sidebar-menu > ul > li:hover > ul a:hover { color: var(--sb-hover-text); }

/* =====================================================================
   Footer
   ===================================================================== */
.footer {
  background: transparent;
  border-top: 1px solid var(--dt-border);
  color: var(--dt-faint);
  font-size: 13px;
}

/* =====================================================================
   Dashboard page
   ===================================================================== */
.dt-page { padding: 28px 8px 8px; }

.dt-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.dt-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dt-primary-ink);
  margin: 0 0 6px;
}
.dt-title {
  font-size: 28px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.02em; color: var(--dt-ink); margin: 0;
}
.dt-subtitle { color: var(--dt-muted); font-size: 14.5px; margin: 6px 0 0; }
.dt-date {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: 999px;
  color: var(--dt-muted); font-size: 13px; font-weight: 500;
}
.dt-date i { color: var(--dt-faint); font-size: 16px; }

/* ---------- Stat cards ---------- */
.dt-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dt-stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1200px) { .dt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .dt-stats { gap: 12px; }
  .dt-stat { padding: 14px; }
  .dt-stat-num { font-size: 26px; }
  .dt-stat-icon { width: 34px; height: 34px; font-size: 17px; }
  .dt-dot-note { display: none; }
}
@media (max-width: 359.98px) { .dt-stats, .dt-stats.is-2 { grid-template-columns: 1fr; } }

.dt-stat {
  --tone: var(--dt-primary);
  --tone-ink: var(--dt-primary-ink);
  --tone-soft: var(--dt-primary-soft);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: 18px 20px;
  box-shadow: var(--dt-shadow);
  color: inherit;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
a.dt-stat:hover { text-decoration: none; color: inherit; box-shadow: var(--dt-shadow-hover); border-color: var(--dt-border-strong); transform: translateY(-1px); }
.dt-stat.is-green  { --tone: var(--dt-green);  --tone-ink: var(--dt-green-ink);  --tone-soft: var(--dt-green-soft); }
.dt-stat.is-blue   { --tone: var(--dt-blue);   --tone-ink: var(--dt-blue-ink);   --tone-soft: var(--dt-blue-soft); }
.dt-stat.is-orange { --tone: var(--dt-orange); --tone-ink: var(--dt-orange-ink); --tone-soft: var(--dt-orange-soft); }

.dt-stat-top { display: flex; align-items: center; justify-content: space-between; }
.dt-stat-label { color: var(--dt-muted); font-size: 14px; font-weight: 500; margin: 0; }
.dt-stat-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--tone-soft); color: var(--tone);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.dt-stat-num {
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--dt-ink); margin: 0;
  font-variant-numeric: tabular-nums;
}
.dt-stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dt-stat-link { font-size: 13px; font-weight: 600; color: var(--tone-ink); }
.dt-stat-link i { transition: transform .18s ease; display: inline-block; }
a.dt-stat:hover .dt-stat-link i { transform: translateX(3px); }
.dt-dot-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--dt-orange-ink);
}
.dt-dot-note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dt-orange); box-shadow: 0 0 0 3px var(--dt-orange-soft);
}

/* ---------- Panels ---------- */
.dt-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 991.98px) { .dt-grid-2 { grid-template-columns: 1fr; } }

.dt-panel {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  overflow: hidden;
}
.dt-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--dt-border);
}
.dt-panel-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--dt-ink); display: flex; align-items: center; gap: 8px; }
.dt-count {
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  color: var(--dt-muted); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

.dt-link {
  font-size: 13px; font-weight: 600;
  color: var(--dt-primary-ink);
  display: inline-flex; align-items: center; gap: 4px;
}
.dt-link:hover { color: var(--dt-primary-hover); text-decoration: none; }
.dt-link i { transition: transform .18s ease; }
.dt-link:hover i { transform: translateX(3px); }

/* ---------- List rows ---------- */
.dt-list { list-style: none; margin: 0; padding: 0; }
.dt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--dt-border);
  transition: background .15s ease;
}
.dt-row:last-child { border-bottom: 0; }
.dt-row:hover { background: var(--dt-surface-2); }
.dt-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dt-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex: 0 0 auto;
  background: var(--dt-primary-soft); color: var(--dt-primary-ink);
}
.dt-avatar.tone-0 { background: var(--dt-green-soft);  color: var(--dt-green-ink); }
.dt-avatar.tone-1 { background: var(--dt-blue-soft);   color: var(--dt-blue-ink); }
.dt-avatar.tone-2 { background: var(--dt-orange-soft); color: var(--dt-orange-ink); }
.dt-avatar.tone-3 { background: var(--dt-teal-soft);   color: var(--dt-teal-ink); }
.dt-person-text { min-width: 0; }
.dt-name { margin: 0; font-weight: 600; font-size: 14.5px; color: var(--dt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-sub { margin: 2px 0 0; color: var(--dt-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Badges ---------- */
.dt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.dt-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.dt-badge.is-pending  { background: var(--dt-orange-soft); color: var(--dt-orange-ink); }
.dt-badge.is-approved { background: var(--dt-green-soft);  color: var(--dt-green-ink); }
/* Roles are identity, not status — keep them neutral */
.dt-badge.is-role       { background: var(--dt-surface-2); color: var(--dt-muted); border-color: var(--dt-border); }
.dt-badge.is-role::before { display: none; }
.dt-badge.is-role-admin { background: #16212E; color: #FFFFFF; }
.dt-badge.is-role-admin::before { display: none; }
.dt-badge.is-info { background: var(--dt-blue-soft); color: var(--dt-blue-ink); }

/* ---------- Empty state ---------- */
.dt-empty {
  padding: 32px 20px; text-align: center; color: var(--dt-muted); font-size: 14px;
}
.dt-empty i {
  display: inline-flex; width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--dt-surface-2); color: var(--dt-faint);
  font-size: 22px; margin-bottom: 10px;
}
.dt-empty p { margin: 0; }

/* ---------- Section head ---------- */
.dt-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 14px;
}
.dt-section-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--dt-ink); }

/* ---------- App cards (staff) ---------- */
.dt-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1200px) { .dt-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .dt-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .dt-apps { grid-template-columns: 1fr; } }

.dt-app {
  --tone: var(--dt-primary); --tone-ink: var(--dt-primary-ink); --tone-soft: var(--dt-primary-soft);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 14px; height: 100%;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: 18px;
  box-shadow: var(--dt-shadow);
  color: inherit;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.dt-app:hover { text-decoration: none; color: inherit; box-shadow: var(--dt-shadow-hover); border-color: var(--dt-border-strong); transform: translateY(-2px); }
.dt-app.tone-0 { --tone: var(--dt-green);  --tone-ink: var(--dt-green-ink);  --tone-soft: var(--dt-green-soft); }
.dt-app.tone-1 { --tone: var(--dt-blue);   --tone-ink: var(--dt-blue-ink);   --tone-soft: var(--dt-blue-soft); }
.dt-app.tone-2 { --tone: var(--dt-orange); --tone-ink: var(--dt-orange-ink); --tone-soft: var(--dt-orange-soft); }
.dt-app.tone-3 { --tone: var(--dt-teal);   --tone-ink: var(--dt-teal-ink);   --tone-soft: var(--dt-teal-soft); }

.dt-app-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--tone-soft); color: var(--tone);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; overflow: hidden;
}
.dt-app-icon img { width: 26px; height: 26px; object-fit: contain; }
.dt-app-name { margin: 14px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--dt-ink); }
.dt-app-desc {
  margin: 0; color: var(--dt-muted); font-size: 13.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dt-app-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--dt-border);
  font-size: 13px; font-weight: 600; color: var(--tone-ink);
}
.dt-app-foot i { transition: transform .18s ease; }
.dt-app:hover .dt-app-foot i { transform: translate(2px, -2px); }

/* ---------- News card ---------- */
.dt-news {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  padding: 20px;
}
.dt-news-icon {
  width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto;
  background: var(--dt-blue-soft); color: var(--dt-blue);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}
.dt-news-body { min-width: 0; flex: 1; }
.dt-news-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dt-news-date { color: var(--dt-faint); font-size: 13px; }
.dt-news-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--dt-ink); }
.dt-news-desc { margin: 0; color: var(--dt-muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 575.98px) { .dt-news { flex-direction: column; } }

/* =====================================================================
   ===================================================================== 
   FEATURE LAYER
   Command palette, launchpad, bento grid, toasts, FAB, banner,
   activity feed, mini charts, skeletons, empty-state art.
   ===================================================================== 
   ===================================================================== */

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
.dt-page > * { animation: dtFadeUp .32s cubic-bezier(.2, .7, .3, 1) both; }
.dt-page > *:nth-child(2) { animation-delay: .04s; }
.dt-page > *:nth-child(3) { animation-delay: .08s; }
.dt-page > *:nth-child(4) { animation-delay: .12s; }
.dt-page > *:nth-child(5) { animation-delay: .16s; }
@keyframes dtFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================================
   Announcement banner
   ===================================================================== */
.dt-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  margin-bottom: 20px;
  border-radius: var(--dt-radius-sm);
  background: var(--dt-orange-soft);
  border: 1px solid rgba(242, 154, 26, .3);
  color: var(--dt-orange-ink);
}
.dt-banner.is-info { background: var(--dt-blue-soft); border-color: rgba(44, 134, 184, .3); color: var(--dt-blue-ink); }
.dt-banner-icon { font-size: 20px; flex: 0 0 auto; }
.dt-banner-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.dt-banner-text strong { font-weight: 700; }
.dt-banner-text a { color: inherit; text-decoration: underline; }
.dt-banner-close {
  border: 0; background: none; color: inherit; opacity: .6;
  font-size: 20px; line-height: 1; padding: 2px 4px; cursor: pointer;
  border-radius: 6px; flex: 0 0 auto;
}
.dt-banner-close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.dt-banner[hidden] { display: none; }

/* =====================================================================
   Command palette (Ctrl + K)
   ===================================================================== */
.dt-search-trigger {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 12px;
  min-width: 260px;
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  color: var(--dt-faint);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dt-search-trigger:hover { border-color: var(--dt-border-strong); background: var(--dt-surface); }
.dt-search-trigger i { font-size: 17px; }
.dt-search-trigger span { flex: 1; text-align: left; }
.dt-kbd {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px;
  border: 1px solid var(--dt-border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--dt-surface);
  font-size: 11px; font-weight: 600; font-family: inherit;
  color: var(--dt-muted);
  white-space: nowrap;
}
@media (max-width: 1100px) { .dt-search-trigger { min-width: 0; } .dt-search-trigger span, .dt-search-trigger .dt-kbd { display: none; } }

.dt-palette {
  position: fixed; inset: 0; z-index: 1080;
  display: none;
  padding: 10vh 16px 16px;
  background: rgba(11, 18, 32, .45);
  backdrop-filter: blur(3px);
}
.dt-palette.is-open { display: block; animation: dtFade .15s ease both; }
@keyframes dtFade { from { opacity: 0 } to { opacity: 1 } }

.dt-palette-box {
  max-width: 620px; margin: 0 auto;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: 0 24px 60px -12px rgba(16, 24, 40, .35);
  overflow: hidden;
  animation: dtPop .18s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes dtPop { from { opacity: 0; transform: translateY(-8px) scale(.98) } to { opacity: 1; transform: none } }

.dt-palette-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--dt-border);
}
.dt-palette-input-wrap > i { color: var(--dt-faint); font-size: 20px; }
.dt-palette-input {
  flex: 1; border: 0; outline: 0; background: none;
  height: 54px;
  font-size: 16px; color: var(--dt-ink);
  font-family: inherit;
}
.dt-palette-input::placeholder { color: var(--dt-faint); }

.dt-palette-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.dt-palette-group {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dt-faint); padding: 10px 10px 6px;
}
.dt-palette-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px;
  border: 0; background: none; border-radius: 8px;
  color: var(--dt-text); text-align: left; font-size: 14.5px;
  cursor: pointer; text-decoration: none;
}
.dt-palette-item:hover, .dt-palette-item.is-active {
  background: var(--dt-primary-soft);
  color: var(--dt-primary-ink);
  text-decoration: none;
}
.dt-palette-icon {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dt-surface-2); color: var(--dt-muted); font-size: 17px;
}
.dt-palette-item.is-active .dt-palette-icon { background: var(--dt-surface); color: var(--dt-primary-ink); }
.dt-palette-text { flex: 1; min-width: 0; }
.dt-palette-title { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-palette-sub { display: block; font-size: 12.5px; color: var(--dt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-palette-item mark { background: transparent; color: var(--dt-primary-ink); font-weight: 700; padding: 0; }
.dt-palette-hint { font-size: 11px; color: var(--dt-faint); flex: 0 0 auto; }

.dt-palette-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--dt-border);
  background: var(--dt-surface-2);
  font-size: 12px; color: var(--dt-faint);
}
.dt-palette-foot span { display: inline-flex; align-items: center; gap: 5px; }
.dt-palette-empty { padding: 36px 16px; text-align: center; color: var(--dt-muted); font-size: 14px; }

/* =====================================================================
   Toasts
   ===================================================================== */
.dt-toasts {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 1090;
  display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.dt-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #16212E; color: #F1F5F9;
  border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(16, 24, 40, .45);
  font-size: 14px;
  pointer-events: auto;
  animation: dtToastIn .22s cubic-bezier(.2, .7, .3, 1) both;
}
.dt-toast.is-out { animation: dtToastOut .18s ease forwards; }
@keyframes dtToastIn  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes dtToastOut { to { opacity: 0; transform: translateY(8px) } }
.dt-toast-icon { font-size: 19px; flex: 0 0 auto; }
.dt-toast.is-success .dt-toast-icon { color: #7FD46B; }
.dt-toast.is-error   .dt-toast-icon { color: #FF8A8A; }
.dt-toast-text { flex: 1; min-width: 0; }
.dt-toast-action {
  border: 0; background: rgba(255, 255, 255, .12);
  color: #FFFFFF; font-weight: 600; font-size: 13px;
  padding: 5px 11px; border-radius: 7px; cursor: pointer; flex: 0 0 auto;
  font-family: inherit;
}
.dt-toast-action:hover { background: rgba(255, 255, 255, .22); }

/* =====================================================================
   Quick-create FAB
   ===================================================================== */
.dt-fab-wrap { position: fixed; right: 26px; bottom: 26px; z-index: 1040; }
.dt-fab {
  width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--dt-primary); color: #FFFFFF;
  font-size: 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -4px rgba(74, 154, 52, .5);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background .15s ease;
}
.dt-fab:hover { background: var(--dt-primary-hover); transform: scale(1.05); }
.dt-fab i { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.dt-fab-wrap.is-open .dt-fab i { transform: rotate(135deg); }

.dt-fab-menu {
  position: absolute; right: 0; bottom: 66px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dt-fab-wrap.is-open .dt-fab-menu { opacity: 1; visibility: visible; transform: none; }
.dt-fab-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 11px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: 999px;
  box-shadow: var(--dt-shadow);
  color: var(--dt-text); font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none;
}
.dt-fab-item:hover { color: var(--dt-primary-ink); border-color: var(--dt-primary); text-decoration: none; }
.dt-fab-item i { font-size: 18px; color: var(--dt-faint); }
.dt-fab-item:hover i { color: var(--dt-primary); }
@media (max-width: 575.98px) { .dt-fab-wrap { right: 16px; bottom: 16px; } }

/* =====================================================================
   Launchpad (Staff)
   ===================================================================== */
.lp-hero { text-align: center; padding: 10px 0 26px; }
.lp-greet {
  font-size: 30px; font-weight: 700; letter-spacing: -.02em;
  color: var(--dt-ink); margin: 0 0 6px;
}
.lp-sub { color: var(--dt-muted); font-size: 14.5px; margin: 0 0 22px; }
.lp-sub .lp-dot { color: var(--dt-border-strong); margin: 0 8px; }

.lp-search {
  display: flex; align-items: center; gap: 12px;
  width: min(560px, 100%); margin: 0 auto;
  height: 52px; padding: 0 18px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: 999px;
  box-shadow: var(--dt-shadow);
  color: var(--dt-faint); font-size: 15px;
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.lp-search:hover { box-shadow: var(--dt-shadow-hover); border-color: var(--dt-border-strong); transform: translateY(-1px); }
.lp-search i { font-size: 20px; }
.lp-search span { flex: 1; text-align: left; }

.lp-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}
.lp-row-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dt-faint);
}
.lp-row-title i { font-size: 16px; }
.lp-section { margin-bottom: 30px; }

/* App tiles */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.lp-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 24px 14px 20px;
  min-height: 150px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: 18px;
  box-shadow: var(--dt-shadow);
  color: inherit; text-align: center; text-decoration: none;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.lp-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--dt-shadow-hover);
  border-color: var(--dt-border-strong);
  text-decoration: none; color: inherit;
}
.lp-tile:focus-visible { outline: 2px solid var(--dt-primary); outline-offset: 2px; }
.lp-tile.is-dragging { opacity: .4; }
.lp-tile.is-over { border-color: var(--dt-primary); border-style: dashed; }

.lp-tile-icon {
  --tone: var(--dt-primary); --tone-soft: var(--dt-primary-soft);
  width: 60px; height: 60px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-soft); color: var(--tone);
  font-size: 28px; overflow: hidden;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}
.lp-tile:hover .lp-tile-icon { transform: scale(1.06); }
.lp-tile-icon img { width: 34px; height: 34px; object-fit: contain; }
.lp-tile.tone-0 .lp-tile-icon { --tone: var(--dt-green);  --tone-soft: var(--dt-green-soft); }
.lp-tile.tone-1 .lp-tile-icon { --tone: var(--dt-blue);   --tone-soft: var(--dt-blue-soft); }
.lp-tile.tone-2 .lp-tile-icon { --tone: var(--dt-orange); --tone-soft: var(--dt-orange-soft); }
.lp-tile.tone-3 .lp-tile-icon { --tone: var(--dt-teal);   --tone-soft: var(--dt-teal-soft); }

.lp-tile-name {
  font-size: 14.5px; font-weight: 600; color: var(--dt-ink);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-pin {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dt-faint); font-size: 17px;
  opacity: 0; transform: scale(.8);
  transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease;
}
.lp-tile:hover .lp-pin, .lp-pin:focus-visible { opacity: 1; transform: none; }
.lp-pin:hover { background: var(--dt-surface-2); color: var(--dt-orange); }
.lp-pin.is-pinned { opacity: 1; transform: none; color: var(--dt-orange); }
.lp-drag {
  position: absolute; top: 10px; left: 10px;
  color: var(--dt-faint); font-size: 16px; cursor: grab;
  opacity: 0; transition: opacity .15s ease;
}
.lp-tile:hover .lp-drag { opacity: .7; }
.lp-badge-new {
  position: absolute; top: 10px; left: 10px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--dt-primary); color: #FFFFFF;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Announcement strip */
.lp-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  color: inherit; text-decoration: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.lp-strip:hover { box-shadow: var(--dt-shadow-hover); border-color: var(--dt-border-strong); text-decoration: none; color: inherit; }
.lp-strip-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  background: var(--dt-blue-soft); color: var(--dt-blue);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.lp-strip-body { display: block; flex: 1; min-width: 0; }
.lp-strip-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.lp-strip-title {
  display: block;
  margin: 0; font-size: 15px; font-weight: 600; color: var(--dt-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-strip-desc {
  display: block;
  margin: 2px 0 0; font-size: 13.5px; color: var(--dt-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 575.98px) {
  .lp-strip { gap: 12px; padding: 14px; }
  .lp-strip-desc { display: none; }
  .lp-greet { font-size: 24px; }
}
.lp-strip-go { color: var(--dt-faint); font-size: 20px; flex: 0 0 auto; }
.lp-strip:hover .lp-strip-go { color: var(--dt-primary); }

.dt-unread-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dt-primary); flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--dt-primary-soft);
}

/* =====================================================================
   Command Center (Admin bento)
   ===================================================================== */
.cc-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  gap: 16px;
}
.cc-span-2 { grid-column: span 2; }
.cc-span-4 { grid-column: span 4; }
.cc-span-5 { grid-column: span 5; }
.cc-span-6 { grid-column: span 6; }
.cc-span-7 { grid-column: span 7; }
.cc-span-8 { grid-column: span 8; }
.cc-span-12 { grid-column: span 12; }
@media (max-width: 1199.98px) {
  .cc-span-4, .cc-span-5, .cc-span-7, .cc-span-8 { grid-column: span 6; }
  .cc-span-2 { grid-column: span 3; }
}
@media (max-width: 767.98px) {
  .cc-span-4, .cc-span-5, .cc-span-6, .cc-span-7, .cc-span-8 { grid-column: span 12; }
  .cc-span-2 { grid-column: span 6; }
}
@media (max-width: 575.98px) {
  .cc-bento { gap: 12px; }
  .cc-stat-num { font-size: 26px; }
}

/* Dense stat tile */
.cc-stat {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: 16px;
  box-shadow: var(--dt-shadow);
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.cc-stat:hover { text-decoration: none; color: inherit; border-color: var(--dt-border-strong); box-shadow: var(--dt-shadow-hover); transform: translateY(-1px); }
.cc-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-stat-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--dt-muted); }
.cc-stat-icon {
  --tone: var(--dt-primary); --tone-soft: var(--dt-primary-soft);
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-soft); color: var(--tone); font-size: 17px;
}
.cc-stat.is-green  .cc-stat-icon { --tone: var(--dt-green);  --tone-soft: var(--dt-green-soft); }
.cc-stat.is-blue   .cc-stat-icon { --tone: var(--dt-blue);   --tone-soft: var(--dt-blue-soft); }
.cc-stat.is-orange .cc-stat-icon { --tone: var(--dt-orange); --tone-soft: var(--dt-orange-soft); }
.cc-stat.is-teal   .cc-stat-icon { --tone: var(--dt-teal);   --tone-soft: var(--dt-teal-soft); }
.cc-stat-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cc-stat-num {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--dt-ink);
  font-variant-numeric: tabular-nums;
}
.cc-spark { width: 72px; height: 28px; flex: 0 0 auto; opacity: .9; }
.cc-spark path { vector-effect: non-scaling-stroke; }

/* Panel with actions */
.cc-panel {
  display: flex; flex-direction: column;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  overflow: hidden;
  height: 100%;
}
.cc-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--dt-border);
}
.cc-panel-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--dt-ink); display: flex; align-items: center; gap: 8px; }
.cc-panel-body { flex: 1; }
.cc-panel-body.is-pad { padding: 18px; }

/* Approval row with inline actions */
.cc-approve-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--dt-border);
  transition: background .15s ease, opacity .2s ease, transform .2s ease;
}
.cc-approve-row:last-child { border-bottom: 0; }
.cc-approve-row:hover { background: var(--dt-surface-2); }
.cc-approve-row.is-removing { opacity: 0; transform: translateX(14px); }
.cc-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.cc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 8px; border: 1px solid var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cc-btn i { font-size: 15px; }
.cc-btn:hover { background: var(--dt-surface-2); }
.cc-btn.is-approve { border-color: transparent; background: var(--dt-primary); color: #FFFFFF; }
.cc-btn.is-approve:hover { background: var(--dt-primary-hover); }
.cc-btn.is-reject:hover { border-color: #E9A1A4; color: #C2353A; background: #FDF0F0; }
.cc-btn[disabled] { opacity: .55; cursor: default; }
.cc-btn.is-busy i { animation: dtSpin .7s linear infinite; }
@keyframes dtSpin { to { transform: rotate(360deg) } }
@media (max-width: 480px) {
  .cc-approve-row { flex-wrap: wrap; }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; justify-content: center; }
}

/* Activity feed */
.cc-feed { list-style: none; margin: 0; padding: 8px 0; }
.cc-feed-item {
  position: relative;
  display: flex; gap: 12px;
  padding: 10px 18px 10px 18px;
}
.cc-feed-item::before {
  content: ""; position: absolute;
  left: 33px; top: 34px; bottom: -6px;
  width: 1px; background: var(--dt-border);
}
.cc-feed-item:last-child::before { display: none; }
.cc-feed-icon {
  --tone: var(--dt-muted); --tone-soft: var(--dt-surface-2);
  width: 31px; height: 31px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-soft); color: var(--tone); font-size: 16px;
  position: relative; z-index: 1;
  border: 2px solid var(--dt-surface);
}
.cc-feed-icon.is-user { --tone: var(--dt-blue);   --tone-soft: var(--dt-blue-soft); }
.cc-feed-icon.is-news { --tone: var(--dt-orange); --tone-soft: var(--dt-orange-soft); }
.cc-feed-icon.is-app  { --tone: var(--dt-green);  --tone-soft: var(--dt-green-soft); }
.cc-feed-body { min-width: 0; flex: 1; padding-top: 3px; }
.cc-feed-text { margin: 0; font-size: 14px; color: var(--dt-text); line-height: 1.45; }
.cc-feed-text strong { color: var(--dt-ink); font-weight: 600; }
.cc-feed-time { font-size: 12.5px; color: var(--dt-faint); margin: 2px 0 0; }

/* Horizontal bar chart */
.cc-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cc-bar-row { display: flex; flex-direction: column; gap: 6px; }
.cc-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cc-bar-name {
  font-size: 13.5px; font-weight: 500; color: var(--dt-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-bar-val { font-size: 13px; font-weight: 600; color: var(--dt-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cc-bar-track { height: 7px; border-radius: 999px; background: var(--dt-surface-2); overflow: hidden; }
.cc-bar-fill {
  display: block;
  height: 100%; border-radius: 999px;
  background: var(--dt-primary);
  width: 0;
  transition: width .7s cubic-bezier(.2, .7, .3, 1);
}
.cc-bar-row:nth-child(2) .cc-bar-fill { background: var(--dt-blue); }
.cc-bar-row:nth-child(3) .cc-bar-fill { background: var(--dt-orange); }
.cc-bar-row:nth-child(4) .cc-bar-fill { background: var(--dt-teal); }
.cc-bar-row:nth-child(5) .cc-bar-fill { background: var(--dt-faint); }

/* =====================================================================
   Skeletons
   ===================================================================== */
.dt-skel {
  background: linear-gradient(90deg, var(--dt-surface-2) 25%, var(--dt-border) 37%, var(--dt-surface-2) 63%);
  background-size: 400% 100%;
  animation: dtShimmer 1.3s ease infinite;
  border-radius: 6px;
}
@keyframes dtShimmer { from { background-position: 100% 50% } to { background-position: 0 50% } }
.dt-skel-row { display: flex; gap: 12px; align-items: center; padding: 12px 18px; }
.dt-skel-circle { width: 31px; height: 31px; border-radius: 50%; flex: 0 0 auto; }
.dt-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.dt-skel-line { height: 9px; }
.dt-skel-line.is-short { width: 45%; }

/* =====================================================================
   Empty states with art
   ===================================================================== */
.dt-empty-art { width: 92px; height: 72px; margin: 0 auto 12px; display: block; }
.dt-empty-art .ea-bg { fill: var(--dt-surface-2); }
.dt-empty-art .ea-line { stroke: var(--dt-border-strong); stroke-width: 2; fill: none; stroke-linecap: round; }
.dt-empty-art .ea-pop { fill: var(--dt-primary); opacity: .55; }
.dt-empty-title { font-weight: 600; color: var(--dt-ink); margin: 0 0 4px; font-size: 15px; }
.dt-empty p { margin: 0; }
.dt-empty .dt-empty-cta { margin-top: 14px; }

/* =====================================================================
   Notification centre
   ===================================================================== */
.dropdown-lg { width: 330px; }
.noti-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dt-faint); padding: 10px 16px 6px;
}
.noti-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 16px;
  color: var(--dt-text); text-decoration: none;
  border-left: 2px solid transparent;
}
.noti-row:hover { background: var(--dt-surface-2); text-decoration: none; color: var(--dt-text); }
.noti-row.is-new { border-left-color: var(--dt-primary); background: var(--dt-primary-soft); }
.noti-row-icon {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dt-blue-soft); color: var(--dt-blue); font-size: 16px;
}
.noti-row-body { min-width: 0; flex: 1; }
.noti-row-title { margin: 0; font-size: 13.5px; line-height: 1.4; }
.noti-row-title strong { font-weight: 600; color: var(--dt-ink); }
.noti-row-sub { margin: 1px 0 0; font-size: 12px; color: var(--dt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   Breadcrumbs
   ===================================================================== */
.dt-crumbs {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 0; list-style: none;
  font-size: 13px; color: var(--dt-faint);
}
.dt-crumbs a { color: var(--dt-faint); text-decoration: none; }
.dt-crumbs a:hover { color: var(--dt-primary-ink); }
.dt-crumbs li { display: flex; align-items: center; gap: 7px; }
.dt-crumbs li + li::before { content: "/"; color: var(--dt-border-strong); }
.dt-crumbs .is-current { color: var(--dt-text); font-weight: 500; }

/* Make the dark theme's scrollbars match */
[data-dash-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-dash-theme="dark"] ::-webkit-scrollbar-track { background: var(--dt-bg); }
[data-dash-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dt-border-strong); border-radius: 6px; }

/* =====================================================================
   =====================================================================
   SETTINGS PAGE
   ===================================================================== 
   ===================================================================== */

.st-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 991.98px) { .st-layout { grid-template-columns: 1fr; } }

/* ---------- Tab rail ---------- */
.st-rail {
  position: sticky; top: 86px;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 991.98px) {
  .st-rail { position: static; flex-direction: row; overflow-x: auto; }
  .st-tab { white-space: nowrap; }
}
.st-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 0; background: none; border-radius: 9px;
  color: var(--dt-text); font-size: 14.5px; font-weight: 500;
  text-align: left; cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.st-tab:hover { background: var(--dt-surface-2); color: var(--dt-ink); text-decoration: none; }
.st-tab.is-active { background: var(--dt-primary-soft); color: var(--dt-primary-ink); font-weight: 600; }
.st-tab i { font-size: 18px; color: var(--dt-faint); }
.st-tab.is-active i { color: var(--dt-primary); }
.st-tab-badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--dt-orange-soft); color: var(--dt-orange-ink);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Panels ---------- */
.st-panel { display: none; }
.st-panel.is-active { display: block; animation: dtFadeUp .25s cubic-bezier(.2,.7,.3,1) both; }

.st-card {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  margin-bottom: 18px;
  overflow: hidden;
}
.st-card-head { padding: 16px 20px; border-bottom: 1px solid var(--dt-border); }
.st-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--dt-ink); display: flex; align-items: center; gap: 9px; }
.st-card-desc { margin: 4px 0 0; font-size: 13.5px; color: var(--dt-muted); }
.st-card-body { padding: 20px; }
.st-card-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--dt-border);
  background: var(--dt-surface-2);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.st-card-foot .st-foot-note { margin-right: auto; font-size: 13px; color: var(--dt-muted); }

/* ---------- Form grid ---------- */
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-grid .is-full { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .st-grid, .st-grid.is-3 { grid-template-columns: 1fr; } }

.st-field { display: flex; flex-direction: column; gap: 6px; }
.st-label { font-size: 13.5px; font-weight: 600; color: var(--dt-text); }
.st-hint { font-size: 12.5px; color: var(--dt-faint); line-height: 1.5; }

.st-input, .st-select, .st-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--dt-border-strong);
  border-radius: 9px;
  background: var(--dt-surface);
  color: var(--dt-ink);
  font-size: 14.5px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.st-textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.st-textarea.is-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.st-input:focus, .st-select:focus, .st-textarea:focus {
  outline: 0;
  border-color: var(--dt-primary);
  box-shadow: 0 0 0 3px var(--dt-primary-soft);
}
.st-input::placeholder, .st-textarea::placeholder { color: var(--dt-faint); }
.st-input[readonly] { background: var(--dt-surface-2); color: var(--dt-muted); }

.st-input-group { display: flex; gap: 8px; }
.st-input-group .st-input { flex: 1; }

/* Switch */
.st-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; pointer-events: none; }
.st-switch-track {
  width: 42px; height: 24px; border-radius: 999px; flex: 0 0 auto;
  background: var(--dt-border-strong);
  position: relative; transition: background .18s ease;
  margin-top: 1px;
}
.st-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .18s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.st-switch input:checked + .st-switch-track { background: var(--dt-primary); }
.st-switch input:checked + .st-switch-track::after { transform: translateX(18px); }
.st-switch input:focus-visible + .st-switch-track { box-shadow: 0 0 0 3px var(--dt-primary-soft); }
.st-switch-text { min-width: 0; }
.st-switch-title { display: block; font-size: 14px; font-weight: 600; color: var(--dt-ink); }
.st-switch-desc { display: block; font-size: 12.5px; color: var(--dt-muted); margin-top: 2px; line-height: 1.5; }
.st-switch-list { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Buttons ---------- */
.st-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 9px; border: 1px solid var(--dt-border-strong);
  background: var(--dt-surface); color: var(--dt-text);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.st-btn:hover { background: var(--dt-surface-2); color: var(--dt-ink); text-decoration: none; }
.st-btn i { font-size: 17px; }
.st-btn.is-primary { background: var(--dt-primary); border-color: var(--dt-primary); color: #fff; }
.st-btn.is-primary:hover { background: var(--dt-primary-hover); border-color: var(--dt-primary-hover); color: #fff; }
.st-btn.is-danger { color: #C2353A; border-color: #E9A1A4; }
.st-btn.is-danger:hover { background: #FDF0F0; color: #C2353A; }
.st-btn.is-small { padding: 6px 11px; font-size: 13px; }

/* ---------- Status strip ---------- */
.st-status {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-radius: var(--dt-radius-sm);
  font-size: 14px;
  margin-bottom: 18px;
}
.st-status.is-ok   { background: var(--dt-green-soft);  color: var(--dt-green-ink); }
.st-status.is-bad  { background: #FDF0F0;               color: #A52A2F; }
.st-status.is-warn { background: var(--dt-orange-soft); color: var(--dt-orange-ink); }
.st-status.is-idle { background: var(--dt-surface-2);   color: var(--dt-muted); }
.st-status i { font-size: 20px; flex: 0 0 auto; }
.st-status-body { flex: 1; min-width: 0; }
.st-status-body strong { display: block; }
.st-status-detail {
  font-size: 12.5px; opacity: .9; margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}

/* ---------- Token chips ---------- */
.st-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-token {
  border: 1px dashed var(--dt-border-strong);
  background: var(--dt-surface-2);
  color: var(--dt-muted);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 12.5px; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.st-token:hover { border-color: var(--dt-primary); color: var(--dt-primary-ink); background: var(--dt-primary-soft); border-style: solid; }

/* ---------- Template accordion ---------- */
.st-tpl + .st-tpl { margin-top: 14px; }
.st-tpl-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 18px;
  background: none; border: 0; cursor: pointer;
  text-align: left; font-family: inherit;
}
.st-tpl-head:hover { background: var(--dt-surface-2); }
.st-tpl-chevron { color: var(--dt-faint); font-size: 20px; transition: transform .2s ease; flex: 0 0 auto; }
.st-tpl.is-open .st-tpl-chevron { transform: rotate(90deg); }
.st-tpl-info { flex: 1; min-width: 0; }
.st-tpl-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--dt-ink); }
.st-tpl-desc { display: block; font-size: 12.5px; color: var(--dt-muted); margin-top: 2px; }
.st-tpl-body { display: none; padding: 0 18px 18px; border-top: 1px solid var(--dt-border); }
.st-tpl.is-open .st-tpl-body { display: block; padding-top: 18px; }

.st-preview-frame {
  width: 100%; height: 420px;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background: #fff;
}

/* ---------- Tables ---------- */
.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.st-table th {
  text-align: left; padding: 11px 16px;
  background: var(--dt-surface-2);
  color: var(--dt-muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--dt-border);
  white-space: nowrap;
}
.st-table td { padding: 12px 16px; border-bottom: 1px solid var(--dt-border); color: var(--dt-text); vertical-align: top; }
.st-table tr:last-child td { border-bottom: 0; }
.st-table tbody tr:hover { background: var(--dt-surface-2); }
.st-table .is-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-err {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: #A52A2F;
  max-width: 420px; word-break: break-word;
}

/* ---------- Stat strip ---------- */
.st-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 575.98px) { .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-stat {
  background: var(--dt-surface); border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm); padding: 14px 16px;
}
.st-stat-num { margin: 0; font-size: 24px; font-weight: 700; color: var(--dt-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.st-stat-lbl { margin: 5px 0 0; font-size: 12.5px; color: var(--dt-muted); }

/* ---------- Key/value info list ---------- */
.st-kv { list-style: none; margin: 0; padding: 0; }
.st-kv li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--dt-border);
  font-size: 13.5px;
}
.st-kv li:last-child { border-bottom: 0; }
.st-kv-key { color: var(--dt-muted); }
.st-kv-val { color: var(--dt-ink); font-weight: 500; text-align: right; word-break: break-word; }
.st-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.st-pill.is-ok  { background: var(--dt-green-soft);  color: var(--dt-green-ink); }
.st-pill.is-bad { background: #FDF0F0;               color: #A52A2F; }
.st-pill.is-off { background: var(--dt-surface-2);   color: var(--dt-muted); }

/* Flash messages */
.st-flash {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border-radius: var(--dt-radius-sm);
  margin-bottom: 18px; font-size: 14px;
}
.st-flash.is-success { background: var(--dt-green-soft); color: var(--dt-green-ink); }
.st-flash.is-error   { background: #FDF0F0;              color: #A52A2F; }
.st-flash i { font-size: 19px; flex: 0 0 auto; }
.st-flash-text { flex: 1; min-width: 0; word-break: break-word; }

/* =====================================================================
   =====================================================================
   SIGN IN / REGISTER
   Standalone pages — they do not load the dashboard chrome, only this
   file, so everything they need lives here.
   ===================================================================== 
   ===================================================================== */

/* The page must reach the bottom of the window on every device.
   100vh alone is not enough: mobile browsers measure it against the window
   WITHOUT the address bar, so the page ends short and leaves a strip of
   background showing. 100dvh is the real visible height; browsers that do
   not know it keep the 100vh line above. html gets the same height and
   background so nothing can show through behind the panels. */
html.auth-html { height: 100%; background: var(--dt-bg); overflow-x: hidden; }

/* These pages load no Bootstrap, so nothing sets box-sizing for them.
   Without it a field with width:100% plus padding is wider than its column,
   which overflows sideways on a phone, adds a horizontal scrollbar, and that
   scrollbar is what leaves a strip along the bottom. */
html.auth-html,
html.auth-html *,
html.auth-html *::before,
html.auth-html *::after { box-sizing: border-box; }

.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--dt-bg);
  color: var(--dt-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Side by side: one row only, and both panels live in it, so nothing can
   push a second row underneath and create a gap. */
@media (min-width: 901px) {
  .auth-body { grid-template-rows: 1fr; }
  .auth-aside, .auth-main { grid-row: 1; min-height: 0; }
}

/* Stacked: the brand strip takes what it needs, the form fills the rest. */
@media (max-width: 900px) {
  .auth-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* ---------- Left brand panel ---------- */
.auth-aside {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 48px;
  background: linear-gradient(150deg, #0F1E2E 0%, #16324A 48%, #1E5E46 100%);
  color: #E8EEF6;
  overflow: hidden;
}
@media (max-width: 900px) {
  .auth-aside { padding: 26px 24px; min-height: auto; }
  .auth-aside-mid, .auth-aside-foot { display: none; }
}
/* Soft light blooms */
.auth-aside::before, .auth-aside::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.auth-aside::before {
  width: 460px; height: 460px; right: -170px; top: -150px;
  background: radial-gradient(circle, rgba(95,174,70,.34) 0%, transparent 68%);
}
.auth-aside::after {
  width: 420px; height: 420px; left: -140px; bottom: -160px;
  background: radial-gradient(circle, rgba(52,153,206,.28) 0%, transparent 68%);
}
.auth-aside > * { position: relative; z-index: 1; }

.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand img { height: 34px; width: auto; display: block; }
.auth-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #fff; }

.auth-aside-mid { max-width: 440px; }
.auth-headline {
  font-size: 34px; line-height: 1.22; font-weight: 700;
  letter-spacing: -.025em; color: #fff; margin: 0 0 14px;
}
.auth-sub { font-size: 15.5px; line-height: 1.65; color: rgba(232,238,246,.78); margin: 0; }

.auth-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-point { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: rgba(232,238,246,.9); }
.auth-point i {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #9BD97F; font-size: 16px;
}
.auth-aside-foot { font-size: 13px; color: rgba(232,238,246,.55); }

/* ---------- Right form panel ---------- */
.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 44px 24px;
  background: var(--dt-surface);
}
@media (max-width: 900px) { .auth-main { padding: 32px 20px; } }

.auth-card { width: 100%; max-width: 396px; }
.auth-card-head { margin-bottom: 26px; }
.auth-title {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  color: var(--dt-ink); margin: 0 0 6px;
}
.auth-lead { font-size: 14.5px; color: var(--dt-muted); margin: 0; }

.auth-field { margin-bottom: 16px; }
.auth-label {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--dt-text); margin-bottom: 6px;
}
.auth-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--dt-border-strong);
  border-radius: 10px;
  background: var(--dt-surface);
  color: var(--dt-ink);
  font-size: 15px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input::placeholder { color: var(--dt-faint); }
.auth-input:focus {
  outline: 0;
  border-color: var(--dt-primary);
  box-shadow: 0 0 0 3px var(--dt-primary-soft);
}
.auth-input.is-invalid { border-color: #D9565B; }
.auth-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217,86,91,.16); }

/* Password field with the eye button */
.auth-input-wrap { position: relative; display: flex; }
.auth-input-wrap .auth-input { padding-right: 46px; }
.auth-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
  border-radius: 8px; color: var(--dt-faint); font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-eye:hover { background: var(--dt-surface-2); color: var(--dt-text); }

.auth-error { display: block; font-size: 12.5px; color: #C2353A; margin-top: 5px; min-height: 1px; }
.auth-hint  { display: block; font-size: 12.5px; color: var(--dt-faint); margin-top: 5px; line-height: 1.5; }

/* Password strength meter */
.auth-meter { display: flex; gap: 4px; margin-top: 8px; }
.auth-meter span {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--dt-border); transition: background .25s ease;
}
.auth-meter.lvl-1 span:nth-child(1) { background: #D9565B; }
.auth-meter.lvl-2 span:nth-child(-n+2) { background: #E8A33D; }
.auth-meter.lvl-3 span:nth-child(-n+3) { background: #5FAE46; }
.auth-meter.lvl-4 span { background: #3F8A2B; }

/* ---------- Number captcha ---------- */
.auth-captcha { display: flex; align-items: center; gap: 10px; }
.auth-captcha-img {
  height: 46px; width: auto; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--dt-border-strong);
  background: #f1f5f9;
  display: block;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
.auth-captcha .auth-input { flex: 1; min-width: 0; text-align: center; letter-spacing: .08em; font-weight: 600; }
.auth-captcha-refresh {
  width: 46px; height: 46px; flex: 0 0 auto;
  border: 1px solid var(--dt-border-strong);
  border-radius: 10px;
  background: var(--dt-surface);
  color: var(--dt-muted);
  cursor: pointer; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.auth-captcha-refresh:hover { color: var(--dt-primary-ink); border-color: var(--dt-primary); background: var(--dt-primary-soft); }
.auth-captcha-refresh.is-spinning i { animation: dtSpin .6s linear infinite; }

/* ---------- Buttons and links ---------- */
.auth-submit {
  width: 100%; height: 46px;
  border: 0; border-radius: 10px;
  background: var(--dt-primary); color: #fff;
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease;
}
.auth-submit:hover:not(:disabled) { background: var(--dt-primary-hover); }
.auth-submit:disabled { opacity: .7; cursor: default; }
.auth-submit i { font-size: 18px; }
.auth-submit.is-busy i { animation: dtSpin .7s linear infinite; }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dt-text); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--dt-primary); cursor: pointer; }
.auth-link { font-size: 14px; font-weight: 600; color: var(--dt-primary-ink); text-decoration: none; }
.auth-link:hover { color: var(--dt-primary-hover); text-decoration: underline; }

.auth-foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--dt-muted); }
.auth-foot .auth-link { margin-left: 4px; }

/* ---------- Alerts ---------- */
.auth-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 14px; line-height: 1.5; margin-bottom: 18px;
}
.auth-alert i { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.auth-alert-text { flex: 1; min-width: 0; }
.auth-alert.is-error   { background: #FDF0F0;               color: #A52A2F; }
.auth-alert.is-success { background: var(--dt-green-soft);  color: var(--dt-green-ink); }
.auth-alert.is-info    { background: var(--dt-blue-soft);   color: var(--dt-blue-ink); }
.auth-alert.is-warn    { background: var(--dt-orange-soft); color: var(--dt-orange-ink); }
.auth-alert[hidden] { display: none; }

/* Dark theme: the brand panel is already dark, so just soften the form side */
[data-dash-theme="dark"] .auth-main { background: var(--dt-surface); }
[data-dash-theme="dark"] .auth-captcha-img { background: #e2e8f0; }