/* Cashio unified visual language across app + standalone pages */
:root {
    --cf-bg: #f3f7ff;
    --cf-bg-alt: #eef4ff;
    --cf-surface: #ffffff;
    --cf-ink: #0f172a;
    --cf-muted: #64748b;
    --cf-brand: #1e6ef5;
    --cf-brand-strong: #174ec2;
    --cf-accent: #10b981;
    --cf-border: #dbe7fb;
    --cf-shadow: 0 8px 26px rgba(23, 78, 194, 0.1);
    --cf-radius: 14px;
}

body {
    font-family: Heebo, sans-serif;
    color: var(--cf-ink);
    background:
        radial-gradient(1200px 480px at 110% -15%, rgba(30, 110, 245, 0.12), transparent 60%),
        radial-gradient(900px 320px at -10% 110%, rgba(16, 185, 129, 0.08), transparent 62%),
        linear-gradient(180deg, var(--cf-bg) 0%, var(--cf-bg-alt) 100%);
}

.page-header,
.cashflow-card,
.status-card,
.error-container,
.legal-header,
.legal-body,
.login-box,
.register-box,
.auth-box,
.onboarding-shell {
    border-radius: var(--cf-radius) !important;
    box-shadow: var(--cf-shadow) !important;
    border: 1px solid var(--cf-border) !important;
}

.btn,
button,
.back-btn,
.login-btn,
.refresh-btn {
    border-radius: 10px;
}

.nav-bar {
    background: linear-gradient(135deg, #0f2448 0%, #1e3a73 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.nav-bar .brand {
    letter-spacing: 0.3px;
}

.nav-bar a {
    color: rgba(255, 255, 255, 0.84) !important;
    font-weight: 600;
}

.nav-bar a:hover {
    color: #ffffff !important;
}

/* Legal pages */
.legal-wrap {
    max-width: 980px !important;
}

.legal-header {
    border-bottom-width: 4px !important;
    border-bottom-color: var(--cf-brand) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.legal-header h1 {
    color: #0d2349 !important;
}

.legal-body h2 {
    color: var(--cf-brand) !important;
    border-bottom-color: #d9e5fb !important;
}

.highlight,
.warn,
.contact-box,
.toc,
.sla-tier,
.right-item {
    border-radius: 10px !important;
}

/* Error page */
.error-container {
    background: #ffffff !important;
    color: #1e293b !important;
}

.error-code {
    color: #64748b !important;
}

.error-message {
    background: #fff8f1 !important;
    border: 1px solid #ffd6b0 !important;
    color: #8a3a00 !important;
}

.back-btn {
    background: linear-gradient(135deg, var(--cf-brand) 0%, var(--cf-brand-strong) 100%) !important;
}

/* System status standalone page */
.status-header {
    background: linear-gradient(135deg, #1e6ef5 0%, #174ec2 100%) !important;
    border-radius: var(--cf-radius) !important;
}

.status-card {
    background: #ffffff !important;
}

.status-card-header {
    border-bottom-color: #e3ecfc !important;
}

.big-number {
    color: var(--cf-brand) !important;
}

/* Auth pages */
.login-container,
.register-container,
.auth-container {
    background:
        radial-gradient(900px 320px at 120% -10%, rgba(30, 110, 245, 0.16), transparent 60%),
        radial-gradient(900px 360px at -20% 120%, rgba(16, 185, 129, 0.12), transparent 65%),
        linear-gradient(180deg, #eef5ff 0%, #f7fbff 100%) !important;
}

.login-box,
.register-box,
.auth-box {
    background: #ffffff !important;
}

.login-logo h1,
.register-logo h1 {
    color: #0f254a !important;
}

.login-form label,
.register-form label,
.auth-form label {
    color: #334155 !important;
}

.login-form input,
.register-form input,
.auth-form input {
    background: #ffffff !important;
    border-color: #dbe7fb !important;
    color: #0f172a !important;
}

.login-btn,
.register-btn,
.auth-btn {
    background: linear-gradient(135deg, var(--cf-brand) 0%, var(--cf-brand-strong) 100%) !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .legal-wrap {
        padding: 20px 14px 44px !important;
    }

    .legal-header,
    .legal-body {
        padding: 20px !important;
    }
}