/* ── TOKEN ARCHITECTURE ────────────────────────────────────── */
        :root {
            /* dark palette (default) */
            --bg-base:        #0d0f14;
            --bg-panel:       #13161d;
            --bg-card:        #181c26;
            --bg-input:       #1e2330;
            --bg-input-focus: #222840;
            --border:         rgba(255,255,255,0.07);
            --border-focus:   rgba(255,180,0,0.55);
            --border-strong:  rgba(255,255,255,0.14);

            --text-primary:   #f0eff5;
            --text-secondary: #8b8fa8;
            --text-muted:     #6a6e88;
            --text-label:     #b0b3cc;

            --accent:         #ffb400;
            --accent-dim:     rgba(255,180,0,0.12);
            --accent-glow:    rgba(255,180,0,0.25);

            --green:          #22c97e;
            --green-dim:      rgba(34,201,126,0.12);
            --red:            #ff4d6a;
            --red-dim:        rgba(255,77,106,0.12);
            --blue:           #4a9eff;
            --blue-dim:       rgba(74,158,255,0.10);

            --radius-sm:      8px;
            --radius-md:      14px;
            --radius-lg:      22px;
            --radius-xl:      28px;

            --font-display:   "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
            --font-body:      "Figtree", "Segoe UI", system-ui, sans-serif;
            --font-mono:      "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, Monaco, "Liberation Mono", monospace;

            --shadow-card:    0 24px 64px rgba(0,0,0,0.42), 0 4px 12px rgba(0,0,0,0.22);
            --shadow-glow:    0 0 32px rgba(255,180,0,0.10);
            --shadow-soft:    0 8px 32px rgba(0,0,0,0.18);
            --transition:     0.18s cubic-bezier(0.4,0,0.2,1);
            --transition-slow: 0.32s cubic-bezier(0.22, 1, 0.36, 1);

            --input-height:   48px;
            --mobile-bar-h:   56px;
        }

        html[data-theme="light"] {
            --bg-base:        #f0f2f7;
            --bg-panel:       #e8eaf2;
            --bg-card:        #ffffff;
            --bg-input:       #f4f5fb;
            --bg-input-focus: #eceffe;
            --border:         rgba(0,0,0,0.16);
            --border-focus:   rgba(220,140,0,0.6);
            --border-strong:  rgba(0,0,0,0.24);
            --text-primary:   #1a1d2e;
            --text-secondary: #3e4258;
            --text-muted:     #4a4e64;
            --text-label:     #2e3148;
            --accent:         #c4a034;
            --accent-dim:     rgba(196,160,52,0.12);
            --accent-glow:    rgba(196,160,52,0.22);
            --shadow-card:    0 16px 34px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
            --shadow-glow:    0 0 20px rgba(196,160,52,0.08);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html {
            color-scheme: light dark;
        }
        html {
            scroll-behavior: smooth;
        }
        html, body {
            min-height: 100%;
            min-height: 100dvh;
            background: var(--bg-base);
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 15px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            transition: background var(--transition), color var(--transition);
        }
        body {
            overflow-x: hidden;
            overflow-y: auto;
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
        }

        .skip-link {
            position: absolute;
            top: -100px;
            left: 16px;
            z-index: 100;
            padding: 10px 16px;
            background: var(--accent);
            color: #0d0f14;
            font-weight: 600;
            font-size: 14px;
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: top var(--transition);
        }
        .skip-link:focus {
            top: 16px;
            outline: 2px solid var(--text-primary);
            outline-offset: 2px;
        }

        /* ── MOBILE TOP BAR ────────────────────────────────────────── */
        .login-mobile-bar {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 20;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: max(10px, env(safe-area-inset-top, 0px)) 14px 10px;
            background: color-mix(in srgb, var(--bg-base) 82%, transparent);
            border-bottom: 1px solid var(--border);
            backdrop-filter: blur(14px) saturate(1.15);
            -webkit-backdrop-filter: blur(14px) saturate(1.15);
        }
        .login-mobile-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            text-decoration: none;
            color: inherit;
        }
        .login-mobile-brand-mark {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            background: var(--accent);
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px var(--accent-glow);
        }
        .login-mobile-brand-mark img {
            width: 22px;
            height: 22px;
            display: block;
        }
        .login-mobile-brand-text {
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 700;
            letter-spacing: -0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .theme-strip--mobile { flex-shrink: 0; }

        /* ── CANVAS ────────────────────────────────────────────────── */
        .login-canvas {
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin: 0 auto;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }

        /* Background grid — slow drift suggests timelines & forward progress */
        .login-canvas::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 88px 88px;
            pointer-events: none;
            z-index: 1;
            animation: loginGridDrift 96s linear infinite;
        }
        html[data-theme="light"] .login-canvas::before {
            background-image:
                linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
        }
        @keyframes loginGridDrift {
            from { background-position: 0 0, 0 0; }
            to   { background-position: 88px 88px, 88px 88px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .login-canvas::before { animation: none; }
        }

        /* Login backdrop — navy mesh + animated plexus (canvas) */
        .login-backdrop {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
            --parallax-x: 0;
            --parallax-y: 0;
            background:
                linear-gradient(160deg, #0f1a32 0%, #0d0f14 42%, #0a1628 100%),
                radial-gradient(ellipse 85% 55% at 92% 8%, rgba(255, 180, 0, 0.09) 0%, transparent 58%),
                radial-gradient(ellipse 70% 50% at 6% 94%, rgba(74, 158, 255, 0.08) 0%, transparent 55%),
                radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 255, 255, 0.035) 0%, transparent 62%);
        }
        html[data-theme="light"] .login-backdrop {
            background:
                linear-gradient(160deg, #e4e8f2 0%, #f0f2f7 45%, #dce2ef 100%),
                radial-gradient(ellipse 85% 55% at 92% 8%, rgba(212, 146, 10, 0.12) 0%, transparent 58%),
                radial-gradient(ellipse 70% 50% at 6% 94%, rgba(74, 120, 200, 0.09) 0%, transparent 55%),
                radial-gradient(ellipse 50% 40% at 48% 38%, rgba(255, 255, 255, 0.7) 0%, transparent 58%);
        }
        .login-plexus {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 3;
        }
        .login-backdrop::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 4;
            background:
                radial-gradient(ellipse 120% 100% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.42) 100%);
            opacity: 0.82;
        }
        html[data-theme="light"] .login-backdrop::before {
            background:
                radial-gradient(ellipse 120% 100% at 50% 45%, transparent 42%, rgba(180, 188, 210, 0.32) 100%);
            opacity: 0.5;
        }
        .login-backdrop::after {
            content: '';
            position: absolute;
            left: 6%;
            right: 6%;
            top: 22%;
            height: 1px;
            z-index: 6;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 180, 0, 0.1) 22%,
                rgba(74, 158, 255, 0.08) 50%,
                rgba(255, 180, 0, 0.1) 78%,
                transparent 100%
            );
            opacity: 0.85;
        }
        html[data-theme="light"] .login-backdrop::after {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(180, 130, 0, 0.16) 22%,
                rgba(60, 100, 170, 0.12) 50%,
                rgba(180, 130, 0, 0.16) 78%,
                transparent 100%
            );
        }

        /* Lifecycle glow: planning → works → financial close (matches network particle hues) */
        .login-backdrop-flow {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.88;
            background:
                radial-gradient(ellipse 42% 36% at 18% 28%, rgba(255, 184, 0, 0.15) 0%, transparent 58%),
                radial-gradient(ellipse 44% 40% at 78% 62%, rgba(74, 158, 255, 0.13) 0%, transparent 55%),
                radial-gradient(ellipse 38% 34% at 52% 18%, rgba(34, 201, 126, 0.09) 0%, transparent 52%);
            animation: loginBackdropFlow 32s ease-in-out infinite;
        }
        html[data-theme="light"] .login-backdrop-flow {
            opacity: 0.92;
            background:
                radial-gradient(ellipse 42% 36% at 18% 28%, rgba(212, 146, 10, 0.14) 0%, transparent 58%),
                radial-gradient(ellipse 44% 40% at 78% 62%, rgba(60, 110, 185, 0.11) 0%, transparent 55%),
                radial-gradient(ellipse 38% 34% at 52% 18%, rgba(34, 170, 115, 0.08) 0%, transparent 52%);
        }
        @keyframes loginBackdropFlow {
            0%, 100% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
            34%      { transform: translate(5%, -4%) rotate(1.2deg) scale(1.04); }
            68%      { transform: translate(-4%, 5%) rotate(-1deg) scale(0.97); }
        }
        @media (prefers-reduced-motion: reduce) {
            .login-backdrop-flow { animation: none; }
        }

        .login-backdrop-flow-wrap {
            position: absolute;
            inset: -18%;
            z-index: 0;
            pointer-events: none;
            transform: translate(calc(var(--parallax-x) * 22px), calc(var(--parallax-y) * 16px));
            transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.36, 1);
        }
        @media (prefers-reduced-motion: reduce) {
            .login-backdrop-flow-wrap { transform: none; transition: none; }
        }

        /* Slow rotating lifecycle hue — reinforces programme → delivery → close loop */
        .login-backdrop-orbit {
            position: absolute;
            width: 165vmax;
            height: 165vmax;
            left: 50%;
            top: 42%;
            transform: translate(-50%, -50%) rotate(0deg);
            border-radius: 50%;
            opacity: 0.055;
            background: conic-gradient(
                from 220deg,
                rgba(255, 184, 0, 0.85) 0deg,
                rgba(74, 158, 255, 0.75) 120deg,
                rgba(34, 201, 126, 0.8) 240deg,
                rgba(255, 184, 0, 0.85) 360deg
            );
            animation: loginBackdropOrbit 100s linear infinite;
            pointer-events: none;
            z-index: 0;
        }
        html[data-theme="light"] .login-backdrop-orbit {
            opacity: 0.07;
        }
        @keyframes loginBackdropOrbit {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .login-backdrop-orbit { animation: none; opacity: 0.04; }
        }

        /* Occasional light sweep — suggests monitoring / active pipelines */
        .login-backdrop-shimmer {
            position: absolute;
            inset: -30% -40%;
            pointer-events: none;
            z-index: 1;
            opacity: 0;
            background: linear-gradient(
                108deg,
                transparent 38%,
                rgba(255, 255, 255, 0.055) 49.2%,
                rgba(255, 255, 255, 0.09) 50%,
                rgba(255, 255, 255, 0.055) 50.8%,
                transparent 62%
            );
            mix-blend-mode: soft-light;
            animation: loginBackdropShimmer 24s ease-in-out infinite;
        }
        html[data-theme="light"] .login-backdrop-shimmer {
            background: linear-gradient(
                108deg,
                transparent 38%,
                rgba(255, 255, 255, 0.22) 49.2%,
                rgba(255, 255, 255, 0.38) 50%,
                rgba(255, 255, 255, 0.22) 50.8%,
                transparent 62%
            );
            mix-blend-mode: overlay;
        }
        @keyframes loginBackdropShimmer {
            0%, 14%, 100% {
                opacity: 0;
                transform: translateX(-18%) skewX(-8deg);
            }
            18% { opacity: 0.55; }
            22% {
                opacity: 0.75;
                transform: translateX(18%) skewX(-8deg);
            }
            28%, 99% { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .login-backdrop-shimmer { animation: none; opacity: 0; }
        }

        /* Quiet caption for the three coloured layers (above vignette for clarity) */
        .login-backdrop-phases {
            position: absolute;
            bottom: max(20px, env(safe-area-inset-bottom, 0px));
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: clamp(10px, 2.8vw, 26px);
            z-index: 5;
            pointer-events: none;
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            opacity: 0.42;
            white-space: nowrap;
        }
        .login-backdrop-phases .phase-label {
            animation: loginPhaseFade 7s ease-in-out infinite;
        }
        .login-backdrop-phases .phase-plan {
            color: rgba(255, 190, 60, 0.95);
            animation-delay: 0s;
        }
        .login-backdrop-phases .phase-works {
            color: rgba(100, 165, 255, 0.95);
            animation-delay: 0.35s;
        }
        .login-backdrop-phases .phase-pay {
            color: rgba(80, 215, 165, 0.95);
            animation-delay: 0.7s;
        }
        .login-backdrop-phases .phase-sep {
            color: var(--text-muted);
            opacity: 0.45;
            font-size: 8px;
            letter-spacing: 0;
            animation: none;
        }
        @keyframes loginPhaseFade {
            0%, 100% { opacity: 0.65; filter: brightness(1); }
            50% { opacity: 1; filter: brightness(1.15); }
        }
        @media (prefers-reduced-motion: reduce) {
            .login-backdrop-phases .phase-label { animation: none; opacity: 0.85; }
        }
        @media (max-width: 480px) {
            .login-backdrop-phases {
                font-size: 8px;
                letter-spacing: 0.12em;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: center;
                max-width: 94vw;
                white-space: normal;
                text-align: center;
            }
            .login-backdrop-phases .phase-sep { display: none; }
        }

        /* ── SHELL (card + product context) ────────────────────────── */
        .login-shell {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: clamp(16px, 4vw, 28px);
            width: 100%;
            max-width: min(480px, 94vw);
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        .card-col { order: -1; }
        .info-panel { order: 1; }

        /* ── INFO PANEL — product context ──────────────────────────── */
        .info-panel {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            padding: 4px 0 0;
            animation: panelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes panelIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .info-panel { animation: none; }
        }

        .info-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 40px;
        }
        .info-logo-mark {
            width: 44px; height: 44px;
            background: var(--accent);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 14px var(--accent-glow);
        }
        .info-logo-mark img {
            width: 28px;
            height: 28px;
            display: block;
            filter: drop-shadow(0 0 1px rgba(45, 36, 53, 0.35));
        }
        .info-logo-mark svg { color: #0d0f14; width: 22px; height: 22px; }
        .info-logo-text {
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.02em;
        }
        .info-logo-text span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            color: var(--text-muted);
            font-family: var(--font-mono);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .info-headline {
            font-family: var(--font-display);
            font-size: clamp(28px, 3.2vw, 42px);
            font-weight: 800;
            line-height: 1.12;
            letter-spacing: -0.035em;
            color: var(--text-primary);
            margin-bottom: 18px;
            max-width: 14ch;
        }
        .info-headline em {
            font-style: normal;
            background: linear-gradient(105deg, #7c4dbd, var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .info-desc {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.7;
            max-width: 340px;
            margin-bottom: 48px;
        }

        .info-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }
        @media (max-width: 1099px) {
            .info-stats {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }
        @media (max-width: 640px) {
            .info-stats {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
            }
            .info-stat {
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
                padding: 10px 10px;
                gap: 8px;
                border-left-width: 2px;
            }
            .info-stat-icon {
                width: 30px;
                height: 30px;
            }
            .info-stat-icon svg { width: 14px; height: 14px; }
            .info-stat-label { font-size: 9px; }
            .info-stat-value { font-size: 12px; line-height: 1.25; }
        }
        .info-stat {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 18px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: var(--radius-md);
            transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
            animation: statIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .info-stat:nth-child(1) { animation-delay: 0.06s; }
        .info-stat:nth-child(2) { animation-delay: 0.13s; }
        .info-stat:nth-child(3) { animation-delay: 0.2s; }
        @keyframes statIn {
            from { opacity: 0; transform: translateX(-10px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .info-stat { animation: none; }
        }
        html[data-theme="light"] .info-stat {
            background: rgba(0,0,0,0.025);
        }
        .info-stat:hover {
            background: rgba(255,255,255,0.05);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        }
        html[data-theme="light"] .info-stat:hover {
            background: rgba(0,0,0,0.04);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }
        .info-stat-icon {
            width: 36px; height: 36px;
            background: var(--accent-dim);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--accent);
        }
        .info-stat-icon svg { width: 16px; height: 16px; }
        .info-stat-body { flex: 1; min-width: 0; }
        .info-stat-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.07em;
            font-family: var(--font-mono);
        }
        .info-stat-value {
            font-family: var(--font-display);
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.01em;
        }

        /* ── CENTER — the card column ──────────────────────────────── */
        .card-col {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            width: 100%;
            max-width: 440px;
            margin: 0 auto;
            padding: 0;
            position: relative;
            z-index: 2;
        }

        /* ── LOGIN CARD ────────────────────────────────────────────── */
        .login-card {
            background: color-mix(in srgb, var(--bg-card) 88%, transparent);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-lg);
            padding: clamp(22px, 4vw, 30px) clamp(18px, 4vw, 28px) clamp(18px, 3vw, 24px);
            box-shadow: var(--shadow-card), var(--shadow-glow);
            position: relative;
            overflow: hidden;
            animation: cardIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.08s both;
            backdrop-filter: blur(20px) saturate(1.18);
            -webkit-backdrop-filter: blur(20px) saturate(1.18);
            scroll-margin-top: calc(var(--mobile-bar-h) + 16px);
        }
        @media (prefers-reduced-motion: reduce) {
            .login-card { animation: none; }
        }
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Card top accent stripe */
        .login-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, #5c2d8a 0%, var(--accent) 55%, var(--blue) 100%);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }

        .card-header { margin-bottom: clamp(16px, 3vw, 20px); }
        .login-brand {
            display: none;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }
        .login-brand-mark {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            filter: drop-shadow(0 0 1px rgba(45, 36, 53, 0.45)) drop-shadow(0 1px 2px rgba(45, 36, 53, 0.28));
        }
        .login-brand-name {
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.03em;
        }
        .login-brand-tag { margin-top: 2px; font-size: 0.72rem; color: var(--text-muted); }
        .card-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 12px;
            background: var(--accent-dim);
            border: 1px solid rgba(255,180,0,0.2);
            border-radius: 99px;
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--accent);
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-bottom: 18px;
        }
        .card-eyebrow-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--accent);
            animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse {
            0%,100% { opacity: 1; transform: scale(1); }
            50%      { opacity: 0.5; transform: scale(0.8); }
        }

        .card-title {
            font-family: var(--font-display);
            font-size: clamp(22px, 5vw, 26px);
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--text-primary);
            line-height: 1.2;
            margin-bottom: 4px;
        }
        .card-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.45;
        }

        /* ── ALERTS ────────────────────────────────────────────────── */
        .alert {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: var(--radius-md);
            font-size: 12.5px;
            line-height: 1.45;
            margin-bottom: 14px;
            animation: alertIn 0.25s ease both;
        }
        @keyframes alertIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .alert-icon {
            flex-shrink: 0;
            margin-top: 1px;
        }
        .alert-icon svg { width: 16px; height: 16px; }
        .alert.error {
            background: var(--red-dim);
            border: 1px solid rgba(255,77,106,0.25);
            color: #ff8096;
        }
        html[data-theme="light"] .alert.error { color: #c4203a; }
        .alert.error .alert-icon { color: var(--red); }
        .alert.info {
            background: var(--green-dim);
            border: 1px solid rgba(34,201,126,0.25);
            color: #50d99a;
        }
        html[data-theme="light"] .alert.info { color: #187a50; }
        .alert.info .alert-icon { color: var(--green); }

        /* ── FORM ──────────────────────────────────────────────────── */
        .form-group {
            margin-bottom: 14px;
            position: relative;
        }
        .form-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-label);
            letter-spacing: 0.03em;
            text-transform: uppercase;
            font-family: var(--font-mono);
            margin-bottom: 6px;
        }

        .input-wrap {
            position: relative;
        }
        .input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            pointer-events: none;
            transition: color var(--transition);
        }
        .input-icon svg { width: 16px; height: 16px; display: block; }

        .form-input {
            width: 100%;
            min-height: var(--input-height);
            padding: 12px 14px 12px 42px;
            background: var(--bg-input);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 16px;
            line-height: 1.5;
            outline: none;
            transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
            appearance: none;
            -webkit-appearance: none;
        }
        .form-input--password {
            padding-right: 48px;
        }
        .form-input::placeholder { color: var(--text-muted); }
        .form-input:focus {
            background: var(--bg-input-focus);
            border-color: var(--border-focus);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }
        /* Hide native password reveal (Edge/IE) so only our eye toggle appears. */
        .form-input[type="password"]::-ms-reveal,
        .form-input[type="password"]::-ms-clear,
        .form-input.form-input--password::-ms-reveal,
        .form-input.form-input--password::-ms-clear,
        .input-wrap input[type="password"]::-ms-reveal,
        .input-wrap input[type="password"]::-ms-clear {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }
        .input-wrap:focus-within .input-icon { color: var(--accent); }

        @keyframes inputShake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        .input-wrap.shake {
            animation: inputShake 0.42s ease;
        }
        @media (prefers-reduced-motion: reduce) {
            .input-wrap.shake { animation: none; }
        }

        .input-wrap { display: flex; align-items: center; }

        /* Password toggle */
        .pw-toggle {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-muted);
            padding: 8px;
            min-width: 44px;
            min-height: 44px;
            border-radius: var(--radius-sm);
            transition: color var(--transition), background var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pw-toggle:hover {
            color: var(--text-primary);
            background: var(--border);
        }
        .pw-toggle svg { width: 16px; height: 16px; display: block; }
        .pw-toggle svg[hidden] { display: none !important; }
        .recovery-links {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
            font-size: 13px;
            color: var(--text-muted);
        }
        .recovery-links a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 4px 2px;
            border-radius: 4px;
            transition: color var(--transition), background var(--transition);
        }
        .recovery-links a:hover {
            color: var(--accent);
            text-decoration: underline;
        }

        .login-register-cta {
            margin: 14px 0 2px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--accent) 8%, transparent);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px 12px;
        }
        html[data-theme="light"] .login-register-cta {
            background: color-mix(in srgb, var(--accent) 10%, #fff);
        }
        .login-register-cta__copy {
            margin: 0;
            font-size: 13px;
            line-height: 1.4;
            color: var(--text-secondary);
            min-width: 0;
            flex: 1 1 12rem;
        }
        .login-register-cta__copy strong {
            color: var(--text-primary);
            font-weight: 700;
        }
        .login-register-cta__link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
            background: color-mix(in srgb, var(--accent) 18%, transparent);
            white-space: nowrap;
            transition: background var(--transition), border-color var(--transition), transform var(--transition);
        }
        .login-register-cta__link:hover {
            background: color-mix(in srgb, var(--accent) 28%, transparent);
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .login-register-cta__link svg {
            width: 14px;
            height: 14px;
        }

        /* ── SUBMIT BUTTON ─────────────────────────────────────────── */
        .btn-submit {
            width: 100%;
            min-height: 50px;
            padding: 13px 18px;
            background: linear-gradient(135deg, var(--accent) 0%, #ffc426 100%);
            color: #0d0f14;
            font-family: var(--font-display);
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.01em;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
            margin-top: 6px;
            box-shadow: 0 4px 16px var(--accent-glow);
        }
        .btn-submit::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 55%);
            opacity: 0;
            transition: opacity var(--transition);
        }
        .btn-submit:hover {
            filter: brightness(1.04);
            box-shadow: 0 10px 32px var(--accent-glow);
            transform: translateY(-2px);
        }
        .btn-submit:hover::before { opacity: 1; }
        .btn-submit:active { transform: translateY(0); }
        .btn-submit:disabled {
            cursor: not-allowed;
            opacity: 0.88;
            transform: none;
        }
        .btn-submit-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            z-index: 1;
        }
        .btn-submit svg { width: 17px; height: 17px; }

        a.btn-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #0d0f14;
            box-sizing: border-box;
        }
        a.btn-submit:hover,
        a.btn-submit:focus-visible {
            text-decoration: none;
            color: #0d0f14;
        }

        /* Loading state */
        .btn-submit.loading .btn-submit-inner { opacity: 0; }
        .btn-submit.loading::after {
            content: '';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0f14' stroke-width='2.5'%3E%3Ccircle cx='12' cy='12' r='10' opacity='.3'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center/20px no-repeat;
        }

        /* ── CARD FOOTER (clock + theme) ───────────────────────────── */
        .card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        .card-clock {
            display: flex;
            flex-direction: column;
            gap: 1px;
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 0.04em;
            min-width: 0;
        }
        .card-clock strong {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        /* ── THEME SWITCHER ────────────────────────────────────────── */
        .theme-strip {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 3px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 99px;
            flex-shrink: 0;
        }
        .theme-strip-label {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .theme-btn {
            width: 34px; height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: 99px;
            cursor: pointer;
            color: var(--text-muted);
            transition: background var(--transition), color var(--transition), transform var(--transition);
        }
        .theme-btn:hover { color: var(--text-primary); background: var(--border); }
        .theme-btn.active { background: var(--accent); color: #0d0f14; }
        .theme-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        .login-back-link {
            margin: 16px 0 0;
            text-align: center;
        }
        .login-back-link a {
            color: var(--text-secondary);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 650;
            padding: 9px 14px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
            box-shadow: 0 6px 18px rgba(15, 18, 28, 0.06);
            transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
        }
        .login-back-link a:hover {
            color: var(--text-primary);
            border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            transform: translateY(-1px);
        }
        .login-back-link a svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

        .info-overview-link {
            margin-top: 22px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 650;
            color: var(--text-primary);
            text-decoration: none;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: color-mix(in srgb, #fff 8%, transparent);
            transition: background var(--transition), border-color var(--transition), transform var(--transition);
        }
        html[data-theme="light"] .info-overview-link {
            background: rgba(255, 255, 255, 0.55);
        }
        .info-overview-link:hover {
            border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            transform: translateY(-1px);
        }
        .info-overview-link svg {
            width: 15px;
            height: 15px;
        }

        .sec-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
            justify-content: center;
        }
        .sec-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 99px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            font-size: 11px;
            color: var(--text-muted);
        }
        html[data-theme="light"] .sec-item { background: rgba(0,0,0,0.03); }
        .sec-item svg { width: 12px; height: 12px; color: var(--green); flex-shrink: 0; }

        .login-android {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .login-android-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px 8px 10px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.12);
            background: #1a1224;
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            font-size: 13.5px;
            line-height: 1.15;
            transition: background var(--transition), transform var(--transition);
        }
        .login-android-btn:hover {
            background: #24182f;
            transform: translateY(-1px);
        }
        .login-android-btn svg { width: 22px; height: 22px; color: #3ddc84; flex-shrink: 0; }
        .login-android-btn span { text-align: left; }
        .login-android-btn small {
            display: block;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.58);
            margin-bottom: 1px;
        }
        .login-android-note {
            margin: 0;
            font-size: 11.5px;
            color: var(--text-muted);
            text-align: center;
            line-height: 1.4;
        }

        .form-input:focus-visible,
        .btn-submit:focus-visible,
        .pw-toggle:focus-visible,
        .theme-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .card-footer .theme-strip--desktop { display: inline-flex; }

        /* ── RESPONSIVE ────────────────────────────────────────────── */
        @media (min-width: 1100px) {
            .login-canvas {
                padding: 24px 32px;
            }
            .login-shell {
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: clamp(40px, 5vw, 80px);
                max-width: min(1040px, 94vw);
            }
            .card-col { order: 0; }
            .info-panel {
                order: 0;
                flex: 1 1 340px;
                max-width: 420px;
                padding: 8px 0;
            }
            .info-logo { margin-bottom: 40px; }
            .info-desc { margin-bottom: 48px; }
            .info-stats {
                grid-template-columns: 1fr;
                gap: 14px;
            }
            .info-stat {
                flex-direction: row;
                padding: 14px 18px;
            }
            .info-stat-value { font-size: 16px; }
            .card-col {
                flex: 0 1 440px;
                max-width: 440px;
            }
            .login-brand { display: none !important; }
        }
        @media (max-width: 1099px) {
            .login-mobile-bar { display: flex; }
            .login-canvas {
                padding: calc(var(--mobile-bar-h) + max(12px, env(safe-area-inset-top, 0px))) 12px max(20px, env(safe-area-inset-bottom, 0px));
                width: 100%;
                align-items: flex-start;
                justify-content: center;
            }
            .login-shell {
                max-width: min(440px, 100%);
                gap: clamp(20px, 5vw, 28px);
            }
            .info-panel {
                padding: clamp(16px, 4vw, 22px) 2px 8px;
                border-top: 1px solid var(--border);
            }
            .info-logo { display: none; }
            .info-headline {
                font-size: clamp(20px, 5.2vw, 26px);
                margin-bottom: 10px;
                text-align: center;
            }
            .info-desc {
                margin-bottom: 16px;
                max-width: none;
                text-align: center;
                font-size: 14px;
            }
            .card-col {
                padding: 0;
                width: 100%;
                max-width: 440px;
                margin: 0 auto;
            }
            .card-footer .theme-strip--desktop { display: none; }
            .card-eyebrow { display: none; }
        }
        @media (max-width: 720px) {
            .info-headline,
            .info-desc {
                display: none;
            }
            .info-panel {
                padding-top: 4px;
            }
        }
        @media (max-width: 520px) {
            .login-canvas { padding-left: 10px; padding-right: 10px; }
            .login-card { border-radius: var(--radius-md); }
            .card-col { max-width: 100%; }
            .info-headline { font-size: clamp(22px, 6.5vw, 28px); margin-bottom: 14px; }
            .info-desc { font-size: 14px; margin-bottom: 18px; }
            .card-footer {
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
            }
            .card-clock { flex: 1 1 auto; }
            .sec-strip { gap: 6px; }
            .sec-item { font-size: 10px; padding: 4px 8px; }
        }
        @media (max-width: 380px) {
            .info-stats {
                grid-template-columns: 1fr;
            }
            .info-stat {
                flex-direction: row;
                align-items: center;
            }
            .info-stat-value { font-size: 13px; }
        }
        @media (max-height: 520px) and (orientation: landscape) {
            .login-canvas {
                align-items: flex-start;
                padding-top: calc(var(--mobile-bar-h) + 8px);
            }
            .login-shell { gap: 12px; }
            .info-panel { display: none; }
            .login-card { padding: 16px 18px 14px; }
            .card-header { margin-bottom: 12px; }
            .form-group { margin-bottom: 10px; }
            .login-backdrop-phases { display: none; }
        }
        @media (hover: none) and (pointer: coarse) {
            .info-stat:hover {
                transform: none;
                box-shadow: none;
            }
            .btn-submit:hover {
                transform: none;
            }
        }

/* ── Register form — modern layout (scoped) ───────────────────────── */
.login-card.login-card--register {
  max-width: none;
  padding: clamp(24px, 3.5vw, 34px) clamp(20px, 3.5vw, 32px) clamp(16px, 2.5vw, 22px);
}
@media (min-width: 1100px) {
  .card-col.card-col--register { flex: 0 1 580px; max-width: 580px; }
}

.login-card--register .card-header { margin-bottom: 6px; }
.login-card--register .card-eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
}
.login-card--register .card-title {
  font-size: clamp(1.45rem, 2.4vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 10px;
}
.login-card--register .card-subtitle {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 36em;
}

/* Progress — connected numbered steps */
.reg-progress {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin: 18px 0 22px;
  padding: 0;
  counter-reset: none;
}
.reg-progress__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}
.reg-progress__item span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-muted);
  z-index: 1;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.reg-progress__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  background: var(--border);
  border-radius: 2px;
}
.reg-progress__item.is-current {
  color: var(--text-primary);
}
.reg-progress__item.is-current span {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.reg-progress__item.is-current:not(:last-child)::after {
  background: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* Soft section panels */
.reg-form { display: flex; flex-direction: column; gap: 16px; }
.reg-panel {
  margin: 0;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-input) 55%, transparent);
}
html[data-theme="light"] .reg-panel {
  background: color-mix(in srgb, #f7f8fc 88%, var(--accent-dim));
  border-color: rgba(0, 0, 0, 0.06);
}
.reg-panel__head { margin-bottom: 14px; }
.reg-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.reg-panel__lede {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.reg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.reg-grid .form-group {
  margin-bottom: 0;
}
.reg-grid .form-group--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .reg-grid { grid-template-columns: 1fr; }
  .reg-progress__item { font-size: 11px; }
}

/* Sentence-case labels + softer fields on register only */
.login-card--register .form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.login-card--register .reg-optional {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}
.login-card--register .form-input,
.login-card--register .form-select {
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
  background-color: color-mix(in srgb, var(--bg-card) 70%, var(--bg-input));
  min-height: 46px;
  font-size: 15px;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
html[data-theme="light"] .login-card--register .form-input,
html[data-theme="light"] .login-card--register .form-select {
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}
.login-card--register .form-input:hover,
.login-card--register .form-select:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
}
.login-card--register .form-input:focus,
.login-card--register .form-select:focus {
  border-color: var(--border-focus);
  background-color: var(--bg-input-focus);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.login-card--register .input-icon { opacity: 0.72; }
.login-card--register .input-wrap:focus-within .input-icon { opacity: 1; }

.form-select {
  width: 100%;
  min-height: var(--input-height);
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 14.5px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8fa8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-select:focus {
  outline: none;
  border-color: var(--border-focus);
  background-color: var(--bg-input-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.form-hint.is-ok { color: var(--green); }
.form-hint.is-bad { color: var(--red); }
.form-hint.is-wait { color: var(--text-muted); }
.form-input.is-avail-ok {
  border-color: color-mix(in srgb, var(--green) 55%, var(--border-strong));
}
.form-input.is-avail-ok:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}
.form-input.is-avail-bad {
  border-color: color-mix(in srgb, var(--red) 55%, var(--border-strong));
}
.form-input.is-avail-bad:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-dim);
}
.input-wrap.is-avail-ok .input-icon { color: var(--green); }
.input-wrap.is-avail-bad .input-icon { color: var(--red); }

.login-card--register .form-group.has-error .form-label {
  color: var(--red);
}
.login-card--register .form-input.is-invalid,
.login-card--register .form-select.is-invalid {
  border-color: color-mix(in srgb, var(--red) 65%, var(--border-strong));
  background-color: color-mix(in srgb, var(--red-dim) 55%, var(--bg-input));
  box-shadow: 0 0 0 4px var(--red-dim);
}
html[data-theme="light"] .login-card--register .form-input.is-invalid,
html[data-theme="light"] .login-card--register .form-select.is-invalid {
  background-color: color-mix(in srgb, var(--red-dim) 35%, #fff);
}
.login-card--register .form-input.is-invalid:focus,
.login-card--register .form-select.is-invalid:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-dim);
}
.login-card--register .input-wrap.is-invalid .input-icon {
  color: var(--red);
  opacity: 1;
}

/* CTA + sign-in */
.reg-submit {
  margin-top: 4px;
  border-radius: 14px;
  min-height: 52px;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #f0a500 0%, #ffc53d 48%, #ffd56a 100%);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}
html[data-theme="light"] .reg-submit {
  background: linear-gradient(135deg, #e09800 0%, #f5b820 55%, #ffc84a 100%);
}
.reg-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 36%, transparent);
}
.reg-signin-line {
  margin: 2px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}
.reg-signin-line a {
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
  margin-left: 4px;
}
.reg-signin-line a:hover { text-decoration: underline; }

/* Quieter footer on register */
.login-card--register .card-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.login-card--register .card-clock { display: none; }
.login-card--register .theme-strip-label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  opacity: 0.85;
}
.login-card--register .sec-strip {
  margin-top: 10px;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.login-card--register .sec-item {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
}
.login-card--register .sec-item svg {
  opacity: 0.75;
}

.reg-success { text-align: center; padding: 18px 8px 8px; }
.reg-success h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.reg-success p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.reg-success__cta {
  width: auto;
  min-width: 12rem;
  margin: 4px auto 0;
  padding-left: 22px;
  padding-right: 22px;
}
.reg-success__cta::before {
  pointer-events: none;
}
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .reg-submit:hover { transform: none; }
}