@import url('/ui-tokens/index.css');
@import url('/ui-system/styles.css');

body[data-route-key='login'],
body[data-route-key='signup'],
body[data-route-key='email-verify'],
body[data-route-key='forget-password'],
body[data-route-key='security'],
body[data-route-key='two-fa'],
body[data-route-key='kyc'] {
  margin: 0;
  min-inline-size: 320px;
  overflow-x: clip;
  background: var(--ui-bg-page);
  color: var(--ui-text-primary);
  font-family: var(--ui-font-sans);
}

body[data-route-key='login']::before,
body[data-route-key='signup']::before,
body[data-route-key='email-verify']::before,
body[data-route-key='forget-password']::before,
body[data-route-key='security']::before,
body[data-route-key='two-fa']::before,
body[data-route-key='kyc']::before {
  display: none;
}

.ia-auth-shell,
.ia-workspace,
.ia-auth-shell *,
.ia-workspace * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.ia-auth-shell :where(h1, h2, p, ul, dl, dd),
.ia-workspace :where(h1, h2, p, ul, dl, dd) {
  margin: 0;
}

.ia-auth-shell a,
.ia-workspace a {
  color: inherit;
  text-decoration: none;
}

.ia-skip {
  position: fixed;
  z-index: 100;
  inset-block-start: max(8px, env(safe-area-inset-top));
  inset-inline-start: max(8px, env(safe-area-inset-left));
  padding: 10px 14px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-brand);
  color: var(--ui-text-on-brand);
  font-weight: 750;
  transform: translateY(-160%);
}

.ia-skip:focus {
  transform: translateY(0);
}

.ia-auth-shell {
  display: grid;
  grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
  min-block-size: 100dvh;
  background: var(--ui-bg-page);
}

.ia-brand-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 36px;
  min-inline-size: 0;
  padding: max(36px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left));
  overflow: hidden;
  border-inline-end: 1px solid var(--ui-border);
  background: var(--ui-bg-subtle);
}

.ia-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(var(--ui-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-border) 1px, transparent 1px);
  background-size: 56px 56px;
}

.ia-brand,
.ia-route-tools,
.ia-segmented,
.ia-form-actions,
.ia-auth-switch,
.ia-key-row,
.ia-workspace-header,
.ia-workspace-heading nav,
.ia-level-tabs {
  display: flex;
  align-items: center;
}

.ia-brand {
  position: relative;
  z-index: 1;
  gap: 12px;
  inline-size: fit-content;
  min-block-size: 44px;
  font-size: 1.12rem;
  font-weight: 800;
}

.ia-brand img {
  inline-size: 44px;
  block-size: 44px;
}

.ia-brand-message {
  position: relative;
  z-index: 1;
  align-self: end;
  max-inline-size: 520px;
}

.ia-brand-message > p,
.ia-page-header > p,
.ia-workspace-heading > div > p,
.ia-card header > p,
.ia-security-overview > div > p,
.ia-kyc-status > div > p {
  color: var(--ui-brand);
  font: 750 0.75rem/1.4 var(--ui-font-mono);
  text-transform: uppercase;
}

.ia-brand-message h2 {
  margin-block: 12px 18px;
  max-inline-size: 10ch;
  font-size: clamp(2.25rem, 4.3vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.ia-brand-message > span {
  display: block;
  max-inline-size: 44ch;
  color: var(--ui-text-secondary);
  line-height: 1.65;
}

.ia-signal-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 8px;
  block-size: 112px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
}

.ia-signal-board span {
  display: block;
  min-block-size: 12px;
  border-block-start: 3px solid var(--ui-brand);
  background: var(--ui-bg-subtle);
}

.ia-signal-board span:nth-child(1) { block-size: 34%; }
.ia-signal-board span:nth-child(2) { block-size: 52%; }
.ia-signal-board span:nth-child(3) { block-size: 44%; border-color: var(--ui-info); }
.ia-signal-board span:nth-child(4) { block-size: 76%; border-color: var(--ui-success); }
.ia-signal-board span:nth-child(5) { block-size: 64%; border-color: var(--ui-warning); }

.ia-signal-board i {
  position: absolute;
  inset-inline: 16px;
  block-size: 1px;
  background: var(--ui-border);
}

.ia-signal-board i:nth-of-type(1) { inset-block-start: 28%; }
.ia-signal-board i:nth-of-type(2) { inset-block-start: 51%; }
.ia-signal-board i:nth-of-type(3) { inset-block-start: 74%; }

.ia-brand-signals {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 0;
  list-style: none;
  color: var(--ui-text-secondary);
  font-size: 0.78rem;
}

.ia-brand-signals li {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.ia-brand-signals li span {
  color: var(--ui-success);
}

.ia-auth-main {
  display: grid;
  grid-template-rows: auto 1fr;
  min-inline-size: 0;
  padding: max(24px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  background: var(--ui-bg-page);
}

.ia-route-tools {
  z-index: 2;
  justify-content: flex-end;
  gap: 10px;
}

.ia-segmented {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
}

.ia-segmented button,
.ia-level-tabs button {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: calc(var(--ui-radius-control) - 2px);
  background: transparent;
  color: var(--ui-text-secondary);
  font: 700 0.75rem/1 var(--ui-font-sans);
}

.ia-segmented button.is-active,
.ia-segmented button[aria-pressed='true'],
.ia-level-tabs button.is-active {
  background: var(--ui-surface-interactive);
  color: var(--ui-text-primary);
}

.ia-auth-content {
  align-self: center;
  inline-size: min(100%, 560px);
  margin-inline: auto;
  padding-block: 36px;
}

.ia-page-header {
  margin-block-end: 28px;
}

.ia-page-header h1,
.ia-workspace-heading h1 {
  margin-block: 8px 12px;
  color: var(--ui-text-primary);
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.ia-page-header > span,
.ia-workspace-heading > div > span,
.ia-card header > span {
  display: block;
  color: var(--ui-text-secondary);
  line-height: 1.6;
}

.ia-alert,
.ia-safe-response,
.ia-security-note,
.ia-legal-note {
  margin-block: 18px;
}

.ia-alert {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
}

.ia-safe-response {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-inline-start: 3px solid var(--ui-info);
  background: var(--ui-info-soft);
  color: var(--ui-text-primary);
}

.ia-safe-response > span {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 800;
}

.ia-form {
  display: grid;
  gap: 18px;
  min-inline-size: 0;
  margin-block: 18px;
}

.ia-form[aria-busy='true'] {
  opacity: 0.78;
}

.ia-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ia-auth-content > .ia-form .ia-form-grid,
.ia-auth-steps .ia-form-grid,
.ia-secondary-flow .ia-form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ia-field,
.ia-field--wide {
  min-inline-size: 0;
}

.ia-field--wide {
  grid-column: 1 / -1;
}

.ia-field__label small {
  color: var(--ui-text-muted);
  font-weight: 500;
}

.ia-input-wrap {
  position: relative;
  display: block;
}

.ia-input-wrap .ui-input {
  min-block-size: max(52px, var(--ui-touch-target));
}

.ia-input-wrap:has(.ia-password-toggle) .ui-input {
  padding-inline-end: 92px;
}

.ia-password-toggle {
  position: absolute;
  inset-block: 4px;
  inset-inline-end: 4px;
  min-inline-size: 76px;
  min-block-size: 44px;
  border: 0;
  border-radius: calc(var(--ui-radius-control) - 3px);
  background: var(--ui-bg-subtle);
  color: var(--ui-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
}

.ia-textarea {
  min-block-size: 112px;
  resize: vertical;
}

.ia-checkbox {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-block-size: 44px;
  padding: 10px 0;
  color: var(--ui-text-secondary);
  font-size: 0.86rem;
}

.ia-checkbox input {
  inline-size: 20px;
  block-size: 20px;
  margin: 1px 0 0;
  accent-color: var(--ui-brand);
}

.ia-form-actions {
  justify-content: space-between;
  gap: 12px;
}

.ia-form-actions .ui-button {
  min-inline-size: 156px;
}

.ia-text-link,
.ia-auth-switch a,
.ia-legal-links a,
.ia-privacy-card a {
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ui-brand);
  font-weight: 700;
}

.ia-security-note,
.ia-legal-note,
.ia-privacy-line {
  color: var(--ui-text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.ia-auth-switch {
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 18px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--ui-border);
  color: var(--ui-text-secondary);
}

.ia-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-block-start: 30px;
  color: var(--ui-text-muted);
  font-size: 0.76rem;
}

.ia-legal-links a {
  color: inherit;
  font-weight: 600;
}

.ia-auth-steps {
  display: grid;
  gap: 16px;
}

.ia-auth-steps > section {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
}

.ia-auth-steps > section > span,
.ia-card header > p {
  color: var(--ui-text-muted);
  font: 700 0.72rem/1.4 var(--ui-font-mono);
}

.ia-auth-steps h2,
.ia-card h2 {
  margin-block: 0 6px;
  font-size: 1.1rem;
  line-height: 1.25;
}

.ia-state-summary {
  display: grid;
  gap: 8px;
  margin-block: 18px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
}

.ia-state-summary small {
  color: var(--ui-text-muted);
}

.ia-secondary-flow {
  margin-block: 14px;
  border-block-start: 1px solid var(--ui-border);
}

.ia-secondary-flow summary {
  min-block-size: 48px;
  padding-block: 14px;
  color: var(--ui-brand);
  font-weight: 700;
  cursor: pointer;
}

.ia-workspace {
  min-block-size: 100dvh;
  padding-block-end: max(44px, env(safe-area-inset-bottom));
  background: var(--ui-bg-page);
}

.ia-workspace-header {
  position: sticky;
  z-index: 20;
  inset-block-start: 0;
  justify-content: space-between;
  gap: 20px;
  min-block-size: 68px;
  padding: max(10px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 10px max(24px, env(safe-area-inset-left));
  border-block-end: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-bg-page) 94%, transparent);
  backdrop-filter: blur(16px);
}

.ia-brand--compact img {
  inline-size: 38px;
  block-size: 38px;
}

.ia-workspace-heading,
.ia-workspace-main {
  inline-size: min(100%, 1400px);
  margin-inline: auto;
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
}

.ia-workspace-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  padding-block: 48px 30px;
}

.ia-workspace-heading > div {
  max-inline-size: 760px;
}

.ia-workspace-heading nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.ia-workspace-heading nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 12px;
  color: var(--ui-text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}

.ia-workspace-main {
  display: grid;
  gap: 20px;
}

.ia-card,
.ia-security-overview,
.ia-kyc-status {
  min-inline-size: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  color: var(--ui-text-primary);
  box-shadow: var(--ui-shadow-panel);
}

.ia-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px;
}

.ia-card header {
  display: grid;
  gap: 4px;
}

.ia-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ia-card--wide {
  grid-column: 1 / -1;
}

.ia-security-overview {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2.3fr);
  gap: 24px;
  padding: 24px;
}

.ia-security-overview > div > strong {
  display: block;
  margin-block-start: 8px;
  font-size: 1.8rem;
  line-height: 1.1;
}

.ia-security-overview dl,
.ia-kyc-status dl,
.ia-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-border);
}

.ia-security-overview dl > div,
.ia-kyc-status dl > div,
.ia-detail-list > div {
  min-inline-size: 0;
  padding: 14px;
  background: var(--ui-bg-subtle);
}

.ia-security-overview dt,
.ia-kyc-status dt,
.ia-detail-list dt {
  margin-block-end: 5px;
  color: var(--ui-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.ia-security-overview dd,
.ia-kyc-status dd,
.ia-detail-list dd {
  display: grid;
  gap: 4px;
  color: var(--ui-text-primary);
  overflow-wrap: anywhere;
}

.ia-connection-list {
  display: grid;
  gap: 1px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-border);
  list-style: none;
}

.ia-connection-list li,
.ia-key-row {
  justify-content: space-between;
  gap: 12px;
  min-block-size: 52px;
  padding: 10px 12px;
  background: var(--ui-bg-subtle);
}

.ia-twofa-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ia-security-overview--compact {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ia-boundary-card .ui-alert {
  margin-block: 0;
}

.ia-kyc-status {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 2.45fr);
  gap: 20px;
  padding: 22px;
}

.ia-kyc-status > div {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
}

.ia-kyc-status dl {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ia-level-tabs {
  gap: 4px;
  inline-size: fit-content;
  padding: 4px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
}

.ia-level-tabs button {
  min-inline-size: 64px;
  min-block-size: 44px;
}

.ia-kyc-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.ia-kyc-aside {
  display: grid;
  gap: 18px;
}

.ia-privacy-card {
  border-inline-start: 3px solid var(--ui-info);
}

.ia-history-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-border);
}

.ia-history-list article {
  display: grid;
  grid-template-columns: minmax(72px, 0.3fr) minmax(160px, 0.7fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
  min-block-size: 58px;
  padding: 10px 14px;
  background: var(--ui-bg-subtle);
}

.ia-history-list time {
  color: var(--ui-text-secondary);
  font-size: 0.82rem;
}

.ia-empty-state,
.ia-page-failure {
  justify-items: start;
}

.ia-loading {
  min-block-size: 260px;
  align-content: center;
}

.ia-loading .ui-skeleton {
  inline-size: 100%;
  block-size: 22px;
}

.ia-status--approved { --ui-status-color: var(--ui-success); }
.ia-status--pending { --ui-status-color: var(--ui-warning); }
.ia-status--restricted { --ui-status-color: var(--ui-restricted); }
.ia-status--error { --ui-status-color: var(--ui-error); }
.ia-status--unknown { --ui-status-color: var(--ui-unknown); }

@media (max-width: 980px) {
  .ia-auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-auth-main {
    order: -1;
    min-block-size: 100dvh;
  }

  .ia-brand-panel {
    min-block-size: 420px;
    border-block-start: 1px solid var(--ui-border);
    border-inline-end: 0;
  }

  .ia-workspace-heading {
    display: grid;
    align-items: start;
  }

  .ia-workspace-heading nav {
    justify-content: flex-start;
  }

  .ia-kyc-status {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-kyc-status dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ia-kyc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .ia-auth-main {
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }

  .ia-route-tools {
    justify-content: space-between;
  }

  .ia-auth-content {
    padding-block: 28px;
  }

  .ia-page-header h1,
  .ia-workspace-heading h1 {
    font-size: 2rem;
  }

  .ia-form-grid,
  .ia-card-grid,
  .ia-twofa-layout,
  .ia-security-overview,
  .ia-security-overview dl,
  .ia-detail-list,
  .ia-kyc-status dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-card--wide,
  .ia-field--wide {
    grid-column: auto;
  }

  .ia-workspace-header {
    position: relative;
    display: grid;
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }

  .ia-workspace-header .ia-route-tools {
    overflow-x: auto;
    padding-block-end: 4px;
  }

  .ia-workspace-heading,
  .ia-workspace-main {
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }

  .ia-workspace-heading {
    padding-block: 28px 22px;
  }

  .ia-workspace-heading nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: 100%;
    border-block: 1px solid var(--ui-border);
  }

  .ia-workspace-heading nav a {
    justify-content: center;
    padding-inline: 4px;
    text-align: center;
  }

  .ia-security-overview--compact {
    display: flex;
  }

  .ia-history-list article {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

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

  .ia-form-actions .ui-button {
    inline-size: 100%;
  }

  .ia-auth-switch {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ia-brand-panel {
    min-block-size: 500px;
    padding-inline: max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right));
  }
}

@media (max-width: 390px) {
  .ia-route-tools {
    align-items: stretch;
    flex-direction: column;
    inline-size: 100%;
  }

  .ia-segmented {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    inline-size: min(100%, 360px);
  }

  .ia-segmented button {
    inline-size: 100%;
    min-inline-size: 0;
    padding-inline: 6px;
    overflow-wrap: anywhere;
  }

  .ia-card,
  .ia-security-overview,
  .ia-kyc-status {
    padding: 16px;
  }
}

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

@media (forced-colors: active) {
  .ia-card,
  .ia-security-overview,
  .ia-kyc-status,
  .ia-auth-steps > section {
    border: 1px solid CanvasText;
  }
}