/* Shared auth styles for register/login */
.joy-register {
    min-height: 100vh;
    position: relative;
    padding: 32px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(1200px 600px at -10% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent),
        radial-gradient(1000px 500px at 110% 100%, color-mix(in srgb, var(--sun) 22%, transparent), transparent),
        var(--bg-soft);
    color: var(--text-primary);
}
.joy-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .joy-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Override Jetstream card container */
.joy-register .bg-gray-100 { background: transparent !important; }
.joy-register .min-h-screen { min-height: auto !important; }
.joy-register .pt-6 { padding-top: 0 !important; }
.joy-register .bg-white.shadow-md {
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow-brand);
    border: 1px solid var(--surface-border);
}

/* Headings */
.joy-title {
    margin: 6px 0 2px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--brand);
    text-align: center;
}

.joy-subtitle {
    margin: 0 0 18px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Illustration side */
.joy-illustration { display: none; text-align: center; }
@media (min-width: 1024px) { .joy-illustration { display: block; } }
.joy-illustration img { max-width: 520px; width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.15)); }
.joy-illustration h2 { margin-top: 16px; font-weight: 800; color: var(--brand); }
.joy-illustration ul { list-style: none; padding: 0; margin: 8px 0 0; color: var(--text-secondary); }
.joy-illustration li { margin: 6px 0; }

/* Inputs */
.joy-register input[type="text"],
.joy-register input[type="email"],
.joy-register input[type="password"] {
    border: 2px solid var(--surface-border);
    border-radius: 14px;
    padding: 10px 14px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    background: var(--surface);
    color: var(--text-primary);
}
.joy-register input[type="text"]:focus,
.joy-register input[type="email"]:focus,
.joy-register input[type="password"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--ring-brand);
}
.joy-register input[type="text"],
.joy-register input[type="email"],
.joy-register input[type="password"] { background-color: var(--surface) !important; }
.joy-register input[type="text"]::placeholder,
.joy-register input[type="email"]::placeholder,
.joy-register input[type="password"]::placeholder { color: var(--text-muted); }
.joy-register input[type="text"]:-webkit-autofill,
.joy-register input[type="email"]:-webkit-autofill,
.joy-register input[type="password"]:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0 1000px var(--surface) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* Labels */
.joy-register label { font-weight: 600; color: var(--text-primary); }

/* Links */
.joy-register a { color: var(--brand); }
.joy-register a:hover { color: var(--accent); }

/* Primary button */
.joy-primary-btn {
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    color: var(--brand-contrast) !important;
    border-radius: 24px !important;
    padding: 10px 18px !important;
    border: none !important;
    box-shadow: var(--shadow-brand);
    transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.joy-primary-btn:hover { box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.joy-primary-btn:active { transform: translateY(1px); }

/* Checkbox accent */
.joy-register input[type="checkbox"] { accent-color: var(--brand); }

/* Show/Hide password button */
.joy-eye { position: absolute; right: 10px; top: 38px; background: transparent; border: 0; cursor: pointer; font-size: 18px; color: var(--neutral-600); }
.joy-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

/* Strength meter (used on register) */
.joy-strength { margin-top: 6px; font-size: 0.85rem; font-weight: 600; }
.joy-strength[data-score="0"] { color: var(--text-muted); }
.joy-strength[data-score="1"] { color: var(--accent-hover); }
.joy-strength[data-score="2"] { color: var(--accent); }
.joy-strength[data-score="3"] { color: var(--brand); }