/* Awfar Dialer — login page in the Awfar WebPhone "showcase" style (option A: service cards).
   Loaded only on auth pages, after admin.css. Visual only.
   Light/Dark + EN/AR follow UiPrefs. Whole page fits one viewport (no scroll) on desktop/tablet. */

/* ── Palette: light (default) — soft, low-glare ── */
body.auth-page {
    --aw-bg: #f3f6fa;
    --aw-glow-a: rgba(147, 197, 253, 0.35);
    --aw-glow-b: rgba(167, 243, 208, 0.3);
    --aw-blob-a: #bfdbfe;
    --aw-blob-b: #bbf7d0;
    --aw-blob-opacity: 0.35;
    --aw-surface: #fbfcfd;
    --aw-surface-2: #f2f5f9;
    --aw-border: #e1e7ef;
    --aw-border-soft: #edf1f6;
    --aw-text: #172033;
    --aw-muted: #5b6678;
    --aw-soft: #334155;
    --aw-shadow: 0 18px 36px -26px rgba(15, 23, 42, 0.28);
    --aw-blue: #2563eb;
    --aw-blue2: #4f46e5;
    --aw-green: #059669;
    --aw-green2: #0d9488;
    --aw-ok-bg: #ecfdf5;
    --aw-ok-border: #bbf0d6;
    --aw-ok-text: #047857;
    --aw-chip-bg: linear-gradient(145deg, #101a33, #1a2a52);
    --aw-success: #059669;

    /* Tokens the existing form/modal/alert styles read */
    --font: "Tajawal", system-ui, "Segoe UI", sans-serif;
    --bg: var(--aw-bg);
    --surface: var(--aw-surface);
    --border: var(--aw-border);
    --text: var(--aw-text);
    --muted: var(--aw-muted);
    --input-bg: var(--aw-surface-2);
    --nav-hover: var(--aw-border-soft);
    --accent: var(--aw-blue);
    --accent-hover: #1d4ed8;
    --accent-secondary: var(--aw-blue2);
    --accent-secondary-hover: #4338ca;
    --accent-soft: rgba(37, 99, 235, 0.12);
    --radius-sm: 11px;
    --radius-lg: 20px;
    --auth-card-shadow: var(--aw-shadow);

    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    font-family: var(--font);
    color: var(--aw-text);
    background: var(--aw-bg);
}

/* ── Palette: dark — deep navy, softened text (no pure black/white) ── */
[data-theme="dark"] body.auth-page {
    --aw-bg: #0d1424;
    --aw-glow-a: rgba(37, 99, 235, 0.16);
    --aw-glow-b: rgba(16, 185, 129, 0.1);
    --aw-blob-a: #1e3a8a;
    --aw-blob-b: #065f46;
    --aw-blob-opacity: 0.22;
    --aw-surface: #141d30;
    --aw-surface-2: #10182a;
    --aw-border: rgba(148, 163, 184, 0.16);
    --aw-border-soft: rgba(148, 163, 184, 0.1);
    --aw-text: #dbe3ee;
    --aw-muted: #9aa8bb;
    --aw-soft: #c3cedb;
    --aw-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.7);
    --aw-blue: #3b82f6;
    --aw-blue2: #6366f1;
    --aw-green: #10b981;
    --aw-green2: #14b8a6;
    --aw-ok-bg: rgba(16, 185, 129, 0.1);
    --aw-ok-border: rgba(52, 211, 153, 0.25);
    --aw-ok-text: #6ee7b7;
    --aw-chip-bg: linear-gradient(145deg, #1a2747, #22325c);
    --aw-success: #34d399;
    --accent-soft: rgba(59, 130, 246, 0.16);
    --accent-hover: #2563eb;
    --accent-secondary-hover: #4f46e5;
}

html:has(body.auth-page) { height: 100%; overflow: hidden; background: var(--aw-bg, #f3f6fa); }

/* ── Page shell: exactly one viewport ── */
.aw-auth {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: clamp(10px, 1.8vh, 16px) clamp(16px, 2.4vw, 32px) clamp(10px, 1.8vh, 18px);
    gap: clamp(8px, 1.8vh, 18px);
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 0% 0%, var(--aw-glow-a), transparent 60%),
        radial-gradient(800px 520px at 100% 100%, var(--aw-glow-b), transparent 60%),
        var(--aw-bg);
}

.aw-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aw-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--aw-blob-opacity); }
.aw-blob--a { width: 420px; height: 420px; background: var(--aw-blob-a); top: -14%; inset-inline-start: 30%; animation: aw-drift 28s ease-in-out infinite; }
.aw-blob--b { width: 380px; height: 380px; background: var(--aw-blob-b); bottom: -16%; inset-inline-end: 18%; animation: aw-drift 32s ease-in-out infinite reverse; }
@keyframes aw-drift { 50% { transform: translate(60px, 30px) scale(1.1); } }

/* ── Top bar ── */
.aw-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.aw-chip {
    height: 32px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; flex-shrink: 0;
    background: var(--aw-chip-bg); border: 1px solid rgba(59, 130, 246, 0.3);
}
.aw-chip img { height: 15px; width: auto; filter: brightness(0) invert(1); }
.aw-ok {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: var(--aw-ok-text); background: var(--aw-ok-bg); border: 1px solid var(--aw-ok-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: aw-pulse-g 2.4s infinite; }
@keyframes aw-pulse-g { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); } 80%, 100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
.aw-sp { flex: 1; }

.aw-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; flex-shrink: 0;
    font: 700 12.5px var(--font); color: var(--aw-soft); text-decoration: none;
    background: var(--aw-surface); border: 1px solid var(--aw-border); transition: border-color 0.2s, transform 0.2s;
}
.aw-pill i { font-size: 15px; }
.aw-pill:hover { border-color: color-mix(in srgb, var(--aw-blue) 45%, transparent); transform: translateY(-1px); text-decoration: none; }
.aw-pill:focus-visible { outline: 2px solid var(--aw-blue); outline-offset: 2px; }

body.auth-page .auth-admin-topbar { padding: 0; }
body.auth-page .auth-admin-trigger {
    width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 999px; box-shadow: none;
    color: var(--aw-soft); background: var(--aw-surface); border: 1px solid var(--aw-border);
}
body.auth-page .auth-admin-trigger svg { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
body.auth-page .auth-admin-trigger:hover { border-color: color-mix(in srgb, var(--aw-blue) 45%, transparent); background: var(--aw-surface); }

/* ── Layout ── */
.aw-grid {
    position: relative; z-index: 2; flex: 1; min-height: 0;
    display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 32px); align-items: center;
    width: 100%; max-width: 1280px; margin: 0 auto;
}
.aw-hero { min-height: 0; display: flex; flex-direction: column; justify-content: center; }

/* ── Hero + login card ── */
.aw-hero h1 { margin: 0; font-size: clamp(1.7rem, min(3vw, 5vh), 2.5rem); line-height: 1.15; letter-spacing: -0.8px; font-weight: 800; color: var(--aw-text); }
.aw-hero h1 b {
    font-weight: 800;
    background: linear-gradient(90deg, var(--aw-blue), #7c3aed, var(--aw-green), var(--aw-blue)); background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: aw-sheen 14s linear infinite;
}
@keyframes aw-sheen { to { background-position: 300% 0; } }
.aw-sub { margin: 6px 0 clamp(8px, 1.6vh, 14px); font-size: 14px; line-height: 1.6; color: var(--aw-muted); }

body.auth-page .auth-form-wrap { display: block; flex: none; padding: 0; overflow: visible; min-height: 0; }

body.auth-page .auth-card {
    max-width: none; padding: clamp(14px, 2.2vh, 18px) 20px clamp(10px, 1.6vh, 14px); border-radius: 20px;
    background: var(--aw-surface); border: 1px solid var(--aw-border); box-shadow: var(--aw-shadow);
}
body.auth-page .auth-card::before {
    top: 18px; bottom: 18px; left: 0; right: auto; width: 4px; height: auto; border-radius: 4px;
    background: linear-gradient(var(--aw-blue), var(--aw-blue2));
}
[dir="rtl"] body.auth-page .auth-card::before { left: auto; right: 0; }
body.auth-page .auth-card-head { margin-bottom: clamp(6px, 1.2vh, 10px); }
body.auth-page .auth-card-icon {
    width: 30px; height: 30px; margin-bottom: 8px; border-radius: 9px; color: #fff; box-shadow: 0 10px 20px -10px var(--aw-blue);
    background: linear-gradient(135deg, var(--aw-blue), var(--aw-blue2));
}
body.auth-page .auth-card-icon svg { width: 16px; height: 16px; }
body.auth-page .auth-card h2 { margin: 0 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--aw-text); }
body.auth-page .auth-card .subtitle { font-size: 13px; color: var(--aw-muted); }
body.auth-page .auth-card .field { margin-bottom: clamp(6px, 1.1vh, 10px); }
body.auth-page .auth-card .field:last-of-type { margin-bottom: 0; }
body.auth-page .auth-card label,
body.auth-page .auth-admin-modal-dialog label { font-size: 12.5px; font-weight: 700; color: var(--aw-soft); margin-bottom: 6px; }
body.auth-page .auth-card input[type="text"],
body.auth-page .auth-card input[type="password"],
body.auth-page .auth-admin-modal-dialog input[type="text"],
body.auth-page .auth-admin-modal-dialog input[type="password"] {
    height: clamp(38px, 5.4vh, 42px); padding: 0 12px; font-size: 14px; font-family: var(--font);
    border-radius: 11px; border: 1px solid var(--aw-border); background: var(--aw-surface-2); color: var(--aw-text);
}
body.auth-page .auth-card input:focus,
body.auth-page .auth-admin-modal-dialog input:focus {
    outline: none; border-color: var(--aw-blue); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Chrome autofill: keep the calm surface instead of the bright blue fill */
body.auth-page input:-webkit-autofill,
body.auth-page input:-webkit-autofill:hover,
body.auth-page input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 60px var(--aw-surface-2) inset;
    -webkit-text-fill-color: var(--aw-text);
    caret-color: var(--aw-text);
    transition: background-color 9999s;
}
body.auth-page .auth-card .secret-row .btn-secondary,
body.auth-page .auth-admin-modal-dialog .secret-row .btn-secondary {
    height: clamp(38px, 5.4vh, 42px); min-height: 0; padding: 0 14px; border-radius: 11px; font: 700 13px var(--font);
    color: var(--aw-soft); background: var(--aw-surface); border: 1px solid var(--aw-border);
}
body.auth-page .auth-card .actions { margin-top: clamp(8px, 1.4vh, 12px); }
body.auth-page .auth-card .actions button,
body.auth-page .auth-admin-modal-dialog .actions button {
    height: clamp(40px, 5.6vh, 44px); min-height: 0; border-radius: 11px; font: 700 14.5px var(--font); color: #fff;
    background: linear-gradient(135deg, var(--aw-blue), var(--aw-blue2)); box-shadow: 0 8px 16px -10px var(--aw-blue);
}
body.auth-page .auth-card .actions button:hover,
body.auth-page .auth-admin-modal-dialog .actions button:hover { background: linear-gradient(135deg, #1d4ed8, #4338ca); }
body.auth-page .auth-card .actions button:focus-visible,
body.auth-page .auth-admin-modal-dialog .actions button:focus-visible { outline: 2px solid var(--aw-blue); outline-offset: 2px; }
body.auth-page .auth-card .alert { margin-bottom: 10px; padding: 8px 12px; font-size: 13px; border-radius: 10px; }
body.auth-page .auth-card .auth-switch {
    margin-top: clamp(8px, 1.4vh, 12px); padding-top: clamp(6px, 1.2vh, 10px); border-top: 1px solid var(--aw-border-soft);
    text-align: end; font-size: 12.5px;
}
body.auth-page .auth-card .auth-switch a { color: var(--aw-blue); font-weight: 700; }

/* ── Admin modal ── */
body.auth-page .auth-admin-modal-dialog {
    border-radius: 20px; background: var(--aw-surface); border-color: var(--aw-border);
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.35);
}
body.auth-page .auth-admin-modal-dialog::before { background: linear-gradient(90deg, var(--aw-blue), var(--aw-blue2), var(--aw-green)); }
body.auth-page .auth-admin-modal-header h3 { color: var(--aw-text); }
/* Backdrop is a <button>; admin.css gives every button:not(...) a 36px height, which left a thin strip. */
body.auth-page .auth-admin-modal button.auth-admin-modal-backdrop.auth-admin-modal-backdrop {
    height: auto; min-height: 0; background: rgba(8, 13, 26, 0.45);
}
/* Close (X) is a <button> too: the global padding squeezed its icon to 0 width. */
body.auth-page .auth-admin-modal-dialog button.auth-admin-modal-close.auth-admin-modal-close {
    width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 9px; color: var(--aw-muted); background: transparent;
}
body.auth-page .auth-admin-modal-dialog button.auth-admin-modal-close.auth-admin-modal-close:hover { color: var(--aw-text); background: var(--aw-border-soft); }
body.auth-page .auth-admin-modal-close svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Service cards (share the column height, never overflow) ── */
.aw-cards { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 16px); min-width: 0; min-height: 0; max-height: 100%; }
.aw-svc {
    --c: var(--aw-blue); --c2: var(--aw-blue2);
    position: relative; overflow: hidden; flex: 0 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 18px;
    padding: clamp(10px, 1.8vh, 14px) 16px; border-radius: 20px;
    background: var(--aw-surface); border: 1px solid var(--aw-border); box-shadow: var(--aw-shadow);
}
.aw-svc--green { --c: var(--aw-green); --c2: var(--aw-green2); }
.aw-bar { position: absolute; inset-inline-start: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 4px; background: linear-gradient(var(--c), var(--c2)); }
.aw-svc__txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-inline-start: 6px; }
.aw-ico {
    width: clamp(38px, 6vh, 48px); height: clamp(38px, 6vh, 48px); border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: clamp(20px, 3.2vh, 26px); color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 10px 20px -10px var(--c);
}
.aw-svc h3 { margin: clamp(4px, 1vh, 8px) 0 2px; font-size: clamp(17px, 2.6vh, 20px); font-weight: 800; letter-spacing: -0.3px; color: var(--aw-text); }
.aw-svc p { margin: 0 0 clamp(6px, 1.4vh, 12px); font-size: 13px; line-height: 1.5; color: var(--aw-muted); }
.aw-stat {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
    color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent);
}
.aw-stat i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); animation: aw-pulse-c 2.4s infinite; }
@keyframes aw-pulse-c { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 6px transparent; } }

.aw-prev { min-width: 0; border-radius: 16px; background: var(--aw-surface-2); border: 1px solid var(--aw-border); overflow: hidden; }
.aw-prev__head { display: flex; align-items: center; gap: 8px; padding: clamp(6px, 1.1vh, 9px) 12px; border-bottom: 1px solid var(--aw-border-soft); }
.aw-prev__head b { font-size: 12.5px; font-weight: 800; color: var(--aw-text); }
.aw-live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #e11d48; }
[data-theme="dark"] .aw-live { color: #fb7185; }
.aw-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: aw-breathe 2.4s ease-in-out infinite; }
@keyframes aw-breathe { 50% { opacity: 0.35; } }

.aw-steps { display: grid; grid-template-columns: repeat(var(--aw-cols, 5), minmax(0, 1fr)); gap: 8px; padding: clamp(8px, 1.4vh, 12px) 12px 0; }
.aw-step {
    --sc: #2563eb;
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: clamp(7px, 1.2vh, 10px) 4px clamp(6px, 1vh, 8px);
    text-align: center; border-radius: 12px; background: var(--aw-surface); border: 1px solid var(--aw-border);
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.aw-step__ico {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px;
    color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent);
}
.aw-step b { font-size: 11.5px; font-weight: 800; color: var(--aw-text); line-height: 1.25; }
.aw-step small { font-size: 10.5px; line-height: 1.3; color: var(--aw-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aw-steps[style*="--aw-cols: 6"] .aw-step small { display: none; }
.aw-step.is-on { border-color: color-mix(in srgb, var(--sc) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 15%, transparent); transform: translateY(-2px); }
.aw-step.is-done::after { content: "\2713"; position: absolute; top: 5px; inset-inline-end: 7px; font-size: 10px; font-weight: 800; color: var(--aw-success); }
.aw-step--upload { --sc: #7c3aed; }
.aw-step--dial { --sc: #2563eb; }
.aw-step--answer { --sc: #e11d48; }
.aw-step--ivr { --sc: #0284c7; }
.aw-step--tts { --sc: #d97706; }
.aw-step--recording { --sc: #4f46e5; }
.aw-step--report { --sc: #059669; }
[data-theme="dark"] .aw-step--upload { --sc: #a78bfa; }
[data-theme="dark"] .aw-step--dial { --sc: #60a5fa; }
[data-theme="dark"] .aw-step--answer { --sc: #fb7185; }
[data-theme="dark"] .aw-step--ivr { --sc: #38bdf8; }
[data-theme="dark"] .aw-step--tts { --sc: #fbbf24; }
[data-theme="dark"] .aw-step--recording { --sc: #818cf8; }
[data-theme="dark"] .aw-step--report { --sc: #34d399; }

.aw-log { min-height: 44px; padding: 6px 12px 8px; font: 500 11px/1.6 ui-monospace, Consolas, monospace; color: var(--aw-muted); text-align: left; }
.aw-log span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: aw-in 0.4s ease both; }
.aw-log span.is-ok { color: var(--aw-success); }
@keyframes aw-in { from { opacity: 0; transform: translateY(4px); } }

/* ── Ticker ── */
.aw-tick {
    position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; gap: 10px; overflow: hidden;
    width: 100%; max-width: 1280px; margin: 0 auto; padding: 7px 12px; border-radius: 12px;
    font-size: 12.5px; color: var(--aw-soft); background: var(--aw-surface); border: 1px solid var(--aw-border);
}
.aw-tick__tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 7px; font-weight: 700; color: var(--aw-blue); background: var(--accent-soft); }
.aw-tick__vp { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.aw-tick__lane { display: flex; gap: 28px; width: max-content; white-space: nowrap; animation: aw-marquee 50s linear infinite; }
.aw-tick__lane span { display: inline-flex; align-items: center; gap: 6px; }
[dir="rtl"] .aw-tick__lane { animation-name: aw-marquee-rtl; }
@keyframes aw-marquee { to { transform: translateX(-50%); } }
@keyframes aw-marquee-rtl { to { transform: translateX(50%); } }
.aw-c-g { color: #059669; } .aw-c-b { color: #2563eb; } .aw-c-a { color: #d97706; } .aw-c-v { color: #7c3aed; } .aw-c-r { color: #e11d48; }
[data-theme="dark"] .aw-c-g { color: #34d399; } [data-theme="dark"] .aw-c-b { color: #60a5fa; } [data-theme="dark"] .aw-c-a { color: #fbbf24; }
[data-theme="dark"] .aw-c-v { color: #a78bfa; } [data-theme="dark"] .aw-c-r { color: #fb7185; }

/* ── Arabic (RTL) ── */
[dir="rtl"] .aw-hero h1,
[dir="rtl"] .aw-svc h3,
[dir="rtl"] body.auth-page .auth-card h2 { letter-spacing: 0; }
[dir="rtl"] .aw-sub,
[dir="rtl"] .aw-svc p { line-height: 1.7; }
[dir="rtl"] .aw-step b { font-size: 12px; }

/* ── Fit one screen: step down detail only when height is really short ── */
@media (max-height: 640px) {
    .aw-step small { display: none; }
    .aw-log { min-height: 0; }
    .aw-log span + span { display: none; }
}
@media (max-height: 560px) {
    .aw-sub { display: none; }
    .aw-svc p { display: none; }
    .aw-log { display: none; }
    .aw-steps { padding-bottom: 10px; }
    body.auth-page .auth-card .subtitle { display: none; }
    body.auth-page .auth-card-icon { display: none; }
}
@media (max-height: 480px) {
    .aw-tick { display: none; }
    .aw-prev__head { display: none; }
}

/* ── Narrower screens ── */
@media (max-width: 1100px) {
    .aw-svc { grid-template-columns: 1fr; gap: 10px; }
    .aw-svc__txt { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
    .aw-svc__txt > div:last-child { margin-inline-start: auto; }
    .aw-svc h3 { margin: 0; }
    .aw-svc p { display: none; }
}
@media (max-width: 900px) {
    .aw-grid { grid-template-columns: 1fr; align-content: center; justify-items: stretch; max-width: 520px; }
    .aw-hero h1, .aw-sub { text-align: center; }
    .aw-cards { flex-direction: row; }
    .aw-svc { flex: 1 1 0; }
    .aw-prev { display: none; }
    .aw-svc__txt > div:last-child { display: none; }
}
@media (max-width: 560px) {
    .aw-ok { display: none; }
    .aw-pill span { display: none; }
    .aw-pill { width: 32px; padding: 0; justify-content: center; }
    .aw-cards { display: none; }
    .aw-tick { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aw-auth *, .aw-auth *::before, .aw-auth *::after { animation: none !important; transition: none !important; }
}

/* ── Three services (A+): Conversational AI card, customer message, moving flow ── */
.aw-svc--violet { --c: #c026d3; --c2: #7c3aed; }
[data-theme="dark"] .aw-svc--violet { --c: #e879f9; --c2: #a78bfa; }
.aw-new {
    position: absolute; top: 10px; inset-inline-end: 12px; z-index: 1; padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: #fff; background: linear-gradient(90deg, #c026d3, #7c3aed);
    box-shadow: 0 8px 16px -8px #7c3aed;
}
.aw-step--ai { --sc: #c026d3; }
.aw-step--outcome { --sc: #0d9488; }
[data-theme="dark"] .aw-step--ai { --sc: #e879f9; }
[data-theme="dark"] .aw-step--outcome { --sc: #2dd4bf; }

/* the step that is running shows a small progress bar */
.aw-step::before {
    content: ""; position: absolute; bottom: 0; inset-inline: 10px; height: 3px; border-radius: 3px;
    background: var(--sc); transform: scaleX(0); transform-origin: left; opacity: 0;
}
[dir="rtl"] .aw-step::before { transform-origin: right; }
.aw-step.is-on::before { opacity: 1; animation: aw-step-bar 1.8s linear forwards; }
@keyframes aw-step-bar { to { transform: scaleX(1); } }
.aw-step.is-on .aw-step__ico { animation: aw-step-pop 1.8s ease-in-out infinite; }
@keyframes aw-step-pop { 50% { transform: scale(1.12); } }

/* what the customer hears */
.aw-say { display: flex; flex-direction: column; gap: 3px; margin: clamp(6px, 1vh, 9px) 12px clamp(6px, 1.1vh, 10px); padding: 7px 10px; border-radius: 12px; background: var(--aw-surface); border: 1px dashed color-mix(in srgb, var(--c) 40%, var(--aw-border)); }
.aw-say__line { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--aw-soft); }
.aw-say__line > i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); margin-top: 1px; }
.aw-say__line.is-customer > i { background: color-mix(in srgb, var(--aw-muted) 55%, transparent); }
.aw-say__line span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aw-say__line b { color: var(--aw-text); }
.aw-typing { display: inline-flex; gap: 3px; margin-inline-start: 5px; vertical-align: middle; }
.aw-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--c); animation: aw-typing 1s infinite; }
.aw-typing i:nth-child(2) { animation-delay: .15s; } .aw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aw-typing { 50% { opacity: .25; transform: translateY(-2px); } }
.aw-outcome { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #0f766e; background: rgba(13, 148, 136, .12); }
[data-theme="dark"] .aw-outcome { color: #5eead4; background: rgba(45, 212, 191, .12); }

/* three cards share the column height: tighter cards, shorter steps */
.aw-cards { gap: clamp(8px, 1.4vh, 12px); }
.aw-cards .aw-svc { flex: 0 1 auto; padding-block: clamp(8px, 1.3vh, 12px); align-items: center; }
.aw-cards .aw-step small { display: none; }
.aw-cards .aw-steps { padding-top: clamp(6px, 1vh, 10px); }
.aw-cards .aw-step { padding: clamp(5px, .9vh, 8px) 4px clamp(5px, .8vh, 7px); gap: 3px; }
.aw-cards .aw-step__ico { width: 26px; height: 26px; font-size: 14px; }
.aw-cards .aw-prev__head { padding-block: clamp(4px, .8vh, 7px); }
.aw-cards .aw-svc p { margin-bottom: clamp(4px, .9vh, 8px); }
@media (min-height: 900px) { .aw-cards .aw-step small { display: -webkit-box; } }

/* short screens: keep everything on one screen by dropping detail step by step */
@media (max-height: 760px) {
    .aw-say__line span { -webkit-line-clamp: 1; }
    .aw-say .aw-say__line.is-customer:not(:only-child):not(:first-child) { display: none; }
    .aw-svc p { display: none; }
}
@media (max-height: 660px) {
    .aw-say { display: none; }
    .aw-cards .aw-ico { width: 34px; height: 34px; font-size: 18px; }
}
@media (max-height: 560px) {
    .aw-cards .aw-prev__head { display: none; }
    .aw-cards .aw-step b { font-size: 10.5px; }
}
/* tablet / phone: the cards become a compact row (no flow) or hide, as before */
@media (max-width: 900px) {
    .aw-cards .aw-svc { padding: 10px; }
    .aw-new { top: 6px; inset-inline-end: 8px; }
}
.aw-svc h3 .aw-new { position: static; display: inline-block; vertical-align: middle; margin-inline-start: 6px; box-shadow: none; }
/* phones: the three services as small badges under the login (only when there is room) */
@media (max-width: 560px) and (min-height: 700px) {
    .aw-cards { display: flex; flex-direction: row; gap: 6px; }
    .aw-cards .aw-svc { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; text-align: center; }
    .aw-cards .aw-bar, .aw-cards .aw-prev, .aw-cards .aw-stat, .aw-cards .aw-svc p { display: none; }
    .aw-cards .aw-svc__txt { flex-direction: column; align-items: center; gap: 4px; padding: 0; }
    .aw-cards .aw-svc__txt > div:last-child { display: none; }
    .aw-cards .aw-ico { width: 30px; height: 30px; font-size: 16px; border-radius: 10px; }
    .aw-cards .aw-svc h3 { margin: 0; font-size: 11.5px; line-height: 1.3; }
    .aw-cards .aw-svc h3 .aw-new { display: block; margin: 3px auto 0; width: max-content; }
    .aw-grid { align-content: center; gap: 12px; }
}


/* ── Campaign flow v3: moving call journey (design A) ── */
.aw-jr__toggle {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
    font-size: 13px; color: var(--aw-muted); background: var(--aw-surface); border: 1px solid var(--aw-border);
}
.aw-jr__toggle:hover { color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, var(--aw-border)); }
.aw-jr__toggle:focus-visible, .aw-node:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.aw-prev.is-paused .aw-live { visibility: hidden; }
.aw-jr { --node: clamp(34px, 5.4vh, 46px); position: relative; padding: clamp(8px, 1.4vh, 12px) 12px 0; }
.aw-jr__track {
    position: absolute; inset-inline: calc(12px + (100% - 24px) / var(--aw-cols) / 2); top: calc(clamp(8px, 1.4vh, 12px) + var(--node) / 2 - 2px);
    height: 4px; border-radius: 4px; background: var(--aw-border);
}
.aw-jr__fill {
    position: absolute; inset-inline-start: 0; top: 0; height: 100%; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--c), var(--c2)); transition: width .6s ease;
}
[dir="rtl"] .aw-jr__fill { background: linear-gradient(270deg, var(--c), var(--c2)); }
.aw-jr__dot {
    position: absolute; top: 50%; inset-inline-start: 0; width: 12px; height: 12px; margin-top: -6px; margin-inline-start: -6px; border-radius: 50%;
    background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); transition: inset-inline-start .6s ease;
}
.aw-jr__nodes { position: relative; display: grid; grid-template-columns: repeat(var(--aw-cols), minmax(0, 1fr)); }
.aw-node {
    appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: clamp(3px, .6vh, 6px); color: var(--aw-muted);
}
.aw-node__ico {
    position: relative; width: var(--node); height: var(--node); border-radius: calc(var(--node) * .32); display: grid; place-items: center;
    font-size: calc(var(--node) * .44); background: var(--aw-surface); border: 2px solid var(--aw-border); color: var(--aw-muted);
    transition: transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.aw-node b { max-width: 100%; font-size: 11.5px; font-weight: 800; line-height: 1.2; text-align: center; color: inherit; }
[dir="rtl"] .aw-node b { font-size: 12px; }
.aw-node:hover .aw-node__ico { border-color: color-mix(in srgb, var(--c) 55%, var(--aw-border)); }
.aw-node.is-done .aw-node__ico { border-color: var(--c); color: var(--c); }
.aw-node.is-done .aw-node__ico::after {
    content: "\2713"; position: absolute; top: -6px; inset-inline-end: -6px; width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: var(--c);
}
.aw-node.is-on { color: var(--aw-text); }
.aw-node.is-on .aw-node__ico {
    color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--c), var(--c2));
    transform: scale(1.1); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--c) 70%, transparent);
}
.aw-now {
    display: flex; align-items: center; gap: 9px; margin: clamp(6px, 1.1vh, 10px) 12px clamp(6px, 1.1vh, 10px); padding: clamp(5px, .9vh, 8px) 10px;
    border-radius: 12px; background: var(--aw-surface); border: 1px solid var(--aw-border-soft);
}
.aw-now__ico {
    flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px;
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
}
.aw-now__txt {
    flex: 1; min-width: 0; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--aw-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aw-now__txt.is-in { animation: aw-now-in .45s ease; }
@keyframes aw-now-in { from { opacity: 0; transform: translateY(4px); } }
.aw-now__of { flex: none; font-size: 11px; font-weight: 800; color: var(--aw-muted); white-space: nowrap; }
/* Same one-screen steps as before: less detail on short screens. */
@media (max-height: 760px) { .aw-now__txt { -webkit-line-clamp: 1; } }
@media (max-height: 660px) { .aw-now { display: none; } .aw-jr { padding-bottom: 10px; } }
@media (max-height: 560px) { .aw-node b { font-size: 10.5px; } }
@media (max-height: 480px) { .aw-jr__toggle { display: none; } }
/* The login page styles every <button> (36px tall, side padding): undo that for the journey. */
.aw-auth .aw-node { width: auto; height: auto; min-height: 0; padding: 0; box-shadow: none; border-radius: 0; }
.aw-auth .aw-node__ico { flex: none; }
.aw-auth .aw-jr__toggle { width: 24px; height: 24px; min-height: 0; padding: 0; box-shadow: none; }
.aw-node b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 1px; }
.aw-jr { padding-bottom: 2px; }
@media (max-height: 660px) { .aw-jr { padding-bottom: 10px; } }
.aw-node b { width: max-content; max-width: 100%; }
/* Beat the global "button:not(...)…" rule (side padding / height) for the journey buttons. */
.aw-auth .aw-svc .aw-prev .aw-jr .aw-jr__nodes button.aw-node { padding: 0; padding-inline: 0; min-height: 0; height: auto; width: auto; }
.aw-auth .aw-svc .aw-prev .aw-prev__head button.aw-jr__toggle { padding: 0; padding-inline: 0; min-height: 0; width: 24px; height: 24px; }
.aw-auth .aw-svc .aw-prev .aw-jr .aw-jr__nodes button.aw-node,
.aw-auth .aw-svc .aw-prev .aw-jr .aw-jr__nodes button.aw-node:hover,
.aw-auth .aw-svc .aw-prev .aw-jr .aw-jr__nodes button.aw-node:active,
.aw-auth .aw-svc .aw-prev .aw-jr .aw-jr__nodes button.aw-node:focus {
    background: none; border: 0; box-shadow: none; transform: none; color: var(--aw-muted); filter: none;
}
.aw-auth .aw-svc .aw-prev .aw-jr .aw-jr__nodes button.aw-node.is-on { color: var(--aw-text); }
.aw-auth .aw-svc .aw-prev .aw-prev__head button.aw-jr__toggle:hover,
.aw-auth .aw-svc .aw-prev .aw-prev__head button.aw-jr__toggle:active {
    background: var(--aw-surface); color: var(--c); transform: none; box-shadow: none;
}

/* ══ Spotlight (2026-10): four service tabs + one large card, in Awfar colours ══════════════════
   Tones: indigo = Live AI agent · green = AI voice · amber = announcement + human · blue = fixed IVR. */
body.auth-page { --aw-amber: #d97706; --aw-indigo: #4f46e5; }
[data-theme="dark"] body.auth-page { --aw-amber: #fbbf24; --aw-indigo: #818cf8; }
.aw-t--indigo { --c: var(--aw-indigo); --ink: #3730a3; --soft-c: rgba(79, 70, 229, .10); }
.aw-t--green  { --c: var(--aw-green);  --ink: #065f46; --soft-c: rgba(5, 150, 105, .10); }
.aw-t--amber  { --c: var(--aw-amber);  --ink: #92400e; --soft-c: rgba(217, 119, 6, .11); }
.aw-t--blue   { --c: var(--aw-blue);   --ink: #1e40af; --soft-c: rgba(37, 99, 235, .10); }
[data-theme="dark"] .aw-t--indigo { --ink: #c7d2fe; --soft-c: rgba(129, 140, 248, .16); }
[data-theme="dark"] .aw-t--green  { --ink: #6ee7b7; --soft-c: rgba(16, 185, 129, .14); }
[data-theme="dark"] .aw-t--amber  { --ink: #fcd34d; --soft-c: rgba(251, 191, 36, .14); }
[data-theme="dark"] .aw-t--blue   { --ink: #93c5fd; --soft-c: rgba(59, 130, 246, .16); }
.aw-c-i { color: #4f46e5; } [data-theme="dark"] .aw-c-i { color: #a5b4fc; }

.aw-spot { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 12px); min-width: 0; }

/* Tabs */
.aw-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body.auth-page button.aw-tab {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 0; height: auto; padding: 10px 11px; margin: 0;
    border-radius: 14px; cursor: pointer; text-align: start; font: inherit; color: var(--aw-text);
    background: color-mix(in srgb, var(--aw-surface) 82%, transparent); border: 1px solid var(--aw-border);
    backdrop-filter: blur(12px); box-shadow: none; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.aw-tab > i.ti { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--ink); background: var(--soft-c); }
.aw-tab > span:not(.aw-tab__prog) { min-width: 0; display: flex; flex-direction: column; }
.aw-tab b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-tab small { font-size: 11.5px; color: var(--aw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.auth-page button.aw-tab:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--aw-surface) 82%, transparent); }
body.auth-page button.aw-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }
body.auth-page button.aw-tab.is-on {
    border-color: var(--c); background: linear-gradient(135deg, var(--soft-c), var(--aw-surface) 70%);
    box-shadow: 0 10px 24px -14px var(--c);
}
.aw-tab__prog { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 0; background: var(--c); }
.aw-tab.is-on .aw-tab__prog { animation: aw-prog var(--aw-cycle, 10s) linear forwards; }
.aw-spot.is-paused .aw-tab.is-on .aw-tab__prog { animation-play-state: paused; }
@keyframes aw-prog { to { width: 100%; } }

/* The large card */
.aw-card {
    position: relative; padding: clamp(14px, 2.2vh, 22px) clamp(16px, 2vw, 24px); border-radius: 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 7%, var(--aw-surface)), var(--aw-surface) 55%);
    border: 1.5px solid color-mix(in srgb, var(--c) 38%, transparent); box-shadow: var(--aw-shadow);
    transition: box-shadow .25s, transform .25s;
    animation: aw-card-in .35s ease;
}
.aw-card[hidden] { display: none; }
.aw-card:hover { transform: translateY(-2px); box-shadow: var(--aw-shadow), 0 18px 44px -22px var(--c); }
@keyframes aw-card-in { from { opacity: 0; transform: translateY(6px); } }
.aw-card__head { display: flex; align-items: flex-start; gap: 14px; }
.aw-card__ico { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 27px; color: var(--ink); background: var(--soft-c); }
.aw-card h3 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: clamp(17px, 2.4vh, 21px); font-weight: 800; color: var(--aw-text); }
.aw-card p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--aw-muted); }
.aw-card .aw-new {
    position: static; display: inline-flex; align-items: center; height: 21px; padding: 0 9px; box-shadow: none;
    background: var(--c); color: #fff;
}
[data-theme="dark"] .aw-card .aw-new { color: #0d1424; }
.aw-card .aw-stat {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; height: 26px; padding: 0 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--soft-c); border: 0;
}
.aw-card .aw-stat i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); animation: none; }

/* Campaign flow */
.aw-flow {
    margin-top: clamp(10px, 1.8vh, 16px); padding: clamp(10px, 1.6vh, 14px) clamp(12px, 1.4vw, 16px); border-radius: 16px;
    background: color-mix(in srgb, var(--aw-surface-2) 75%, transparent); border: 1px solid var(--aw-border);
}
.aw-flow__head { display: flex; align-items: center; gap: 8px; margin-bottom: clamp(8px, 1.4vh, 12px); font-size: 12.5px; color: var(--aw-muted); }
.aw-flow__head b { font-weight: 800; }
.aw-flow__of { font-weight: 700; font-variant-numeric: tabular-nums; }
.aw-steps2 { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.aw-steps2__line { position: absolute; top: 21px; inset-inline: calc(50% / var(--n)); height: 3px; border-radius: 3px; background: var(--aw-border); }
.aw-steps2__line span { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 3px; background: var(--c); transition: width .6s ease; }
.aw-st { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.aw-st__dot {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: var(--aw-muted);
    background: var(--aw-surface); border: 2px solid var(--aw-border); transition: all .35s ease;
}
.aw-st b { font-size: 12px; font-weight: 700; color: var(--aw-muted); line-height: 1.25; }
.aw-st.is-done .aw-st__dot { color: var(--ink); background: var(--soft-c); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.aw-st.is-on .aw-st__dot {
    color: #fff; background: var(--c); border-color: var(--c); transform: scale(1.08);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent), 0 8px 18px -6px var(--c);
    animation: aw-glow 1.7s ease-in-out infinite;
}
[data-theme="dark"] .aw-st.is-on .aw-st__dot { color: #0d1424; }
.aw-st.is-on b, .aw-st.is-done b { color: var(--aw-text); }
@keyframes aw-glow { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 7%, transparent), 0 8px 18px -6px var(--c); } }
.aw-now2 {
    display: flex; align-items: center; gap: 9px; margin: clamp(8px, 1.4vh, 12px) 0 0; padding-top: clamp(8px, 1.4vh, 12px);
    border-top: 1px dashed var(--aw-border); min-height: 34px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--aw-text);
}
.aw-now2 i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; color: var(--ink); background: var(--soft-c); }
.aw-now2 span.is-in { animation: aw-in .4s ease; }

/* Login card polish: badge, icons in fields, eye button, inline error, loading */
.aw-login-badge {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin-bottom: 8px; border-radius: 999px;
    font-size: 12px; font-weight: 800; color: var(--aw-blue); background: var(--accent-soft);
}
body.auth-page .aw-inp { position: relative; display: flex; align-items: center; }
body.auth-page .aw-inp > i.ti { position: absolute; inset-inline-start: 12px; font-size: 17px; color: var(--aw-muted); pointer-events: none; z-index: 1; }
body.auth-page .auth-card .aw-inp input { width: 100%; padding-inline-start: 38px; }
body.auth-page .auth-card .aw-inp--pw input { padding-inline-end: 44px; }
body.auth-page .auth-card .aw-inp input:focus { border-color: var(--aw-blue); box-shadow: 0 0 0 4px var(--accent-soft); }
body.auth-page button.aw-eye.aw-eye {
    position: absolute; inset-inline-end: 5px; width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 9px;
    display: grid; place-items: center; font-size: 18px; color: var(--aw-muted); background: transparent; box-shadow: none; cursor: pointer;
}
body.auth-page button.aw-eye.aw-eye:hover { color: var(--aw-text); background: var(--accent-soft); }
body.auth-page button.aw-eye.aw-eye:focus-visible { outline: 2px solid var(--aw-blue); outline-offset: 1px; }
body.auth-page .auth-card .field.is-err input { border-color: #dc2626; }
.aw-field-err { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #b91c1c; }
[data-theme="dark"] .aw-field-err { color: #fca5a5; }
[data-theme="dark"] body.auth-page .auth-card .field.is-err input { border-color: #f87171; }
body.auth-page .auth-card .actions button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.aw-spin { display: none; width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: aw-spin .7s linear infinite; }
body.auth-page .actions button.is-loading { pointer-events: none; filter: saturate(.85); }
body.auth-page .actions button.is-loading .aw-spin { display: inline-block; }
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-tick:hover .aw-tick__lane { animation-play-state: paused; }

/* Short screens: keep everything on one screen */
@media (max-height: 700px) {
    .aw-card__head p { display: none; }
    .aw-st__dot { width: 38px; height: 38px; font-size: 17px; }
    .aw-steps2__line { top: 18px; }
    .aw-tab small { display: none; }
}
/* Tablet / phone: the page scrolls, the services sit under the login card */
@media (max-width: 1100px) {
    .aw-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    html:has(body.auth-page), body.auth-page { height: auto; max-height: none; overflow: auto; }
    .aw-auth { height: auto; min-height: 100dvh; overflow: visible; }
    .aw-grid { align-content: start; }
    .aw-tick { display: flex; }
}
@media (max-width: 560px) {
    body.auth-page button.aw-tab { padding: 8px 9px; }
    .aw-tab small { display: none; }
    .aw-card__head { gap: 10px; }
    .aw-card__ico { width: 42px; height: 42px; font-size: 22px; }
    .aw-st__dot { width: 34px; height: 34px; font-size: 15px; }
    .aw-steps2__line { top: 16px; }
    .aw-st b { font-size: 10.5px; }
    .aw-now2 { font-size: 12.5px; }
}

/* "Live" in the flow header: green, like the status chip. */
.aw-flow .aw-live, .aw-flow__head .aw-live { color: var(--aw-ok-text); background: var(--aw-ok-bg); border: 0; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.aw-flow .aw-live i, .aw-flow__head .aw-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }

/* Phones: only the current step shows its name (six names do not fit side by side). */
@media (max-width: 560px) {
    .aw-st b { visibility: hidden; white-space: nowrap; }
    .aw-st.is-on b { visibility: visible; }
}

/* ══ Service card — timeline + results (2026-10) ══════════════════════════════════════════════
   Left: the campaign steps with a time and what happens. Right: today's results ring, calls per
   hour and the sentence heard on the call. Each service keeps its own colour (--c / --ink / --soft-c). */
.aw-card .aw-flow__head { margin: clamp(10px, 1.6vh, 14px) 0 clamp(6px, 1vh, 10px); }
.aw-tlg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); align-items: start; }

.aw-tl { position: relative; margin: 0; padding: 0; list-style: none; }
.aw-tl::before { content: ""; position: absolute; top: 16px; bottom: 16px; inset-inline-start: 15px; width: 2px; background: var(--aw-border); }
.aw-tl .aw-st {
    position: relative; display: flex; flex-direction: row; align-items: center; gap: 11px; padding: clamp(3px, .6vh, 6px) 0;
    text-align: start; opacity: .55; transition: opacity .3s;
}
.aw-tl .aw-st.is-on, .aw-tl .aw-st.is-done { opacity: 1; }
.aw-tl__d {
    position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
    font-size: 16px; color: var(--aw-muted); background: var(--aw-surface); border: 1.5px solid var(--aw-border); transition: all .3s;
}
.aw-tl .aw-st.is-done .aw-tl__d { color: var(--ink); background: var(--soft-c); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.aw-tl .aw-st.is-on .aw-tl__d {
    color: #fff; background: var(--c); border-color: var(--c);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent), 0 6px 14px -6px var(--c);
    animation: aw-glow 1.7s ease-in-out infinite;
}
[data-theme="dark"] .aw-tl .aw-st.is-on .aw-tl__d { color: #0d1424; }
.aw-tl__t { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.aw-tl__t b { font-size: 13.5px; font-weight: 800; color: var(--aw-text); }
.aw-tl__t small { font-size: 12px; color: var(--aw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-tl time { flex: none; font: 700 11.5px ui-monospace, Consolas, monospace; color: var(--aw-muted); }
.aw-tl .aw-st.is-on time { color: var(--ink); }

.aw-side { display: grid; gap: 10px; align-content: start; }
.aw-box { padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--aw-surface-2) 80%, transparent); border: 1px solid var(--aw-border); }
.aw-box h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: var(--aw-muted); }
.aw-donut { display: flex; align-items: center; gap: 12px; }
.aw-ring {
    flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--c) 0 var(--p1), color-mix(in srgb, var(--c) 55%, var(--aw-surface)) var(--p1) var(--p2),
        color-mix(in srgb, var(--c) 25%, var(--aw-surface)) var(--p2) var(--p3), var(--aw-border) var(--p3));
    animation: aw-ring-in .9s ease both;
}
.aw-ring b { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--aw-text); background: var(--aw-surface-2); }
@keyframes aw-ring-in { from { transform: rotate(-90deg) scale(.85); opacity: 0; } }
.aw-lg { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--aw-text); }
.aw-lg > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.aw-lg b { font-weight: 800; color: var(--ink); margin-inline-start: auto; padding-inline-start: 6px; }
.aw-lg i { flex: none; width: 9px; height: 9px; border-radius: 3px; }
.aw-lg--1 { background: var(--c); }
.aw-lg--2 { background: color-mix(in srgb, var(--c) 55%, var(--aw-surface)); }
.aw-lg--3 { background: color-mix(in srgb, var(--c) 25%, var(--aw-surface)); }
.aw-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.aw-bars i { flex: 1; border-radius: 5px 5px 2px 2px; transform-origin: bottom;
    background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 30%, transparent)); animation: aw-grow .8s ease both; }
@keyframes aw-grow { from { transform: scaleY(.08); } }
.aw-say { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--aw-text); background: var(--soft-c); }
.aw-say b { color: var(--ink); font-weight: 800; }

/* Short screens: drop the step details and the bars so the page still fits. */
@media (max-height: 760px) {
    .aw-tl__t small { display: none; }
    .aw-tl__d { width: 28px; height: 28px; font-size: 14px; }
    .aw-tl::before { inset-inline-start: 13px; }
}
@media (max-height: 660px) {
    .aw-box:has(.aw-bars) { display: none; }
}
/* Narrow: results go under the timeline. */
@media (max-width: 1100px) {
    .aw-tlg { grid-template-columns: minmax(0, 1fr); }
    .aw-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aw-say { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .aw-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .aw-tl .aw-st b { visibility: visible; } }

/* ══ Services section (2026-10): service cards (with today's number), A-style results and the
   "New · Train your AI agent" strip with its panel. Awfar tones; training = violet. ══════════════ */
.aw-t--violet { --c: #7c3aed; --ink: #5b21b6; --soft-c: rgba(124, 58, 237, .10); }
[data-theme="dark"] .aw-t--violet { --c: #a78bfa; --ink: #ddd6fe; --soft-c: rgba(167, 139, 250, .16); }

/* Cards */
.aw-tabs { gap: 10px; }
body.auth-page .aw-tabs button.aw-tab.aw-tab {
    height: auto; min-height: 0; max-height: none;
    flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 12px 11px; border-radius: 18px;
    background: var(--aw-surface); box-shadow: 0 8px 20px -18px rgba(15, 23, 42, .5);
}
.aw-tabs .aw-tab > i.ti { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.aw-tab__kpi { position: absolute; top: 12px; inset-inline-end: 12px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.aw-tabs .aw-tab > span:not(.aw-tab__prog):not(.aw-tab__kpi) { width: 100%; gap: 2px; }
.aw-tabs .aw-tab b { font-size: 14px; }
.aw-tabs .aw-tab small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
body.auth-page .aw-tabs button.aw-tab.aw-tab.is-on {
    color: #fff; border-color: transparent;
    background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 72%, #fff));
    box-shadow: 0 16px 30px -18px var(--c);
}
[data-theme="dark"] body.auth-page .aw-tabs button.aw-tab.aw-tab.is-on { color: #0d1424; background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); }
.aw-tabs .aw-tab.is-on > i.ti { color: inherit; background: rgba(255, 255, 255, .22); }
.aw-tabs .aw-tab.is-on small, .aw-tabs .aw-tab.is-on .aw-tab__kpi { color: inherit; opacity: .92; }
.aw-tabs .aw-tab.is-on .aw-tab__prog { background: rgba(255, 255, 255, .7); }

/* Training strip (a tab too: it opens the training panel) */
body.auth-page .aw-tabs button.aw-tab.aw-tab.aw-train {
    grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px;
    border-color: color-mix(in srgb, var(--c) 35%, transparent);
    background: linear-gradient(90deg, var(--soft-c), transparent 75%), var(--aw-surface);
}
.aw-tabs .aw-train > i.ti { color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 65%, #fff)); }
.aw-tabs .aw-train > span:not(.aw-tab__prog):not(.aw-train__go) { flex: 1; }
.aw-tabs .aw-train small { -webkit-line-clamp: 1; }
.aw-train__go {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 11px;
    font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff));
}
[dir="rtl"] .aw-train__go i { transform: scaleX(-1); }
.aw-tabs .aw-train.is-on .aw-train__go { color: var(--ink); background: #fff; }
.aw-tabs .aw-train.is-on > i.ti { background: rgba(255, 255, 255, .22); }

/* Results like option A: a bigger ring and a bar under each result */
.aw-card .aw-ring { width: 88px; height: 88px; }
.aw-card .aw-ring b { width: 64px; height: 64px; font-size: 17px; }
.aw-card .aw-donut { gap: 14px; }
.aw-card .aw-lg { flex: 1; gap: 8px; }
.aw-card .aw-lg > span { flex-wrap: wrap; row-gap: 4px; }
.aw-lg__bar { display: block; flex-basis: 100%; height: 5px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--c) 12%, transparent); font-style: normal; }
.aw-lg__bar u { display: block; height: 100%; border-radius: inherit; background: var(--c); text-decoration: none; animation: aw-bar-in .7s ease both; transform-origin: left; }
[dir="rtl"] .aw-lg__bar u { transform-origin: right; margin-inline-start: 0; }
@keyframes aw-bar-in { from { transform: scaleX(0); } }

/* Training panel: a small generic picture of the agent page */
.aw-trn { display: grid; grid-template-columns: minmax(0, 1fr) 138px; gap: 10px; padding: 11px; border-radius: 14px; background: color-mix(in srgb, var(--aw-surface-2) 80%, transparent); border: 1px solid var(--aw-border); }
.aw-trn__ed { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.aw-trn__l { font-size: 10.5px; font-weight: 800; color: var(--aw-muted); }
.aw-trn__box { padding: 7px 9px; border-radius: 9px; background: var(--aw-surface); border: 1px solid var(--aw-border); font-size: 11.5px; line-height: 1.5; color: var(--aw-text); }
.aw-trn__box.is-typing::after { content: "|"; color: var(--c); animation: aw-caret 1s steps(1) infinite; }
@keyframes aw-caret { 50% { opacity: 0; } }
.aw-trn__lines u { display: block; height: 6px; margin: 4px 0; border-radius: 4px; background: color-mix(in srgb, var(--aw-text) 10%, transparent); text-decoration: none; }
.aw-trn__lines u:nth-child(1) { width: 92%; } .aw-trn__lines u:nth-child(2) { width: 76%; } .aw-trn__lines u:nth-child(3) { width: 58%; }
.aw-trn__voices { display: flex; gap: 5px; flex-wrap: wrap; }
.aw-trn__voices em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--aw-border); background: var(--aw-surface); color: var(--aw-text); }
.aw-trn__voices em.is-on { color: var(--ink); background: var(--soft-c); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.aw-trn__phone { display: flex; flex-direction: column; gap: 6px; padding: 9px; border-radius: 18px; color: #fff; background: linear-gradient(180deg, #2e1065, #4c1d95); }
.aw-trn__phone > b { text-align: center; font-size: 11.5px; }
.aw-trn__orb { width: 36px; height: 36px; margin: 2px auto 0; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: rgba(255, 255, 255, .14); }
.aw-trn__bub { font-size: 10px; line-height: 1.45; padding: 5px 7px; border-radius: 9px; background: #fff; color: #172033; }
.aw-trn__bub.is-you { background: rgba(255, 255, 255, .16); color: #fff; margin-inline-start: 12px; display: none; }
.aw-trn__talk { margin-top: auto; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #4c1d95; background: #fff; }
.aw-trn__talk .is-live { display: none; }
.aw-trn__chk { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--aw-muted); }
.aw-trn__chk li::before { content: "✓ "; color: var(--c); font-weight: 800; }
/* The picture follows the steps: voice chosen, then the test conversation with an End button. */
.aw-card[data-step="3"] .aw-trn__bub.is-you, .aw-card[data-step="4"] .aw-trn__bub.is-you { display: block; }
.aw-card[data-step="3"] .aw-trn__orb { animation: aw-glow 1.4s ease-in-out infinite; }
.aw-card[data-step="3"] .aw-trn__talk { color: #fff; background: #e11d48; }
.aw-card[data-step="3"] .aw-trn__talk .is-idle { display: none; }
.aw-card[data-step="3"] .aw-trn__talk .is-live { display: inline; }

@media (max-height: 760px) { .aw-tabs .aw-tab small { -webkit-line-clamp: 1; } }
@media (max-width: 1100px) { .aw-trn { grid-template-columns: minmax(0, 1fr) 130px; } }
@media (max-width: 560px) {
    .aw-tab__kpi { top: 10px; inset-inline-end: 10px; font-size: 11.5px; }
    body.auth-page .aw-tabs button.aw-tab.aw-tab.aw-train { flex-wrap: wrap; }
    .aw-tabs .aw-train small { display: block; }
    .aw-trn { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .aw-lg__bar u, .aw-trn__box.is-typing::after, .aw-card[data-step="3"] .aw-trn__orb { animation: none; } }
/* Strip: icon · text (fills) · "See how" button (its own width). */
.aw-tabs .aw-train > span.aw-train__go { width: auto; flex-direction: row; }
.aw-tabs .aw-train > span:not(.aw-tab__prog):not(.aw-train__go) { width: auto; flex: 1; min-width: 0; }
body.auth-page .aw-tabs button.aw-tab.aw-tab.aw-train > i.ti { flex: none; }
/* Short screens: the training picture stays compact. */
@media (max-height: 880px) { .aw-trn__chk { display: none; } .aw-trn__lines u:nth-child(3) { display: none; } #aw-svc-train .aw-card__head p { display: none; } }
body.auth-page .aw-tabs button.aw-tab.aw-tab.aw-train.is-on { color: #fff; border-color: transparent; background: linear-gradient(110deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); box-shadow: 0 16px 30px -18px var(--c); }
[data-theme="dark"] body.auth-page .aw-tabs button.aw-tab.aw-tab.aw-train.is-on { color: #0d1424; }
.aw-tabs .aw-train.is-on small { color: inherit; opacity: .92; }
.aw-tabs .aw-tab.aw-train > span.aw-train__go.aw-train__go { width: auto; flex: none; flex-direction: row; }

/* ══ Balance (2026-10): one size scale across the section — sizes and alignment only. ══ */
/* Cards: the short line always takes two lines, so every title sits at the same height. */
.aw-tabs .aw-tab:not(.aw-train) small { min-height: calc(2em * 1.35); }
.aw-tabs .aw-tab:not(.aw-train) b { font-size: 14.5px; }
/* Service card head: title, icon and lines one step smaller, closer to the cards above. */
.aw-card .aw-card__head { gap: 12px; }
.aw-card .aw-card__ico { width: 46px; height: 46px; border-radius: 14px; font-size: 24px; }
.aw-card h3 { font-size: clamp(16px, 2.2vh, 18.5px); }
.aw-card .aw-card__head p { margin-top: 3px; font-size: 13px; line-height: 1.55; }
.aw-card .aw-stat { margin-top: 7px; height: 24px; font-size: 12px; }
.aw-card .aw-flow__head { margin: clamp(8px, 1.3vh, 12px) 0 clamp(4px, .8vh, 8px); }
/* Results: the box runs the full height of the steps, ring and bars centred in it. */
.aw-card .aw-tlg { align-items: stretch; }
.aw-card .aw-side { align-content: stretch; }
.aw-card .aw-side > .aw-box { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.aw-card .aw-side > .aw-box h4 { margin-bottom: 10px; }
.aw-card .aw-ring { width: 104px; height: 104px; }
.aw-card .aw-ring b { width: 76px; height: 76px; font-size: 19px; }
.aw-card .aw-lg { gap: 12px; font-size: 12.5px; }
@media (max-width: 1100px) { .aw-card .aw-side > .aw-box { height: auto; } }
/* The number is LTR text, so place it by the page direction, not its own. */
[dir="rtl"] .aw-tab__kpi { inset-inline-end: auto; left: 12px; right: auto; }
[dir="ltr"] .aw-tab__kpi { left: auto; right: 12px; }

/* ══ Wide screens (2026-10): use the width instead of a 1280px column with empty sides; on big
   screens everything grows one step together (same design, same proportions). ══ */
@media (min-width: 1440px) {
    body.auth-page main.aw-grid, body.auth-page .aw-tick { max-width: min(1720px, 94vw); }
    body.auth-page main.aw-grid { grid-template-columns: minmax(380px, 470px) minmax(0, 1fr); gap: clamp(32px, 3.2vw, 64px); }
}
@media (min-width: 1600px) and (min-height: 800px) {
    .aw-hero h1 { font-size: clamp(2.5rem, 3.1vw, 3.2rem); }
    .aw-sub { font-size: 16px; }
    body.auth-page .aw-tabs button.aw-tab.aw-tab { padding: 16px 16px 14px; gap: 9px; }
    body.auth-page .aw-tabs button.aw-tab.aw-tab.aw-train { padding: 12px 16px; }
    .aw-tabs .aw-tab > i.ti { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
    .aw-tabs .aw-tab:not(.aw-train) b, .aw-tabs .aw-train b { font-size: 16px; }
    .aw-tabs .aw-tab small { font-size: 13px; }
    .aw-tab__kpi { font-size: 14px; }
    .aw-train__go { height: 38px; padding: 0 18px; font-size: 14px; }
    .aw-card { padding: 26px 30px; }
    .aw-card h3 { font-size: 21px; }
    .aw-card .aw-card__ico { width: 54px; height: 54px; font-size: 28px; }
    .aw-card .aw-card__head p { font-size: 14px; }
    .aw-card .aw-stat { height: 27px; font-size: 13px; }
    .aw-tl .aw-st { padding-block: 7px; }
    .aw-tl__d { width: 38px; height: 38px; font-size: 18px; }
    .aw-tl::before { inset-inline-start: 18px; }
    .aw-tl__t b { font-size: 15px; } .aw-tl__t small { font-size: 13px; } .aw-tl time { font-size: 12.5px; }
    .aw-card .aw-ring { width: 128px; height: 128px; }
    .aw-card .aw-ring b { width: 94px; height: 94px; font-size: 23px; }
    .aw-card .aw-lg { font-size: 14px; gap: 14px; }
    .aw-trn { grid-template-columns: minmax(0, 1fr) 170px; }
    .aw-trn__box, .aw-trn__bub { font-size: 12.5px; }
}

/* ══ Compact service cards (2026-10): icon beside the text instead of above it, so the four cards
   are about half as tall and the service card below fits above the ticker. Wide screens only;
   narrower desktops keep the stacked card, just smaller. ══ */
@media (min-width: 901px) and (max-width: 1439px) {
    body.auth-page .aw-tabs button.aw-tab.aw-tab:not(.aw-train) { gap: 5px; padding: 9px 11px; }
    .aw-tabs .aw-tab:not(.aw-train) > i.ti { width: 32px; height: 32px; font-size: 17px; border-radius: 10px; }
    .aw-tabs .aw-tab:not(.aw-train) small { -webkit-line-clamp: 1; min-height: 0; }
    .aw-spot { gap: clamp(8px, 1.2vh, 10px); }
}
@media (min-width: 1440px) {
    body.auth-page .aw-tabs button.aw-tab.aw-tab:not(.aw-train) { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
    .aw-tabs .aw-tab:not(.aw-train) > span:not(.aw-tab__prog):not(.aw-tab__kpi) { padding-inline-end: 36px; }
    .aw-tabs .aw-tab:not(.aw-train) > i.ti { width: 38px; height: 38px; font-size: 19px; }
    .aw-tab__kpi { top: 10px; }
    .aw-spot { gap: clamp(8px, 1.2vh, 10px); }
}
/* Training card: the step names are short, so the preview gets the wider column. Otherwise on
   ~1100-1250px screens its editor column shrank to ~80px, the sample wrapped and the card hit the ticker. */
#aw-svc-train .aw-tlg { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 1100px) {
    #aw-svc-train .aw-tlg { grid-template-columns: minmax(0, 1fr); }
    /* Here the results go under the steps, so the card is taller than the screen: let the page
       scroll (as on tablets) instead of hiding the bottom of the card under the ticker. */
    html:has(body.auth-page), body.auth-page { height: auto; max-height: none; overflow: auto; }
    .aw-auth { height: auto; min-height: 100dvh; overflow: visible; }
}
@media (min-width: 1600px) and (min-height: 800px) {
    body.auth-page .aw-tabs button.aw-tab.aw-tab:not(.aw-train) { padding: 12px 14px; gap: 12px; }
    .aw-tabs .aw-tab:not(.aw-train) > i.ti { width: 42px; height: 42px; font-size: 21px; }
}