/* Page CSS: the inline <style> of inputs/live-2026-10-25/pages/register.html */

   :root {
            --navy-dark:  #0B1F3F;
            --navy:       #1C5CAA;
            --navy-hover: #1749A0;
            --navy-50:    #EFF6FF;
            --navy-100:   #DBEAFE;
            --slate-50:   #F8FAFC;
            --slate-100:  #F1F5F9;
            --slate-200:  #E2E8F0;
            --slate-300:  #CBD5E1;
            --slate-400:  #94A3B8;
            --slate-500:  #64748B;
            --slate-600:  #475569;
            --slate-700:  #334155;
            --red:        #DC2626;
            --green:      #10B981;
            --radius:     6px;
            --radius-lg:  12px;
            --shadow-card: 0 2px 20px rgba(11,31,63,0.08);
            --shadow-focus: 0 0 0 3px rgba(28,92,170,0.15);
            --t: all 0.2s ease;
        }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--slate-50);
            color: var(--navy-dark);
            line-height: 1.5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ─── MAIN ────────────────────────────────── */
        main {
            flex: 1; display: flex; justify-content: center;
            padding: 0.25rem 2rem 3rem;
        }

        .register-card {
            background: white; border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card); border: 1px solid var(--slate-200);
            padding: 2.25rem 2.25rem 2rem;
            width: 100%; max-width: 500px;
        }

        /* Card header */
        .card-header { text-align: center; margin-bottom: 1.75rem; }
        .card-icon {
            width: 52px; height: 52px; background: var(--navy-50); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1rem; color: var(--navy); font-size: 1.375rem;
        }
        .card-title {
            font-size: 1.5rem; font-weight: 700; color: var(--navy-dark);
            letter-spacing: -0.02em; margin-bottom: 0.375rem;
        }
        .card-desc { font-size: 0.875rem; color: var(--slate-500); }

        /* Alert */
        .alert {
            padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem;
            font-size: 0.875rem; gap: 0.625rem; align-items: flex-start; border: 1px solid;
        }
        .alert.show { display: flex; animation: slideDown 0.25s ease-out; }
        .alert-error { background: #FEF2F2; border-color: #FEE2E2; color: #991B1B; }
        .alert-error i { color: var(--red); margin-top: 1px; flex-shrink: 0; }
        .alert-success { background: #ECFDF5; border-color: #D1FAE5; color: #065F46; }
        .alert-success i { color: var(--green); margin-top: 1px; flex-shrink: 0; }
        @keyframes  slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

        /* Google SSO */
        .btn-google {
            width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.75rem;
            padding: 0.6875rem 1rem; background: white; border: 1.5px solid var(--slate-200);
            border-radius: var(--radius); font-size: 0.9375rem; font-weight: 500; color: var(--slate-700);
            cursor: pointer; transition: var(--t); font-family: inherit;
            height: unset;
            margin-left: 0;
            margin-right: 0;
        }
        .btn-google:hover { background: var(--slate-50); border-color: var(--slate-300); box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
        .google-logo { width: 18px; height: 18px; flex-shrink: 0; }

        /* Divider */
        .divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; }
        .divider-line { flex: 1; height: 1px; background: var(--slate-200); }
        .divider-text { font-size: 0.75rem; color: var(--slate-400); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

        /* Form grid */
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
        .form-grid .form-group { grid-column: span 1; }
        .form-grid .form-group.full { grid-column: span 2; }

        .form-group { margin-bottom: 1rem; }
        .form-label {
            display: flex; gap: 5px; align-items: center;
            font-weight: 500; color: var(--slate-700); font-size: 0.875rem; margin-bottom: 0.375rem;
        }
        .form-label .required { color: var(--red); margin-left: 0; }

        .input-wrapper { position: relative; }
        .input-icon {
            position: absolute; left: 0.875rem; top: 50%;
            transform: translateY(-50%);
            color: var(--slate-400); font-size: 0.8125rem; pointer-events: none;
        }
        /* Success checkmark inside input */
        .input-check {
            position: absolute; right: 0.875rem; top: 50%;
            transform: translateY(-50%);
            color: var(--green); font-size: 0.8125rem; display: none;
        }
        .toggle-password {
            position: absolute; right: 0.875rem; top: 50%;
            transform: translateY(-50%);
            color: var(--slate-400); cursor: pointer; font-size: 0.8125rem; transition: color 0.2s;
        }
        .toggle-password:hover { color: var(--navy); }

        .form-input {
            width: 100%; padding: 0.6875rem 1rem 0.6875rem 2.5rem;
            border: 1.5px solid var(--slate-200); border-radius: var(--radius);
            font-size: 0.9375rem; font-family: inherit; color: var(--navy-dark);
            background: white; transition: var(--t);
        }
        .form-input.has-right-icon { padding-right: 2.5rem; }
        .form-input::placeholder { color: var(--slate-400); }
        .form-input:focus { outline: none; border-color: var(--navy); box-shadow: var(--shadow-focus); }
        .form-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,0.08); }
        .form-input.valid { border-color: var(--green); }

        /* Select */
        .form-select {
            width: 100%; padding: 0.6875rem 2.5rem 0.6875rem 2.5rem;
            border: 1.5px solid var(--slate-200); border-radius: var(--radius);
            font-size: 0.9375rem; font-family: inherit; color: var(--navy-dark);
            background: white; cursor: pointer; transition: var(--t);
            appearance: none; -webkit-appearance: none;
        }
        .form-select:focus { outline: none; border-color: var(--navy); box-shadow: var(--shadow-focus); }
        .select-arrow {
            position: absolute; right: 0.875rem; top: 50%;
            transform: translateY(-50%);
            color: var(--slate-400); font-size: 0.75rem; pointer-events: none;
        }

        /* Password strength */
        .pw-strength { margin-top: 0.5rem; }
        .pw-strength-bar {
            display: flex; gap: 4px; margin-bottom: 0.3125rem;
        }
        .pw-bar-seg {
            flex: 1; height: 3px; border-radius: 2px;
            background: var(--slate-200); transition: background 0.3s;
        }
        .pw-bar-seg.weak   { background: #EF4444; }
        .pw-bar-seg.medium { background: #F59E0B; }
        .pw-bar-seg.strong { background: var(--green); }
        .pw-strength-text { font-size: 0.75rem; color: var(--slate-400); }
        .pw-strength-text.weak   { color: #EF4444; }
        .pw-strength-text.medium { color: #F59E0B; }
        .pw-strength-text.strong { color: var(--green); }

        /* Field hint */
        .field-hint { font-size: 0.75rem; color: var(--slate-400); margin-top: 0.3125rem; }
        .field-error { font-size: 0.75rem; color: var(--red); margin-top: 0.3125rem; display: none; }
        .field-error.show { display: block; }

        .required-note {
            font-size: 0.8125rem;
            color: var(--slate-500);
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        .required-note .required {
            font-size: 0.875rem;
        }

        /* Terms checkbox */
        .terms-row {
            display: flex; align-items: flex-start; gap: 0.625rem;
            margin: 1rem 0 1.25rem; padding: 0.875rem 1rem;
            background: var(--slate-50); border-radius: var(--radius);
            border: 1px solid var(--slate-200);
        }
        .terms-row.error-border { border-color: var(--red); }
        .checkbox-custom {
            appearance: none; -webkit-appearance: none;
            width: 18px; height: 18px; min-width: 18px;
            border: 1.5px solid var(--slate-300); border-radius: 4px;
            cursor: pointer; transition: var(--t);
            display: grid; place-items: center; margin-top: 1px;
        }
        .checkbox-custom:checked { background: var(--navy); border-color: var(--navy); }
        .checkbox-custom:checked::after {
            content: '';
            width: 9px; height: 5px;
            border-left: 2px solid white; border-bottom: 2px solid white;
            transform: rotate(-45deg) translateY(-1px);
        }
        .terms-text {
            font-size: 0.8125rem; color: var(--slate-600); line-height: 1.6; cursor: pointer;
        }
        .terms-text a { color: var(--navy); text-decoration: none; font-weight: 500; }
        .terms-text a:hover { text-decoration: underline; }

        /* reCAPTCHA placeholder */
        .recaptcha-wrap {
            margin-bottom: 1.25rem;
            padding: 0.75rem 1rem;
            border: 1.5px solid var(--slate-200); border-radius: var(--radius);
            display: flex; align-items: center; justify-content: space-between;
            background: var(--slate-50);
        }
        .recaptcha-left { display: flex; align-items: center; gap: 0.75rem; }
        .recaptcha-box {
            width: 24px; height: 24px; border: 2px solid var(--slate-300); border-radius: 4px;
            cursor: pointer; display: grid; place-items: center; transition: var(--t);
        }
        .recaptcha-box.checked { border-color: var(--green); background: var(--green); }
        .recaptcha-box.checked::after { content: '✓'; color: white; font-size: 0.875rem; font-weight: 700; }
        .recaptcha-label { font-size: 0.875rem; color: var(--slate-700); cursor: pointer; }
        .recaptcha-badge { text-align: center; }
        .recaptcha-badge svg { width: 32px; height: 32px; display: block; margin: 0 auto 2px; }
        .recaptcha-badge-text { font-size: 0.5625rem; color: var(--slate-400); }

        /* Submit */
        .btn-submit {
            width: 100%; padding: 0.8125rem;
            background: var(--navy); color: white; border: none;
            border-radius: var(--radius); font-size: 0.9375rem; font-weight: 600;
            font-family: inherit; cursor: pointer; transition: var(--t);
            display: flex; align-items: center; justify-content: center; gap: 0.5rem;
            letter-spacing: 0.02em;
        }
        .btn-submit:hover:not(:disabled) {
            background: var(--navy-hover); box-shadow: 0 4px 14px rgba(28,92,170,0.3);
        }
        .btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }
        .spinner {
            display: none; width: 17px; height: 17px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white; border-radius: 50%;
            animation: spin 0.65s linear infinite;
        }
        .btn-submit.loading .spinner { display: block; }
        @keyframes  spin { to { transform: rotate(360deg); } }

        /* Login redirect */
        .login-link { text-align: center; margin-top: 1.25rem; font-size: 0.875rem; color: var(--slate-500); }
        .login-link a { color: var(--navy); font-weight: 600; text-decoration: none; }
        .login-link a:hover { text-decoration: underline; }

        /* ─── SUCCESS SCREEN ─────────────────────────── */
        .success-card { padding: 3rem 2.25rem 2.5rem; }

        .success-icon-wrap {
            position: relative; width: 88px; height: 88px;
            margin: 0 auto 1.75rem;
        }
        .success-icon-circle {
            width: 88px; height: 88px;
            background: linear-gradient(135deg, var(--navy-50) 0%, var(--navy-100) 100%);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--navy); font-size: 2rem;
            position: relative; z-index: 1;
            animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        .success-ripple {
            position: absolute; top: 0; left: 0;
            width: 88px; height: 88px; border-radius: 50%;
            border: 2px solid var(--navy); opacity: 0;
            animation: ripple 1.8s ease-out 0.4s infinite;
        }
        @keyframes  popIn {
            from { opacity:0; transform:scale(0.5); }
            to   { opacity:1; transform:scale(1); }
        }
        @keyframes  ripple {
            from { transform:scale(1); opacity:0.4; }
            to   { transform:scale(1.7); opacity:0; }
        }

        .success-title {
            font-size: 1.5rem; font-weight: 700; color: var(--navy-dark);
            letter-spacing: -0.02em; margin-bottom: 0.625rem;
        }
        .success-desc {
            font-size: 0.9375rem; color: var(--slate-600); margin-bottom: 0.75rem; line-height: 1.6;
        }
        .success-email-box {
            display: inline-flex; align-items: center; gap: 0.5rem;
            background: var(--navy-50); border: 1px solid var(--navy-100);
            border-radius: var(--radius); padding: 0.5rem 1.25rem;
            font-size: 0.9375rem; font-weight: 600; color: var(--navy);
            margin-bottom: 1.25rem;
        }
        .success-hint {
            font-size: 0.8125rem; color: var(--slate-500); line-height: 1.7;
            margin-bottom: 1.75rem; padding: 0.875rem 1rem;
            background: var(--slate-50); border-radius: var(--radius);
            border: 1px solid var(--slate-200);
        }
        .success-hint strong { color: var(--slate-700); }

        .success-actions {
            display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.25rem;
        }
        .btn-success-primary {
            display: flex; align-items: center; justify-content: center; gap: 0.5rem;
            padding: 0.8125rem; background: var(--navy); color: white;
            border: none; border-radius: var(--radius); font-size: 0.9375rem;
            font-weight: 600; font-family: inherit; cursor: pointer;
            text-decoration: none; transition: var(--t);
        }
        .btn-success-primary:hover { background: var(--navy-hover); box-shadow: 0 4px 14px rgba(28,92,170,0.3); }
        .btn-success-secondary {
            display: flex; align-items: center; justify-content: center; gap: 0.5rem;
            padding: 0.75rem; background: white; color: var(--navy);
            border: 1.5px solid var(--navy); border-radius: var(--radius);
            font-size: 0.9375rem; font-weight: 500; font-family: inherit;
            cursor: pointer; transition: var(--t);
        }
        .btn-success-secondary:hover { background: var(--navy-50); }
        .btn-success-secondary:disabled { opacity:0.55; cursor:not-allowed; }


        /* ─── RESPONSIVE ──────────────────────────── */
        @media (max-width: 1024px) {
            .nav-left, .nav-pills { display: none; }
            .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem; }
        }
        @media (max-width: 640px) {
            .top-bar-left { display: none; }
            main { padding: 1rem 1rem 2.5rem; }
            .register-card { padding: 1.75rem 1.25rem 1.5rem; }
            .form-grid { grid-template-columns: 1fr; }
            .form-grid .form-group.full { grid-column: span 1; }
            .breadcrumb-wrap { padding: 0.75rem 1rem; }
            .header-content, .footer-content { padding-left: 1rem; padding-right: 1rem; }
        }


        .alter-error-2026 ul {
            padding-left: 16px;
            list-style: none;
            padding-top: 10px;
        }