/* =========================================================
   meelo Auth – Login · Registrierung · Passwort
   ========================================================= */
.meelo-auth-wrap {
    min-height: 85vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 16px; background: var(--ms-bg); font-family: var(--ms-font);
}
.meelo-auth-card {
    background: var(--ms-surface); border-radius: var(--ms-radius-xl);
    padding: 36px 40px; width: 100%; max-width: 420px;
    box-shadow: var(--ms-shadow-xl); border: 1px solid var(--ms-border);
}
.meelo-auth-card.wide { max-width: 620px; }

/* Logo */
.meelo-auth-logo { text-align: center; margin-bottom: 20px; }
.meelo-auth-title { font-family: var(--ms-font-serif); font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 6px; color: var(--ms-text); }
.meelo-auth-sub   { text-align: center; color: var(--ms-muted); font-size: 15px; margin-bottom: 28px; }

/* Formular */
.meelo-auth-form { display: flex; flex-direction: column; gap: 16px; }
.meelo-field-group { display: flex; flex-direction: column; gap: 6px; }
.meelo-field-group label { font-size: 13px; font-weight: 700; color: var(--ms-text); display: flex; justify-content: space-between; align-items: center; }
.meelo-field-link { font-weight: 600; color: var(--ms-primary); text-decoration: none; font-size: 12px; }
.meelo-field-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.meelo-field-group input,
.meelo-field-group select {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--ms-border);
    border-radius: var(--ms-radius-sm); font-size: 14px; font-family: var(--ms-font);
    color: var(--ms-text); background: var(--ms-surface); transition: border-color var(--ms-transition);
}
.meelo-field-group input:focus,
.meelo-field-group select:focus { outline: none; border-color: var(--ms-primary); box-shadow: 0 0 0 3px rgba(var(--ms-primary-rgb),.07); }

/* Passwort */
.meelo-pass-wrap { position: relative; }
.meelo-pass-wrap input { padding-right: 44px; }
.meelo-toggle-pass { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; padding: 0; }

/* Passwort-Stärke */
.meelo-pass-strength { height: 4px; border-radius: 2px; margin-top: 6px; background: var(--ms-border); transition: all .2s; }
.meelo-pass-strength[data-strength="1"] { background: #ef4444; width: 25%; }
.meelo-pass-strength[data-strength="2"] { background: #f59e0b; width: 50%; }
.meelo-pass-strength[data-strength="3"] { background: #3b82f6; width: 75%; }
.meelo-pass-strength[data-strength="4"] { background: #10b981; width: 100%; }

/* Rolle-Picker */
.meelo-role-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }
.meelo-role-card {
    border: 2px solid var(--ms-border); border-radius: var(--ms-radius); padding: 14px 10px;
    text-align: center; cursor: pointer; transition: all var(--ms-transition);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.meelo-role-card input { display: none; }
.meelo-role-card:hover { border-color: var(--ms-primary); }
.meelo-role-card.active { border-color: var(--ms-primary); background: rgba(var(--ms-primary-rgb),.06); }
.role-icon { font-size: 26px; }
.role-name { font-size: 13px; font-weight: 800; color: var(--ms-text); }
.role-desc { font-size: 11px; color: var(--ms-muted); line-height: 1.4; }

/* Checkbox */
.meelo-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ms-text-2); cursor: pointer; }
.meelo-checkbox-row input { margin-top: 2px; accent-color: var(--ms-primary); width: 15px; height: 15px; flex-shrink: 0; }
.meelo-checkbox-row a { color: var(--ms-primary); }

/* Submit */
.meelo-auth-btn {
    width: 100%; padding: 13px; border: none; border-radius: var(--ms-radius-sm);
    background: var(--ms-primary); color: #fff; font-size: 15px; font-weight: 800;
    cursor: pointer; font-family: var(--ms-font); transition: all var(--ms-transition);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.meelo-auth-btn:hover { filter: brightness(.88); transform: translateY(-1px); }

/* Messages */
.meelo-form-msg { font-size: 13.5px; font-weight: 700; text-align: center; min-height: 18px; }
.meelo-auth-notice { padding: 11px 14px; border-radius: var(--ms-radius-sm); font-size: 13px; margin-bottom: 14px; }
.meelo-auth-notice.info { background: #dbeafe; color: #1e40af; }

/* Footer */
.meelo-auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--ms-muted); }
.meelo-auth-footer a { color: var(--ms-primary); font-weight: 700; text-decoration: none; }

/* Spinner */
.btn-spinner { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .meelo-auth-card { padding: 28px 20px; }
    .meelo-field-row { grid-template-columns: 1fr; }
    .meelo-role-picker { grid-template-columns: 1fr; }
}