/* Single-page sign-in / sign-up (2.0, "Voucher" design). Tokens: dmx-core/assets/tokens.css */
.dmx-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 360px);
  justify-content: center;
  align-items: start;
  gap: 28px;
  max-width: 900px;
  margin: 40px auto 72px;
  padding: 0 16px;
  font-family: var(--v-body);
  color: var(--v-text);
}
.dmx-auth-card {
  position: relative;
  padding: 34px 32px 30px;
  background: var(--v-card);
  border: 2px solid var(--v-edge);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow-card);
}
.dmx-auth-mark { display: inline-flex; margin-bottom: 18px; text-decoration: none; }
.dmx-auth-mark img { max-height: 42px; width: auto; }
.dmx-auth-wordmark {
  display: inline-block;
  padding: 4px 14px 2px;
  font-family: var(--v-display);
  font-size: 24px;
  line-height: 1.5;
  color: var(--v-on-primary);
  background: var(--v-primary);
  border: 2px solid var(--v-edge);
  border-radius: var(--v-radius-sm);
  box-shadow: var(--v-shadow-card);
}
.dmx-auth-card h1 {
  margin: 0 0 6px;
  font-family: var(--v-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.5;
  color: var(--v-ink);
}
.dmx-auth-lead { margin: 0 0 22px; color: var(--v-muted); font-size: 14px; line-height: 2; }
.dmx-auth-card form { display: grid; gap: 16px; }
.dmx-auth-card form[hidden] { display: none; }
.dmx-field { display: grid; gap: 7px; margin: 0; font-size: 13px; font-weight: 700; color: var(--v-ink); }
.dmx-field input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--v-ink);
  background: var(--v-card-2);
  border: 2px solid var(--v-line);
  border-radius: var(--v-radius-sm);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.dmx-field input:hover { border-color: var(--v-muted); }
.dmx-field input:focus { outline: none; border-color: var(--v-edge); box-shadow: 0 0 0 4px var(--v-focus); background: var(--v-card); }
.dmx-field-phone input { font-size: 20px; letter-spacing: 1.5px; text-align: left; }
.dmx-code-field input { font-size: 28px; letter-spacing: 14px; text-align: center; font-weight: 800; }
.dmx-password-field { position: relative; display: block; }
.dmx-password-field input { padding-inline-start: 74px; }
.dmx-password-field button {
  position: absolute;
  inset-inline-start: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--v-primary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.dmx-password-field button:hover { background: color-mix(in srgb, var(--v-primary) 12%, transparent); }
.dmx-auth-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: var(--v-on-primary);
  background: var(--v-primary);
  border: 2px solid var(--v-edge);
  border-radius: var(--v-radius-sm);
  box-shadow: var(--v-shadow-card);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .15s;
}
.dmx-auth-primary:hover { background: var(--v-primary-2); }
.dmx-auth-primary:active { transform: translate(3px, 3px); box-shadow: var(--v-shadow-card); }
.dmx-auth-primary:focus-visible, .dmx-auth-link:focus-visible, .dmx-auth-methods button:focus-visible { outline: 3px solid var(--v-focus); outline-offset: 2px; }
.dmx-auth-primary:disabled { cursor: progress; opacity: .85; }
.dmx-auth-primary.is-busy::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2.5px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: dmx-auth-spin .7s linear infinite;
}
@keyframes dmx-auth-spin { to { transform: rotate(360deg); } }
.dmx-auth-link {
  justify-self: center;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--v-primary);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.dmx-auth-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.dmx-auth-link:disabled { color: var(--v-muted); cursor: default; text-decoration: none; }
[data-pane="password"] { display: grid; gap: 8px; }
[data-pane="password"] .dmx-auth-link { justify-self: start; padding: 0; }
.dmx-auth-status:empty { display: none; }
.dmx-auth-status {
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.9;
  border-radius: var(--v-radius-sm);
  color: var(--v-text);
  background: var(--v-card-2);
}
.dmx-auth-status[data-kind="pending"] { color: var(--v-primary); background: color-mix(in srgb, var(--v-primary) 10%, transparent); }
.dmx-auth-status[data-kind="error"] { color: var(--v-coral); background: color-mix(in srgb, var(--v-coral) 11%, transparent); border-inline-start: 4px solid var(--v-coral); }
.dmx-auth-status[data-kind="success"] { color: var(--v-mint); background: color-mix(in srgb, var(--v-mint) 12%, transparent); }
.dmx-auth-who {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--v-muted);
  background: var(--v-card-2);
  border: 2px dashed var(--v-line);
  border-radius: var(--v-radius-sm);
}
.dmx-auth-who strong { color: var(--v-ink); font-size: 15px; letter-spacing: .5px; }
.dmx-auth-who button { margin-inline-start: auto; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--v-primary); background: none; border: 0; cursor: pointer; }
.dmx-auth-methods { display: flex; gap: 6px; padding: 5px; background: var(--v-card-2); border: 2px solid var(--v-line); border-radius: 12px; }
.dmx-auth-methods[hidden] { display: none; }
.dmx-auth-methods button {
  flex: 1;
  min-height: 42px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--v-muted);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
.dmx-auth-methods button[hidden] { display: none; }
.dmx-auth-methods button[aria-checked="true"] { color: var(--v-ink); background: var(--v-card); border-color: var(--v-edge); box-shadow: var(--v-shadow-card); }
.dmx-auth-note { margin: 0; font-size: 13px; line-height: 2; color: var(--v-muted); }
.dmx-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.9; color: var(--v-text); cursor: pointer; }
.dmx-check input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--v-primary); }
.dmx-check a { color: var(--v-primary); font-weight: 700; }
.dmx-captcha { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "img img" "field refresh"; gap: 10px; padding: 12px; background: var(--v-card-2); border: 2px dashed var(--v-edge); border-radius: var(--v-radius-sm); }
.dmx-captcha[hidden] { display: none; }
.dmx-captcha img { grid-area: img; justify-self: center; width: 200px; height: 64px; border-radius: 8px; border: 2px solid var(--v-line); background: #f6f7fc; }
.dmx-captcha .dmx-field { grid-area: field; }
.dmx-captcha .dmx-field input { min-height: 46px; font-size: 20px; letter-spacing: 6px; text-align: center; }
.dmx-captcha button { grid-area: refresh; align-self: end; min-height: 46px; padding: 0 14px; font: inherit; font-size: 12px; font-weight: 700; color: var(--v-ink); background: var(--v-card); border: 2px solid var(--v-edge); border-radius: var(--v-radius-sm); cursor: pointer; }

/* Ticket-style aside */
.dmx-auth-aside {
  position: relative;
  margin-top: 26px;
  padding: 28px 26px;
  color: var(--v-on-yellow);
  background: var(--v-yellow);
  border: 2px solid var(--v-edge);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow-card);
  -webkit-mask: radial-gradient(circle 13px at 0 50%, #0000 98%, #000) left, radial-gradient(circle 13px at 100% 50%, #0000 98%, #000) right;
  -webkit-mask-size: 51% 100%;
  -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle 13px at 0 50%, #0000 98%, #000) left, radial-gradient(circle 13px at 100% 50%, #0000 98%, #000) right;
  mask-size: 51% 100%;
  mask-repeat: no-repeat;
}
.dmx-auth-aside-title { margin: 0 0 16px; font-family: var(--v-display); font-size: 26px; line-height: 1.6; }
.dmx-auth-aside ul { display: grid; gap: 14px; margin: 0; padding: 16px 0 0; list-style: none; border-top: 2px dashed color-mix(in srgb, var(--v-on-yellow) 40%, transparent); }
.dmx-auth-aside li { display: grid; gap: 2px; }
.dmx-auth-aside strong { font-size: 14px; }
.dmx-auth-aside span { font-size: 13px; line-height: 1.9; opacity: .85; }
@media (max-width: 820px) {
  .dmx-auth-shell { grid-template-columns: minmax(0, 520px); margin-top: 22px; }
  .dmx-auth-aside { margin-top: 4px; }
}
@media (max-width: 480px) {
  .dmx-auth-card { padding: 26px 18px 22px; box-shadow: var(--v-shadow-card); }
  .dmx-auth-card h1 { font-size: 29px; }
  .dmx-auth-aside { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dmx-auth-primary, .dmx-field input { transition: none; }
  .dmx-auth-primary.is-busy::after { animation: none; }
}

/* Recovery page keeps working with the same look */
.dmx-auth-layout { max-width: 520px; margin: 40px auto 72px; padding: 0 16px; font-family: var(--v-body); }
.dmx-auth-layout .dmx-auth-story { display: none; }
.dmx-auth-layout .dmx-auth { padding: 32px 28px; background: var(--v-card); border: 2px solid var(--v-edge); border-radius: var(--v-radius); box-shadow: var(--v-shadow-card); color: var(--v-text); }
.dmx-auth-layout .auth-emblem { display: none; }
.dmx-auth-layout h1 { margin: 6px 0 8px; font-family: var(--v-display); font-weight: 400; font-size: 32px; line-height: 1.5; color: var(--v-ink); }
.dmx-auth-layout .dmx-auth > p, .dmx-recovery-note { color: var(--v-muted); font-size: 13px; line-height: 2; }
.dmx-auth-layout form { display: grid; gap: 16px; margin-top: 18px; }
.dmx-auth-layout label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; color: var(--v-ink); }
.dmx-auth-layout input { min-height: 50px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--v-ink); background: var(--v-card-2); border: 2px solid var(--v-line); border-radius: var(--v-radius-sm); }
.dmx-auth-layout input:focus { outline: none; border-color: var(--v-edge); box-shadow: 0 0 0 4px var(--v-focus); }
.dmx-auth-layout .button { min-height: 52px; font: inherit; font-weight: 800; color: var(--v-on-primary); background: var(--v-primary); border: 2px solid var(--v-edge); border-radius: var(--v-radius-sm); box-shadow: var(--v-shadow-card); cursor: pointer; }
.dmx-recovery-step { display: inline-block; padding: 2px 12px; font-size: 12px; font-weight: 700; color: var(--v-on-yellow); background: var(--v-yellow); border: 2px solid var(--v-edge); border-radius: 999px; }
.dmx-recovery-back { display: inline-block; margin-top: 16px; color: var(--v-primary); font-weight: 700; }
.dmx-auth-layout [role="status"][data-state="error"] { color: var(--v-coral); }
.dmx-auth-layout [role="status"][data-state="success"] { color: var(--v-mint); }