/* ============================================================
   MyAdvisers Premium Auth UI — Editor Compatible Edition
   ============================================================ */

:root {
    --mya-bg: #ffffff;
    --mya-card-bg: #ffffff;
    --mya-text: #1a1a1a;
    --mya-text-light: #555;
    --mya-primary: #4a77ff;
    --mya-primary-hover: #3d61d6;
    --mya-border: #e2e2e2;
    --mya-muted-bg: #f7f8fc;

    --mya-info-bg: #e6efff;
    --mya-success-bg: #e7f9ee;
    --mya-error-bg: #ffe6e6;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --mya-bg: #0e1117;
        --mya-card-bg: #1a1f27;
        --mya-text: #e8e8e8;
        --mya-text-light: #aaaaaa;
        --mya-primary: #538dff;
        --mya-primary-hover: #4172d1;
        --mya-border: #2a2f38;
        --mya-muted-bg: #1f242d;

        --mya-info-bg: #10243f;
        --mya-success-bg: #0f2d18;
        --mya-error-bg: #3a0f0f;
    }
}

/* BODY */
body {
    background: #ffffff;
    background: var(--mya-bg);

    color: #1a1a1a;
    color: var(--mya-text);

    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
}

/* CARD */
.mya-auth-card {
    width: 94%;
    max-width: 420px;
    margin: 60px auto;
    padding: 30px 34px;

    background: #ffffff;
    background: var(--mya-card-bg);

    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.mya-auth-card h2 {
    color: #1a1a1a;
    color: var(--mya-text);

    text-align: center;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
}

/* FORM */
.mya-form p {
    margin-bottom: 20px;
}

.mya-form label {
    color: #555;
    color: var(--mya-text-light);

    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Inputs */
.mya-form input[type="text"],
.mya-form input[type="password"],
.mya-form input[type="email"],
.mya-form input[type="tel"],
.mya-form input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;

    background: #f7f8fc;
    background: var(--mya-muted-bg);

    color: #1a1a1a;
    color: var(--mya-text);

    border: 1px solid #e2e2e2;
    border: 1px solid var(--mya-border);

    border-radius: 8px;
    transition: 0.25s;
}

.mya-form input:focus {
    background: #ffffff;
    background: var(--mya-card-bg);

    border-color: #4a77ff;
    border-color: var(--mya-primary);

    box-shadow: 0 0 0 3px rgba(74,119,255,0.25);
    outline: none;
}

/* Buttons */
.mya-btn {
    color: #ffffff;
    color: #fff;

    background: #4a77ff;
    background: var(--mya-primary);

    border: none;
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.25s;
}

.mya-btn:hover {
    background: #3d61d6;
    background: var(--mya-primary-hover);
}

.mya-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alerts */
.mya-alert {
    padding: 13px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
}

.mya-alert-info {
    background: #e6efff;
    background: var(--mya-info-bg);

    color: #4a77ff;
    color: var(--mya-primary);
}

.mya-alert-success {
    background: #e7f9ee;
    background: var(--mya-success-bg);

    color: #0f8a2d;
}

.mya-alert-error {
    background: #ffe6e6;
    background: var(--mya-error-bg);

    color: #c62828;
}

/* Links */
.mya-auth-card a {
    color: #4a77ff;
    color: var(--mya-primary);

    text-decoration: none;
    font-weight: 500;
}

.mya-auth-card a:hover {
    text-decoration: underline;
}

/* Responsiveness */
@media (max-width: 460px) {
    .mya-auth-card {
        margin: 30px 14px;
        padding: 22px 20px;
    }

    .mya-auth-card h2 {
        font-size: 24px;
    }

    .mya-btn {
        font-size: 15px;
        padding: 12px 15px;
    }
}