body {
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
}

.card {
    background: #fff; width: 100%; max-width: 400px;
    border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    overflow: hidden;
}
.card-header {
    background: var(--teal); padding: 28px 28px 22px; text-align: center;
}
.card-header .logo { font-size: 42px; margin-bottom: 6px; }
.card-header h1    { color: white; font-size: 22px; font-weight: 700; }
.card-header p     { color: rgba(255,255,255,0.75); font-size: 13px; margin-top: 3px; }

.tabs { display: flex; border-bottom: 1px solid var(--border); background: #fafafa; }
.tab-btn {
    flex: 1; padding: 13px; border: none; background: none;
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--text-sub); cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }

.form-body { padding: 24px 28px 28px; }

.input-group { margin-bottom: 14px; }
.input-group label {
    display: block; font-size: 12px; font-weight: 700;
    color: var(--text-sub); margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.input-group input {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 14px; font-family: inherit; outline: none;
    color: var(--text-main); background: var(--input-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(7,94,84,0.1);
    background: #fff;
}

.submit-btn {
    width: 100%; padding: 13px; margin-top: 6px;
    background: var(--teal); color: white; border: none;
    border-radius: 10px; font-size: 15px; font-weight: 700;
    font-family: inherit; cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.submit-btn:hover  { background: var(--green-dark); }
.submit-btn:active { transform: scale(0.98); }
.submit-btn:disabled { background: #9fa8a3; cursor: not-allowed; }

.msg-box {
    margin-top: 12px; padding: 10px 14px;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    text-align: center; display: none;
}
.msg-box.error   { background: #fdecea; color: #c62828; }
.msg-box.success { background: #e8f5e9; color: #2e7d32; }

@media (max-width: 480px) {
    body { align-items: flex-start; }
    .card { border-radius: 0; min-height: 100dvh; max-width: 100%; }
}