@import url('/platform-footer.css?v=2');
@import url('/ios-spinner.css?v=2');
@import url('/menu-toggle.css?v=1');
@import url('/form-controls.css?v=3');
@import url('/fonts/brand-wordmark.css?v=brand-original-wordmark-balanced-20261024');



html.code-design {
  --code-canvas: #f9fafb;
  --code-surface: #ffffff;
  --code-soft: #f3f4f6;
  --code-text: #161616;
  --code-muted: #4d5761;
  --code-border: #d2d6db;
  --code-green: #1b8354;
  --code-green-hover: #166a45;
  --code-link: #14573a;
  --code-green-soft: #f3fcf6;
  --code-danger: #b42318;
  --code-danger-soft: #fef3f2;
  --code-shadow: 0 2px 8px rgb(16 24 40 / 5%);
  --background: var(--code-canvas);
  --bg: var(--code-canvas);
  --surface: var(--code-surface);
  --surface-subtle: var(--code-canvas);
  --surface-band: var(--code-soft);
  --surface-2: var(--code-soft);
  --card: var(--code-surface);
  --card-2: var(--code-soft);
  --bg-elev-1: var(--code-surface);
  --bg-elev-2: var(--code-soft);
  --bg-elev-3: var(--code-soft);
  --bg-elev-4: var(--code-border);
  --surface-glass: var(--code-surface);
  --surface-glass-2: var(--code-surface);
  --text: var(--code-text);
  --foreground: var(--code-text);
  --text-secondary: var(--code-muted);
  --text-muted: var(--code-muted);
  --text-faint: var(--code-muted);
  --muted: var(--code-muted);
  --muted-2: var(--code-muted);
  --border: var(--code-border);
  --border-strong: var(--code-muted);
  --line: var(--code-border);
  --line-soft: var(--code-border);
  --line-strong: var(--code-border);
  --primary: var(--code-green);
  --primary-hover: var(--code-green-hover);
  --primary-dark: var(--code-link);
  --primary-subtle: var(--code-green-soft);
  --subtle: var(--code-soft);
  --accent: var(--code-link);
  --accent-hover: var(--code-link);
  --accent-active: var(--code-link);
  --accent-soft: var(--code-green-soft);
  --accent-softer: var(--code-green-soft);
  --accent-rgb: 27, 131, 84;
  --brand: var(--code-link);
  --brand-light: var(--code-link);
  --brand-deep: var(--code-link);
  --gold: var(--code-link);
  --gold-hover: var(--code-link);
  --gold-soft: var(--code-green-soft);
  --gold-line: var(--code-border);
  --gold-line-strong: var(--code-link);
  --on-gold: #ffffff;
  --danger: var(--code-danger);
  --error: var(--code-danger);
  --error-surface: var(--code-danger-soft);
  --danger-soft: var(--code-danger-soft);
  --success: var(--code-link);
  --success-soft: var(--code-green-soft);
  --success-surface: var(--code-green-soft);
  --focus: var(--code-text);
  --portal-surface: var(--code-surface);
  --portal-canvas: var(--code-canvas);
  --portal-text: var(--code-text);
  --portal-muted: var(--code-muted);
  --portal-border: var(--code-border);
  --portal-soft: var(--code-green-soft);
  --portal-hover: var(--code-soft);
  --owner-navy: var(--code-canvas);
  --owner-blue-deep: var(--code-soft);
  --owner-blue: var(--code-surface);
  --owner-gold: var(--code-link);
  --owner-gold-soft: var(--code-green-soft);
  --owner-white: var(--code-text);
  --owner-muted: var(--code-muted);
  --owner-faint: var(--code-muted);
  --owner-line: var(--code-border);
  --owner-line-strong: var(--code-border);
  --owner-surface: var(--code-surface);
  --owner-surface-strong: var(--code-soft);
  --owner-shadow: var(--code-shadow);
  --radius: 8px;
  --radius-card: 8px;
  --radius-sm: 4px;
  --shadow-card: var(--code-shadow);
  background: var(--code-canvas);
  color-scheme: light;
}
html.code-design[data-theme="dark"] {
  --code-canvas: #0d121c;
  --code-surface: #161e2b;
  --code-soft: #202b3b;
  --code-text: #f3f4f6;
  --code-muted: #b8c0cc;
  --code-border: #384556;
  --code-link: #88d8ad;
  --code-green-soft: #123c2b;
  --code-danger: #fda29b;
  --code-danger-soft: #40201f;
  --code-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  color-scheme: dark;
}
html.code-design body {
  background: var(--code-canvas) !important;
  color: var(--code-text) !important;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}
html.code-design :is(h1, h2, h3, button, input, select, textarea) { font-family: inherit; }
html.code-design :focus-visible { outline: 3px solid var(--code-text); outline-offset: 3px; }
html.code-design ::selection { background: var(--code-green-soft); color: var(--code-link); }
html.code-design :is(.aurora, .grid-overlay, .bg-orbs, .bg-aurora) { display: none !important; }
html.code-design :is(.site-header, .login-header, .register-header, .portal-header) { background: var(--code-surface); border-color: var(--code-border); }
html.code-design :is(.glass-panel, .recovery-shell, .form-panel, .card, .auth-panel, .fp-method) {
  background: var(--code-surface) !important;
  border-color: var(--code-border) !important;
  color: var(--code-text);
  border-radius: 8px;
  box-shadow: var(--code-shadow);
}
html.code-design :is(.trust-panel, .success-overlay, .closed-overlay) { background: var(--code-soft); color: var(--code-text); }
html.code-design :is(.floating-input, .fp-input, .otp-input, .custom-dropdown-selected) { background: var(--code-surface); color: var(--code-text); border-color: var(--code-border); }

/* Shared overrides beat legacy ID and utility styles without changing field geometry or icon placement. */
html.code-design :is(textarea, input:where(:not([type]), [type="text"], [type="email"], [type="password"], [type="tel"], [type="search"], [type="url"], [type="number"], [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])) {
  --field-edge: var(--code-border);
  --field-surface: var(--code-surface);
  --field-shadow: 0 0 0 0 transparent;
  border: 1px solid var(--field-edge) !important;
  border-radius: 14px !important;
  background-color: var(--field-surface) !important;
  background-image: linear-gradient(var(--control-underline, var(--field-edge)), var(--control-underline, var(--field-edge))) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: 0% 2px !important;
  color: var(--code-text) !important;
  caret-color: var(--code-text);
  box-shadow: var(--field-shadow) !important;
  transition: border-color 220ms cubic-bezier(.2, .8, .2, 1), background-size var(--control-underline-duration, 600ms) var(--control-underline-ease, ease), box-shadow 220ms ease, background-color 220ms ease !important;
}
html.code-design :is(textarea, input):not(:disabled):not([readonly]):hover {
  --field-edge: var(--code-muted);
}
html.code-design :is(textarea, input:where(:not([type]), [type="text"], [type="email"], [type="password"], [type="tel"], [type="search"], [type="url"], [type="number"], [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])):focus {
  --field-edge: var(--code-muted);
  --field-shadow: none;
  outline: 2px solid transparent !important;
  outline-offset: 3px;
}
html.code-design :is(textarea, input:where(:not([type]), [type="text"], [type="email"], [type="password"], [type="tel"], [type="search"], [type="url"], [type="number"], [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])):focus:not(:disabled):not([readonly]) {
  background-size: 100% 2px !important;
}
html.code-design .code-floating-field { position: relative; min-width: 0; }
html.code-design .code-floating-box { width: 100%; flex: 1 1 auto; }
html.code-design .code-floating-field > :is(input, textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; }
html.code-design .code-floating-field > textarea { min-height: 112px; }
html.code-design .code-floating-field > .code-floating-label {
  position: absolute !important;
  inset-inline-start: 12px !important;
  inset-inline-end: auto !important;
  top: 24px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 4px !important;
  max-width: calc(100% - 60px);
  display: flex !important;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--code-muted) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  background: transparent !important;
  cursor: text;
  z-index: 1;
  transition: top 240ms cubic-bezier(.22, 1, .36, 1), font-size 240ms ease, color 200ms ease, background-color 200ms ease !important;
}
html.code-design .code-floating-label svg { display: none !important; }
html.code-design .code-floating-field:has(> :is(input, textarea):is(:focus, :autofill, :not(:placeholder-shown))) > .code-floating-label,
html.code-design .code-floating-persistent > .code-floating-label {
  top: 0 !important;
  font-size: 12px !important;
  background: var(--code-surface) !important;
  max-width: calc(100% - 24px);
}
html.code-design .code-floating-field:has(> :is(input, textarea):focus) > .code-floating-label { color: var(--code-link) !important; }
html.code-design .code-floating-field:has(> :is(input, textarea):is([aria-invalid="true"], .input-error, :user-invalid)) > .code-floating-label { color: var(--code-danger) !important; }
html.code-design .code-floating-field > :is(input, textarea):not(:focus)::placeholder { opacity: 0; }
html.code-design .code-floating-field > :is(.eye-toggle, .valid-check) { top: 4px !important; }
html.code-design .code-source-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  html.code-design .code-floating-field > .code-floating-label { transition: none !important; }
}
html.code-design :is(textarea, input)::placeholder { color: var(--code-muted) !important; opacity: 1; }
html.code-design :is(textarea, input):is([aria-invalid="true"], .input-error, :user-invalid),
html.code-design :is(.has-error, .input-error) :is(textarea, input) {
  --field-edge: var(--code-danger);
}
html.code-design :is(textarea, input):is([aria-invalid="true"], .input-error, :user-invalid):focus,
html.code-design :is(.has-error, .input-error) :is(textarea, input):focus {
  --field-shadow: 0 0 0 2px color-mix(in srgb, var(--code-danger) 10%, transparent);
}
html.code-design :is(textarea, input)[readonly] {
  --field-surface: var(--code-soft);
}
html.code-design :is(textarea, input):disabled {
  --field-surface: var(--code-soft);
  --field-edge: var(--code-border);
  --field-shadow: 0 0 0 0 transparent;
  cursor: not-allowed;
}
html.code-design input:autofill {
  -webkit-text-fill-color: var(--code-text) !important;
  box-shadow: inset 0 0 0 1000px var(--field-surface, var(--code-surface)), var(--field-shadow, 0 0 transparent) !important;
}
html.code-design :is(.input-group, .field):has(:is(input, textarea):focus) > :is(label, .floating-label) {
  color: var(--code-link);
}
html.code-design :is(.input-group, .field) > :is(label, .floating-label) { transition: color 220ms ease; }
@media (prefers-reduced-motion: reduce) {
  html.code-design :is(input, textarea),
  html.code-design :is(.input-group, .field) > :is(label, .floating-label) { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  html.code-design :is(textarea, input:where(:not([type]), [type="text"], [type="email"], [type="password"], [type="tel"], [type="search"], [type="url"], [type="number"], [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])):focus {
    outline: 2px solid Highlight !important;
  }
}
html.code-design :is(.btn-premium, .button-primary, .skip-link, .progress-dot.active, .remember input:checked ~ .check-box) { color: #ffffff; }
html.code-design .check-box svg { color: #ffffff; }
html.code-design .btn-primary { background: var(--code-green); color: #ffffff; box-shadow: none; border-radius: 4px; }
html.code-design .btn-primary:hover { background: var(--code-green-hover); }
html.code-design :is(.chip.gold, .callout, .prose h2 b) { background: var(--code-green-soft); border-color: var(--code-border); }
html.code-design .step b { background: var(--code-green); color: #ffffff; }
html.code-design .text-transparent.bg-clip-text { background: none; color: var(--code-link); -webkit-text-fill-color: currentColor; }
html.code-design :is(.feature-link, .getting-started, .faq, .hero, .step-number, .contact-panel) { border-color: var(--code-border); }
html.code-design .hero-copy h1 span { color: var(--code-link); }
html.code-design .button-secondary:hover { background: var(--code-soft); border-color: var(--code-muted); }
html.code-design[data-theme="dark"] .code-theme-toolbar { background: var(--code-canvas); }
html.code-design body > footer:not(.login-footer):not(.register-footer) { background: #14573a; color: #ffffff; }
html.code-design:not(.student-portal) :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400) { color: var(--code-muted) !important; }
html.code-design:not(.student-portal) :is(.text-yellow-300, .text-yellow-400, .text-yellow-500, .text-amber-400, .logo-sheen) { color: var(--code-link) !important; -webkit-text-fill-color: currentColor; background-image: none; }
html.code-design:not(.student-portal) :is(.bg-white\/5, .bg-white\/10, .bg-black\/20, .bg-black\/30) { background-color: var(--code-soft) !important; }
html.code-design:not(.student-portal) :is(.border-white\/10, .border-white\/20) { border-color: var(--code-border) !important; }
html.code-design.owner-portal :is(.owner-topbar, #sidebar, .owner-menu-toggle, .owner-sidebar-link, .owner-topbar-brand) { background: var(--code-surface); color: var(--code-text); box-shadow: none; }
html.code-design.owner-portal :is(.text-white, .text-black) { color: var(--code-text) !important; }
html.code-design.owner-portal [class*="bg-[#"] { background-color: var(--code-surface) !important; }
html.code-design.owner-portal .owner-sidebar-link.is-active { background: var(--code-green-soft); color: var(--code-link); }
html.code-design .code-theme-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  padding: 12px max(20px, calc((100vw - 1200px) / 2));
  background: var(--code-surface);
  border-bottom: 1px solid var(--code-border);
}
html.code-design .code-theme-inline { display: flex; justify-content: flex-end; margin-bottom: 24px; }
/* Higher specificity keeps legacy icon-button sizes from clipping the switch. */
html.code-design[data-theme] [data-theme-toggle].code-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 24px;
  width: auto !important;
  height: auto !important;
  min-height: 44px;
  padding: 4px;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--code-text) !important;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  direction: rtl;
  overflow: visible !important;
  box-shadow: none !important;
}
html.code-design .code-theme-caption { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
html.code-design .code-theme-icon { display: block; width: 24px; height: 24px; flex: none; }
html.code-design .code-theme-sun { display: none; }
html.code-design[data-theme="dark"] .code-theme-sun { display: block; }
html.code-design[data-theme="dark"] .code-theme-moon { display: none; }
html.code-design .code-theme-track {
  display: flex;
  align-items: center;
  width: 72px;
  height: 36px;
  padding: 4px;
  border: 1.5px solid #161616;
  border-radius: 999px;
  background: #ffffff;
  direction: ltr;
}
html.code-design .code-theme-thumb {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #161616;
  transform: translateX(36px);
  transition: transform .18s ease, background-color .18s ease;
}
html.code-design[data-theme="dark"] .code-theme-track { border-color: #1b8354; background: #1b8354; }
html.code-design[data-theme="dark"] .code-theme-thumb { background: #ffffff; transform: translateX(0); }
@media (max-width: 700px) {
  html.code-design .code-theme-toolbar { padding: 8px 16px; }
  html.code-design:is(.student-portal, .owner-portal) .code-theme-label { display: none; }
  html.code-design:is(.student-portal, .owner-portal) [data-theme-toggle].code-theme-toggle { gap: 8px; }
  html.code-design:is(.student-portal, .owner-portal) .code-theme-track { width: 52px; height: 30px; padding: 3px; }
  html.code-design:is(.student-portal, .owner-portal) .code-theme-thumb { width: 22px; height: 22px; transform: translateX(22px); }
  html.code-design[data-theme="dark"]:is(.student-portal, .owner-portal) .code-theme-thumb { transform: translateX(0); }
  html.code-design.owner-portal .owner-topbar-status { display: none; }
}
html.code-design .code-public-menu {
  display: block;
  flex: none;
  margin-inline-start: auto;
}
html.code-design :is(.login-header, .register-header, .site-header):has(.code-public-menu) {
  position: sticky;
  top: 0;
  z-index: 50;
}
html.code-design .code-public-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--code-text);
  list-style: none;
  cursor: pointer;
}
html.code-design .code-public-menu summary::-webkit-details-marker { display: none; }
html.code-design .code-public-menu summary svg { width: 24px; height: 24px; flex: none; }
html.code-design .code-public-menu summary:focus-visible { outline: 2px solid var(--code-link); outline-offset: 4px; border-radius: 6px; }
html.code-design .code-public-menu::details-content { opacity: 0; transition: opacity 240ms ease, content-visibility 280ms allow-discrete; }
html.code-design .code-public-menu[open]::details-content { opacity: 1; }
html.code-design .code-public-menu .menu-line { transform-box: view-box; transform-origin: 12px 12px; transition: transform .25s ease, opacity .15s ease; }
html.code-design .code-public-menu[open] .menu-line-top { transform: translateY(6px) rotate(45deg); transform-origin: 12px 6px; }
html.code-design .code-public-menu[open] .menu-line-middle { opacity: 0; transform: scaleX(0); }
html.code-design .code-public-menu[open] .menu-line-bottom { transform: translateY(-6px) rotate(-45deg); transform-origin: 12px 18px; }
html.code-design .code-public-menu nav {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  padding: 16px max(20px, calc((100vw - 1200px) / 2));
  border-top: 1px solid var(--code-border);
  border-bottom: 1px solid var(--code-border);
  background: var(--code-surface);
  color: var(--code-text);
  box-shadow: 0 8px 16px #00000012;
  transform-origin: top;
}
html.code-design .code-public-menu[open] nav { animation: code-menu-open .28s cubic-bezier(.22, 1, .36, 1) both; }
@supports selector(details::details-content) {
  html.code-design .code-public-menu nav { transform: translateY(-8px); transition: transform 280ms cubic-bezier(.22, 1, .36, 1); }
  html.code-design .code-public-menu[open] nav { animation: none; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.code-design .code-public-menu nav { transition: none; }
}
html.code-design .code-public-menu nav a { display: block; padding: 12px; min-height: 48px; border-radius: 4px; font-size: 16px; text-decoration: none; }
html.code-design .code-public-menu nav a:hover { background: var(--code-green-soft); color: var(--code-link); }
html.code-design .code-menu-theme { border-top: 1px solid var(--code-border); margin-top: 8px; padding: 16px 12px 8px; }
html.code-design[data-theme] .code-menu-theme [data-theme-toggle].code-theme-toggle { display: flex !important; width: 100% !important; padding: 0; }
@keyframes code-menu-open {
  from { opacity: 0; transform: translateY(-8px) scaleY(.96); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.code-design .code-theme-thumb, html.code-design .code-public-menu .menu-line,
html.code-design .code-menu-icon path, html.code-design .code-public-menu::details-content { transition: none; }
  html.code-design .code-public-menu[open] nav { animation: none; }
}