:root {
  --af-orange: #ff7310;
  --af-orange-2: #ff9537;
  --green: var(--af-orange) !important;
  --green-2: var(--af-orange-2) !important;
  --green-soft: rgba(255, 115, 16, 0.13) !important;
  --teal: var(--af-orange) !important;
  --teal-dark: #e75f00 !important;
  --accent: var(--af-orange) !important;
  --primary: var(--af-orange) !important;
  accent-color: var(--af-orange);
}

html {
  color-scheme: dark;
}

body,
.auth-page,
.login-view,
.auth-view,
.download-hero,
.dashboard-view {
  background:
    radial-gradient(ellipse 44% 45% at 24% 44%, rgba(235, 242, 250, 0.2), transparent 73%),
    radial-gradient(ellipse 35% 30% at 74% 18%, rgba(255, 255, 255, 0.045), transparent 74%),
    linear-gradient(145deg, #05080d, #11161d 52%, #06090e) !important;
  color: #f7f9fb;
}

body::after,
.auth-page::after,
.login-view::after,
.auth-view::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 76%);
}

.auth-page::after {
  background:
    radial-gradient(ellipse 36% 40% at var(--mouse-x, 24%) var(--mouse-y, 42%), rgba(232, 239, 247, 0.14), transparent 72%),
    linear-gradient(135deg, transparent 10%, rgba(255, 255, 255, 0.025) 52%, transparent 82%);
  background-size: auto;
  mask-image: none;
}

.auth-page::before,
body.auth-page::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.auth-page .nav {
  direction: ltr;
}

.auth-page .brand {
  direction: ltr;
}

.auth-page main {
  min-height: calc(100vh - 74px);
  display: grid;
  align-items: center;
}

.auth-page .auth-wrap {
  width: min(1220px, calc(100% - 44px));
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 500px);
  align-items: center;
  gap: clamp(42px, 7vw, 110px);
  padding-block: 48px;
}

.auth-page .auth-story {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-page .auth-story h1 {
  max-width: 650px;
  margin-block: 14px 10px;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1.06;
}

.auth-page .auth-story > p {
  max-width: 580px;
  font-size: 17px;
  line-height: 1.9;
}

.auth-v22-showcase {
  position: relative;
  width: min(610px, 92%);
  min-height: 178px;
  margin-top: 32px;
  perspective: 900px;
}

.auth-v22-showcase::before {
  content: "";
  position: absolute;
  inset: 20% 4% -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(235, 242, 250, 0.3), transparent 70%);
  filter: blur(20px);
}

.auth-v22-showcase article {
  position: absolute;
  width: 34%;
  min-height: 130px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 17px;
  border: 1px solid rgba(235, 242, 250, 0.23);
  border-radius: 16px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.09), transparent 28%),
    linear-gradient(145deg, #171d25, #070a0f);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.1);
  transform: rotateY(-7deg);
}

.auth-v22-showcase article:nth-of-type(1) {
  inset-inline-start: 0;
  top: 18px;
}

.auth-v22-showcase article:nth-of-type(2) {
  inset-inline-start: 31%;
  top: 2px;
  z-index: 2;
  transform: translateY(-4px) scale(1.03);
}

.auth-v22-showcase article:nth-of-type(3) {
  inset-inline-start: 62%;
  top: 22px;
  transform: rotateY(7deg);
}

.auth-v22-showcase small {
  color: #aeb5bf;
  font-size: 11px;
}

.auth-v22-showcase strong {
  color: #fff;
  font-size: 21px;
}

.auth-v22-showcase em {
  color: #929ba6;
  font-size: 9px;
  font-style: normal;
}

.auth-v22-showcase article > span {
  color: #36cf7b;
  font-size: 10px;
}

.auth-v22-live {
  position: absolute;
  z-index: 5;
  top: -11px;
  inset-inline-end: 2%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: #0b0f15;
  color: #c5ccd5;
  font-size: 10px;
}

.auth-v22-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--af-orange);
  box-shadow: 0 0 14px var(--af-orange);
}

.header,
.portal-header,
.download-header,
.topbar,
.dashboard-header {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(5, 8, 13, 0.78) !important;
  backdrop-filter: blur(18px);
}

.brand .logo,
.dashboard-brand .logo,
.device-brand .logo {
  width: 58px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/af-mark-dark.png") center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

.brand .logo::before,
.brand .logo::after,
.dashboard-brand .logo::before,
.dashboard-brand .logo::after {
  display: none !important;
}

.brand,
.portal-brand,
.download-header .brand,
.topbar .brand,
.sidebar-brand,
.login-heading {
  color: #f7f9fb !important;
}

.brand img,
.portal-brand img,
.sidebar-brand img,
.login-heading img,
.app-icon img {
  content: url("assets/af-mark-dark.png");
  object-fit: contain !important;
}

.auth-card,
.login-card,
.release-card,
.panel,
.portal-card,
.summary-grid article,
.method-card,
.metric-card,
.admin-card,
.table-card,
.settings-card {
  border-color: rgba(235, 242, 250, 0.2) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.07), transparent 34%),
    linear-gradient(145deg, rgba(19, 24, 32, 0.97), rgba(6, 9, 14, 0.98)) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.auth-card,
.login-card,
.release-card {
  border-radius: 20px !important;
}

.auth-story h1,
.auth-intro h1,
.login-copy h1,
.hero-copy h1,
.login-heading h1,
.login-heading h2 {
  color: #f7f9fb !important;
}

.auth-story p,
.auth-intro p,
.login-copy p,
.hero-copy p,
.sub,
.login-help,
.login-note,
.release-meta,
.status-message {
  color: #aeb5bf !important;
}

.eyebrow,
.portal-kicker,
.security-chip,
.status-badge {
  border-color: rgba(255, 115, 16, 0.25) !important;
  background: rgba(255, 115, 16, 0.1) !important;
  color: var(--af-orange-2) !important;
}

.btn-primary,
.primary-btn,
.login-btn,
.download-button,
.app-action,
button[type="submit"] {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--af-orange), var(--af-orange-2)) !important;
  color: #fff !important;
  box-shadow: 0 15px 36px rgba(255, 115, 16, 0.24) !important;
}

.btn-primary:hover,
.primary-btn:hover,
.login-btn:hover,
.download-button:hover {
  box-shadow: 0 19px 44px rgba(255, 115, 16, 0.32) !important;
}

.btn-outline,
.google,
.home-link,
.back-site,
.back-link,
.icon-btn,
.icon-button,
.language-button,
.lang-btn,
.theme-toggle {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #f7f9fb !important;
}

input,
select,
textarea,
.field input,
.field-wrap input {
  border-color: rgba(255, 255, 255, 0.17) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #f7f9fb !important;
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field-wrap input:focus {
  border-color: var(--af-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 115, 16, 0.13) !important;
}

.auth-v22-phone small {
  display: block;
  margin-top: 7px;
  color: #8f98a4;
  font-size: 11px;
}

.auth-v22-consents {
  display: grid;
  gap: 9px;
  margin: 14px 0;
}

.auth-v22-consents label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #aeb5bf;
  font-size: 12px;
  line-height: 1.55;
  cursor: pointer;
}

.auth-v22-consents input {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin-top: 2px;
  flex: 0 0 16px;
}

.auth-v22-forgot {
  display: block;
  width: max-content;
  margin: 0 2px 10px;
  font-size: 12px;
}

.auth-v22-google {
  min-height: 50px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-width: 1px !important;
  font-weight: 800 !important;
}

.auth-v22-google svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.or::before,
.or::after,
.login-card hr {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.auth-switch a,
.auth-forgot,
.login-footer a,
.login-help a,
.note a {
  color: var(--af-orange-2) !important;
}

.sidebar,
.app-sidebar {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #080c12 !important;
}

.nav-item.active,
.sidebar a.active,
.app-nav a.active {
  border-color: rgba(255, 115, 16, 0.24) !important;
  background: rgba(255, 115, 16, 0.12) !important;
  color: var(--af-orange-2) !important;
}

.af-assistant-launcher,
.af-assistant-mark,
.af-assistant-send,
.af-assistant-confirm {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--af-orange), var(--af-orange-2)) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(255, 115, 16, 0.26) !important;
}

.af-assistant-panel {
  border-color: rgba(255, 115, 16, 0.25) !important;
}

.cookie {
  z-index: 320 !important;
}

.cookie.show ~ .af-assistant-root {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="light"] body,
html[data-theme="light"] .auth-page,
html[data-theme="light"] .login-view,
html[data-theme="light"] .auth-view,
html[data-theme="light"] .download-hero,
html[data-theme="light"] .dashboard-view {
  background:
    radial-gradient(ellipse 44% 45% at 24% 44%, rgba(112, 132, 153, 0.1), transparent 73%),
    linear-gradient(145deg, #fff, #f4f7fa 52%, #fff) !important;
  color: #111820;
}

html[data-theme="light"] .header,
html[data-theme="light"] .portal-header,
html[data-theme="light"] .download-header,
html[data-theme="light"] .topbar,
html[data-theme="light"] .dashboard-header {
  border-color: #e0e5eb !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

html[data-theme="light"] .brand .logo,
html[data-theme="light"] .dashboard-brand .logo,
html[data-theme="light"] .device-brand .logo {
  background-image: url("assets/af-mark-light.png") !important;
}

html[data-theme="light"] .brand img,
html[data-theme="light"] .portal-brand img,
html[data-theme="light"] .sidebar-brand img,
html[data-theme="light"] .login-heading img,
html[data-theme="light"] .app-icon img {
  content: url("assets/af-mark-light.png");
}

html[data-theme="light"] .brand,
html[data-theme="light"] .portal-brand,
html[data-theme="light"] .download-header .brand,
html[data-theme="light"] .topbar .brand,
html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .login-heading,
html[data-theme="light"] .auth-story h1,
html[data-theme="light"] .auth-intro h1,
html[data-theme="light"] .login-copy h1,
html[data-theme="light"] .hero-copy h1 {
  color: #111820 !important;
}

html[data-theme="light"] .auth-page::after {
  background:
    radial-gradient(ellipse 40% 42% at 24% 46%, rgba(106, 125, 146, 0.13), transparent 72%),
    linear-gradient(135deg, transparent 10%, rgba(74, 92, 112, 0.035) 52%, transparent 82%);
}

html[data-theme="light"] .auth-v22-showcase article {
  border-color: #d8dfe7;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.9), transparent 33%),
    linear-gradient(145deg, #f7f9fb, #e8edf2);
  box-shadow: 0 22px 46px rgba(29, 45, 62, 0.12), inset 0 1px #fff;
}

html[data-theme="light"] .auth-v22-showcase strong {
  color: #111820;
}

html[data-theme="light"] .auth-v22-live {
  border-color: #d5dde5;
  background: #fff;
  color: #4a5664;
}

html[data-theme="light"] .auth-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .release-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .portal-card,
html[data-theme="light"] .summary-grid article,
html[data-theme="light"] .method-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .admin-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .settings-card {
  border-color: #dfe5eb !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 24px 60px rgba(28, 41, 55, 0.08) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .field input,
html[data-theme="light"] .field-wrap input {
  border-color: #d8dfe6 !important;
  background: #fff !important;
  color: #111820 !important;
}

html[data-theme="light"] .btn-outline,
html[data-theme="light"] .google,
html[data-theme="light"] .home-link,
html[data-theme="light"] .back-site,
html[data-theme="light"] .back-link,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .language-button,
html[data-theme="light"] .lang-btn,
html[data-theme="light"] .theme-toggle {
  border-color: #d6dde5 !important;
  background: #fff !important;
  color: #111820 !important;
}

@media (max-width: 900px) {
  .auth-page .auth-wrap {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 32px;
  }

  .auth-page .auth-story {
    min-height: auto;
    text-align: center;
  }

  .auth-page .auth-story h1,
  .auth-page .auth-story > p {
    margin-inline: auto;
  }

  .auth-v22-showcase {
    width: min(570px, 100%);
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .auth-page .auth-wrap {
    width: min(100% - 24px, 520px);
  }

  .auth-page .auth-story h1 {
    font-size: 36px !important;
  }

  .auth-v22-showcase {
    min-height: 142px;
  }

  .auth-v22-showcase article {
    min-height: 105px;
    padding: 11px;
  }

  .auth-v22-showcase strong {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}