:root {
    --brand: #8b007f;
    --brand-dark: #6f0066;
    --ok: #1e7e34;
    --ok-bg: #e6f4ea;
    --warn: #e65100;
    --warn-bg: #fff8e1;
    --fail: #b71c1c;
    --fail-bg: #fdecea;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #f6f6f8;
    color: #222;
}

.topbar {
    background: var(--brand);
    color: white;
    font-size: 28px;
    font-weight: 800;
    padding: 16px 24px;
    border-bottom: 4px solid var(--brand-dark);
    letter-spacing: 1px;
}

.container {
    max-width: 480px;
    margin: 48px auto;
    padding: 0 16px;
}

.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 28px;
}

h1 {
    font-size: 20px;
    color: var(--brand);
    margin-top: 0;
}

label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin: 14px 0 4px;
}

input[type="email"], input[type="password"], input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

button, .btn {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 18px;
    border: 2px solid var(--brand);
    border-radius: 4px;
    background: var(--brand);
    color: white;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn.secondary {
    background: white;
    color: var(--brand);
}

.erro {
    background: var(--fail-bg);
    color: var(--fail);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
}

.status-badge {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 14px;
}
.status-badge.active { background: var(--ok-bg); color: var(--ok); }
.status-badge.inactive, .status-badge.canceled { background: var(--fail-bg); color: var(--fail); }
.status-badge.past_due { background: var(--warn-bg); color: var(--warn); }

.plan-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #eee;
}
.plan-price { color: var(--brand); font-size: 18px; font-weight: 800; }

.muted { color: #777; font-size: 13px; }

.footer-link { margin-top: 20px; font-size: 13px; text-align: center; }
.footer-link a { color: var(--brand); }