/*----------------------------------------*/
/*  1. Theme Default
/*----------------------------------------*/
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Saans";
  src: url("../fonts/Saans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Saans";
  src: url("../fonts/Saans-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Saans";
  src: url("../fonts/Saans-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Saans";
  src: url("../fonts/Saans-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Bagoss Standard";
  src: url("../fonts/BagossStandard-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bagoss Standard";
  src: url("../fonts/BagossStandard-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Bagoss Standard";
  src: url("../fonts/BagossStandard-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Bagoss Standard";
  src: url("../fonts/BagossStandard-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Commit Mono";
  src: url("../fonts/CommitMono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Commit Mono";
  src: url("../fonts/CommitMono-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── Primitives ──────────────────── */
  --white: #ffffff;
  --black: #0b0c0e;

  --gray-50: #f9fbfd;
  --gray-100: #f2f5f8;
  --gray-200: #e2e7eb;
  --gray-300: #d7dce2;
  --gray-400: #adb3ba;
  --gray-500: #828991;
  --gray-600: #636970;
  --gray-700: #44494e;
  --gray-800: #272a2f;
  --gray-900: #191b1e;
  --gray-950: #0b0c0e;

  --blue-50: #f4f8ff;
  --blue-100: #ecf3ff;
  --blue-200: #d5e4ff;
  --blue-300: #c3d8ff;
  --blue-400: #86afff;
  --blue-500: #4f87ff;
  --blue-600: #2661ef;
  --blue-700: #214fc4;
  --blue-800: #1b3e9e;
  --blue-900: #142e7e;
  --blue-950: #091b5e;

  --cyan-50: #f1fdff;
  --cyan-100: #e2fafe;
  --cyan-200: #c1f2fa;
  --cyan-300: #a0ecfa;
  --cyan-400: #68d2e8;
  --cyan-500: #06bad6;
  --cyan-600: #0092aa;
  --cyan-700: #007489;
  --cyan-800: #00596b;
  --cyan-900: #004252;
  --cyan-950: #002833;

  --marigold-50: #fefaf1;
  --marigold-100: #fff3da;
  --marigold-200: #ffe4af;
  --marigold-300: #ffd78e;
  --marigold-400: #ffc65b;
  --marigold-500: #ffb60a;
  --marigold-600: #d49100;
  --marigold-700: #a56900;
  --marigold-800: #844f00;
  --marigold-900: #633700;
  --marigold-950: #422100;

  --red-50: #fff8f8;
  --red-100: #feefee;
  --red-200: #fed9d7;
  --red-300: #fec7c4;
  --red-400: #fa8881;
  --red-500: #ef4444;
  --red-600: #c82e2e;
  --red-700: #a21f21;
  --red-800: #811517;
  --red-900: #620b0e;
  --red-950: #440607;

  --amber-50: #fdfaf2;
  --amber-100: #fff3d6;
  --amber-200: #fde3a9;
  --amber-300: #ffd57b;
  --amber-400: #fac44e;
  --amber-500: #f6b400;
  --amber-600: #cc9000;
  --amber-700: #9f6900;
  --amber-800: #804f00;
  --amber-900: #603700;
  --amber-950: #412200;

  --green-50: #f3fef6;
  --green-100: #e4fbeb;
  --green-200: #c1f6d0;
  --green-300: #9af4b6;
  --green-400: #63df8f;
  --green-500: #18c76a;
  --green-600: #009a4f;
  --green-700: #00783c;
  --green-800: #015d2d;
  --green-900: #084723;
  --green-950: #042b13;

  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-72: 72px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;
  --space-144: 144px;
  --space-160: 160px;
  --space-176: 176px;
  --space-192: 192px;
  --space-208: 208px;
  --space-224: 224px;
  --space-240: 240px;
  --space-256: 256px;
  --space-288: 288px;
  --space-320: 320px;
  --space-384: 384px;
  --space-512: 512px;

  --font-bagoss: "Bagoss Standard", system-ui, -apple-system, sans-serif;
  --font-saans: "Saans", system-ui, -apple-system, sans-serif;
  --font-commit: "Commit Mono", ui-monospace, monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --line-height-xs: 16px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 30px;
  --line-height-2xl: 32px;
  --line-height-3xl: 38px;
  --line-height-4xl: 44px;
  --line-height-5xl: 60px;
  --line-height-6xl: 72px;
  --line-height-7xl: 88px;
  --line-height-8xl: 112px;
  --line-height-9xl: 144px;

  --letter-spacing-xs: -0.8px;
  --letter-spacing-sm: -0.4px;
  --letter-spacing-md: -0.2px;
  --letter-spacing-lg: 0px;
  --letter-spacing-xl: 0.2px;
  --letter-spacing-2xl: 0.4px;
  --letter-spacing-3xl: 0.8px;
  --letter-spacing-4xl: 1.6px;

  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-6: 6px;
  --border-8: 8px;
  --border-10: 10px;
  --border-12: 12px;

  --radius-0: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-6xl: 32px;
  --radius-full: 9999px;

  --blur-0: 0px;
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-35: 0.35;
  --opacity-40: 0.4;
  --opacity-45: 0.45;
  --opacity-50: 0.5;
  --opacity-55: 0.55;
  --opacity-60: 0.6;
  --opacity-65: 0.65;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-85: 0.85;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  --duration-faster: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  --z-0: 0;
  --z-1: 1;
  --z-2: 2;
  --z-3: 3;
  --z-4: 4;
  --z-5: 5;
  --z-6: 6;
  --z-7: 7;
  --z-8: 8;
  --z-9: 9;
  --z-10: 10;
  --z-max: 9999;

  /* ── Alpha ───────────────────── */
  --gray-a2: rgba(11, 12, 14, 0.02);
  --gray-a4: rgba(11, 12, 14, 0.04);
  --gray-a8: rgba(11, 12, 14, 0.08);
  --gray-a12: rgba(11, 12, 14, 0.12);
  --gray-a16: rgba(11, 12, 14, 0.16);
  --gray-a24: rgba(11, 12, 14, 0.24);
  --gray-a32: rgba(11, 12, 14, 0.32);
  --gray-a48: rgba(11, 12, 14, 0.48);
  --gray-a56: rgba(11, 12, 14, 0.56);
  --gray-a64: rgba(11, 12, 14, 0.64);
  --gray-a72: rgba(11, 12, 14, 0.72);

  --blue-a2: rgba(38, 97, 239, 0.02);
  --blue-a4: rgba(38, 97, 239, 0.04);
  --blue-a8: rgba(38, 97, 239, 0.08);
  --blue-a12: rgba(38, 97, 239, 0.12);
  --blue-a16: rgba(38, 97, 239, 0.16);
  --blue-a24: rgba(38, 97, 239, 0.24);
  --blue-a32: rgba(38, 97, 239, 0.32);
  --blue-a48: rgba(38, 97, 239, 0.48);
  --blue-a56: rgba(38, 97, 239, 0.56);
  --blue-a64: rgba(38, 97, 239, 0.64);
  --blue-a72: rgba(38, 97, 239, 0.72);

  --cyan-a2: rgba(6, 186, 214, 0.02);
  --cyan-a4: rgba(6, 186, 214, 0.04);
  --cyan-a8: rgba(6, 186, 214, 0.08);
  --cyan-a12: rgba(6, 186, 214, 0.12);
  --cyan-a16: rgba(6, 186, 214, 0.16);
  --cyan-a24: rgba(6, 186, 214, 0.24);
  --cyan-a32: rgba(6, 186, 214, 0.32);
  --cyan-a48: rgba(6, 186, 214, 0.48);
  --cyan-a56: rgba(6, 186, 214, 0.56);
  --cyan-a64: rgba(6, 186, 214, 0.64);
  --cyan-a72: rgba(6, 186, 214, 0.72);

  --marigold-a2: rgba(255, 182, 10, 0.02);
  --marigold-a4: rgba(255, 182, 10, 0.04);
  --marigold-a8: rgba(255, 182, 10, 0.08);
  --marigold-a12: rgba(255, 182, 10, 0.12);
  --marigold-a16: rgba(255, 182, 10, 0.16);
  --marigold-a24: rgba(255, 182, 10, 0.24);
  --marigold-a32: rgba(255, 182, 10, 0.32);
  --marigold-a48: rgba(255, 182, 10, 0.48);
  --marigold-a56: rgba(255, 182, 10, 0.56);
  --marigold-a64: rgba(255, 182, 10, 0.64);
  --marigold-a72: rgba(255, 182, 10, 0.72);

  --red-a2: rgba(239, 68, 68, 0.02);
  --red-a4: rgba(239, 68, 68, 0.04);
  --red-a8: rgba(239, 68, 68, 0.08);
  --red-a12: rgba(239, 68, 68, 0.12);
  --red-a16: rgba(239, 68, 68, 0.16);
  --red-a24: rgba(239, 68, 68, 0.24);
  --red-a32: rgba(239, 68, 68, 0.32);
  --red-a48: rgba(239, 68, 68, 0.48);
  --red-a56: rgba(239, 68, 68, 0.56);
  --red-a64: rgba(239, 68, 68, 0.64);
  --red-a72: rgba(239, 68, 68, 0.72);

  --amber-a2: rgba(246, 180, 0, 0.02);
  --amber-a4: rgba(246, 180, 0, 0.04);
  --amber-a8: rgba(246, 180, 0, 0.08);
  --amber-a12: rgba(246, 180, 0, 0.12);
  --amber-a16: rgba(246, 180, 0, 0.16);
  --amber-a24: rgba(246, 180, 0, 0.24);
  --amber-a32: rgba(246, 180, 0, 0.32);
  --amber-a48: rgba(246, 180, 0, 0.48);
  --amber-a56: rgba(246, 180, 0, 0.56);
  --amber-a64: rgba(246, 180, 0, 0.64);
  --amber-a72: rgba(246, 180, 0, 0.72);

  --green-a2: rgba(24, 199, 106, 0.02);
  --green-a4: rgba(24, 199, 106, 0.04);
  --green-a8: rgba(24, 199, 106, 0.08);
  --green-a12: rgba(24, 199, 106, 0.12);
  --green-a16: rgba(24, 199, 106, 0.16);
  --green-a24: rgba(24, 199, 106, 0.24);
  --green-a32: rgba(24, 199, 106, 0.32);
  --green-a48: rgba(24, 199, 106, 0.48);
  --green-a56: rgba(24, 199, 106, 0.56);
  --green-a64: rgba(24, 199, 106, 0.64);
  --green-a72: rgba(24, 199, 106, 0.72);

  /* ── Semantics ───────────────────── */
  --constant-white: var(--white);
  --constant-black: var(--black);

  --bg-default: var(--white);
  --bg-surface: var(--gray-50);
  --bg-subtle: var(--gray-100);
  --bg-muted: var(--gray-200);
  --bg-disabled: var(--gray-100);
  --bg-elevated: var(--white);
  --bg-emphasis: var(--gray-800);
  --bg-inverse: var(--gray-950);

  --text-default: var(--gray-950);
  --text-muted: var(--gray-700);
  --text-subtle: var(--gray-600);
  --text-support: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse: var(--gray-50);

  --icon-default: var(--gray-950);
  --icon-muted: var(--gray-700);
  --icon-subtle: var(--gray-600);
  --icon-support: var(--gray-500);
  --icon-disabled: var(--gray-400);
  --icon-inverse: var(--gray-50);

  --border-muted: var(--gray-200);
  --border-default: var(--gray-300);
  --border-emphasis: var(--gray-400);
  --border-contrast: var(--gray-500);
  --border-inverse: var(--gray-950);

  --brand-subtle: var(--blue-50);
  --brand-muted: var(--blue-200);
  --brand-default: var(--blue-600);
  --brand-emphasis: var(--blue-700);
  --brand-contrast: var(--blue-900);

  --accent-cyan-subtle: var(--cyan-50);
  --accent-cyan-muted: var(--cyan-200);
  --accent-cyan-default: var(--cyan-500);
  --accent-cyan-emphasis: var(--cyan-700);
  --accent-cyan-contrast: var(--cyan-900);

  --accent-marigold-subtle: var(--marigold-50);
  --accent-marigold-muted: var(--marigold-200);
  --accent-marigold-default: var(--marigold-500);
  --accent-marigold-emphasis: var(--marigold-700);
  --accent-marigold-contrast: var(--marigold-900);

  --danger-subtle: var(--red-50);
  --danger-muted: var(--red-200);
  --danger-default: var(--red-500);
  --danger-emphasis: var(--red-700);
  --danger-contrast: var(--red-900);

  --warning-subtle: var(--amber-50);
  --warning-muted: var(--amber-200);
  --warning-default: var(--amber-500);
  --warning-emphasis: var(--amber-700);
  --warning-contrast: var(--amber-900);

  --success-subtle: var(--green-50);
  --success-muted: var(--green-200);
  --success-default: var(--green-500);
  --success-emphasis: var(--green-700);
  --success-contrast: var(--green-900);

  --info-subtle: var(--blue-50);
  --info-muted: var(--blue-200);
  --info-default: var(--blue-500);
  --info-emphasis: var(--blue-700);
  --info-contrast: var(--blue-900);

  --state-brand-hover: var(--blue-700);
  --state-brand-focus: var(--blue-500);
  --state-brand-ring: var(--blue-a12);
  --state-brand-selected: var(--blue-a12);
  --state-brand-pressed: var(--blue-a16);
  --state-brand-active: var(--blue-a24);

  --state-cyan-hover: var(--cyan-600);
  --state-cyan-focus: var(--cyan-500);
  --state-cyan-ring: var(--cyan-a12);
  --state-cyan-selected: var(--cyan-a12);
  --state-cyan-pressed: var(--cyan-a16);
  --state-cyan-active: var(--cyan-a24);

  --state-marigold-hover: var(--marigold-600);
  --state-marigold-focus: var(--marigold-500);
  --state-marigold-ring: var(--marigold-a12);
  --state-marigold-selected: var(--marigold-a12);
  --state-marigold-pressed: var(--marigold-a16);
  --state-marigold-active: var(--marigold-a24);

  --state-danger-hover: var(--red-600);
  --state-danger-focus: var(--red-500);
  --state-danger-ring: var(--red-a12);
  --state-danger-selected: var(--red-a12);
  --state-danger-pressed: var(--red-a16);
  --state-danger-active: var(--red-a24);

  --state-warning-hover: var(--amber-600);
  --state-warning-focus: var(--amber-500);
  --state-warning-ring: var(--amber-a12);
  --state-warning-selected: var(--amber-a12);
  --state-warning-pressed: var(--amber-a16);
  --state-warning-active: var(--amber-a24);

  --state-success-hover: var(--green-600);
  --state-success-focus: var(--green-500);
  --state-success-ring: var(--green-a12);
  --state-success-selected: var(--green-a12);
  --state-success-pressed: var(--green-a16);
  --state-success-active: var(--green-a24);

  --state-info-hover: var(--blue-700);
  --state-info-focus: var(--blue-500);
  --state-info-ring: var(--blue-a12);
  --state-info-selected: var(--blue-a12);
  --state-info-pressed: var(--blue-a16);
  --state-info-active: var(--blue-a24);
}

/* LAYOUT */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg-default);
  color: var(--text-default);
  font-family: var(--font-saans);
  font-size: var(--font-size-md);
  font-weight: var(--font-regular);
  line-height: var(--line-height-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
}

.icon-muted {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
}

.auth-page {
  overflow: hidden;
}

.auth-layout {
  --kenburns-duration: 8s;
  --kenburns-easing: linear;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gray-950);
}

.auth-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-1);
  pointer-events: none;
  background: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--constant-white) 8%, transparent) 0%, transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--constant-black) 40%, transparent) 0%, color-mix(in srgb, var(--constant-black) 70%, transparent) 50%, color-mix(in srgb, var(--constant-black) 90%, transparent) 100%);
}

.auth-banner {
  position: absolute;
  inset: -5%;
  z-index: 0;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  will-change: opacity, transform;
}

.auth-banner.active {
  opacity: var(--opacity-100);
}

.auth-banner[data-auth-banner="1"] {
  background-image: url("../images/showcase-1.webp");
  background-position: center;
}

.auth-banner[data-auth-banner="2"] {
  background-image: url("../images/showcase-2.webp");
  background-position: center;
}

.auth-banner[data-auth-banner="3"] {
  background-image: url("../images/showcase-3.webp");
  background-position: center;
}

.auth-banner[data-auth-banner="4"] {
  background-image: url("../images/showcase-4.webp");
  background-position: center;
}

.auth-showcase,
.auth-panel {
  position: relative;
  min-height: 100svh;
  z-index: var(--z-2);
}

.auth-panel {
  display: flex;
  padding: var(--space-8);
  align-items: stretch;
}

.auth-content {
    position: absolute;
    left: var(--space-32);
    right: var(--space-32);
    bottom: var(--space-96);
    max-width: 640px;
    color: var(--constant-white);
    transform: translateY(16px);
    transition: opacity 0.5s ease,
    transform 0.5s ease;
    pointer-events: none;
    z-index: var(--z-6);
    opacity: var(--opacity-0);
}
  
.auth-content.active {
    opacity: var(--opacity-100);
    transform: translateY(0);
}

.auth-content-label {
    display: block;
    margin-bottom: var(--space-12);
    color: var(--constant-white);
    opacity: var(--opacity-70);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.auth-content-label.scramble-active {
    color: var(--constant-white);
    opacity: var(--opacity-70);
    font-weight: var(--font-semibold);
}

.scramble-char {
    display: inline;
    min-width: 0;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
}

.scramble-char.scrambling {
    color: var(--constant-white);
    opacity: var(--opacity-70);
}

.scramble-char.waiting {
    color: var(--constant-white);
    opacity: var(--opacity-70);
}

.auth-content h2 {
    color: var(--constant-white);
    font-size: var(--font-size-4xl);
    font-family: var(--font-bagoss);
    font-weight: var(--font-medium);
    line-height: var(--line-height-4xl);
    margin-bottom: var(--space-12);
    max-width: 20ch;
}

.auth-content p {
    max-width: 512px;
    color: color-mix(in srgb, var(--constant-white) 80%, transparent);
    margin-bottom: 0;
}
  
.auth-meta {
    position: absolute;
    top: var(--space-24);
    left: var(--space-32);
    right: var(--space-32);
    z-index: var(--z-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.auth-meta span {
    color: color-mix(in srgb, var(--constant-white) 90%, transparent);
    background: color-mix(in srgb, var(--constant-white) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--constant-white) 25%, transparent);
    border-radius: var(--radius-full);
    backdrop-filter: var(--blur-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-medium);
    line-height: var(--font-size-xs);
    padding: var(--space-8) var(--space-12);
}

.auth-progress {
    position: absolute;
    bottom: var(--space-32);
    left: var(--space-32);
    z-index: var(--z-6);
    display: flex;
    gap: var(--space-6);
    width: min(288px, calc(100% - 56px));
}

.auth-segment {
    flex: 1;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--constant-white) 30%, transparent);
    overflow: hidden;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.auth-segment:hover,
.auth-segment:focus-visible {
    background: color-mix(in srgb, var(--constant-white) 48%, transparent);
}

.auth-segment:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--constant-white) 72%, transparent);
    outline-offset: 4px;
}
  
.auth-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--constant-white);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.auth-segment.complete .auth-fill {
  width: 100%;
  transform: scaleX(1);
}

.auth-card {
  --auth-x: 50%;
  --auth-y: 50%;
  position: relative;
  z-index: var(--z-2);
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg-default);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.auth-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  z-index: var(--z-1);
  background-image: radial-gradient(var(--gray-300) 0.8px, transparent 1px);
  background-size: 10px 10px;
  background-position: center;
  opacity: var(--opacity-0);
  transition: opacity var(--duration-normal) ease;
  -webkit-mask-image: radial-gradient(circle at var(--auth-x) var(--auth-y), black 0 80px, transparent 128px);
  mask-image: radial-gradient(circle at var(--auth-x) var(--auth-y), black 0 80px, transparent 128px);
}

.auth-card:hover::before,
.auth-card:focus-within::before {
  opacity: var(--opacity-100);
}

.auth-card > * {
  position: relative;
  z-index: var(--z-2);
}

.auth-header {
  display: flex;
  justify-content: center;
  z-index: var(--z-10);
  padding: var(--space-24) 0 var(--space-12) 0;
}

.auth-card .brand-mark {
  height: 36px;
  width: 100%;
}

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-32);
}

.auth-form {
  position: relative;
  isolation: isolate;
  width: min(100%, 384px);
}

.auth-form::before {
  content: "";
  position: absolute;
  inset: -34px -40px;
  z-index: 0;
  background: var(--bg-default);
  border-radius: var(--radius-3xl);
  pointer-events: none;
}

.auth-form > * {
  position: relative;
  z-index: 1;
}

.auth-wizard {
  display: none;
}

.auth-wizard.active {
  display: block;
}

.auth-title {
  text-align: center;
  margin-bottom: var(--space-28);
}

.auth-title h2 {
  font-family: var(--font-bagoss);
  font-weight: var(--font-medium);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-8);
}

.auth-title p {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

.auth-form .form-group:has(+ .auth-submit) {
  margin-bottom: var(--space-24);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.brand-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.alert.alert-dismissible {
  --alert-progress-color: var(--info-default);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--space-44);
  min-height: var(--space-44);
  max-height: var(--space-44);
  padding: 0 var(--space-48) 0 var(--space-16);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-20);
  font-size: var(--font-size-sm);
  font-weight: var(--font-regular);
  line-height: var(--line-height-sm);
}

.alert.alert-dismissible.alert-danger {
  --alert-progress-color: var(--danger-default);
}

.alert.alert-dismissible.alert-success {
  --alert-progress-color: var(--success-default);
}

.alert.alert-dismissible.alert-warning {
  --alert-progress-color: var(--warning-default);
}

.alert.alert-dismissible.alert-info {
  --alert-progress-color: var(--info-default);
}

.alert.alert-dismissible strong {
  font-weight: var(--font-semibold);
}

.alert.alert-dismissible .btn-close {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: var(--text-muted);
  opacity: var(--opacity-70);
  background: transparent;
  box-shadow: none;
}

.alert.alert-dismissible .btn-close:hover,
.alert.alert-dismissible .btn-close:focus-visible {
  color: var(--text-default);
  opacity: var(--opacity-100);
  background: transparent;
}

.alert.alert-dismissible .btn-close i {
  color: inherit;
}

.alert.alert-dismissible.alert-success .btn-close,
.alert.alert-dismissible.alert-success .btn-close:hover,
.alert.alert-dismissible.alert-success .btn-close:focus-visible {
  color: var(--success-default);
}

.alert.alert-dismissible.alert-danger .btn-close,
.alert.alert-dismissible.alert-danger .btn-close:hover,
.alert.alert-dismissible.alert-danger .btn-close:focus-visible {
  color: var(--danger-default);
}

.alert.alert-dismissible.alert-warning .btn-close,
.alert.alert-dismissible.alert-warning .btn-close:hover,
.alert.alert-dismissible.alert-warning .btn-close:focus-visible {
  color: var(--warning-default);
}

.alert.alert-dismissible.alert-info .btn-close,
.alert.alert-dismissible.alert-info .btn-close:hover,
.alert.alert-dismissible.alert-info .btn-close:focus-visible {
  color: var(--info-default);
}

.alert.alert-dismissible::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--space-2);
  width: 100%;
  background: var(--alert-progress-color);
  transform: scaleX(var(--alert-progress, 0));
  transform-origin: left center;
}

.form-divider {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--text-subtle);
  margin: var(--space-16) 0;
}

.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1;
  border-top: 0.0625rem solid var(--border-default);
}

.form-divider-label {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
}

.auth-footer {
  text-align: center;
  padding: var(--space-20) 0;
}

.auth-footer .copyright {
  display: inline-block;
  min-width: 190px;
  font-size: var(--font-size-xs);
  color: var(--text-subtle);
}





.btn {
  height: 44px;
  min-height: 44px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  line-height: var(--line-height-sm);
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.btn.btn-primary {
  color: var(--constant-white);
  background-color: var(--brand-default);
  border: 1px solid var(--brand-default);
}

.btn.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  width: 100%;
  color: var(--text-default);
  background: color-mix(in srgb, var(--bg-default) 88%, transparent);
  border: 1px solid var(--border-default);
  font-weight: var(--font-medium);
}

.btn.btn-outline:hover,
.btn.btn-outline:focus {
  color: var(--text-default);
  background: var(--bg-default);
  border-color: var(--border-emphasis);
}

.btn.btn-outline:focus-visible,
.auth-submit:focus-visible {
  outline: 3px solid var(--state-brand-focus);
  outline-offset: 2px;
}

.btn.btn-outline:active,
.auth-submit:active {
  transform: translateY(1px);
}

.auth-form .form-label {
  margin-bottom: var(--space-8);
  color: var(--text-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  line-height: var(--line-height-sm);
}

.auth-form .invalid-feedback {
  margin-top: var(--space-6);
  color: var(--danger-default);
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
  line-height: var(--line-height-xs);
}

.auth-form .password-field {
  position: relative;
}

.auth-form .password-field .form-control {
  padding-right: var(--space-48);
}

.auth-form .toggle-password {
  position: absolute;
  top: calc(44px / 2);
  right: var(--space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--duration-fast) ease;
}

.auth-form .toggle-password i {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
}

.auth-form .toggle-password:hover {
  color: var(--text-default);
}

.auth-form .toggle-password:focus-visible {
  color: var(--text-default);
  outline: 2px solid var(--state-brand-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.auth-submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: var(--constant-white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-default) 92%, var(--constant-white)), var(--brand-default));
  border: 1px solid
    color-mix(in srgb, var(--brand-default) 88%, var(--gray-950));
  font-weight: var(--font-semibold);
}

.auth-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 32%, color-mix(in srgb, var(--constant-white) 28%, transparent) 46%, transparent 60% 100%);
  transform: translateX(var(--auth-sheen-x, -120%));
  transition: transform var(--duration-slow) ease;
}

.auth-submit:hover::before,
.auth-submit:focus-visible::before {
  transform: translateX(120%);
}

.auth-submit > span {
  position: relative;
  z-index: 1;
}

.auth-submit:hover,
.auth-submit:focus {
  color: var(--constant-white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-default) 96%, var(--constant-white)), color-mix(in srgb, var(--brand-default) 92%, var(--gray-950)));
  border-color: color-mix(in srgb, var(--brand-default) 84%, var(--gray-950));
}

.auth-submit:disabled,
.auth-submit.is-loading {
  cursor: wait;
  opacity: 0.86;
  transform: none;
}

.auth-ellipsis {
  display: inline-flex;
  width: 1.1em;
  margin-left: 1px;
  justify-content: flex-start;
}

.auth-ellipsis span {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .form-control:focus {
    transform: none;
  }

  .auth-card::before {
    display: none;
  }

  .auth-submit::before {
    transition: none;
  }

  .auth-banner {
    transform: scale(1.08) !important;
  }

  .auth-segment.active .auth-fill {
    width: 100%;
    transform: scaleX(1);
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #0f172b;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

.emphasis {
  background: #ffffff;
}

.academic .table tbody tr:last-child,
.academic .table tbody tr:last-child td {
  border-width: 0;
  background: transparent;
}

.academic .table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 0.375rem !important;
}

.academic .table tbody tr:last-child td:last-child {
  border-radius: 0 0 0.375rem 0 !important;
}

.table .th-rounded tr th:first-child {
  border-radius: 0.375rem 0 0 0 !important;
}

.table .th-rounded tr th:last-child {
  border-radius: 0 0.375rem 0 0 !important;
}

#select2-filterResults-container {
  color: #515b73 !important;
}

#select2-filterResults-results {
  max-height: max-content;
  overflow-y: auto;
}

.form-sort {
  width: max-content;
  height: max-content;
}

.modal .modal-footer .btn-secondary:focus {
  color: #ffffff !important;
}

.bg-card {
  background: url("../images/shape-05.png") center center / contain repeat-x;
}

.border-bottom-4 {
  border-bottom-width: 4px;
}

.border-soft-primary {
  border-color: var(--brand-muted);
}

.border-soft-success {
  border-color: var(--success-muted);
}

.border-soft-danger {
  border-color: var(--danger-muted);
}

.border-soft-warning {
  border-color: var(--warning-muted);
}

.border-soft-skyblue {
  border-color: rgba(5, 194, 251, 0.3);
}

.border-soft-dark {
  border-color: rgba(15, 23, 43, 0.2);
}

.user-menu .dropdown-menu {
  border: 1px solid #ebedf5;
}

.bg-dark-transparent {
  background-color: #f1f5f9 !important;
  color: #0f172b !important;
}

.auth-logo img {
  width: 4.25rem;
}

.connect-app img {
  width: 2.75rem;
}

.dark-logo img,
.header .header-left .logo img {
  width: auto;
  height: 2.25rem;
  margin-top: 0.25rem;
}

.header .header-left {
  border-bottom: 0.0625rem solid #ebedf5;
}

.header .searchinputs .search-addon button {
  width: 2.25rem;
}

.rounded-xs {
  border-radius: 0.125rem;
}

.rounded-sm {
  border-radius: 0.25rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.5rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-circle {
  border-radius: 9999px;
}

.card .card-title {
  font-size: 1rem;
  font-weight: 500;
}

.modal .modal-title {
  font-size: 1.125rem;
}

.avatar {
  height: 2.5rem;
  width: 2.5rem;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-light,
.btn-white,
.btn-dark {
  height: 2.75rem;
  padding: 0.75rem 1.25rem;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus-visible {
  background-color: var(--state-danger-hover);
  border-color: var(--state-danger-hover);
  color: var(--constant-white);
}

.form-control {
  height: 44px;
  min-height: 44px;
  color: var(--text-default);
  background: color-mix(in srgb, var(--constant-white) 88%, transparent);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  line-height: var(--line-height-sm);
  padding: 0 var(--space-16);
  box-shadow: none !important;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.form-control:hover {
  border-color: var(--border-emphasis);
  background: var(--bg-default);
}

.form-control:focus {
  color: var(--text-default);
  background: var(--bg-default);
  border-color: var(--state-brand-focus);
  outline: none;
  transform: none;
  box-shadow: 0 0 0 3px var(--state-brand-ring) !important;
}

.form-select:focus {
  border-color: var(--state-brand-focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--state-brand-ring) !important;
}

.form-control-sm {
  font-size: 0.875rem;
  padding: 0.5rem 0.8rem;
  height: auto;
  min-height: auto;
  border-radius: 0.25rem;
}

.form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
}

.form-check-input {
  flex: 0 0 auto;
  float: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background-color: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.form-check-input:hover {
  border-color: var(--border-emphasis);
}

.form-check-input:focus {
  border-color: var(--brand-default);
  outline: 1px solid var(--blue-a48);
  outline-offset: 1px;
  box-shadow: none;
}

.form-check-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  line-height: var(--line-height-sm);
}

.form-switch .form-check-input {
  width: 1.75rem;
  height: 1rem;
}

.form-control[type="file"] {
  padding: 0.75rem 1rem;
}

.form-control:disabled,
.form-control[readonly] {
  color: var(--text-subtle);
  background-color: var(--bg-disabled);
  border-color: var(--border-muted);
  cursor: not-allowed;
  opacity: var(--opacity-75);
}

.form-control::placeholder {
  color: var(--text-support);
  font-weight: var(--font-regular);
}

.form-control:focus::placeholder {
  color: var(--text-support);
}

.form-control.verify {
  font-size: 1.5rem;
  max-height: 3rem;
  max-width: 3rem;
  margin-bottom: 3rem;
  background-color: #f8fafc;
}

.form-control.has-verify {
  max-width: 100%;
  margin-bottom: 0;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  padding: 0 var(--space-16);
  background: var(--bg-default);
  border-color: var(--success-default);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  padding: 0 var(--space-16);
  background: var(--bg-default);
  border-color: var(--danger-default);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--success-default);
  outline: none;
  box-shadow: 0 0 0 3px var(--state-success-ring) !important;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--danger-default);
  outline: none;
  box-shadow: 0 0 0 3px var(--state-danger-ring) !important;
}

.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
  border-color: var(--success-default);
  outline: none;
  box-shadow: 0 0 0 3px var(--state-success-ring) !important;
}

.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
  border-color: var(--danger-default);
  outline: none;
  box-shadow: 0 0 0 3px var(--state-danger-ring) !important;
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  background: var(--bs-input-bg);
}

.form-check-input:checked {
  background-color: var(--brand-default);
  border-color: var(--brand-default);
}

.was-validated .form-check-input[required]:valid,
.form-check-input.is-valid {
  border-color: var(--success-default);
}

.was-validated .form-check-input:not([required]):valid {
  border-color: var(--border-default);
}

.was-validated .form-check-input:not([required]):not(:checked):valid {
  background-image: none;
}

.was-validated .form-check-input[required]:valid:checked,
.form-check-input.is-valid:checked {
  background-color: var(--success-default);
  border-color: var(--success-default);
}

.was-validated .form-check-input:not([required]):valid:checked {
  background-color: var(--brand-default);
  border-color: var(--brand-default);
}

.was-validated .form-check-input:not([required]):valid ~ .form-check-label {
  color: var(--text-muted);
}

.was-validated .form-check-input[required]:invalid,
.form-check-input.is-invalid {
  border-color: var(--danger-default);
}

.was-validated .form-check-input[required]:invalid:focus,
.form-check-input.is-invalid:focus {
  border-color: var(--danger-default);
  outline: 1px solid var(--red-a48);
  outline-offset: 1px;
}

.was-validated .form-check-input[required]:valid:focus,
.form-check-input.is-valid:focus {
  border-color: var(--success-default);
  outline: 1px solid var(--green-a48);
  outline-offset: 1px;
  box-shadow: none;
}

.was-validated .form-check-input:not([required]):valid:focus {
  border-color: var(--brand-default);
  outline: 1px solid var(--blue-a48);
  outline-offset: 1px;
  box-shadow: none;
}

.was-validated .form-check-input[required]:valid ~ .form-check-label,
.was-validated .form-check-input[required]:invalid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: var(--text-muted);
}

.student-list .checked {
  background-color: var(--brand-default) !important;
  border-color: var(--brand-default) !important;
}

.student-list .unchecked {
  background-color: #ffffff !important;
  border-color: var(--danger-default) !important;
}

.select-xl
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding-left: 1rem;
  line-height: 2.75rem;
  border-radius: 0.5rem;
}

.select-xl
  .select2-container--default.select2-container--open.select2-container--above
  .select2-selection--single,
.select-xl
  .select2-container--default.select2-container--open.select2-container--above
  .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.select-xl .select2-container .select2-selection--single {
  height: 2.75rem;
  border-radius: 0.5rem;
  background-color: #f8fafc;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 20rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #ebedf5;
  border-radius: 0.25rem;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #90a1b9;
}

.select2-container--default .select2-results__option--selected {
  background-color: #f1f5f9;
}

.select2-container .select2-dropdown {
  max-height: 50vh;
  overflow: auto;
}

.select-xl .select2-dropdown {
  border-radius: 0.5rem;
}

.select-xl
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 2.75rem;
  right: 0.625rem;
}

.select2-container--default .select2-results__option--disabled {
  color: #90a1b9;
}

.needs-select.valid .select2-selection--single {
  border-color: var(--success-default) !important;
  background-color: #ffffff;
}

.needs-select.invalid .select2-selection--single {
  border-color: var(--danger-default) !important;
  background-color: #ffffff;
}

.bs-wizard-tab-content {
  padding-top: 24px;
  min-height: 256px;
}

.bs-wizard .step-title {
  margin-left: 8px;
}

.bs-wizard .bs-wizard-nav .nav-link {
  position: relative;
  font-size: 1rem;
}

.bs-wizard .nav-link.active {
  color: #495057;
  background-color: transparent;
}

.bs-wizard .bs-wizard-nav .step-icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  line-height: normal;
  font-size: 1rem;
  background-color: #ffffff;
  border: 1px solid #ebedf5;
  color: var(--brand-default);
  border-radius: 9999px;
  z-index: 10;
}

.bs-wizard .bs-wizard-nav .step-icon .step-fill {
  display: none;
}

.bs-wizard .bs-wizard-nav .nav-link.active .step-icon,
.bs-wizard .bs-wizard-nav .nav-link.completed .step-icon {
  background-color: var(--brand-default);
  color: #ffffff;
  border-color: var(--brand-default);
}

.bs-wizard .bs-wizard-nav .nav-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 70%;
  width: 64%;
  height: 1.5px;
  background-color: #ebedf5;
  transform: translateY(-50%);
  z-index: 1;
}

.bs-wizard .nav-link.completed::after {
  background-color: var(--brand-default);
}

.bs-wizard .nav-item:last-child .nav-link::after {
  display: none;
}

.bs-wizard .bs-wizard-pager-link {
  display: flex;
  justify-content: space-between;
  padding: 24px 0 0;
  margin: 0;
  list-style: none;
}

.bs-wizard .bs-wizard-pager-link li {
  display: inline-block;
}

.bs-wizard-nav .nav-link.locked {
  cursor: not-allowed;
}

.bs-wizard .nav-tabs .nav-link:focus,
.bs-wizard .nav-tabs .nav-link:hover {
  isolation: auto !important;
}

.toggle-password {
  font-size: 1.125rem;
}

.input-addon {
  position: absolute;
  height: 100%;
  left: 1rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}

.notice-widget:before {
  inset-inline-start: 1.25rem;
}

.dropdown .dropdown-toggle:after {
  content: "\ea5f";
  font-family: "tabler-icons";
}

.modal-dialog .approve-icon,
.modal-dialog .delete-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  margin: 0 auto 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 2rem;
}

.modal-dialog .approve-icon {
  background: #e8f9e8;
  color: var(--success-default);
}

.modal-dialog .delete-icon {
  background: #fde9ed;
  color: var(--danger-default);
}

.modal .modal-content {
  border-radius: 0.5rem;
}

.medium .modal-dialog {
  max-width: 27rem;
}

#toast-container .toast {
  padding: 1rem;
  border: 0 !important;
  border-radius: 0.25rem;
  box-shadow: none !important;
  background-image: none !important;
  backdrop-filter: blur(20px);
  opacity: 0.85;
}

.toast-success {
  background-color: var(--success-default);
}

.toast-error {
  background-color: var(--danger-default);
}

.toast-info {
  background-color: #0f65cd;
}

.toast-warning {
  background-color: #fe9a00;
}

.comment {
  display: none;
}

.comment-text {
  max-width: 95%;
}

.table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
  right: 0.625rem !important;
  content: "\ea62" !important;
  font-family: "tabler-icons";
}

.table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
  right: 0.625rem !important;
  content: "\ea5f" !important;
  font-family: "tabler-icons";
}

.tabledata {
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.dataTables_wrapper .table-responsive {
  min-height: 208px;
}

.processing .dataTables_wrapper .dataTables_length,
.processing .dataTables_wrapper .dataTables_filter {
  display: none !important;
}

.processing .dataTables_paginate {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.dataTables_length label .form-select {
  border-radius: 0.25rem;
  line-height: 1.375rem;
  padding-right: 1.125rem;
}

.modal .modal-dialog-aside {
  height: 100vh;
  margin: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.modal.aside-right .modal-dialog,
.modal.aside-left .modal-dialog {
  transform: none;
  transition: none;
}

.modal.aside-right .table tbody tr:last-child,
.modal.aside-right .table tbody tr:last-child td {
  border-width: 0;
}

.modal.show .modal-dialog-aside {
  opacity: 1;
}

.modal .modal-dialog-aside .modal-content {
  height: 100%;
}

.modal .modal-dialog-aside .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

.modal .modal-dialog-aside .modal-body .table-responsive {
  overflow: hidden;
}

/*----------------------------------------*/
/*  2. Dark Theme
/*----------------------------------------*/
html[data-theme="dark"] hr {
  border-color: #1a1a1a;
}

html[data-theme="dark"] .dropdown hr {
  border-color: #3d3d3d;
}

html .darkmode .card,
html[data-theme="dark"] .card {
  box-shadow: none !important;
}

html[data-theme="dark"] .text-muted {
  color: #757575 !important;
}

html[data-theme="dark"] .text-gray {
  color: #757575 !important;
}

html[data-theme="dark"] .bg-dark {
  background-color: #000000 !important;
  border: 1px solid #1a1a1a !important;
}

html[data-theme="dark"] .header .dropdown-menu {
  box-shadow: 0px 4px 72px 0px rgba(208, 208, 208, 0.2);
}

html .darkmode .dropdown-item:not(.active):hover,
html .darkmode .dropdown-item:not(.active):focus,
html .darkmode .dropdown-item:not(.active):active,
html .darkmode .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:not(.active):hover,
html[data-theme="dark"] .dropdown-item:not(.active):focus,
html[data-theme="dark"] .dropdown-item:not(.active):active,
html[data-theme="dark"] .dropdown-item.active {
  background: #1a1a1a;
}

html[data-theme="dark"] .bg-light-transparent,
html[data-theme="dark"] .bg-dark-transparent,
html[data-theme="dark"] .bg-primary-transparent,
html[data-theme="dark"] .bg-secondary-transparent,
html[data-theme="dark"] .bg-success-transparent,
html[data-theme="dark"] .bg-info-transparent,
html[data-theme="dark"] .bg-warning-transparent,
html[data-theme="dark"] .bg-danger-transparent,
html[data-theme="dark"] .bg-skyblue-transparent {
  background-color: transparent !important;
  box-shadow: none !important;
}

html .darkmode .bg-success-transparent h6,
html .darkmode .bg-primary-transparent h6,
html[data-theme="dark"] .bg-success-transparent h6,
html[data-theme="dark"] .bg-primary-transparent h6 {
  color: #efeff2 !important;
}

html[data-theme="dark"] .sidebar .sidebar-menu > ul > li ul > li.active a i {
  background: #262626;
  color: var(--brand-default);
}

html[data-theme="dark"] .sidebar .sidebar-menu > ul li .submenu > a.active i {
  background: #262626;
  color: var(--brand-default);
}

html[data-theme="dark"] .breadcrumb .breadcrumb-item a {
  color: #a3a3a3;
}

html .darkmode .breadcrumb .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb .breadcrumb-item.active {
  color: #757575;
}

html .darkmode .form-check-input,
html[data-theme="dark"] .form-check-input {
  background-color: #3d3d3d;
}

html .darkmode .header .searchinputs input::placeholder,
html[data-theme="dark"] .header .searchinputs input::placeholder {
  color: #757575;
}

html[data-theme="dark"] .form-control::placeholder {
  color: #757575;
}

html[data-theme="dark"] .form-control::-webkit-file-upload-button {
  color: #a3a3a3;
  background-color: #0d0d0d;
}

html[data-theme="dark"]
  .form-control:hover:not(:disabled):not(
    [readonly]
  )::-webkit-file-upload-button {
  background-color: #0d0d0d;
}

html .darkmode .header .searchinputs .search-addon button,
html[data-theme="dark"] .header .searchinputs .search-addon button {
  color: #a3a3a3;
}

html[data-theme="dark"] .dataTables_length label,
html[data-theme="dark"] .dataTables_length label .form-select,
html[data-theme="dark"] #select2-filterResults-container {
  color: #a3a3a3 !important;
}

html
  .darkmode
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered,
html[data-theme="dark"]
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  background: transparent;
}

html[data-theme="dark"] .select2-container--classic .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"]
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered,
html[data-theme="dark"]
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow,
html[data-theme="dark"]
  .select2-container--default
  .select2-selection--multiple,
html[data-theme="dark"]
  .select2-container--classic
  .select2-selection--single
  .select2-selection__arrow,
html[data-theme="dark"]
  .select2-container--classic
  .select2-selection--single
  .select2-selection__rendered,
html[data-theme="dark"]
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #757575;
}

html[data-theme="dark"]
  span.select2-container.select2-container--default.select2-container--open {
  box-shadow: none;
}

html[data-theme="dark"]
  .select2-container--default
  .select2-results__option--selected {
  background-color: #1a1a1a;
}

html[data-theme="dark"] .select2-search--dropdown {
  background-color: #0d0d0d;
}

html[data-theme="dark"]
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  color: #a3a3a3;
  background-color: #0d0d0d;
  border: 1px solid #1a1a1a;
}

html .darkmode .dataTables_paginate .pagination li a,
html[data-theme="dark"] .dataTables_paginate .pagination li a {
  color: #a3a3a3;
}

html[data-theme="dark"] .modal .modal-content {
  color: #a3a3a3;
  box-shadow: 0px 4px 72px 0px rgba(208, 208, 208, 0.1);
}

html[data-theme="dark"] .modal-content .modal-header .custom-btn-close {
  background-color: #757575;
}

html[data-theme="dark"] .bs-wizard .bs-wizard-nav .step-icon {
  background-color: #0d0d0d;
  border: 1px solid #1a1a1a;
}

html[data-theme="dark"]
  .bs-wizard
  .bs-wizard-nav
  .nav-link.active
  .step-icon
  span,
html[data-theme="dark"]
  .bs-wizard
  .bs-wizard-nav
  .nav-link.completed
  .step-icon
  span {
  color: #ffffff;
}

html[data-theme="dark"] .bg-wizard,
html[data-theme="dark"] .bs-wizard .bs-wizard-nav .nav-link::after {
  background-color: #1a1a1a !important;
}

html[data-theme="dark"] .bs-wizard .nav-link.completed::after {
  background-color: var(--brand-default);
}

html[data-theme="dark"] .list-group a.active,
html[data-theme="dark"] .list-group a:hover {
  background: #262626;
}

body[data-layout-mode="dark"] .bs-wizard .nav-link::after {
  background-color: #3b403d;
}

/*----------------------------------------*/
/*  3. Responsive Default
/*----------------------------------------*/
@media (min-width: 1200px) {
  /* .auth-content {
    max-width: 29rem;
    min-height: 26.5rem;
  } */
}

@media (min-width: 768px) {
  .modal.aside-right .modal-dialog-aside {
    margin-left: auto;
    margin-right: 0.5rem;
  }

  .modal.aside-left .modal-dialog-aside {
    margin-right: auto;
    margin-left: 0.5rem;
  }
}

@media (max-width: 768px) {
  .bs-wizard .nav-link::after {
    content: none;
  }
}

@media (max-width: 576px) {
  .bs-wizard .bs-wizard-nav .nav-link::after {
    top: 50%;
    left: 50%;
    width: 100%;
  }

  .bs-wizard .bs-wizard-nav .step-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .bs-wizard .nav-link {
    padding: 0.5rem;
  }
}

@media (max-width: 414px) {
  .border-start {
    border: none !important;
  }

  .comment-edit {
    width: 85% !important;
  }

  .comment-text {
    max-width: 90%;
  }

  .notice-widget .badge {
    display: none;
  }
}

/*----------------------------------------*/
/*  Auth Responsive
/*----------------------------------------*/
@media (min-width: 1200px) {
  .auth-page {
    overflow: hidden;
  }

  .auth-layout,
  .auth-showcase,
  .auth-panel {
    min-height: 100svh;
  }

  .auth-content h1,
  .auth-content h2 {
    font-size: var(--font-size-4xl);
  }
}

@media (max-width: 1199.98px) {
  .auth-page {
    overflow: auto;
  }

  .auth-layout {
    min-height: 100svh;
  }

  .auth-showcase {
    min-height: clamp(360px, 44svh, 440px);
  }

  .auth-panel {
    min-height: auto;
    padding: var(--space-16);
  }

  .auth-body {
    padding: var(--space-32);
  }

  .auth-card {
    min-height: calc(100svh - 32px);
  }

  .auth-content {
    left: 24px;
    right: 24px;
    bottom: 82px;
  }

  .auth-content h1,
  .auth-content h2 {
    font-size: var(--font-size-3xl);
  }
}

@media (max-width: 479.98px) {
  .recovery-code.verino-wrapper {
    --verino-size: var(--space-40);
    --verino-gap: var(--space-6);
  }
}

@media (max-width: 767.98px) {
  .auth-showcase {
    min-height: clamp(320px, 42svh, 380px);
  }

  .auth-panel {
    padding: var(--space-12);
  }

  .auth-header {
    padding: var(--space-20) 0 var(--space-10) 0;
  }

  .auth-body {
    padding: var(--space-28) var(--space-24);
    align-items: flex-start;
  }

  .auth-form::before {
    inset: -28px -28px;
  }

  .auth-footer {
    padding: var(--space-20) 0;
  }

  .form-actions {
    align-items: flex-start;
    gap: var(--space-12);
  }
}

@media (max-width: 575.98px) {
  .auth-layout {
    min-height: auto;
  }

  .auth-showcase {
    min-height: 300px;
  }

  .auth-content {
    left: 20px;
    right: 20px;
    bottom: 54px;
  }

  .auth-content-label {
    margin-bottom: var(--space-8);
  }

  .auth-content h1,
  .auth-content h2 {
    font-size: var(--font-size-2xl);
    line-height: 1.12;
    margin-bottom: var(--space-10);
  }

  .auth-content p {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    max-width: 38ch;
  }

  .auth-meta {
    left: 20px;
    right: 20px;
    top: 20px;
    gap: var(--space-6);
  }

  .auth-meta span {
    font-size: 11px;
    padding: 8px 10px;
  }

  .auth-progress {
    left: 20px;
    bottom: 20px;
    width: min(240px, calc(100% - 40px));
  }

  .auth-card {
    border-radius: var(--radius-xl);
    min-height: auto;
  }

  .auth-header {
    padding: var(--space-20) 0 var(--space-8) 0;
  }

  .auth-body {
    padding: var(--space-24) var(--space-20) var(--space-28);
  }

  .auth-form {
    width: min(100%, 360px);
  }

  .auth-form::before {
    inset: -24px -20px;
    border-radius: var(--radius-2xl);
  }

  .auth-title {
    margin-bottom: var(--space-24);
  }

  .form-actions {
    margin-bottom: var(--space-20);
    gap: var(--space-10);
  }
}

@media (max-width: 380px) {
  .auth-showcase {
    min-height: 280px;
  }

  .auth-content h1,
  .auth-content h2 {
    font-size: var(--font-size-xl);
  }

  .auth-content p {
    display: none;
  }

  .form-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-actions .brand-link {
    width: auto;
  }
}

/* Forgot password page final layout overrides. */
.recovery-page {
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg-subtle);
}

.recovery-page .main-content {
  min-height: 100svh;
  background: var(--bg-subtle);
}

.auth-layout.recovery-layout {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 0 var(--space-8) var(--space-8);
  overflow: hidden;
  background: var(--bg-subtle);
}

.auth-layout.recovery-layout::before {
  content: none;
}

.recovery-layout .recovery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 88px;
  width: 100%;
  max-width: none;
  min-height: 88px;
  padding: 0 var(--space-64);
  margin: 0;
}

.recovery-header .brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.recovery-header .brand-mark {
  display: block;
  width: auto;
  height: 36px;
}

.recovery-header .btn.recovery-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: var(--space-10);
  width: auto;
  min-width: 148px;
  height: 40px;
  min-height: 40px;
  padding: 0 var(--space-20);
  color: var(--text-default);
  background: var(--bg-default);
  border-color: var(--border-default);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  box-shadow: 0 1px 2px var(--gray-a4);
}

.recovery-header .btn.recovery-help:hover,
.recovery-header .btn.recovery-help:focus {
  background: var(--bg-elevated);
  border-color: var(--border-emphasis);
  transform: translateY(-1px);
}

.recovery-layout .auth-panel {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: 0;
}

.recovery-layout .auth-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 1px solid var(--gray-a8);
  border-radius: var(--radius-2xl);
  background: var(--bg-default);
  box-shadow: 0 20px 60px var(--gray-a4);
  overflow: hidden;
}

.recovery-layout .auth-body {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.recovery-layout .auth-form {
  width: min(100%, 400px);
}

.recovery-layout .auth-form::before {
  inset: -36px -40px;
  border-radius: var(--radius-3xl);
}

.recovery-layout .auth-title {
  display: grid;
  gap: var(--space-8);
  justify-items: center;
  margin-bottom: var(--space-32);
  text-align: center;
}

.recovery-layout .auth-title h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
  margin-bottom: 0;
}

.recovery-layout .auth-title p {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  width: 100%;
  max-width: 384px;
  margin: 0 auto;
}

.recovery-layout .form-group {
  margin-bottom: var(--space-20);
}

.password-strength {
  margin: calc(var(--space-4) * -1) 0 var(--space-20);
  padding: var(--space-16);
  color: var(--text-muted);
  background: var(--bg-surface);
  border: var(--border-1) solid var(--border-muted);
  border-radius: var(--radius-xl);
}

.password-strength[hidden] {
  display: none;
}

.password-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-10);
}

.password-header p,
.password-header span {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
  line-height: var(--line-height-xs);
}

.password-header p {
  color: var(--text-muted);
}

.password-header span {
  color: var(--danger-default);
}

.password-meter {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.password-meter span {
  height: var(--space-4);
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) ease;
}

.password-strength[data-strength="1"] .password-meter span:nth-child(-n + 1),
.password-strength[data-strength="2"] .password-meter span:nth-child(-n + 2) {
  background: var(--danger-default);
}

.password-strength[data-strength="3"] .password-meter span:nth-child(-n + 3),
.password-strength[data-strength="4"] .password-meter span:nth-child(-n + 4) {
  background: var(--warning-default);
}

.password-strength[data-strength="5"] .password-meter span:nth-child(-n + 5),
.password-strength[data-strength="6"] .password-meter span {
  background: var(--success-default);
}

.password-strength:is([data-strength="3"], [data-strength="4"]) .password-header span {
  color: var(--warning-default);
}

.password-strength:is([data-strength="5"], [data-strength="6"]) .password-header span {
  color: var(--success-default);
}

.password-strength ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10) var(--space-16);
  padding: 0;
  margin: 0;
  list-style: none;
}

.password-strength li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.password-strength li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-regular);
  line-height: var(--line-height-xs);
  transition: color var(--duration-fast) ease;
}

.password-rule-indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-16);
  height: var(--space-16);
  color: var(--text-muted);
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  transition:
    color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.password-rule-check {
  display: none;
}

.password-rule-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-disabled);
  font-size: 12px;
  line-height: 1;
}

.password-strength li.met {
  color: var(--text-default);
}

.password-strength li.met .password-rule-indicator {
  color: var(--constant-white);
  background: var(--success-default);
}

.password-strength li.met .password-rule-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.password-strength li.met .password-rule-empty {
  display: none;
}

.recovery-layout .auth-return {
  margin: var(--space-24) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  line-height: var(--line-height-sm);
  text-align: center;
}

.recovery-layout .auth-return .brand-link {
  display: inline-flex;
}

[data-recovery-form] .form-actions {
  justify-content: center;
  margin-top: var(--space-20);
  margin-bottom: 0;
}

.recovery-code.verino-wrapper {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  --verino-size: var(--space-48);
  --verino-gap: var(--space-8);
  --verino-radius: var(--radius-xl);
  --verino-font-size: var(--font-size-xl);
  --verino-font-weight: var(--font-semibold);
  --verino-bg: var(--bg-surface);
  --verino-bg-filled: var(--bg-default);
  --verino-color: var(--text-default);
  --verino-border-color: var(--border-default);
  --verino-active-color: var(--state-brand-focus);
  --verino-error-color: var(--danger-default);
  --verino-success-color: var(--success-default);
  --verino-caret-color: var(--state-brand-focus);
  --verino-placeholder-color: var(--text-disabled);
  --verino-placeholder-size: var(--font-size-sm);
  --verino-masked-size: var(--font-size-md);
  --verino-separator-color: var(--text-muted);
  --verino-separator-size: var(--font-size-lg);
  --verino-timer-color: var(--text-muted);
}

.recovery-code.verino-wrapper .verino-content {
  gap: var(--verino-gap);
  padding-top: 0;
}

.recovery-code.verino-wrapper .verino-slot {
  font-family: var(--font-commit);
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.recovery-code.verino-wrapper .verino-slot[data-active="true"][data-focus="true"] {
  border-color: var(--state-brand-focus);
  box-shadow: 0 0 0 3px var(--state-brand-ring);
  background: var(--bg-default);
}

.recovery-code.verino-wrapper .verino-slot[data-invalid="true"] {
  border-color: var(--danger-default);
  box-shadow: 0 0 0 3px var(--state-danger-ring);
}

.recovery-code.verino-wrapper .verino-slot[data-success="true"] {
  border-color: var(--success-default);
  box-shadow: 0 0 0 3px var(--state-success-ring);
}

.recovery-code.is-invalid + [data-otp-feedback] {
  display: block;
  margin-top: var(--space-12);
  text-align: center;
}

[data-recovery-form] .auth-wizard .verino-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  padding-top: var(--space-16);
  margin-bottom: var(--space-20);
}

[data-recovery-form] .auth-wizard .verino-resend {
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  padding-top: var(--space-16);
  margin-bottom: var(--space-24);
}

[data-recovery-form] .auth-wizard .verino-timer-label,
[data-recovery-form] .auth-wizard .verino-timer-badge {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

[data-recovery-form] .auth-wizard .verino-timer-badge {
  color: var(--danger-default);
  background: var(--danger-subtle);
  height: auto;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-commit);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-medium);
}

@media (min-width: 1200px) {
  .recovery-layout .auth-title p.code-description {
    max-width: 384px;
  }
}

[data-recovery-form] .auth-wizard .verino-resend-btn {
  color: var(--brand-default);
  background: var(--brand-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
  line-height: var(--line-height-sm);
  padding: var(--space-2) var(--space-12);
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

[data-recovery-form] .auth-wizard .verino-resend-btn:hover,
[data-recovery-form] .auth-wizard .verino-resend-btn:focus-visible {
  color: var(--brand-emphasis);
  background: var(--brand-muted);
}

.auth-title img {
  display: block;
  width: 112px;
  height: auto;
  margin: 0 auto var(--space-24);
}

.turbo-progress-bar {
  height: 2px;
  background: var(--brand-default);
}

@media (max-width: 767.98px) {
  .auth-layout.recovery-layout {
    padding: 0 var(--space-8) var(--space-8);
  }

  .recovery-layout .recovery-header {
    flex-basis: 72px;
    min-height: 72px;
    padding: 0 var(--space-16);
  }

  .recovery-header .brand-mark {
    width: auto;
    height: 36px;
  }

  .recovery-header .btn.recovery-help {
    min-width: 148px;
  }

  .recovery-layout .auth-body {
    padding: var(--space-20);
  }

  .recovery-layout .auth-title p {
    max-width: 100%;
  }

  .password-strength ul {
    grid-template-columns: 1fr;
  }

  .password-strength li:last-child:nth-child(odd) {
    grid-column: auto;
  }
}