/* VetSpa Auth UI */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, #275c45 0%, #275c45 100%);
    display: flex; align-items: center; justify-content: center;
    color: #1f2937;
}
.auth-wrap { width: 100%; max-width: 420px; padding: 16px; }
.auth-card {
    background: #fff; border-radius: 16px; padding: 32px 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}
.brand   { font-size: 28px; margin: 0 0 4px; text-align: center; }
.brand-logo { max-height: 60px; display: block; margin: 0 auto 8px; }
.brand-sub { text-align: center; color: #6b7280; margin: 0 0 24px; font-size: 14px; }

.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #e5e7eb; }
.tab {
    flex: 1; padding: 10px; background: none; border: none; cursor: pointer;
    font-size: 14px; color: #6b7280; border-bottom: 2px solid transparent;
    transition: .2s;
}
.tab.active { color: #109b3e; border-bottom-color: #07bb10; font-weight: 600; }

.form { display: none; flex-direction: column; gap: 14px; }
.form.active { display: flex; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #374151; }
.form input {
    padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; transition: .15s;
}
.form input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.15); }

.btn {
    padding: 12px; border: none; border-radius: 8px; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: .15s;
}
.btn.primary { background: #107c10; color: #fff; }
.btn.primary:hover:not(:disabled) { background: #096b09; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.hint { font-size: 12px; color: #6b7280; text-align: center; margin: 0; }
.hint code { background: #f3f4f6; padding: 1px 6px; border-radius: 4px; font-size: 11px; }

.alert {
    padding: 10px 12px; border-radius: 8px; font-size: 13px;
    margin-bottom: 12px;
}
.alert.error  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert.ok     { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

@media (max-width: 480px) {
    .auth-wrap { margin: 20px 10px; }
    .auth-card { padding: 16px; }
    .auth-tabs button { font-size: 13px; padding: 8px 12px; }
}