:root {
    --brand: #0f766e;
    --brand-dark: #115e59;
    --ink: #17212b;
    --muted: #617083;
    --surface: #f4f6f8;
    --line: #d9e1e8;
}

body {
    color: var(--ink);
}

.guest-page {
    background: var(--surface);
}

.text-brand {
    color: var(--brand) !important;
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
}

.hero-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

.hero-preview {
    border-radius: 8px;
    overflow: hidden;
}

.claim-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.claim-row:last-child {
    border-bottom: 0;
}

.claim-row span:not(.status-dot),
.claim-row em {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
    font-style: normal;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.feature-card,
.workflow-step {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
}

.feature-card p {
    color: var(--muted);
    margin-bottom: 0;
}

.workflow-step {
    font-weight: 700;
}

.auth-section {
    min-height: calc(100vh - 145px);
    display: flex;
    align-items: center;
}

.auth-card {
    border-radius: 8px;
    padding: 32px;
}

.qr-code {
    width: min(100%, 260px);
    height: auto;
    border-radius: 8px;
}

.manual-secret {
    word-break: break-all;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}