/* ZaeNET sign-in / sign-up */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* brand side */
.auth__brand { position: relative; overflow: hidden; background: var(--bg-band); border-bottom: 1px solid var(--line); color: var(--brand); }
@media (min-width: 980px) { .auth__brand { border-bottom: 0; border-right: 1px solid var(--line); } }
.auth__route { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; fill: var(--gold); }
.auth__brand-in { position: relative; display: grid; gap: 28px; padding: 24px var(--gutter); color: var(--ink); }
@media (min-width: 980px) { .auth__brand-in { min-height: 100%; align-content: space-between; padding: 40px clamp(32px, 5vw, 72px); } }
.auth__pitch h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 800; line-height: .92; letter-spacing: -0.045em; font-variation-settings: "opsz" 96; }
.auth__pitch p { margin-top: 20px; max-width: 30em; color: var(--ink-2); font-size: 17px; }
.auth__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 30em; }
.auth__facts li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-strong); font-size: 15px; }
.auth__facts strong { font-weight: 600; }
.auth__facts span { color: var(--ink-2); }
@media (max-width: 979px) {
  .auth__pitch h1 { font-size: clamp(34px, 9vw, 48px); }
  .auth__pitch p, .auth__facts { display: none; }
  .auth__route { opacity: .35; }
}

/* form side */
.auth__main { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 28px var(--gutter) 40px; }
.auth__back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; font-size: 15px; padding: 6px 0; }
@media (min-width: 980px) { .auth__back { justify-self: center; width: min(100%, 460px); } }
.auth__back:hover { color: var(--ink); }
.auth__back svg { width: 18px; height: 18px; }
.auth__legal { color: var(--ink-3); font-size: 13px; text-align: center; }

.card { width: min(100%, 460px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-show); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow-2); }
.card__title { font-size: 28px; font-weight: 750; letter-spacing: -0.03em; }
.card__sub { margin-top: 6px; color: var(--ink-2); font-size: 15px; padding: 0; }
.panel form, .panel fieldset { display: grid; gap: 16px; }
.panel form { margin-top: 22px; }
.panel .notice { margin-top: 18px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.optional { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.grid2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__row label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.linkbtn { background: none; border: 0; padding: 4px 0; color: var(--signal); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--signal) 40%, transparent); }

/* tabs */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 26px; border-radius: 11px; background: var(--surface-sunken); border: 1px solid var(--line); }
.tabs__btn { min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease); }
.tabs__btn:hover { color: var(--ink); }
.tabs__btn[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* password reveal */
.pw { position: relative; }
.pw .input { padding-right: 52px; }
.pw__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; color: var(--ink-3); cursor: pointer; }
.pw__toggle:hover { color: var(--ink); }
.pw__toggle[aria-pressed="true"] { color: var(--signal); }
.pw__toggle svg { width: 20px; height: 20px; }

/* stepper — a real sequence */
.stepper { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stepper li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--line-strong); color: var(--ink-3); font-size: 14px; font-weight: 500; transition: border-color .2s var(--ease), color .2s var(--ease); }
.stepper li span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; }
.stepper li.is-done { color: var(--ink-2); border-top-color: var(--brand); }
.stepper li.is-current { color: var(--ink); border-top-color: var(--signal); }

.plans { display: grid; gap: 10px; }
.plan { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; background: var(--surface-sunken); }
.plan:hover { border-color: var(--brand); }
.plan input { width: 18px; height: 18px; accent-color: var(--signal); margin: 0; }
.plan strong { font-weight: 600; }
.plan small { grid-column: 2 / -1; color: var(--ink-3); font-size: 13.5px; }
.plan .num { color: var(--signal); font-size: 14px; }
.plan:has(input:checked) { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--signal); flex: none; }
.su-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.su-nav #su-next { margin-left: auto; min-width: 140px; }

.su-done { margin-top: 22px; display: grid; gap: 12px; justify-items: start; }
.su-done__mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.su-done__mark svg { width: 26px; height: 26px; }
.su-done h3 { font-size: 22px; }
.su-done p { color: var(--ink-2); }
.su-done .btn { margin-top: 8px; }

/* 2-step */
.input--otp { font-size: 24px; letter-spacing: .4em; text-align: center; padding-left: .4em; }
.otp-setup { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--line); }
.otp-setup__qr { width: 132px; height: 132px; padding: 8px; background: #fff; border-radius: 8px; }
.otp-setup__qr img, .otp-setup__qr svg { width: 100%; height: 100%; image-rendering: pixelated; }
.otp-setup__txt p { font-size: 14px; color: var(--ink-2); }
.otp-setup__txt code { display: block; margin-top: 8px; font-size: 13px; word-break: break-all; color: var(--ink); }
@media (max-width: 420px) { .otp-setup { grid-template-columns: 1fr; justify-items: center; } }

/* v4.1: support line under the card */
.auth__help { color: var(--ink-2); font-size: 14px; text-align: center; margin: 0; }
.auth__help a { color: var(--signal); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.auth__help a:hover { text-decoration-color: currentColor; }

/* v4.3 (2026-11-14): contact chips under the card (WhatsApp, Telegram support, channel) */
.auth__help:not([hidden]) { display: grid; justify-items: center; gap: 10px; width: min(100%, 460px); }
.auth__help-lead { color: var(--ink-3); font-size: 13.5px; }
.auth__help-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.auth__help a.auth__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.auth__help a.auth__chip:hover { border-color: var(--signal); background: var(--surface-2); }
.auth__chip svg { width: 18px; height: 18px; color: var(--signal); flex: none; }
.auth__chip.is-wa svg { color: #25D366; }
.auth__help a.auth__chip.is-wa:hover { border-color: #25D366; }

/* v4.3: brand-panel route (replaces the dotted Z). A thin solid Z like the logo, fading out behind the text,
   with a signal running from the gold node to the red one. Static under reduced motion. */
.auth__route { opacity: 1; fill: none; color: var(--brand);
  -webkit-mask-image: radial-gradient(ellipse 62% 26% at 30% 47%, transparent 0 30%, #000 85%), linear-gradient(#000 0 74%, transparent 94%);
  -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 62% 26% at 30% 47%, transparent 0 30%, #000 85%), linear-gradient(#000 0 74%, transparent 94%); mask-composite: intersect; }
.auth__route .zr-grid { fill: url(#zr-dots); opacity: .5; }
.auth__route pattern circle { fill: var(--line-strong); }
.zr-stop-a { stop-color: var(--brand); stop-opacity: .05; }
.zr-stop-b { stop-color: var(--brand); stop-opacity: .5; }
.zr-stop-c { stop-color: var(--brand); stop-opacity: .12; }
.zr-trace { fill: none; stroke: url(#zr-line); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.zr-pulse { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: .07 1; stroke-dashoffset: .07; opacity: 0; animation: zr-run 7s cubic-bezier(.45, 0, .25, 1) 1.2s infinite; }
@keyframes zr-run { 0% { stroke-dashoffset: .07; opacity: 0; } 6% { opacity: 1; } 62% { opacity: 1; } 70% { stroke-dashoffset: -1; opacity: 0; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.zr-node { stroke: var(--bg-band); stroke-width: 3; }
.zr-node--gold { fill: var(--gold); }
.zr-node--red { fill: var(--alarm); }
.zr-halo { fill: none; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: zr-ping 3.5s var(--ease) infinite; }
.zr-halo--gold { stroke: var(--gold); }
.zr-halo--red { stroke: var(--alarm); animation-delay: 1.75s; }
@keyframes zr-ping { 0% { transform: scale(.45); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
@media (max-width: 979px) { .auth__route { opacity: .7; -webkit-mask-image: linear-gradient(90deg, transparent 0 25%, #000 75%); mask-image: linear-gradient(90deg, transparent 0 25%, #000 75%); } }
@media (prefers-reduced-motion: reduce) { .zr-pulse { display: none; } .zr-halo { animation: none; opacity: .35; transform: none; } }