@import url("/assets/ui/system.css?v=38ae4a8457e22f82c70c");

@layer activation {
  body.activation-page { min-height: 100dvh; padding: 24px; background: var(--ui-canvas); }
  .activation-page .activation-shell { width: min(680px, 100%); margin-inline: auto; display: grid; gap: 14px; }
  .activation-brand { width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; color: var(--ui-text-strong); }
  .activation-brand img,
  .activation-brand > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-primary); object-fit: contain; box-shadow: none; filter: none; }
  .activation-brand strong { font-weight: 600; }
  .activation-card { padding: 22px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: none; }
  .activation-heading { padding-bottom: 14px; border-bottom: 1px solid var(--ui-border); text-align: left; }
  .activation-kicker { display: inline-flex; min-height: 26px; align-items: center; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)); border-radius: var(--ui-radius-sm); background: var(--ui-primary-soft); color: var(--ui-primary-hover); font-size: 10px; font-weight: 600; letter-spacing: .05em; }
  .activation-heading h1 { margin-top: 10px; font-size: 25px; font-weight: 600; }
  .activation-heading p { margin-top: 6px; color: var(--ui-text-muted); }
  .activation-progress { margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; }
  .activation-progress li { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); color: var(--ui-text-muted); }
  .activation-progress b { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ui-border-strong); border-radius: 50%; background: var(--ui-surface); font-weight: 500; }
  .activation-progress li:is(.active, .done) { border-color: var(--ui-primary); color: var(--ui-primary-hover); }
  .activation-progress li:is(.active, .done) b { border-color: var(--ui-primary); background: var(--ui-primary); color: #ffffff; }
  .activation-progress li::after { content: none; }
  .activation-progress span { min-width: 0; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
  .activation-alert { margin-bottom: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border)); border-left: 3px solid var(--ui-danger); border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--ui-danger) 6%, var(--ui-surface)); color: var(--ui-danger); }
  .activation-alert.success { border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border)); border-left-color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface)); color: var(--ui-success); }
  .activation-page form { display: grid; gap: 14px; }
  .activation-page form > label { display: grid; gap: 6px; color: var(--ui-text-muted); font-size: 12px; font-weight: 500; }
  .activation-page form > button,
  .activation-complete a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; justify-self: end; padding: 8px 14px; border: 1px solid var(--ui-primary); border-radius: var(--ui-radius-sm); background: var(--ui-primary); color: #ffffff; font-weight: 500; }
  .activation-page form > .activation-back { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text); }
  .activation-help,
  .activation-welcome { padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); color: var(--ui-text-muted); font-size: 12px; }
  .activation-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); }
  .activation-consent input { margin-top: 1px; }
  .activation-complete { display: grid; justify-items: center; gap: 10px; text-align: center; }
  .activation-complete > span { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ui-success) 35%, var(--ui-border)); border-radius: 50%; background: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)); color: var(--ui-success); font-size: 24px; }
  .activation-complete p { color: var(--ui-text-muted); }
  .activation-card footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-border); text-align: center; }
  .activation-card footer a { color: var(--ui-primary); font-weight: 500; }
  @media (max-width: 600px) {
    body.activation-page { padding: 10px; }
    .activation-card { padding: 18px 14px; }
    .activation-progress li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .activation-page form > button { width: 100%; }
  }
}