/* ─── THEME TOKENS ─── */
:root { --bg-page: #f8f7fc; --bg-card: #fff; --bg-elevated: #f0edff; --bg-input: #f8f7fc; --bg-hover: #f8f7fc; --border: #e0dce8; --border-subtle: #eee; --border-divider: #f0edff; --text-primary: #1a1a2e; --text-secondary: #555; --text-muted: #999; --text-disabled: #ccc; --text-placeholder: #bbb; --purple-primary: #6c5ce7; --purple-hover: #5a4bd1; --purple-light: #8b5cf6; --purple-lavender: #a78bfa; --purple-soft: #f0edff; --purple-soft-alt: #e8e4ff; --success: #27ae60; --success-bg: rgba(39, 174, 96, 0.08); --danger: #e74c3c; --danger-bg: rgba(231, 76, 60, 0.08); --warning: #f5c842; --warning-bg: #fff8e1; --warning-icon: #d97706; --overlay: rgba(0, 0, 0, 0.5); --shadow-card: rgba(108, 92, 231, 0.06); --shadow-hover: rgba(108, 92, 231, 0.05); --cat-sale-bg: #e8f5e9; --cat-sale-color: #27ae60; --cat-service-bg: #e3f2fd; --cat-service-color: #1565c0; --cat-freelance-bg: #f3e5f5; --cat-freelance-color: #7b1fa2; --cat-consulting-bg: #fff3e0; --cat-consulting-color: #e65100; --cat-digital-bg: #f0edff; --cat-digital-color: #6c5ce7; --cat-physical-bg: #fce4ec; --cat-physical-color: #c62828; --cat-other-bg: #f5f5f5; --cat-other-color: #666; --inline-edit-bg: #fdf8ff; --inline-edit-hover: #faf5ff; --note-edit-bg: #faf9ff; --badge-free-bg: #f0f0f0; --badge-free-color: #999; --confirm-bg: #fff8e1; --confirm-border: #f5c842; --status-review-bg: rgba(245, 200, 66, 0.12); --status-review-color: #b8860b; --status-completed-bg: rgba(39, 174, 96, 0.15); --status-completed-color: #1e8449; --paypal-color: #003087; --known-issue-warning-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); --known-issue-warning-border: #f5c842; --known-issue-error-bg: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); --known-issue-error-border: #fca5a5; --known-issue-error-left: #e74c3c; --known-issue-info-bg: linear-gradient(135deg, #f0edff 0%, #e8e4ff 100%); --known-issue-info-border: #e0dce8; --tab-bg: #1a1a2e; --tab-text: rgba(255, 255, 255, 0.6); --tab-text-active: #fff; --tab-underline: #8b5cf6; }

[data-theme="dark"] { background: #1a1a2e; --bg-page: #0f0f1a; --bg-card: #1a1a2e; --bg-elevated: #242440; --bg-input: #1a1a2e; --bg-hover: #242440; --border: #2a2745; --border-subtle: #1e1c30; --border-divider: #1e1c30; --text-primary: #e8e6f0; --text-secondary: #a09cae; --text-muted: #7a7790; --text-disabled: #5c5977; --text-placeholder: #5c5977; --purple-primary: #7c6cf7; --purple-hover: #6c5ce7; --purple-light: #8b5cf6; --purple-lavender: #a78bfa; --purple-soft: #2a2154; --purple-soft-alt: #3a2a6c; --success: #2ecc71; --success-bg: #1a3a2a; --danger: #e74c3c; --danger-bg: #3a1a1e; --warning: #f5c842; --warning-bg: #2a2518; --warning-icon: #f5c842; --overlay: rgba(0, 0, 0, 0.7); --shadow-card: rgba(0, 0, 0, 0.2); --shadow-hover: rgba(0, 0, 0, 0.15); --cat-sale-bg: #1a3a2a; --cat-sale-color: #2ecc71; --cat-service-bg: #1a2a3a; --cat-service-color: #5b9bd5; --cat-freelance-bg: #2a1a3a; --cat-freelance-color: #b37dd5; --cat-consulting-bg: #3a2a1a; --cat-consulting-color: #f5a623; --cat-digital-bg: #2a2154; --cat-digital-color: #a78bfa; --cat-physical-bg: #3a1a1e; --cat-physical-color: #f07070; --cat-other-bg: #242440; --cat-other-color: #7a7790; --inline-edit-bg: #1e1c30; --inline-edit-hover: #242440; --note-edit-bg: #1e1c30; --badge-free-bg: #242440; --badge-free-color: #7a7790; --confirm-bg: #2a2518; --confirm-border: #f5c842; --status-review-bg: rgba(245, 200, 66, 0.12); --status-review-color: #f5c842; --status-completed-bg: #1a3a2a; --status-completed-color: #2ecc71; --paypal-color: #2a7fff; --known-issue-warning-bg: linear-gradient(135deg, #2a2518 0%, #2a2518 100%); --known-issue-warning-border: #f5c842; --known-issue-error-bg: linear-gradient(135deg, #3a1a1e 0%, #3a1a1e 100%); --known-issue-error-border: #e74c3c; --known-issue-error-left: #e74c3c; --known-issue-info-bg: linear-gradient(135deg, #2a2154 0%, #2a2154 100%); --known-issue-info-border: #2a2745; --tab-bg: #0a0a14; --tab-text: rgba(255, 255, 255, 0.5); --tab-text-active: #fff; --tab-underline: #8b5cf6; }

html { scroll-behavior: smooth; scrollbar-color: var(--purple-lavender) var(--purple-soft); scrollbar-width: thin; }

/* Scrollbar */
*, *::-webkit-scrollbar { scrollbar-color: var(--purple-lavender) var(--purple-soft); scrollbar-width: thin; }
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-track { background: var(--purple-soft); }
::-webkit-scrollbar-thumb { background: var(--purple-lavender); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--purple-primary); }
html, body { -webkit-font-smoothing: antialiased; color: var(--text-primary); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; }

/* Skip Link */
.skip-link { background: var(--purple-primary); border-radius: 0 0 8px 8px; color: #fff; font-size: 14px; font-weight: 600; left: 50%; padding: 10px 20px; position: fixed; top: -100%; transform: translateX(-50%); z-index: 200; }
.skip-link:focus { top: 0; }

/* Global "Working…" modal — full-viewport backdrop with a centered card during enhanced navigation */
#working-dialog { align-items: center; background: rgba(10, 10, 20, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; inset: 0; justify-content: center; opacity: 0; pointer-events: none; position: fixed; transition: opacity 0.18s ease-out; z-index: 9999; }
#working-dialog.working-dialog-active { opacity: 1; pointer-events: auto; }
.working-dialog-card { align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 18px; padding: 32px 56px; }
.working-spinner { animation: working-spin 0.8s linear infinite; border: 3px solid var(--border); border-radius: 50%; border-top-color: var(--purple-primary); height: 40px; width: 40px; }
.working-text { color: var(--text-primary); font-size: 14px; font-weight: 600; letter-spacing: 0.3px; }
.working-dots { display: inline-block; width: 18px; text-align: left; }
.working-dots span { animation: working-dot 1.4s infinite; opacity: 0; }
.working-dots span:nth-child(2) { animation-delay: 0.2s; }
.working-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes working-spin { to { transform: rotate(360deg); } }
@keyframes working-dot { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }

/* Focus Indicators */
:focus-visible { outline: 3px solid var(--purple-primary); outline-offset: 2px; }

/* Hero (shared across all page heroes) */
.hero { position: relative; z-index: 10; }
.hero-bg { height: calc(100% + 60px); left: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; }
.hero-bg svg { display: block; height: 100%; min-height: 280px; width: 100%; }
.hero-content { position: relative; z-index: 2; }
.hero-top { align-items: center; display: flex; justify-content: space-between; }
.hero h1 { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 4px; }
.hero .hero-subtitle { color: rgba(255, 255, 255, 0.7); font-size: 14px; margin: 0; }
.hero-nav { align-items: center; display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.period-pills { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; display: flex; gap: 2px; padding: 3px; }
.pill { background: transparent; border: none; border-radius: 5px; color: rgba(255, 255, 255, 0.6); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 500; padding: 4px 10px; transition: all 0.15s ease; }
.pill:hover { color: #fff; }
.pill.active { background: #fff; color: var(--purple-primary); font-weight: 600; }
.period-stat-bar { background: var(--bg-page); border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-muted); font-size: 14px; margin-bottom: 20px; padding: 12px 16px; }
.period-stat-bar strong { color: var(--purple-primary); font-weight: 700; }
.deco-circle { background: rgba(255, 255, 255, 0.07); border-radius: 50%; position: absolute; }
.deco-circle-1 { height: 260px; right: 10%; top: -40px; width: 260px; }
.deco-circle-2 { height: 180px; left: 15%; top: 120px; width: 180px; }
.deco-circle-3 { bottom: 40px; height: 220px; right: 25%; width: 220px; }
.hero-stats { display: flex; gap: 24px; margin-bottom: 20px; }
.hero-stat { text-align: center; }
.hero-stat-num { font-size: 22px; font-weight: 700; }
.hero-stat:nth-child(1) .hero-stat-num { color: #a78bfa; }
.hero-stat:nth-child(3) .hero-stat-num { color: #fff; }
.hero-stat-label { color: rgba(255, 255, 255, 0.6); font-size: 12px; margin-left: 6px; }
.hero-action-btn { align-items: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; color: rgba(255, 255, 255, 0.85); cursor: pointer; display: flex; font-family: inherit; font-size: 12px; font-weight: 500; gap: 5px; padding: 5px 12px; transition: background 0.15s ease; }
.hero-action-btn:hover { background: rgba(255, 255, 255, 0.22); }
.hero-action-btn svg { height: 12px; width: 12px; }
@media (max-width: 641px) { .hero-top { flex-direction: column; gap: 12px; padding-left: 48px; } .hero-stats { gap: 16px; justify-content: center; } }

/* Sample Data Banner (shared across all pages that render mock data with an upgrade CTA) */
.sample-banner { align-items: center; background: linear-gradient(135deg, var(--purple-soft) 0%, var(--purple-soft-alt) 100%); border: 1px solid var(--border); border-left: 4px solid var(--purple-primary); border-radius: 10px; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 24px; padding: 14px 20px; }
.sample-banner-content { align-items: center; color: var(--text-secondary); display: flex; font-size: 14px; gap: 10px; }
.sample-banner-content strong { color: var(--text-primary); }
.sample-banner-content svg { color: var(--purple-primary); flex-shrink: 0; height: 20px; width: 20px; }
.sample-banner-actions { display: flex; flex-shrink: 0; gap: 8px; }
.sample-banner-cta { background: var(--purple-primary); border-radius: 8px; color: #fff; flex-shrink: 0; font-size: 13px; font-weight: 600; padding: 8px 18px; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; white-space: nowrap; }
.sample-banner-cta:hover { background: var(--purple-hover); }
.sample-banner-cta-secondary { background: transparent; border: 1px solid var(--purple-primary); color: var(--purple-primary); }
.sample-banner-cta-secondary:hover { background: var(--purple-soft); color: var(--purple-hover); }
@media (max-width: 641px) { .sample-banner { flex-direction: column; gap: 12px; text-align: center; } .sample-banner-actions { flex-direction: column; } .sample-banner-content { flex-direction: column; gap: 8px; } }

/* Spoke Tabs (shared across hub + spoke pages) */
.spoke-tabs { background: #5c5777; display: flex; gap: 0; margin: 0 -40px 24px; padding: 0 40px; position: relative; z-index: 2; }
[data-theme="dark"] .spoke-tabs { background: #0a0a14; }
.spoke-tab { background: none; border: none; border-bottom: 3px solid transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; padding: 14px 20px 12px; transition: color 0.15s ease, border-color 0.15s ease; }
.spoke-tab:hover { color: #fff; }
.spoke-tab.active { border-bottom-color: #8b5cf6; color: #fff; font-weight: 600; }
@media (max-width: 641px) { .spoke-tabs { margin: 0 -16px 24px; padding: 0 16px; } .spoke-tab { font-size: 13px; padding: 12px 14px 10px; } }

/* Policy Pages (shared by /privacy and /terms) */
.policy-page { background: var(--bg-page); min-height: 100vh; overflow: hidden; padding: 0 0 80px; position: relative; }
.policy-shell { margin: 0 auto; max-width: 760px; padding: 0 20px; position: relative; z-index: 2; }
.policy-shell .page-heading { color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 8px; padding-top: 24px; text-align: center; }
.policy-shell .page-sub { color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.6; margin: 0 0 36px; text-align: center; }
.policy-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 24px var(--shadow-card); color: var(--text-primary); font-size: 15px; line-height: 1.7; padding: 48px 56px; }
.policy-effective { background: var(--purple-soft); border-left: 3px solid var(--purple-primary); border-radius: 4px; color: var(--text-secondary); font-size: 14px; margin: 0 0 28px; padding: 10px 14px; }
.policy-intro { color: var(--text-primary); font-size: 15px; margin: 0 0 8px; }
.policy-card section { margin-top: 36px; }
.policy-card h2 { color: var(--purple-primary); font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 14px; }
[data-theme="dark"] .policy-card h2 { color: var(--purple-lavender); }
.policy-card p { margin: 0 0 14px; }
.policy-card p:last-child { margin-bottom: 0; }
.policy-card ul { margin: 0 0 14px; padding-left: 22px; }
.policy-card li { margin-bottom: 8px; }
.policy-card li:last-child { margin-bottom: 0; }
.policy-card a { color: var(--purple-primary); text-decoration: underline; text-underline-offset: 2px; }
.policy-card a:hover { color: var(--purple-hover); }
[data-theme="dark"] .policy-card a { color: var(--purple-lavender); }
[data-theme="dark"] .policy-card a:hover { color: #c4b5fd; }
@media (max-width: 640.98px) {
    .policy-shell { padding: 0 16px; }
    .policy-shell .page-heading { font-size: 26px; }
    .policy-card { padding: 28px 22px; font-size: 14px; }
    .policy-card h2 { font-size: 18px; }
}

/* Visually Hidden (screen reader only) */
.sr-only { border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
a, .btn-link { color: var(--purple-primary); }
.btn-primary { background-color: var(--purple-primary); border-color: var(--purple-hover); color: #fff; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--bg-card), 0 0 0 0.25rem rgba(108, 92, 231, 0.25); }
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
.blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; color: white; padding: 1rem 1rem 1rem 3.7rem; }
.blazor-error-boundary::after { content: "An error has occurred."; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }