/* ============================================================
   CHEZA4AFYA AKILI — Main Stylesheet
   Built on tokens.css — never hardcode colors/spacing/radius.
   ============================================================ */

/* ── Base Reset & Typography ── */
body {
  font-family: var(--ck-font-body);
  font-size: var(--ck-text-body);
  background-color: var(--ck-bg);
  color: var(--ck-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ck-font-display);
  color: var(--ck-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1, .h1 { font-size: var(--ck-text-h1); font-weight: 800; }
h2, .h2 { font-size: var(--ck-text-h2); font-weight: 800; }
h3, .h3 { font-size: var(--ck-text-h3); font-weight: 700; }
h4, .h4 { font-size: var(--ck-text-h4); font-weight: 700; }

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: var(--ck-text);
}

a { color: var(--ck-teal-dark); transition: color var(--ck-motion-fast); }
a:hover { color: var(--ck-navy); }
[data-bs-theme="dark"] a { color: var(--ck-teal); }
[data-bs-theme="dark"] a:hover { color: var(--ck-teal-light); }

code, pre, .font-monospace { font-family: var(--ck-font-mono); }

/* ── Focus — always visible, never removed ── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ck-teal);
  outline-offset: 2px;
  border-radius: var(--ck-radius-xs);
}

/* ── Skip Link ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ck-teal-dark);
  color: #fff;
  padding: var(--ck-sp-2) var(--ck-sp-4);
  z-index: 1100;
  text-decoration: none;
  border-radius: 0 0 var(--ck-radius-xs) 0;
  font-weight: 600;
  transition: top var(--ck-motion-fast);
}
.skip-link:focus { top: 0; color: #fff; }

/* ── Navbar ── */
.navbar {
  background: linear-gradient(135deg, var(--ck-navy) 0%, var(--ck-navy-light) 100%) !important;
  box-shadow: var(--ck-shadow-md);
  border-bottom: 3px solid var(--ck-teal);
  padding: var(--ck-sp-2) 0;
  min-height: 64px;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--ck-sp-2);
  font-family: var(--ck-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.navbar-brand img {
  border-radius: var(--ck-radius-xs);
  height: 38px;
  width: auto;
  transition: transform var(--ck-motion-fast);
}
.navbar-brand:hover img { transform: scale(1.05); }
.navbar .nav-link,
.navbar-brand,
.navbar .dropdown-toggle {
  color: #fff !important;
  opacity: 1 !important;
  font-family: var(--ck-font-body);
  font-weight: 600;
  font-size: var(--ck-text-body-sm);
  transition: color var(--ck-motion-fast), background var(--ck-motion-fast);
  border-radius: var(--ck-radius-sm);
  padding: var(--ck-sp-2) var(--ck-sp-3) !important;
}
.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
  color: var(--ck-orange-light) !important;
  background: rgba(255,255,255,0.08);
}
.navbar .dropdown-menu {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-lg);
  padding: var(--ck-sp-2);
  margin-top: var(--ck-sp-2);
  animation: ck-dropdown-in var(--ck-motion-std) var(--ck-ease);
}
@keyframes ck-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.navbar .dropdown-item {
  color: var(--ck-text) !important;
  border-radius: var(--ck-radius-sm);
  padding: var(--ck-sp-2) var(--ck-sp-3);
  font-weight: 500;
  transition: background var(--ck-motion-fast);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: var(--ck-teal-50);
  color: var(--ck-navy) !important;
}
.navbar-toggler {
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--ck-radius-sm);
  padding: var(--ck-sp-2);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(95,211,217,0.4);
}

/* ── Navbar brand text ── */
.navbar-brand-text {
  font-family: var(--ck-font-display);
  font-weight: 800;
  font-size: clamp(.85rem, 2vw, 1rem);
  letter-spacing: -.01em;
  color: #fff !important;
}

/* ── Hide language label text, show icon only ── */
.navbar .nav-link .fa-globe + span,
#languageDropdown span {
  display: none !important;
}

/* ── Navbar icon button (theme, language) ── */
.navbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--ck-radius-sm);
  border: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s;
  flex-shrink: 0;
}
.navbar-icon-btn:hover { background: rgba(255,255,255,.18); }

/* ── Mobile actions strip ── */
.navbar-mobile-actions { gap: .25rem; }

/* ── Mobile CTA ── */
.navbar-cta-sm {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: var(--ck-radius-full);
  background: var(--ck-orange);
  color: var(--ck-navy) !important;
  font-family: var(--ck-font-display);
  font-weight: 800;
  font-size: .8rem;
  text-decoration: none;
  transition: background .18s;
  white-space: nowrap;
}
.navbar-cta-sm:hover { background: var(--ck-orange-dark); color: #fff !important; }

/* ── Sign in button ── */
.navbar-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  border-radius: var(--ck-radius-full);
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff !important;
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.navbar-signin-btn:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
  color: #fff !important;
}

/* ── Desktop CTA ── */
.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1.1rem;
  border-radius: var(--ck-radius-full);
  background: linear-gradient(135deg, var(--ck-orange) 0%, var(--ck-orange-dark) 100%);
  color: var(--ck-navy) !important;
  font-family: var(--ck-font-display);
  font-weight: 800;
  font-size: .88rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(252,100,0,.25);
  transition: all .18s;
  white-space: nowrap;
}
.navbar-cta:hover {
  background: linear-gradient(135deg, var(--ck-orange-dark) 0%, #A03E00 100%);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(252,100,0,.3);
}

/* ── Account button ── */
.navbar-account-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem;
  border-radius: var(--ck-radius-full);
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  font-size: .85rem;
  font-family: var(--ck-font-display);
  font-weight: 700;
}
.navbar-account-btn:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
}

/* ── Avatar circle ── */
.navbar-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  flex-shrink: 0;
}

.navbar-username {
  color: rgba(255,255,255,.92);
  font-size: .82rem;
}

/* ── Account dropdown header ── */
.navbar-account-menu { min-width: 220px; }
.navbar-account-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
}
.navbar-account-avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ck-teal), var(--ck-navy));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--ck-font-display);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.navbar-account-name {
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--ck-text);
  line-height: 1.2;
}
.navbar-account-role {
  font-size: .72rem;
  color: var(--ck-text-muted);
}

/* ── Remove default dropdown arrow ── */
.dropdown-toggle-no-caret::after { display: none !important; }

/* ── Mobile navbar improvements ── */
@media (max-width: 991.98px) {
  .navbar { padding: var(--ck-sp-2) 0; min-height: 58px; }
  .navbar-brand span { font-size: .95rem; }
  .navbar-brand img { height: 32px; }

  #mainNav {
    background: var(--ck-navy-dark);
    border-top: 2px solid var(--ck-teal);
    border-radius: 0 0 var(--ck-radius-md) var(--ck-radius-md);
    padding: var(--ck-sp-3) var(--ck-sp-3) var(--ck-sp-4);
    margin-top: var(--ck-sp-2);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
  }

  #mainNav .navbar-nav {
    gap: .25rem;
  }

  #mainNav .nav-link,
  #mainNav .dropdown-toggle {
    padding: var(--ck-sp-3) var(--ck-sp-3) !important;
    border-radius: var(--ck-radius-sm);
    font-size: .9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  #mainNav .nav-link:hover,
  #mainNav .dropdown-toggle:hover {
    background: rgba(255,255,255,.1) !important;
  }

  #mainNav .dropdown-menu {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--ck-radius-sm);
    box-shadow: none;
    padding: var(--ck-sp-1);
    margin-top: .25rem;
  }

  #mainNav .dropdown-item {
    color: rgba(255,255,255,.88) !important;
    border-radius: var(--ck-radius-xs);
    padding: var(--ck-sp-2) var(--ck-sp-3);
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: .88rem;
  }

  #mainNav .dropdown-item:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
  }

  /* Divider between nav sections on mobile */
  #mainNav .nav-item:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: .25rem;
    margin-bottom: .25rem;
  }
}

/* ── Buttons ── */
.btn {
  border-radius: var(--ck-radius-sm);
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: var(--ck-text-btn);
  padding: var(--ck-sp-3) var(--ck-sp-5);
  min-height: var(--ck-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-sp-2);
  transition: all var(--ck-motion-fast) var(--ck-ease);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--ck-teal-dark) 0%, var(--ck-teal) 100%);
  border-color: var(--ck-teal-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(12,156,168,0.25);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--ck-navy) 0%, var(--ck-teal-dark) 100%);
  border-color: var(--ck-navy);
  color: #fff;
  box-shadow: 0 6px 20px rgba(12,156,168,0.35);
  transform: translateY(-1px);
}

.btn-accent,
.btn-cta {
  background: linear-gradient(135deg, var(--ck-orange) 0%, var(--ck-orange-dark) 100%);
  border-color: var(--ck-orange);
  color: var(--ck-navy);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(252,100,0,0.25);
}
.btn-accent:hover, .btn-accent:focus,
.btn-cta:hover, .btn-cta:focus {
  background: linear-gradient(135deg, var(--ck-orange-dark) 0%, #A03E00 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(252,100,0,0.35);
}

.btn-secondary,
.btn-outline-primary {
  color: var(--ck-navy);
  border-color: var(--ck-navy);
  background: transparent;
}
.btn-secondary:hover, .btn-outline-primary:hover {
  background: var(--ck-navy);
  border-color: var(--ck-navy);
  color: #fff;
}

.btn-success {
  background: linear-gradient(135deg, var(--ck-green) 0%, var(--ck-green-dark) 100%);
  border-color: var(--ck-green);
  color: #fff;
}
.btn-success:hover, .btn-success:focus {
  background: var(--ck-green-dark);
  border-color: var(--ck-green-dark);
  color: #fff;
}

.btn-danger {
  background: var(--ck-error);
  border-color: var(--ck-error);
  color: #fff;
}

.btn-outline-success { color: var(--ck-green-dark); border-color: var(--ck-green-dark); }
.btn-outline-success:hover { background: var(--ck-green-dark); color: #fff; }

.btn-outline-danger { color: var(--ck-error); border-color: var(--ck-error); }
.btn-outline-danger:hover { background: var(--ck-error); color: #fff; }

.btn-outline-warning { color: var(--ck-warning); border-color: var(--ck-warning); }
.btn-outline-warning:hover { background: var(--ck-warning); color: #fff; }

/* ── Cards ── */
.card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-sm);
  transition: transform var(--ck-motion-std) var(--ck-ease),
              box-shadow var(--ck-motion-std) var(--ck-ease);
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--ck-shadow-md);
}
.card-header {
  background: linear-gradient(135deg, var(--ck-navy) 0%, var(--ck-navy-light) 100%) !important;
  border-bottom: 2px solid var(--ck-teal);
  border-radius: 0 !important;
  padding: var(--ck-sp-4) var(--ck-sp-5);
  font-family: var(--ck-font-display);
  font-weight: 700;
}
.card-header { color: #fff !important; }
.card-header > *:not(button):not(a):not(.btn):not(.badge) { color: #fff !important; }
.card-body { padding: var(--ck-sp-5); }
.tumaini-chat-body.card-body { padding: 0; }

[data-bs-theme="dark"] .card {
  background: var(--ck-surface);
  border-color: var(--ck-border);
}
[data-bs-theme="dark"] .card-header {
  background: linear-gradient(135deg, var(--ck-navy-dark) 0%, #0A1930 100%) !important;
}

/* Dashboard stat cards */
.stat-card {
  border: none;
  border-radius: var(--ck-radius-md);
  padding: var(--ck-sp-5);
  text-align: center;
  transition: transform var(--ck-motion-std) var(--ck-ease);
}
.stat-card:hover { transform: translateY(-3px); }
.stat-card h3 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: var(--ck-sp-1);
}
.stat-card p { font-weight: 600; opacity: 0.9; margin: 0; }
.stat-card.bg-primary { background: linear-gradient(135deg, var(--ck-navy) 0%, var(--ck-navy-light) 100%) !important; }
.stat-card.bg-success { background: linear-gradient(135deg, var(--ck-green) 0%, var(--ck-green-dark) 100%) !important; }
.stat-card.bg-info { background: linear-gradient(135deg, var(--ck-teal) 0%, var(--ck-teal-dark) 100%) !important; }
.stat-card.bg-danger { background: linear-gradient(135deg, var(--ck-error) 0%, #8B2520 100%) !important; }

/* ── Forms ── */
.form-control,
.form-select {
  border: 2px solid var(--ck-border);
  border-radius: var(--ck-radius-sm);
  padding: var(--ck-sp-3) var(--ck-sp-4);
  min-height: var(--ck-touch-min);
  color: var(--ck-text);
  background: var(--ck-surface);
  font-size: var(--ck-text-body);
  transition: border-color var(--ck-motion-fast), box-shadow var(--ck-motion-fast);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ck-teal);
  box-shadow: 0 0 0 4px rgba(12,156,168,0.15);
  outline: none;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--ck-error);
  box-shadow: 0 0 0 4px rgba(192,54,44,0.1);
}
.form-label {
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: var(--ck-text-label);
  color: var(--ck-text);
  margin-bottom: var(--ck-sp-2);
}
.invalid-feedback { color: var(--ck-error); font-weight: 600; }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background: var(--ck-surface-raised);
  border-color: var(--ck-border);
  color: var(--ck-text);
}

/* ── Alerts ── */
.alert {
  border-radius: var(--ck-radius-md);
  border-width: 2px;
  font-weight: 500;
  padding: var(--ck-sp-4);
}
.alert-primary, .alert-info {
  background: var(--ck-info-bg);
  border-color: var(--ck-info);
  color: var(--ck-info);
}
.alert-success {
  background: var(--ck-success-bg);
  border-color: var(--ck-success);
  color: var(--ck-success);
}
.alert-danger {
  background: var(--ck-error-bg);
  border-color: var(--ck-error);
  color: var(--ck-error);
}
.alert-warning {
  background: var(--ck-warning-bg);
  border-color: var(--ck-warning);
  color: var(--ck-warning);
}

/* ── Badges ── */
.badge { border-radius: var(--ck-radius-full); font-weight: 700; padding: var(--ck-sp-1) var(--ck-sp-3); }
.badge.bg-primary { background: var(--ck-navy) !important; color: #fff; }
.badge.bg-success { background: var(--ck-green-dark) !important; color: #fff; }
.badge.bg-danger { background: var(--ck-error) !important; color: #fff; }
.badge.bg-warning { background: var(--ck-warning-bg) !important; color: var(--ck-warning) !important; }
.badge.bg-info { background: var(--ck-teal-50) !important; color: var(--ck-teal-dark); }

/* ── Nav Pills ── */
.nav-pills .nav-link {
  border-radius: var(--ck-radius-full);
  font-weight: 700;
  font-family: var(--ck-font-display);
  padding: var(--ck-sp-2) var(--ck-sp-4);
  transition: all var(--ck-motion-fast);
}
.nav-pills .nav-link.active {
  background: var(--ck-navy) !important;
  color: #fff;
  box-shadow: var(--ck-shadow-sm);
}

/* ── Tables ── */
.table { --bs-table-bg: transparent; }
.table thead th {
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: var(--ck-text-body-sm);
  color: var(--ck-text-secondary);
  border-bottom: 2px solid var(--ck-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--ck-sp-3) var(--ck-sp-4);
}
.table td, .table th {
  border-color: var(--ck-divider);
  padding: var(--ck-sp-3) var(--ck-sp-4);
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background: var(--ck-teal-50);
}
[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background: var(--ck-surface-raised);
}

/* ── Auth Pages ── */
.auth-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(12,156,168,0.12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(252,100,0,0.08), transparent 50%),
    linear-gradient(160deg, var(--ck-navy) 0%, var(--ck-navy-dark) 100%);
  margin: -1.5rem calc(-1 * ((100vw - 100%) / 2)) 0;
  padding: var(--ck-sp-7) var(--ck-sp-4);
}
.auth-page .card { box-shadow: var(--ck-shadow-xl); }

/* ── Footer ── */
footer {
  background: linear-gradient(135deg, var(--ck-navy) 0%, var(--ck-navy-dark) 100%);
  color: rgba(255,255,255,0.85);
  padding: var(--ck-sp-6) 0 var(--ck-sp-4);
  border-top: 3px solid var(--ck-teal);
}
footer a { color: rgba(255,255,255,0.7); transition: color var(--ck-motion-fast); }
footer a:hover { color: var(--ck-orange-light); }

/* ── Toast container ── */
.toast-container {
  position: fixed;
  bottom: var(--ck-sp-5);
  right: var(--ck-sp-5);
  z-index: 1050;
}
.toast {
  min-width: 320px;
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-lg);
}

/* ── Loading & state utilities ── */
.ck-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-sp-2);
  color: var(--ck-text-secondary);
  font-weight: 600;
}
.ck-empty-state {
  text-align: center;
  padding: var(--ck-sp-8) var(--ck-sp-5);
  color: var(--ck-text-secondary);
}
.ck-empty-state .icon {
  display: inline-flex;
  width: 80px; height: 80px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ck-teal-50);
  font-size: 2rem;
  margin-bottom: var(--ck-sp-4);
}

/* ── Page-level content spacing ── */
.page-header {
  margin-bottom: var(--ck-sp-6);
  padding-bottom: var(--ck-sp-4);
  border-bottom: 2px solid var(--ck-divider);
}
.page-header h2 {
  margin-bottom: var(--ck-sp-2);
}
.page-header .lead {
  color: var(--ck-text-secondary);
  margin-bottom: 0;
}

/* ── Section backgrounds ── */
.ck-section-teal { background: var(--ck-teal-50); }
.ck-section-green { background: var(--ck-green-50); }
.ck-section-orange { background: var(--ck-orange-50); }
.ck-section-navy { background: var(--ck-navy); color: #fff; }
.ck-section-navy h1,
.ck-section-navy h2,
.ck-section-navy h3 { color: #fff; }

/* ── Responsive helpers ── */
@media (max-width: 767.98px) {
  .card-body { padding: var(--ck-sp-4); }
  .card-header { padding: var(--ck-sp-3) var(--ck-sp-4); }
  .btn { padding: var(--ck-sp-3) var(--ck-sp-4); font-size: var(--ck-text-body-sm); }
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
}

/* ── Scroll reveal animation ── */
.ck-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ck-motion-slow) var(--ck-ease),
              transform var(--ck-motion-slow) var(--ck-ease);
}
.ck-reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Password toggle alignment ── */
.password-toggle {
  min-width: var(--ck-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}