/*
| Sign-in screens (login, forgot password) – round 3 (user 2026-10-24): two sections, no background picture, premium form.
| Background: ONE canvas behind both halves, light or navy by theme (block "ONE CANVAS" at the end, 2026-10-24).
| LEFT  .au-panel = brand panel (colours follow the theme, light + dark lockup):
|       lockup, headline, features, badges + the top bar's module icons floating in a constellation (.au-orbit) with a
|       tip bubble that walks from icon to icon (auth.js). The constellation shows only when the panel is wide enough
|       (container query) – it never covers text.
| RIGHT .au-side  = the form in a glass card (.au-card: thin border, soft lift) on the same canvas.
| Desktop never scrolls (100dvh, sizes follow the height); ≤ 900px one column (compact brand band → form).
| Local fonts / icons only, logical properties (RTL), green = logo scale + gloss, motion off with reduced motion.
*/
@font-face { font-family: 'Inter'; src: url('fonts/inter-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn[wght].ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
    --au-side: #ffffff; --au-text: #0b1324; --au-muted: #55627a; --au-soft: #7a879b;
    --au-field: #f6f8fa; --au-field-b: #e3e8ee; --au-field-h: #c9d3dd; --au-field-f: #ffffff;
    --au-g: #009a55; --au-g2: #00b464; --au-g-soft: #ebfdf4; --au-g-line: #bdf0d8; --au-line: #e8edf2;
    --au-shadow: 0 24px 60px -28px rgba(15, 23, 42, .25); --au-tool: #ffffff;
    --au-gloss: linear-gradient(135deg, #1fd486 0%, #00b464 45%, #009a55 100%);
}
html.dark {
    --au-side: #0f172a; --au-text: #e2e8f0; --au-muted: #a3b0c4; --au-soft: #7d8ba1;
    --au-field: #0b1222; --au-field-b: #1e293b; --au-field-h: #334155; --au-field-f: #0b1222;
    --au-g: #1fd486; --au-g2: #00b464; --au-g-soft: rgba(0, 180, 100, .08); --au-g-line: rgba(0, 180, 100, .22); --au-line: #1e293b;
    --au-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); --au-tool: #0b1222;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.au { height: 100vh; height: 100dvh; overflow: hidden; font: 400 15px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--au-text); background: var(--au-side); }
html[dir="rtl"] body.au { font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif; }
.au button, .au input { font: inherit; color: inherit; }
.au a { color: inherit; }
.au-shell { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 38vw, 600px); }

/* =================== LEFT: brand panel (logo navy) =================== */
.au-panel { position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; color: #e2e8f0;
    background: linear-gradient(160deg, #04101c 0%, #081a2b 55%, #05121e 100%); }
.au-panel-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.au-glow { position: absolute; border-radius: 50%; filter: blur(100px); }
.au-glow.is-a { width: 560px; height: 560px; inset-block-start: -240px; inset-inline-start: -160px; background: #00b464; opacity: .2; }
.au-glow.is-b { width: 520px; height: 520px; inset-block-end: -260px; inset-inline-end: -120px; background: #1fd486; opacity: .1; }
.au-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 75%); }
.au-panel-in { position: relative; z-index: 2; height: 100%; max-width: 600px; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
    padding: clamp(26px, 5vh, 52px) clamp(28px, 4.2vw, 72px); }
.au-lockup { display: inline-block; align-self: flex-start; margin-inline-start: -10px; }
.au-hero { margin-block: auto; }   /* headline block centred between the lockup and the badges */
.au-lockup .ve-brand-logo { width: clamp(190px, 14vw, 250px); }
.au-h1 { margin: 0 0 10px; font-size: clamp(28px, min(2.7vw, 4.8vh), 44px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: #f8fafc; }
.au-h1 span { display: block; }
.au-g { background: linear-gradient(90deg, #00b464, #1fd486 60%, #5ee6a7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-lead { margin: 0 0 clamp(14px, 2.6vh, 26px); max-width: 480px; font-size: clamp(14px, 1.9vh, 16px); line-height: 1.55; color: #a3b0c4; }
.au-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.8vh, 16px) 18px; }
.au-feats li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.au-fi { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; font-size: 16px; color: #1fd486;
    background: linear-gradient(145deg, rgba(31, 212, 134, .16), rgba(0, 154, 85, .06)); border: 1px solid rgba(31, 212, 134, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.au-feats b { display: block; font-size: 14px; font-weight: 650; line-height: 1.25; color: #f1f5f9; }
.au-feats small { display: block; font-size: 12.5px; line-height: 1.35; color: #8a97ac; }
.au-badges { list-style: none; margin: 0; padding: 12px 4px; display: flex; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); backdrop-filter: blur(6px); }
.au-badges li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 2px 6px;
    font-size: 11.5px; line-height: 1.25; color: #a3b0c4; }
.au-badges li + li { border-inline-start: 1px solid rgba(255, 255, 255, .07); }
.au-badges i { font-size: 16px; color: #1fd486; }

/* ---- module constellation (the top bar's icons + colours) ---- */
.au-orbit { position: absolute; z-index: 1; inset-block: 13% 15%; inset-inline-start: calc(clamp(28px, 4.2vw, 72px) + 580px); inset-inline-end: 6%; }
.au-ring { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .08); translate: -50% -50%; animation: au-turn 90s linear infinite; }
html[dir="rtl"] .au-ring { translate: 50% -50%; }
.au-ring.is-1 { width: 78%; aspect-ratio: 1; }
.au-ring.is-2 { width: 46%; aspect-ratio: 1; border-color: rgba(31, 212, 134, .12); animation-direction: reverse; animation-duration: 70s; }
.au-mod { --s: 54px; --c: 31 212 134; position: absolute; width: var(--s); height: var(--s); display: grid; place-items: center; border-radius: 30%;
    font-size: calc(var(--s) * .4); color: rgb(var(--c)); cursor: default;
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(6px);
    animation: au-float 7s ease-in-out infinite; transition: scale .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.au-mod.is-on, .au-mod:hover { scale: 1.1; background: rgba(var(--c) / .16); border-color: rgba(var(--c) / .55);
    box-shadow: 0 0 0 7px rgba(var(--c) / .08), 0 18px 44px -14px rgba(var(--c) / .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
.au-m-cyan { --c: 34 211 238; } .au-m-purple { --c: 167 139 250; } .au-m-orange { --c: 251 146 60; } .au-m-red { --c: 248 113 113; }
.au-m-pink { --c: 244 114 182; } .au-m-green { --c: 31 212 134; } .au-m-teal { --c: 45 212 191; } .au-m-amber { --c: 251 191 36; }
.au-mod.is-p1  { inset-inline-start: 6%;  inset-block-start: 6%;  --s: 64px; animation-delay: 0s; }
.au-mod.is-p2  { inset-inline-start: 74%; inset-block-start: 0%;  --s: 52px; animation-delay: -1.2s; }
.au-mod.is-p3  { inset-inline-start: 84%; inset-block-start: 20%; --s: 58px; animation-delay: -2.4s; }
.au-mod.is-p4  { inset-inline-start: 40%; inset-block-start: 26%; --s: 50px; animation-delay: -3.1s; }
.au-mod.is-p5  { inset-inline-start: 2%;  inset-block-start: 40%; --s: 50px; animation-delay: -4.3s; }
.au-mod.is-p6  { inset-inline-start: 68%; inset-block-start: 46%; --s: 56px; animation-delay: -5.2s; }
.au-mod.is-p7  { inset-inline-start: 24%; inset-block-start: 62%; --s: 58px; animation-delay: -1.8s; }
.au-mod.is-p8  { inset-inline-start: 52%; inset-block-start: 74%; --s: 66px; animation-delay: -3.7s; }
.au-mod.is-p9  { inset-inline-start: 86%; inset-block-start: 76%; --s: 48px; animation-delay: -6s; }
.au-mod.is-p10 { inset-inline-start: 8%;  inset-block-start: 88%; --s: 46px; animation-delay: -2.9s; }
/* tip life (auth.js): .is-in = fade + rise in, then the accent line slides in from the far side (--from);
   removing .is-in = the line slides back while the tip fades – both end together (0.6 s), then it is hidden */
.au-bubble { --c: 31 212 134; --from: right; position: absolute; z-index: 3; width: max-content; max-width: 236px; padding: 9px 12px 10px; border-radius: 11px;
    pointer-events: none; overflow: hidden; background: rgba(8, 18, 32, .94); border: 1px solid rgba(255, 255, 255, .11); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
    font-size: 11.5px; line-height: 1.45; color: #c3cdd9;
    opacity: 0; transform: translateY(5px) scale(.985);
    transition: opacity .6s cubic-bezier(.4, 0, .6, 1), transform .6s cubic-bezier(.4, 0, .6, 1); }
.au-bubble::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--c) / .15), rgb(var(--c)), rgba(var(--c) / .15));
    transform: scaleX(0); transform-origin: var(--from) center; transition: transform .6s cubic-bezier(.4, 0, .6, 1); }
.au-bubble.is-in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform .5s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.au-bubble.is-in::after { transform: scaleX(1); transition: transform .75s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .2s); }
.au-bubble b { display: block; margin-block-end: 1px; font-size: 12.5px; color: rgb(var(--c)); }
@keyframes au-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes au-turn { to { rotate: 360deg; } }
/* wide panel: text 700px + constellation */
@container (min-width: 1180px) { .au-panel-in { max-width: 700px; } .au-orbit { inset-inline-start: calc(clamp(28px, 4.2vw, 72px) + 660px); } }
/* narrower panel (1024–1440 screens): a slim column of smaller icons in the free strip beside the text, no rings */
@container (max-width: 1079px) {
    .au-panel-in { max-width: 520px; }   /* text a little narrower so the icon column has room for its tips */
    .au-feats small, .au-badges { display: none; }   /* titles only; the icon tips tell the rest */
    .au-feats { gap: 14px 16px; }
    .au-orbit { inset-inline-start: 530px; inset-inline-end: 2%; inset-block: 12% 10%; }
    .au-ring { display: none; }
    .au-mod { --s: 44px !important; }
    /* six icons, spaced so a tip fits below / above inside the column (auth.js uses only the visible icons) */
    .au-mod.is-p1  { inset-inline-start: 4%;  inset-block-start: 0%; }   .au-mod.is-p2  { inset-inline-start: 74%; inset-block-start: 15%; }
    .au-mod.is-p3  { inset-inline-start: 6%;  inset-block-start: 32%; }  .au-mod.is-p6  { inset-inline-start: 72%; inset-block-start: 50%; }
    .au-mod.is-p8  { inset-inline-start: 4%;  inset-block-start: 67%; }  .au-mod.is-p10 { inset-inline-start: 74%; inset-block-start: 85%; }
    .au-mod.is-p4, .au-mod.is-p5, .au-mod.is-p7, .au-mod.is-p9 { display: none; }
    .au-bubble { max-width: min(220px, calc(100% - 70px)); }
}
@container (max-width: 760px) { .au-orbit { display: none; } }

/* =================== RIGHT: the form =================== */
.au-side { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; overflow-y: auto;
    padding: clamp(64px, 9vh, 88px) clamp(24px, 3.4vw, 64px) 0;
    background: radial-gradient(600px 300px at 100% 0%, rgba(0, 180, 100, .06), transparent 70%), var(--au-side); }
html.dark .au-side { background: radial-gradient(600px 300px at 100% 0%, rgba(0, 180, 100, .05), transparent 70%), var(--au-side); }
/* a very light green dot texture (user 2026-10-24): visible at the edges, fading out behind the form */
.au-side::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(0, 154, 85, .16) 1px, transparent 1.4px); background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 35%, #000 100%); mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 35%, #000 100%); }
html.dark .au-side::before { background-image: radial-gradient(rgba(31, 212, 134, .13) 1px, transparent 1.4px); }
.au-card, .au-foot { position: relative; z-index: 1; }
.au-card { width: 100%; max-width: 420px; margin-block: auto; }
.au-card-in { padding: 0; }
.au-card-mark { display: block; width: 46px; margin-block-end: clamp(14px, 2.4vh, 22px); }
.au-card-mark .ve-brand-mark { width: 46px; }
.au-title { margin: 0; font-size: clamp(26px, min(2.1vw, 3.8vh), 32px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.au-sub { margin: 8px 0 clamp(18px, 3vh, 28px); font-size: 15px; color: var(--au-muted); }
.au-step { display: inline-block; margin-block-end: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--au-g); background: var(--au-g-soft); border: 1px solid var(--au-g-line); }
.au-form { display: grid; gap: clamp(10px, 1.7vh, 14px); }
.au-field { display: grid; gap: 4px; }
.au-box { display: flex; align-items: center; gap: 13px; min-height: clamp(52px, 7vh, 60px); padding: 0 16px; border-radius: 12px; cursor: text;
    border: 1px solid var(--au-field-b); background: var(--au-field); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.au-box:hover { border-color: var(--au-field-h); }
.au-box:focus-within { border-color: var(--au-g2); background: var(--au-field-f); box-shadow: 0 0 0 4px rgba(0, 180, 100, .12); }
.au-field.is-bad .au-box { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .1); }
.au-ico { width: 20px; flex: none; text-align: center; font-size: 17px; color: var(--au-soft); transition: color .15s ease; }
.au-box:focus-within .au-ico { color: var(--au-g); }
.au-in { flex: 1; min-width: 0; display: grid; gap: 1px; }
.au-lbl { font-size: 12px; font-weight: 650; letter-spacing: .01em; color: var(--au-muted); }
.au-in input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 500; text-align: start; }
.au-in input::placeholder { color: var(--au-soft); font-weight: 400; opacity: .9; }
.au-in input:-webkit-autofill { -webkit-text-fill-color: var(--au-text); -webkit-box-shadow: 0 0 0 40px var(--au-field) inset; transition: background-color 9999s; }
.au-eye { flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 16px; color: var(--au-soft); }
.au-eye:hover { color: var(--au-g); background: var(--au-g-soft); }
/* Paste the pin (forgot password step 2, 2026-10-27) */
.au-paste { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--au-line, rgba(148,163,184,.35)); border-radius: 8px; background: none; cursor: pointer;
    font: 600 12.5px/1 inherit; font-family: inherit; color: var(--au-g); }
.au-paste:hover { background: var(--au-g-soft); }
.au-err { font-size: 12.5px; color: #ef4444; }
.au-err:empty { display: none; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block: 2px 6px; }
.au-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--au-muted); }
.au-check input { width: 17px; height: 17px; margin: 0; accent-color: #00b464; }
.au-link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 14px; font-weight: 650; color: var(--au-g) !important; text-decoration: none; }
.au-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-back { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 16px; font-size: 14px; }

/* main button: logo gloss + glint on open and on hover */
.au-btn { position: relative; overflow: hidden; isolation: isolate; height: clamp(48px, 6.4vh, 54px); display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    border: 0; border-radius: 12px; cursor: pointer; font-size: 16.5px; font-weight: 700; letter-spacing: .01em; color: #fff !important; background: var(--au-gloss);
    box-shadow: 0 16px 32px -16px rgba(0, 180, 100, .9), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(0, 40, 20, .2); transition: filter .15s ease, transform .15s ease; }
.au-btn::after { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .14) 54%, transparent 66%);
    transform: translateX(-130%); animation: au-spark 1.1s .7s cubic-bezier(.2, .7, .2, 1) 1; }
.au-btn:hover::after { transform: translateX(130%); transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
@keyframes au-spark { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.au-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.au-btn:active { transform: translateY(0); }
.au-btn:focus-visible { outline: 3px solid rgba(0, 180, 100, .45); outline-offset: 3px; }
.au-btn[disabled] { cursor: progress; filter: saturate(.7); transform: none; }
.au-btn .au-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: au-rot .7s linear infinite; }
@keyframes au-rot { to { transform: rotate(360deg); } }
html[dir="rtl"] .au-arrow { transform: scaleX(-1); }

/* trust line + tip */
.au-trust { margin-block-start: clamp(18px, 3vh, 28px); }
.au-trust-t { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--au-soft); }
.au-trust-t::before, .au-trust-t::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }
.au-trust-t i { display: none; }
.au-trust ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.au-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--au-muted); }
.au-trust li i { font-size: 12px; color: var(--au-g); }
.au-tip { display: flex; align-items: flex-start; gap: 10px; margin: clamp(14px, 2.4vh, 22px) 0 0; padding: 12px 14px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.5; color: var(--au-muted); background: var(--au-field); border: 1px solid var(--au-field-b); }
.au-tip i { margin-block-start: 2px; font-size: 14px; color: #f59e0b; }

/* tools + footer + toasts */
.au-tools { position: absolute; z-index: 20; inset-block-start: 18px; inset-inline-end: clamp(16px, 2.4vw, 36px); display: flex; gap: 8px; }
.au-tool { height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; cursor: pointer;
    border-radius: 10px; border: 1px solid var(--au-field-b); background: var(--au-tool); font-weight: 650; font-size: 13.5px; }
.au-tool.is-icon { padding: 0; }
.au-tool:hover, .au-tool[aria-expanded="true"] { border-color: var(--au-field-h); }
.au-tool:focus-visible, .au-menu-list button:focus-visible { outline: 2px solid var(--au-g2); outline-offset: 2px; }
.au-tool .fa-globe { color: var(--au-g); }
.au-caret { font-size: 10px; opacity: .7; }
.au-sun { display: none; color: #f59e0b; } html.dark .au-sun { display: inline; } html.dark .au-moon { display: none; }
.au-moon { color: #64748b; }
.au-menu { position: relative; }
.au-menu-list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; min-width: 210px; margin: 0; padding: 6px; list-style: none;
    border-radius: 12px; border: 1px solid var(--au-field-b); background: var(--au-side); box-shadow: var(--au-shadow); }
.au-menu-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: start; }
.au-menu-list button b { width: 30px; font-size: 12px; color: var(--au-g); }
.au-menu-list button:hover, .au-menu-list button[aria-selected="true"] { background: var(--au-g-soft); }
.au-foot { width: 100%; max-width: 420px; padding: 14px 0 16px; text-align: center; font-size: 12px; color: var(--au-soft); }
.au-toasts { position: fixed; z-index: 50; inset-block-start: 66px; inset-inline-end: clamp(16px, 2.4vw, 36px); display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.au-toast { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--au-field-b); background: var(--au-side); box-shadow: var(--au-shadow);
    border-inline-start: 4px solid #ef4444; animation: au-toast .25s ease both; }
.au-toast.is-ok { border-inline-start-color: #00b464; }
.au-toast i { margin-block-start: 2px; color: #ef4444; } .au-toast.is-ok i { color: #00b464; }
.au-toast b { display: block; font-size: 14px; } .au-toast p { margin: 2px 0 0; font-size: 13px; color: var(--au-muted); }
@keyframes au-toast { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

/* =================== sizes =================== */
@media (max-height: 760px) and (min-width: 901px) { .au-badges { display: none; } }
@media (max-height: 660px) and (min-width: 901px) { .au-lead, .au-feats small { display: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .au-feats { grid-template-columns: minmax(0, 1fr); } .au-feats small { display: none; } }
@media (max-width: 900px) {
    body.au { height: auto; min-height: 100dvh; overflow: auto; }
    .au-shell { display: flex; flex-direction: column; min-height: 100dvh; }
    .au-panel-in { height: auto; padding: 18px 20px; }
    .au-lockup { margin: 0; } .au-lockup .ve-brand-logo { width: 160px; }
    .au-hero, .au-badges, .au-orbit { display: none; }
    .au-side { flex: 1; overflow: visible; padding: 28px 20px 0; }
    .au-tools { inset-block-start: -50px; }
    .au-card-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .au-mod, .au-ring, .au-toast, .au-btn::after { animation: none; }
    .au-bubble, .au-bubble::after { transition-duration: .01s !important; transition-delay: 0s !important; }
    .au-btn, .au-btn::after, .au-mod { transition: none; }
}

/* =================== ONE CANVAS (user 2026-10-24) ===================
| "Login should use the same background on both halves – light = completely light, dark = completely dark – like the
| branch selector; the form gets a border / surface." Structure unchanged: .au-canvas (top.php) = one fixed layer behind
| the brand panel AND the form (logo-green glows, a faint grid fading out, a dot texture, the system wave at the bottom);
| both halves are transparent on it. The brand panel's colours follow the theme (--au-p-*), the module icons and tips
| become light glass in light mode, the form sits in a glass card (.au-card) with a thin border and a soft lift.
*/
:root {
    --au-bg: #f4f7fb; --au-cv-a: rgba(0, 180, 100, .16); --au-cv-b: rgba(31, 212, 134, .12); --au-cv-c: rgba(0, 154, 85, .07);
    --au-cv-grid: rgba(15, 23, 42, .045); --au-cv-dot: rgba(0, 154, 85, .17); --au-cv-wave: #00b464; --au-cv-wave-o: .07;
    --au-p-head: #0b1324; --au-p-text: #1e293b; --au-p-muted: #55627a; --au-p-sub: #6b7a90;
    --au-p-chip: rgba(255, 255, 255, .62); --au-p-chip-b: rgba(15, 23, 42, .08); --au-p-sep: rgba(15, 23, 42, .07);
    --au-fi-c: #009a55; --au-fi-bg: linear-gradient(145deg, rgba(0, 180, 100, .14), rgba(0, 154, 85, .05)); --au-fi-b: rgba(0, 154, 85, .2);
    --au-hl: linear-gradient(90deg, #009a55, #00b464 55%, #1fd486);
    --au-mod-bg: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72)); --au-mod-b: rgba(15, 23, 42, .08);
    --au-mod-sh: 0 18px 36px -20px rgba(15, 23, 42, .35), inset 0 1px 0 #fff; --au-mod-on: 0 0 0 7px rgba(var(--c) / .1), 0 18px 40px -16px rgba(var(--c) / .5);
    --au-bub-bg: rgba(255, 255, 255, .97); --au-bub-b: rgba(15, 23, 42, .09); --au-bub-t: #475569; --au-bub-sh: 0 18px 40px -18px rgba(15, 23, 42, .35);
    --au-ring-1: rgba(15, 23, 42, .09); --au-ring-2: rgba(0, 154, 85, .2);
    --au-card: rgba(255, 255, 255, .8); --au-card-b: rgba(15, 23, 42, .08);
    --au-card-sh: 0 34px 80px -40px rgba(15, 23, 42, .32), 0 2px 8px -4px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    --au-field: #f6f8fa;
}
html.dark {
    --au-bg: #0b1220; --au-cv-a: rgba(0, 180, 100, .2); --au-cv-b: rgba(31, 212, 134, .1); --au-cv-c: rgba(0, 154, 85, .08);
    --au-cv-grid: rgba(255, 255, 255, .035); --au-cv-dot: rgba(31, 212, 134, .12); --au-cv-wave: #1fd486; --au-cv-wave-o: .05;
    --au-p-head: #f8fafc; --au-p-text: #f1f5f9; --au-p-muted: #a3b0c4; --au-p-sub: #8a97ac;
    --au-p-chip: rgba(255, 255, 255, .03); --au-p-chip-b: rgba(255, 255, 255, .08); --au-p-sep: rgba(255, 255, 255, .07);
    --au-fi-c: #1fd486; --au-fi-bg: linear-gradient(145deg, rgba(31, 212, 134, .16), rgba(0, 154, 85, .06)); --au-fi-b: rgba(31, 212, 134, .2);
    --au-hl: linear-gradient(90deg, #00b464, #1fd486 60%, #5ee6a7);
    --au-mod-bg: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); --au-mod-b: rgba(255, 255, 255, .1);
    --au-mod-sh: 0 22px 40px -22px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); --au-mod-on: 0 0 0 7px rgba(var(--c) / .08), 0 18px 44px -14px rgba(var(--c) / .55);
    --au-bub-bg: rgba(10, 19, 34, .95); --au-bub-b: rgba(255, 255, 255, .11); --au-bub-t: #c3cdd9; --au-bub-sh: 0 18px 40px -16px rgba(0, 0, 0, .8);
    --au-ring-1: rgba(255, 255, 255, .08); --au-ring-2: rgba(31, 212, 134, .12);
    --au-card: rgba(15, 23, 42, .72); --au-card-b: rgba(148, 163, 184, .14);
    --au-card-sh: 0 40px 90px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
    --au-field: rgba(2, 8, 20, .55); --au-field-f: rgba(2, 8, 20, .7);
}
body.au { background: var(--au-bg); }
.au-shell { position: relative; z-index: 1; }

/* the canvas */
.au-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--au-bg); }
.au-cv-glow { position: absolute; border-radius: 50%; filter: blur(110px); }
.au-cv-glow.is-a { width: 760px; height: 620px; inset-block-start: -300px; inset-inline-start: -220px; background: var(--au-cv-a); }
.au-cv-glow.is-b { width: 720px; height: 620px; inset-block-end: -320px; inset-inline-end: -200px; background: var(--au-cv-b); }
.au-cv-glow.is-c { width: 620px; height: 480px; inset-block-start: 20%; inset-inline-start: 38%; background: var(--au-cv-c); }
.au-cv-grid { position: absolute; inset: 0;
    background-image: linear-gradient(var(--au-cv-grid) 1px, transparent 1px), linear-gradient(90deg, var(--au-cv-grid) 1px, transparent 1px); background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 55% 60% at 38% 45%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 55% 60% at 38% 45%, #000 15%, transparent 75%); }
html[dir="rtl"] .au-cv-grid { -webkit-mask-image: radial-gradient(ellipse 55% 60% at 62% 45%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 55% 60% at 62% 45%, #000 15%, transparent 75%); }
.au-cv-dots { position: absolute; inset-block: 0; inset-inline-end: 0; width: 46%;
    background-image: radial-gradient(var(--au-cv-dot) 1px, transparent 1.4px); background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, #000 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, #000 100%); }
.au-cv-wave { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; height: 200px; color: var(--au-cv-wave); opacity: var(--au-cv-wave-o); }
html[dir="rtl"] .au-cv-wave { transform: scaleX(-1); }

/* both halves transparent on it */
.au-panel { background: none; color: var(--au-p-text); }
.au-panel-bg { display: none; }
.au-side, html.dark .au-side { background: none; }
.au-side::before { display: none; }

/* brand panel colours follow the theme */
.au-h1 { color: var(--au-p-head); }
.au-g { background: var(--au-hl); -webkit-background-clip: text; background-clip: text; }
.au-lead { color: var(--au-p-muted); }
.au-feats b { color: var(--au-p-text); }
.au-feats small { color: var(--au-p-sub); }
.au-fi { color: var(--au-fi-c); background: var(--au-fi-bg); border-color: var(--au-fi-b); }
.au-badges { border-color: var(--au-p-chip-b); background: var(--au-p-chip); }
.au-badges li { color: var(--au-p-muted); }
.au-badges li + li { border-inline-start-color: var(--au-p-sep); }
.au-badges i { color: var(--au-fi-c); }
.au-lockup .ve-brand-logo.logo-light { width: calc(clamp(190px, 14vw, 250px) * 1.072); margin-inline-start: -8px; }   /* glow room of the light lockup */
.au-ring.is-1 { border-color: var(--au-ring-1); }
.au-ring.is-2 { border-color: var(--au-ring-2); }
.au-mod { background: var(--au-mod-bg); border-color: var(--au-mod-b); box-shadow: var(--au-mod-sh); }
.au-mod.is-on, .au-mod:hover { background: rgba(var(--c) / .12); border-color: rgba(var(--c) / .5); box-shadow: var(--au-mod-on); }
html:not(.dark) .au-m-cyan { --c: 8 145 178; } html:not(.dark) .au-m-purple { --c: 124 58 237; } html:not(.dark) .au-m-orange { --c: 234 88 12; }
html:not(.dark) .au-m-red { --c: 220 38 38; } html:not(.dark) .au-m-pink { --c: 219 39 119; } html:not(.dark) .au-m-green { --c: 0 154 85; }
html:not(.dark) .au-m-teal { --c: 13 148 136; } html:not(.dark) .au-m-amber { --c: 217 119 6; }
.au-bubble { background: var(--au-bub-bg); border-color: var(--au-bub-b); color: var(--au-bub-t); box-shadow: var(--au-bub-sh); backdrop-filter: blur(8px); }

/* the form card */
.au-card { max-width: 468px; padding: clamp(22px, 3.6vh, 36px) clamp(22px, 2.3vw, 34px); border-radius: 20px;
    background: var(--au-card); border: 1px solid var(--au-card-b); box-shadow: var(--au-card-sh);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.au-card::before { content: ""; position: absolute; inset-inline: 22%; inset-block-start: -1px; height: 2px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #1fd486, transparent); opacity: .7; }
.au-card-mark { margin-block-end: clamp(10px, 1.8vh, 18px); }
.au-sub { margin-block-end: clamp(14px, 2.4vh, 24px); }
.au-trust { margin-block-start: clamp(14px, 2.4vh, 22px); }
.au-tip { background: var(--au-field); }
.au-tool { background: var(--au-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--au-card-b); }
.au-foot { max-width: 468px; }
.au-side { padding-block-start: clamp(56px, 8vh, 80px); }
@media (max-height: 820px) and (min-width: 901px) { .au-tip { display: none; } }
@media (max-width: 900px) {
    .au-card { padding: 22px 18px; border-radius: 16px; }
    .au-cv-dots { width: 100%; }
}
@media (max-width: 480px) { .au-card { padding: 20px 16px; } }