/* CyberG — feuille centralisée (classes sémantiques sme-) */

:root {
  --color-primary: #091426;
  --color-primary-container: #1e293b;
  --color-on-primary: #ffffff;
  --color-secondary: #006c49;
  --color-secondary-container: #6cf8bb;
  --color-on-secondary-container: #00714d;
  --color-background: #f8f9ff;
  --color-surface: #f8f9ff;
  --color-surface-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #45474c;
  --color-outline: #75777d;
  --color-outline-variant: #c5c6cd;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-inverse-surface: #213145;
  --color-inverse-on-surface: #eaf1ff;
  --color-tertiary-fixed: #ffddb8;
  --color-on-tertiary-fixed: #2a1700;
  --color-on-tertiary-fixed-variant: #653e00;
  --color-secondary-fixed: #6ffbbe;
  --color-primary-fixed: #d8e3fb;
  --color-tertiary: #201100;
  --color-on-tertiary-container: #c88000;
  --color-tertiary-fixed-dim: #ffb95f;
  --color-surface-lowest: #ffffff;
  --color-surface-bright: #f8f9ff;
  --color-on-background: #0b1c30;
  --color-on-secondary: #ffffff;
  --color-indigo-50: #eef2ff;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-900: #312e81;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  --color-emerald-50: #ecfdf5;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-amber-50: #fffbeb;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-600: #ea580c;
  --color-orange-800: #9a3412;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-600: #2563eb;
  --color-blue-800: #1e40af;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

html.dark {
  --color-primary: #e2e8f0;
  --color-primary-container: #1e293b;
  --color-on-primary: #0b1220;
  --color-secondary: #34d399;
  --color-secondary-container: #064e3b;
  --color-on-secondary-container: #a7f3d0;
  --color-background: #020617;
  --color-surface: #020617;
  --color-surface-low: #0b1220;
  --color-surface-container: #111827;
  --color-surface-container-high: #1f2937;
  --color-on-surface-variant: #94a3b8;
  --color-outline: #64748b;
  --color-outline-variant: #334155;
  --color-error: #f87171;
  --color-error-container: #3f1d1d;
  --color-on-error-container: #fecaca;
  --color-inverse-surface: #e2e8f0;
  --color-inverse-on-surface: #0f172a;
  --color-tertiary-fixed: #422006;
  --color-on-tertiary-fixed: #fed7aa;
  --color-on-tertiary-fixed-variant: #fdba74;
  --color-secondary-fixed: #064e3b;
  --color-primary-fixed: #1e293b;
  --color-tertiary: #fed7aa;
  --color-on-tertiary-container: #fdba74;
  --color-tertiary-fixed-dim: #fb923c;
  --color-surface-lowest: #020617;
  --color-surface-bright: #111827;
  --color-on-secondary: #022c22;
  --color-indigo-50: #1f234a;
  --color-indigo-600: #818cf8;
  --color-indigo-700: #a5b4fc;
  --color-indigo-900: #c7d2fe;
  --color-slate-50: #0f172a;
  --color-slate-100: #1e293b;
  --color-slate-200: #334155;
  --color-slate-300: #475569;
  --color-slate-400: #94a3b8;
  --color-slate-500: #cbd5e1;
  --color-slate-600: #dbe3ef;
  /* 800/900/950 : on garde des gris réellement sombres pour les surfaces (bordure, header, cartes) */
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  --color-on-surface: #f8fafc;
  --color-on-background: #f8fafc;
  --color-emerald-50: #052e24;
  --color-emerald-500: #34d399;
  --color-emerald-600: #6ee7b7;
  --color-emerald-700: #a7f3d0;
  --color-amber-50: #3a2a07;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #fbbf24;
  --color-amber-700: #fcd34d;
  --color-amber-800: #fde68a;
  --color-red-50: #3f1d1d;
  --color-red-100: #7f1d1d;
  --color-red-700: #fca5a5;
  --color-red-800: #fecaca;
  --color-orange-50: #3a230f;
  --color-orange-100: #7c2d12;
  --color-orange-600: #fb923c;
  --color-orange-800: #fdba74;
  --color-blue-50: #172554;
  --color-blue-100: #1e3a8a;
  --color-blue-600: #60a5fa;
  --color-blue-800: #93c5fd;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-on-surface);
  background: var(--color-background);
}

.sme-theme-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
  background: var(--color-slate-50);
  color: var(--color-slate-700);
  font-size: 0.75rem;
  font-weight: 600;
}

.sme-theme-toggle--floating {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  width: auto;
  background: var(--color-surface-container);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  vertical-align: middle;
}

/* ---------- Typographie ---------- */
.sme-heading-display {
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.sme-heading-1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  margin: 0;
}
.sme-heading-2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  margin: 0;
}
.sme-heading-3 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.sme-text-lead {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--color-on-surface-variant);
  margin: 0;
}
.sme-text-body {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0;
}
.sme-text-small {
  font-size: 0.75rem;
  color: var(--color-slate-500);
  margin: 0;
}
.sme-text-label {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.sme-text-muted {
  color: var(--color-slate-500);
}
.sme-text-accent {
  color: var(--color-secondary);
}
.sme-text-error {
  color: var(--color-error);
}

/* ---------- Composants partagés ---------- */
.sme-shell {
  display: flex;
  min-height: 100vh;
}

.sme-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 16rem;
  height: 100vh;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-md);
  background: var(--color-slate-50);
  border-right: 1px solid var(--color-slate-200);
}

.dark .sme-sidebar {
  background: var(--color-slate-950);
  border-color: var(--color-slate-800);
}

.sme-sidebar--under-header {
  top: 4rem;
  height: calc(100vh - 4rem);
}

.sme-sidebar__brand {
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-xl);
}

.sme-sidebar__title {
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--color-indigo-900);
  letter-spacing: -0.025em;
  margin: 0;
}

.dark .sme-sidebar__title {
  color: #e0e7ff;
}

.sme-sidebar__subtitle {
  font-size: 0.75rem;
  color: var(--color-slate-500);
  font-weight: 500;
  margin: 0.25rem 0 0;
}

.sme-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.75rem;
}

.sme-sidebar__nav--flush {
  padding: 0;
}

.sme-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  color: var(--color-slate-600);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.dark .sme-nav-link {
  color: var(--color-slate-400);
}

.sme-nav-link:hover {
  background: var(--color-slate-100);
}

.dark .sme-nav-link:hover {
  background: var(--color-slate-900);
}

.sme-nav-link .material-symbols-outlined {
  margin-right: 0.25rem;
  font-size: 1.25rem;
}

.sme-nav-link--active {
  background: var(--color-indigo-50);
  color: var(--color-indigo-700);
  font-weight: 600;
  border-right: 4px solid var(--color-indigo-700);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.dark .sme-nav-link--active {
  background: rgba(49, 46, 129, 0.3);
  color: #a5b4fc;
  border-color: #6366f1;
}

.sme-nav-link--active-bar {
  border-right: 4px solid var(--color-indigo-700);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.sme-sidebar__footer {
  margin-top: auto;
  padding: var(--space-md);
  border-top: 1px solid var(--color-slate-200);
}

.dark .sme-sidebar__footer {
  border-color: var(--color-slate-800);
}

.sme-user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sme-user-chip__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-indigo-50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sme-user-chip__avatar .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--color-indigo-700);
}

.sme-main {
  flex: 1;
  margin-left: 16rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sme-main--plain {
  display: block;
}

.sme-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 var(--space-xl);
  background: #fff;
  border-bottom: 1px solid var(--color-slate-200);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .sme-topbar {
  background: var(--color-slate-900);
  border-color: var(--color-slate-800);
}

.sme-topbar__search-wrap {
  position: relative;
  flex: 1;
  max-width: 28rem;
  width: 100%;
}

.sme-topbar__search-wrap .material-symbols-outlined {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--color-slate-400);
}

.sme-input {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-slate-50);
  font-size: 0.875rem;
  outline: none;
}

.sme-input:focus {
  box-shadow: 0 0 0 2px var(--color-indigo-600);
}

.dark .sme-input {
  background: var(--color-slate-800);
  color: #fff;
}

.sme-input--rounded {
  border-radius: var(--radius-full);
}

.sme-icon-btn {
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  color: var(--color-slate-500);
  transition: background 0.15s;
}

.dark .sme-icon-btn {
  color: var(--color-slate-400);
}

.sme-icon-btn:hover {
  background: var(--color-slate-50);
}

.dark .sme-icon-btn:hover {
  background: var(--color-slate-800);
}

.sme-icon-btn--round:hover {
  border-radius: var(--radius-full);
}

.sme-page-body {
  padding: var(--space-xl);
  flex: 1;
}

.sme-page-body--max {
  max-width: 1480px;
}

.sme-card {
  background: #fff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}

.dark .sme-card {
  background: var(--color-slate-900);
  border-color: var(--color-slate-800);
}

.sme-card--flat {
  box-shadow: none;
}

.sme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.75rem;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}

.sme-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.sme-btn--primary:hover {
  opacity: 0.92;
}

.sme-btn--indigo {
  background: var(--color-indigo-600);
  color: #fff;
}

.sme-btn--indigo:hover {
  background: var(--color-indigo-700);
}

.sme-btn--outline {
  border: 1px solid var(--color-outline-variant);
  color: var(--color-primary);
  background: #fff;
}

.sme-btn--outline:hover {
  background: var(--color-surface-low);
}

.dark .sme-btn--outline {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border-color: var(--color-outline-variant);
}

.dark .sme-btn--outline:hover {
  background: var(--color-surface-container-high);
}

.sme-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 700;
}

.sme-badge--success {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.sme-badge--error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

.sme-badge--warn {
  background: var(--color-amber-50);
  color: var(--color-amber-700);
}

.sme-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) var(--space-2xl);
  background: #fff;
  border-top: 1px solid var(--color-slate-100);
  font-size: 0.75rem;
}

.dark .sme-footer {
  background: var(--color-slate-900);
  border-color: var(--color-slate-800);
}

.sme-footer__links {
  display: flex;
  gap: var(--space-lg);
}

.sme-footer__links a {
  color: var(--color-slate-500);
}

.sme-footer__links a:hover {
  color: var(--color-indigo-600);
}

/* ---------- Page Login ---------- */
.sme-page-login {
  background: var(--color-surface-lowest);
  color: var(--color-on-surface);
}

.sme-login {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

@media (min-width: 768px) {
  .sme-login {
    flex-direction: row;
  }
}

.sme-login-brand {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3xl);
  background: var(--color-primary);
  color: var(--color-on-primary);
  overflow: hidden;
}

@media (min-width: 768px) {
  .sme-login-brand {
    display: flex;
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .sme-login-brand {
    width: 60%;
  }
}

.security-pattern {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.sme-login-brand__glow1 {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 24rem;
  height: 24rem;
  background: var(--color-secondary-container);
  opacity: 0.1;
  border-radius: var(--radius-full);
  filter: blur(64px);
}

.sme-login-brand__glow2 {
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 16rem;
  height: 16rem;
  background: var(--color-primary-fixed);
  opacity: 0.2;
  border-radius: var(--radius-full);
  filter: blur(64px);
}

.sme-login-brand__content {
  position: relative;
  z-index: 1;
}

.sme-login-brand__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sme-login-brand__logo .material-symbols-outlined {
  font-size: 2.25rem;
  color: var(--color-secondary-fixed);
  font-variation-settings: "FILL" 1;
}

.sme-login-brand__name {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.sme-login-brand__headline {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.75rem;
  color: #fff;
  margin: 0 0 var(--space-lg);
  max-width: 36rem;
}

.sme-login-brand blockquote {
  border-left: 4px solid var(--color-secondary-fixed);
  padding: 0.5rem 0 0.5rem var(--space-lg);
  margin: 0;
  max-width: 36rem;
}

.sme-login-brand blockquote p {
  font-size: 1.125rem;
  font-style: italic;
  opacity: 0.9;
  margin: 0;
}

.sme-login-brand blockquote footer {
  margin-top: var(--space-md);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-secondary-fixed);
}

.sme-login-brand__media {
  position: relative;
  z-index: 1;
}

.sme-login-brand__media-inner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sme-login-brand__media-inner img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  transition: transform 0.5s;
}

.sme-login-brand__media-inner:hover img {
  transform: scale(1.05);
}

.sme-login-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl);
  background: #fff;
}

@media (min-width: 768px) {
  .sme-login-panel {
    padding: var(--space-2xl) var(--space-3xl);
  }
}

.sme-login-panel__inner {
  width: 100%;
  max-width: 28rem;
}

.sme-login-mobile-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .sme-login-mobile-logo {
    display: none;
  }
}

.sme-login-mobile-logo .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--color-primary);
  font-variation-settings: "FILL" 1;
}

.sme-login-mobile-logo span:last-child {
  font-weight: 700;
  color: var(--color-primary);
}

.sme-login-panel header {
  margin-bottom: 2.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .sme-login-panel header {
    text-align: left;
  }
}

.sme-login-panel header h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.sme-login-panel header p {
  margin: 0;
  color: var(--color-on-surface-variant);
}

.sme-login-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.sme-login-social button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: #fff;
  transition: background 0.2s;
}

.sme-login-social button:hover {
  background: var(--color-surface-low);
}

.sme-login-social img {
  width: 1.25rem;
  height: 1.25rem;
}

.sme-login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.sme-login-divider::before,
.sme-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-outline-variant);
}

.sme-login-divider span {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-outline);
  white-space: nowrap;
}

.sme-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sme-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.sme-field__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.sme-field__row a {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
}

.sme-field__row a:hover {
  text-decoration: underline;
}

.sme-input-wrap {
  position: relative;
}

.sme-input-wrap .material-symbols-outlined {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--color-outline);
}

.sme-input-wrap input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.sme-input-wrap input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(9, 20, 38, 0.2);
}

.sme-input-wrap--password input {
  padding-right: 3rem;
}

.sme-input-wrap button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  padding: 0;
}

.sme-input-wrap button:hover {
  color: var(--color-primary);
}

.sme-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sme-checkbox-row input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
}

.sme-checkbox-row label {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  margin: 0;
}

.sme-login-submit {
  width: 100%;
  padding: 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.sme-login-submit:hover {
  background: var(--color-primary-container);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sme-login-submit:active {
  transform: scale(0.98);
}

.sme-login-footnote {
  margin-top: var(--space-xl);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
}

.sme-login-footnote a {
  font-weight: 600;
  color: var(--color-secondary);
  margin-left: 0.25rem;
}

.sme-login-footnote a:hover {
  text-decoration: underline;
}

.sme-login-page-footer {
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(197, 198, 205, 0.3);
}

@media (min-width: 768px) {
  .sme-login-page-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .sme-login-page-footer {
    width: 40%;
  }
}

.sme-login-page-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 0.6875rem;
  color: var(--color-outline);
}

@media (min-width: 640px) {
  .sme-login-page-footer__inner {
    flex-direction: row;
  }
}

.sme-login-page-footer__links {
  display: flex;
  gap: var(--space-lg);
}

.sme-login-page-footer__links a:hover {
  color: var(--color-primary);
}

/* ---------- Dashboard ---------- */
.progress-ring__circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.sme-page-dashboard {
  background: var(--color-background);
}

.sme-dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
}

.sme-dash-card {
  background: #fff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}

.dark .sme-dash-card {
  background: var(--color-slate-900);
  border-color: var(--color-slate-800);
}

.sme-dash-card--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sme-dash-card--span-4 {
  grid-column: span 12;
}

@media (min-width: 1024px) {
  .sme-dash-card--span-4 {
    grid-column: span 4;
  }
}

.sme-dash-card--span-8 {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .sme-dash-card--span-8 {
    grid-column: span 8;
    grid-template-columns: 2fr 1fr;
  }
}

.sme-dash-mid-wrap {
  grid-column: span 12;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sme-dash-mid-wrap {
    grid-column: span 8;
    grid-template-columns: 2fr 1fr;
  }
}

.sme-dash-card--span-8-wide {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .sme-dash-card--span-8-wide {
    grid-column: span 8;
  }
}

.sme-dash-card--span-3 {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .sme-dash-card--span-3 {
    grid-column: span 3;
  }
}

.sme-score-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.sme-score-ring svg {
  width: 12rem;
  height: 12rem;
}

.sme-score-ring__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sme-score-ring__value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.sme-score-ring__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-slate-500);
}

.sme-pill-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--color-secondary-container);
  border-radius: var(--radius-full);
}

.sme-pill-status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
}

.sme-vuln-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.sme-vuln-stat {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

.sme-vuln-stat--critical {
  background: var(--color-error-container);
  border: 1px solid rgba(186, 26, 26, 0.1);
}

.sme-vuln-stat--high {
  background: var(--color-tertiary-fixed);
  border: 1px solid rgba(32, 17, 0, 0.1);
}

.sme-vuln-stat--low {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
}

.sme-vuln-stat__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 0.25rem;
}

.sme-vuln-stat__value {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

.sme-progress-bar {
  width: 100%;
  height: 0.375rem;
  background: var(--color-slate-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.sme-progress-bar__fill {
  height: 100%;
  background: var(--color-secondary);
  width: 88%;
}

.sme-table-dash th {
  text-align: left;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-slate-500);
  border-bottom: 1px solid var(--color-slate-100);
}

.dark .sme-table-dash th {
  border-color: var(--color-slate-800);
}

.sme-table-dash td {
  padding: 1rem 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-slate-50);
}

.dark .sme-table-dash td {
  border-color: var(--color-slate-800);
}

.sme-table-dash .sme-badge-tiny {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.sme-site-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .sme-site-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sme-site-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sme-site-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-slate-100);
  background: var(--color-slate-50);
}

.dark .sme-site-card {
  border-color: var(--color-slate-800);
  background: var(--color-slate-950);
}

.sme-site-card img {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.sme-ai-float {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 60;
}

.sme-ai-float__tip {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 1rem;
  width: 16rem;
  padding: var(--space-md);
  background: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: sme-bounce-subtle 2s ease-in-out infinite;
}

@keyframes sme-bounce-subtle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.sme-ai-float__tip::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  right: 1.5rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-inverse-surface);
  transform: rotate(45deg);
}

.sme-ai-float__btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--color-indigo-700);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
}

.sme-ai-float__btn:hover {
  transform: scale(1.05);
}

.sme-ai-float__btn .material-symbols-outlined {
  font-size: 1.5rem;
}

/* ---------- Landing marketing ---------- */
.sme-page-landing {
  background: var(--color-background);
  color: var(--color-on-background);
}

.sme-page-landing ::selection {
  background: var(--color-secondary-container);
}

.sme-landing-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 var(--space-xl);
  background: #fff;
  border-bottom: 1px solid var(--color-slate-200);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .sme-landing-header {
  background: var(--color-slate-900);
  border-color: var(--color-slate-800);
}

.sme-landing-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.sme-landing-header__brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-slate-900);
  letter-spacing: -0.025em;
}

.dark .sme-landing-header__brand {
  color: #fff;
}

.sme-landing-nav {
  display: none;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .sme-landing-nav {
    display: flex;
  }
}

.sme-landing-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-slate-500);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
}

.sme-landing-nav a:first-child {
  color: var(--color-indigo-600);
  font-weight: 600;
}

.dark .sme-landing-nav a:first-child {
  color: #a5b4fc;
}

.sme-landing-nav a:hover {
  background: var(--color-slate-50);
}

.sme-landing-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sme-landing-search {
  position: relative;
  display: none;
}

@media (min-width: 1024px) {
  .sme-landing-search {
    display: block;
  }
}

.sme-landing-search .material-symbols-outlined {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--color-slate-400);
}

.sme-landing-search input {
  padding: 0.375rem 1rem 0.375rem 2.5rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-slate-50);
  font-size: 0.875rem;
  width: 14rem;
}

.sme-landing-search input:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 0;
}

.sme-landing-hero {
  position: relative;
  padding: 5rem var(--space-xl) 8rem;
  overflow: hidden;
}

.sme-landing-hero__grid {
  max-width:  1480px;  
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .sme-landing-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sme-landing-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

.sme-landing-pill .material-symbols-outlined {
  font-size: 0.875rem;
  font-variation-settings: "FILL" 1;
}

.sme-landing-hero h1 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 var(--space-lg);
}

.sme-landing-hero__lead {
  font-size: 1.125rem;
  color: var(--color-on-surface-variant);
  max-width: 32rem;
  margin: 0 0 var(--space-xl);
}

.sme-landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.sme-landing-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

.sme-landing-cta-primary:hover {
  background: var(--color-slate-800);
}

.sme-landing-cta-secondary {
  padding: 1rem 2rem;
  background: #fff;
  border: 1px solid var(--color-outline);
  color: var(--color-primary);
  font-weight: 600;
  border-radius: var(--radius-lg);
}

.sme-landing-cta-secondary:hover {
  background: var(--color-surface-low);
}

.sme-landing-social-proof {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
}

.sme-landing-avatars {
  display: flex;
}

.sme-landing-avatars img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 2px solid #fff;
  margin-left: -0.75rem;
  object-fit: cover;
}

.sme-landing-avatars img:first-child {
  margin-left: 0;
}

.sme-landing-mockup {
  position: relative;
}

.sme-landing-mockup__glow {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 24rem;
  height: 24rem;
  background: rgba(108, 248, 187, 0.2);
  border-radius: var(--radius-full);
  filter: blur(48px);
}

.sme-landing-bento {
  position: relative;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-slate-200);
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.sme-trust {
  padding: var(--space-2xl) var(--space-xl);
  background: #fff;
  border-top: 1px solid var(--color-slate-100);
  border-bottom: 1px solid var(--color-slate-100);
  text-align: center;
}

.sme-trust__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0 0 var(--space-xl);
}

.sme-trust__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  opacity: 0.6;
  filter: grayscale(1);
  transition: filter 0.5s, opacity 0.5s;
}

.sme-trust__logos:hover {
  filter: grayscale(0);
  opacity: 1;
}

.sme-trust__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-slate-400);
}

.sme-features {
  padding: 8rem var(--space-xl);
  background: var(--color-surface-bright);
}

.sme-features__head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--space-2xl);
}

.sme-features__grid {
  max-width: 1480px;
  display: grid;
  gap: var(--space-lg);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .sme-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sme-features__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sme-feature-card {
  padding: var(--space-xl);
  background: #fff;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, transform 0.2s;
}

.sme-feature-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.sme-feature-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.sme-landing-cta-band {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
  border-radius: 1.5rem;
  background: var(--color-primary-container);
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.sme-landing-cta-band h2 {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
}

.sme-landing-cta-band p {
  font-size: 1.125rem;
  color: var(--color-slate-300);
  max-width: 36rem;
  margin: 0 auto var(--space-xl);
}

.sme-landing-cta-band__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: center;
}

@media (min-width: 640px) {
  .sme-landing-cta-band__row {
    flex-direction: row;
  }
}

.sme-landing-cta-band__primary {
  padding: 1.25rem 2.5rem;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-weight: 600;
  border-radius: var(--radius-full);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.sme-landing-cta-band__ghost {
  padding: 1.25rem 2.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

.sme-home-wrap {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

.sme-home-how,
.sme-home-testimonials,
.sme-home-faq {
  padding: 5rem var(--space-xl);
}

.sme-home-how {
  position: relative;
  background:
    radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.12), transparent 35%),
    radial-gradient(circle at 85% 5%, rgba(16, 185, 129, 0.12), transparent 30%),
    var(--color-surface);
  overflow: hidden;
}

.sme-home-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  position: relative;
}

.sme-home-how__grid::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-indigo-600), transparent);
  opacity: 0.45;
}

@media (min-width: 768px) {
  .sme-home-how__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sme-home-how__grid::before {
    left: 50%;
    top: 2rem;
    bottom: 2rem;
  }
}

.sme-home-step {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  box-shadow: 0 10px 25px -20px rgba(2, 6, 23, 0.8);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sme-home-step:hover {
  transform: translateY(-3px);
  border-color: var(--color-indigo-600);
  box-shadow: 0 18px 35px -22px rgba(79, 70, 229, 0.65);
}

.sme-home-step::after {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: 2rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-indigo-600);
  box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.16);
}

@media (min-width: 768px) {
  .sme-home-step:nth-child(even)::after {
    left: auto;
    right: -0.55rem;
  }
}

.sme-home-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 0.75rem;
}

.sme-home-step > span {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.sme-home-step__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sme-home-step__chip .material-symbols-outlined {
  font-size: 0.95rem;
}

.sme-home-step__media {
  margin: 0 0 var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
}

.sme-home-step__media img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 0.25s ease;
}

.sme-home-step:hover .sme-home-step__media img {
  transform: scale(1.02);
}
.sme-home-testimonials {
  background: var(--color-surface-low);
}

.sme-home-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .sme-home-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sme-home-quote {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.sme-home-quote p {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-on-surface);
}

.sme-home-quote span {
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
  font-weight: 600;
}

.sme-home-faq {
  background: var(--color-background);
}

.sme-home-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .sme-home-faq__grid {
    grid-template-columns: 1fr;
  }
}

.sme-home-faq__grid article {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.sme-faq-item {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sme-faq-item__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1rem;
}

.sme-faq-item__summary::-webkit-details-marker {
  display: none;
}

.sme-faq-item__summary .material-symbols-outlined {
  color: var(--color-on-surface-variant);
  transition: transform 0.2s ease;
}

.sme-faq-item[open] .sme-faq-item__summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.sme-faq-item__answer {
  padding: 0 var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--color-outline-variant);
}

.sme-faq-item__answer p {
  margin: var(--space-md) 0 0;
}

/* ---------- Security scan loader ---------- */
.sme-page-scan {
  background: var(--color-background);
  min-height: 100vh;
}

.sme-page-body--scan {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.sme-scan-hero {
  text-align: center;
  margin: var(--space-xl) 0 var(--space-2xl);
}

.sme-scan-hero h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.sme-scan-hero p {
  max-width: 42rem;
  margin: 0 auto var(--space-xl);
  color: var(--color-on-surface-variant);
  font-size: 1.125rem;
}

.sme-scan-url-card {
  max-width: 48rem;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-slate-200);
  padding: var(--space-xl);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sme-scan-url-row {
  position: relative;
  margin-bottom: var(--space-lg);
}

.sme-scan-url-row input {
  width: 100%;
  padding: 1.25rem 1.5rem;
  padding-right: 11rem;
  border: 2px solid var(--color-slate-100);
  border-radius: var(--radius-lg);
  font-size: 1.125rem;
  background: var(--color-slate-50);
}

.sme-scan-url-row input:focus {
  border-color: var(--color-indigo-600);
  outline: none;
}

.sme-scan-url-row button {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  bottom: 0.75rem;
  padding: 0 2rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sme-scan-url-row button:hover {
  background: var(--color-primary-container);
}

.sme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.sme-toggle-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.sme-toggle-track {
  width: 3rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  padding: 0.25rem;
  position: relative;
  background: var(--color-slate-200);
  transition: background 0.2s;
}

.sme-toggle-pill:hover .sme-toggle-track {
  background: #c7d2fe;
}

.sme-toggle-track--on {
  background: var(--color-indigo-600);
}

.sme-toggle-knob {
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.sme-toggle-track--on .sme-toggle-knob {
  transform: translateX(1.5rem);
}

.sme-scan-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.sme-scan-progress-card {
  grid-column: span 12;
  background: #fff;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

@media (min-width: 1024px) {
  .sme-scan-progress-card {
    grid-column: span 8;
  }
}

.sme-scan-side {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .sme-scan-side {
    grid-column: span 4;
  }
}

.sme-scan-insight {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

.sme-scan-tip {
  background: #fff;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.sme-plan-card {
  background: var(--color-indigo-900);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.sme-plan-card__bar {
  height: 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 0.5rem;
}

.sme-plan-card__bar-fill {
  height: 100%;
  width: 75%;
  background: var(--color-secondary-container);
}

.sme-table-simple th {
  text-align: left;
  padding: 1rem var(--space-lg);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-slate-500);
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--color-slate-100);
}

.sme-table-simple td {
  padding: 1rem var(--space-lg);
  border-bottom: 1px solid var(--color-slate-50);
}

.sme-table-simple tr:hover {
  background: var(--color-slate-50);
}

/* ---------- Monitoring ---------- */
.uptime-bar {
  height: 16px;
  width: 3px;
  border-radius: 1px;
}

.sme-page-monitor .sme-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .sme-page-monitor .sme-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sme-stat-card {
  background: #fff;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 7rem;
}

.dark .sme-stat-card {
  background: var(--color-slate-900);
  border-color: var(--color-slate-800);
}

.sme-stat-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-slate-500);
}

.sme-stat-card__value {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.sme-monitor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .sme-monitor-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.sme-notify-panel {
  background: var(--color-primary-container);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.sme-notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

.sme-switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
}

.sme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.sme-switch__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--color-slate-700);
  border-radius: var(--radius-full);
  transition: background 0.2s;
}

.sme-switch__slider::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: var(--radius-full);
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.sme-switch input:checked + .sme-switch__slider {
  background: var(--color-secondary);
}

.sme-switch input:checked + .sme-switch__slider::after {
  transform: translateX(1.25rem);
}

.sme-alert-log-item {
  display: flex;
  gap: var(--space-md);
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-low);
  border-left: 4px solid var(--color-error);
}

.sme-alert-log-item--warn {
  border-color: var(--color-tertiary-fixed-dim);
}

.sme-alert-log-item--ok {
  border-color: var(--color-secondary);
}

.sme-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 12rem;
  padding: 0 var(--space-md) var(--space-md);
}

.sme-chart-bars > div {
  flex: 1;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: rgba(79, 70, 229, 0.35);
}

/* ---------- Settings ---------- */
.sme-settings-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
  max-width: 72rem;
  margin: 0 auto;
}

.sme-settings-card {
  grid-column: span 12;
  background: #fff;
  padding: var(--space-lg);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

@media (min-width: 1024px) {
  .sme-settings-card--7 {
    grid-column: span 7;
  }
  .sme-settings-card--5 {
    grid-column: span 5;
  }
  .sme-settings-card--6 {
    grid-column: span 6;
  }
}

.sme-domain-card {
  padding: var(--space-md);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
}

.sme-domain-card:hover {
  border-color: #c7d2fe;
}

.sme-freq-banner {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: rgba(238, 242, 255, 0.5);
  border: 1px solid #e0e7ff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ---------- Audit results ---------- */
.vulnerability-expandable:hover {
  box-shadow: var(--shadow-card);
}

.sme-page-body--audit {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
}

.sme-audit-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  width: 100%;
}

.sme-audit-content {
  flex: 1;
  padding: var(--space-xl);
}

.sme-audit-tabs {
  display: flex;
  gap: var(--space-xl);
  border-bottom: 1px solid var(--color-slate-200);
  margin-bottom: var(--space-lg);
}

.sme-audit-tabs button {
  padding: 1rem 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-slate-500);
  cursor: pointer;
}

.sme-audit-tabs button:first-child {
  border-color: var(--color-indigo-700);
  color: var(--color-indigo-700);
}

.sme-vuln-row {
  background: #fff;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.sme-vuln-row__head {
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.sme-audit-aside {
  width: 24rem;
  border-left: 1px solid var(--color-slate-200);
  padding: var(--space-lg);
  position: sticky;
  top: 4rem;
  align-self: flex-start;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: #fff;
}

.sme-code-block {
  background: var(--color-slate-900);
  color: var(--color-slate-300);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  border-left: 4px solid var(--color-indigo-600);
  overflow-x: auto;
}

.sme-main .sme-report-wrap {
  margin-left: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Custom scan ---------- */
.sme-page-custom {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-on-surface);
  background: var(--color-background);
  overflow-x: hidden;
}

.sme-custom-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem var(--space-xl);
  background: #fff;
  border-bottom: 1px solid var(--color-slate-200);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sme-custom-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 16rem;
  height: 100vh;
  z-index: 40;
  background: #fff;
  border-right: 1px solid var(--color-slate-200);
  padding-top: 5rem;
}

.sme-custom-main {
  margin-left: 16rem;
  padding: var(--space-xl);
  min-height: 100vh;
}

.sme-check-card {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
}

.sme-check-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sme-check-card__face {
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.sme-check-card input:checked + .sme-check-card__face {
  border-color: var(--color-primary);
  background: var(--color-surface-low);
}

.sme-check-card__check {
  display: none;
  color: var(--color-primary);
}

.sme-check-card input:checked + .sme-check-card__face .sme-check-card__check {
  display: block;
}

.sme-custom-footer-bar {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-slate-900);
  color: var(--color-slate-400);
  border-radius: var(--radius-lg);
}

/* ---------- Admin console ---------- */
.sme-page-admin {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-on-surface);
  background: var(--color-background);
  overflow-x: hidden;
}

.sme-admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .sme-admin-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sme-admin-kpi {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sme-admin-kpi__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.sme-admin-kpi__value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}

.sme-admin-kpi__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-top: 0.35rem;
}

.sme-admin-panel {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sme-admin-panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-outline-variant);
}

.sme-admin-rate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .sme-admin-rate-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sme-admin-rate-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sme-admin-rate-field .sme-input {
  width: 100%;
}

.sme-admin-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
}

.sme-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sme-admin-table th,
.sme-admin-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--color-outline-variant);
  vertical-align: middle;
}

.sme-admin-table th {
  background: var(--color-surface-low);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.sme-admin-table tr:last-child td {
  border-bottom: none;
}

.sme-admin-table tbody tr:hover {
  background: var(--color-surface-low);
}

.sme-admin-engine-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .sme-admin-engine-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sme-admin-engine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container);
}

.sme-admin-engine--ok {
  border-color: rgba(16, 185, 129, 0.35);
}

.sme-admin-engine--bad {
  border-color: rgba(220, 38, 38, 0.35);
}

.sme-admin-mini-btn {
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-on-surface);
}

.sme-admin-mini-btn:hover {
  border-color: var(--color-indigo-600);
  color: var(--color-indigo-700);
}

.sme-admin-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: 0.875rem;
}

.sme-admin-alert--ok {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.sme-admin-alert--err {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

.sme-admin-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.sme-admin-form__field label {
  display: block;
}

.sme-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  font-size: 0.875rem;
}

.sme-admin-pagination a {
  color: var(--color-indigo-600);
  font-weight: 600;
  text-decoration: none;
}

.sme-admin-pagination a:hover {
  text-decoration: underline;
}

.dark .sme-admin-kpi,
.dark .sme-admin-panel,
.dark .sme-admin-engine {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
}

/* ---------- Security report PDF view ---------- */
@media print {
  .no-print {
    display: none !important;
  }
  .print-break {
    page-break-after: always;
  }
}

.sme-page-report {
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.sme-report-wrap {
  flex: 1;
  margin-left: 16rem;
  padding: var(--space-xl);
  background: var(--color-surface);
  overflow-y: auto;
}

.sme-report-paper {
  max-width: 64rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-slate-200);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xl);
}

.sme-report-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .sme-report-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sme-report-risk {
  background: #fff;
  border: 1px solid var(--color-slate-200);
  padding: var(--space-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sme-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-indigo-600);
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: sme-spin 0.8s linear infinite;
}

@keyframes sme-spin {
  to {
    transform: rotate(360deg);
  }
}

.sme-pulse-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-emerald-500);
  animation: sme-pulse 2s ease-in-out infinite;
}

@keyframes sme-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ---------- Thème sombre : blocs encore en #fff (cartes, login, custom, etc.) ---------- */
.dark .sme-login-panel,
.dark .sme-login-social button,
.dark .sme-landing-cta-secondary,
.dark .sme-landing-bento,
.dark .sme-trust,
.dark .sme-feature-card,
.dark .sme-scan-url-card,
.dark .sme-scan-progress-card,
.dark .sme-scan-tip,
.dark .sme-settings-card,
.dark .sme-vuln-row,
.dark .sme-audit-aside,
.dark .sme-custom-topbar,
.dark .sme-custom-sidebar,
.dark .sme-check-card__face,
.dark .sme-report-paper,
.dark .sme-report-risk {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dark .sme-landing-cta-secondary {
  color: var(--color-on-surface);
}

.dark .sme-login-page-footer {
  background: rgba(2, 6, 23, 0.88);
  border-top-color: var(--color-outline-variant);
  backdrop-filter: blur(8px);
}

.dark .sme-login-page-footer__inner,
.dark .sme-login-page-footer a {
  color: var(--color-slate-400);
}

/* ---------- Utilitaires layout légers ---------- */
.sme-row {
  display: flex;
  align-items: center;
}
.sme-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sme-gap-sm {
  gap: var(--space-sm);
}
.sme-gap-md {
  gap: var(--space-md);
}
.sme-gap-lg {
  gap: var(--space-lg);
}
.sme-mt-sm {
  margin-top: var(--space-sm);
}
.sme-mt-md {
  margin-top: var(--space-md);
}
.sme-mt-lg {
  margin-top: var(--space-lg);
}
.sme-mb-lg {
  margin-bottom: var(--space-lg);
}
.sme-mb-xl {
  margin-bottom: var(--space-xl);
}
.sme-p-lg {
  padding: var(--space-lg);
}
.sme-text-center {
  text-align: center;
}
.sme-text-right {
  text-align: right;
}
.sme-w-full {
  width: 100%;
}
.sme-hidden-mobile {
  display: none;
}
@media (min-width: 768px) {
  .sme-hidden-mobile {
    display: block;
  }
  .sme-hidden-desktop {
    display: none;
  }
}