h1:focus {
    outline: none;
}

/* Premium visual polish */
body { background: #f8f9fd; color: #182238; }
.content-area { padding-top: 0; }
.public-nav { position: relative; z-index: 5; min-height: 82px; padding-right: max(5%, calc((100% - 1280px)/2)); padding-left: max(5%, calc((100% - 1280px)/2)); box-shadow: 0 1px 0 rgba(28,38,68,.04); }
.public-brand { display: inline-flex; align-items: center; gap: 2px; font-size: 1.7rem; }
.public-nav nav a { transition: color .2s ease, transform .2s ease, background .2s ease; }
.public-nav nav a:hover { transform: translateY(-1px); }
.public-nav .nav-signup { padding: 12px 20px; border-radius: 10px; background: linear-gradient(135deg,#766dff,#5148e8); box-shadow: 0 8px 18px rgba(86,76,232,.2); }
.landing-hero { position: relative; max-width: 1280px; min-height: 620px; padding: 80px max(5%, 24px) 95px; isolation: isolate; }
.landing-hero { width: 100%; max-width: none; margin: 0; padding: 76px max(6%, calc((100% - 1180px)/2)) 88px; border: 0; border-radius: 0; background: linear-gradient(120deg,#fff 0%,#fff 47%,#f3f2ff 100%); box-shadow: inset 0 -1px 0 #e9ebf4; }
.landing-hero::before { position: absolute; z-index: -1; top: 0; right: -10%; width: 70%; height: 100%; border-radius: 0 0 0 45%; background: radial-gradient(circle at 45% 35%,rgba(226,224,255,.8),rgba(248,249,253,0) 67%); content: ""; }
.landing-copy h1 { max-width: 570px; font-size: clamp(2.65rem, 4vw, 4rem); line-height: 1.06; font-weight: 800; }
.landing-copy p { font-size: 1.08rem; }
.landing-button { padding: 14px 20px; border-radius: 11px; background: linear-gradient(135deg,#766dff,#5148e8); transition: transform .2s ease, box-shadow .2s ease; }
.landing-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(86,76,232,.3); }
.hero-orb { box-shadow: 0 28px 55px rgba(68,61,190,.22); }
.hero-card { transition: transform .25s ease; }
.hero-card:hover { transform: translateY(-5px); }
.landing-section { border: 0; border-radius: 0; box-shadow: none; padding-top: 88px; padding-bottom: 88px; background: transparent; }
.landing-section-heading { margin-bottom: 42px; }
.feature-item { padding: 28px; border-color: #e7eaf3; box-shadow: 0 10px 28px rgba(31,42,72,.035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-item:hover { border-color: #d5d1ff; box-shadow: 0 16px 35px rgba(31,42,72,.09); transform: translateY(-4px); }
.feature-item b { background: linear-gradient(135deg,#f0efff,#e4e2ff); }
.plans-section { border-top: 1px solid #edf0f6; }
.public-plan-card { box-shadow: 0 10px 28px rgba(31,42,72,.04); transition: transform .2s ease, box-shadow .2s ease; }
.public-plan-card:hover { box-shadow: 0 16px 35px rgba(31,42,72,.1); transform: translateY(-4px); }
.public-plan-card a { padding: 10px 13px; border-radius: 8px; background: #f1f0ff; }
.auth-page, .contact-page { min-height: 690px; }
.auth-intro h1, .contact-page h1 { font-weight: 800; }
.signup-card, .contact-card { border: 1px solid #e3e7f0; box-shadow: 0 22px 60px rgba(31,42,72,.09); }
.signup-card h2, .contact-card h2 { font-size: 1.45rem; }
.signup-card form button, .contact-card form button { width: 100%; margin-top: 4px; background: linear-gradient(135deg,#766dff,#5148e8); box-shadow: 0 8px 18px rgba(86,76,232,.18); }
.signup-card form button:hover, .contact-card form button:hover { background: linear-gradient(135deg,#655cf5,#463ed8); }
.validation-summary-errors { padding: 10px 12px; border-radius: 8px; color: #a12d3c; background: #fff0f2; font-size: .78rem; }
.page-content { padding-top: 12px; }
.topbar { min-height: 82px; box-shadow: 0 1px 0 rgba(28,38,68,.04); }
section { border-color: #e7eaf2; box-shadow: 0 10px 30px rgba(31,42,72,.045); }
.page-heading { margin-bottom: 34px; }
.page-heading h1 { font-size: clamp(2rem, 3vw, 2.8rem); }
.section-heading h2 { font-size: 1.15rem; }
.stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { box-shadow: 0 12px 28px rgba(31,42,72,.1); transform: translateY(-3px); }
table tr { transition: background .15s ease; }
table tbody tr:hover { background: #fafaff; }
.outline-button, button:not(.logout-button), .small-button { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.outline-button:hover, button:not(.logout-button):hover, .small-button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(99,91,255,.16); }

@media (max-width: 850px) {
    .landing-hero { min-height: 0; padding: 55px 24px 70px; }
    .landing-section { padding-top: 60px; padding-bottom: 60px; }
    .auth-page, .contact-page { min-height: auto; }
}
@media (max-width: 560px) {
    .landing-hero { padding: 38px 16px 50px; }
    .landing-section { padding-top: 48px; padding-bottom: 48px; }
}

@media (max-width: 700px) {
    .public-nav { min-height: 68px; padding: 12px 16px; flex-direction: row; align-items: center; gap: 10px; }
    .public-nav nav { width: auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 10px; }
    .public-nav nav a { white-space: nowrap; }
    .public-nav .nav-login { margin-left: 0; }
}

@media (max-width: 420px) {
    .public-brand { font-size: 1.4rem; }
    .public-nav { padding-right: 12px; padding-left: 12px; }
    .public-nav nav { gap: 7px; }
    .public-nav nav a { font-size: .72rem; }
    .public-nav .nav-signup { padding: 9px 10px; }
}

/* Keep labels, buttons, cards, and navigation comfortable on narrow screens. */
html, body { overflow-x: hidden; }
button, a, label, h1, h2, h3, p, td, th, small, strong { overflow-wrap: anywhere; }
.public-nav { gap: 18px; }
.public-nav nav { flex-wrap: wrap; justify-content: flex-end; }
.public-nav .nav-signup, .landing-button { line-height: 1.35; text-align: center; white-space: normal; }
.landing-button { min-height: 44px; }
.landing-section-heading h2 { line-height: 1.15; }
.feature-item, .public-plan-card, .login-container, section { min-width: 0; }
.public-plan-card a { display: inline-block; line-height: 1.4; }
.auth-page, .contact-page { width: min(100% - 32px, 1050px); }
.contact-card form { gap: 16px; }
.contact-card textarea { width: 100%; min-width: 0; }

@media (max-width: 700px) {
    .public-nav { align-items: flex-start; flex-direction: column; padding-top: 16px; padding-bottom: 16px; }
    .public-nav nav { width: 100%; justify-content: flex-start; gap: 12px 18px; }
    .public-nav .nav-login { margin-left: 0; }
    .landing-hero { min-height: 0; }
    .landing-copy h1 { line-height: 1.08; }
    .hero-card-main { right: 2%; }
    .hero-card-float { left: 2%; }
}

@media (max-width: 420px) {
    .landing-section, .plans-section { padding-right: 16px; padding-left: 16px; }
    .hero-visual { min-height: 260px; transform: scale(.78); transform-origin: top center; margin-bottom: -55px; }
    .hero-card-main { width: 245px; }
    .auth-page, .contact-page { width: min(100% - 20px, 1050px); }
    .login-container { padding: 22px 18px; }
    .public-nav nav a { font-size: .76rem; }
}

:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #172033;
    background: #f5f7fb;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fb; }
a { color: #635bff; text-decoration: none; }
button, input, select { font: inherit; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 252px; flex: 0 0 252px; display: flex; flex-direction: column; padding: 28px 16px 18px; color: #c6cbe0; background: #111827; }
.sidebar-overlay, .mobile-menu-button { display: none; }
.brand { padding: 0 16px; color: #fff; font-size: 1.55rem; font-weight: 800; letter-spacing: -.04em; }
.brand span { color: #7c74ff; }
.brand-caption { margin: 3px 16px 35px; color: #747d99; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.side-nav { display: grid; gap: 6px; }
.side-nav a { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: 10px; color: #abb2c8; font-size: .9rem; font-weight: 600; }
.side-nav a:hover, .side-nav a:focus { color: #fff; background: #252d43; }
.sidebar-bottom { margin-top: auto; }
.user-summary { display: flex; align-items: center; gap: 10px; padding: 14px 8px; border-top: 1px solid #293147; font-size: .78rem; }
.user-summary strong, .user-summary small { display: block; max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-summary small { margin-top: 3px; color: #7f89a6; }
.avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; color: #fff; background: #635bff; font-weight: 700; }
.logout-button { width: 100%; padding: 10px 12px; border: 1px solid #323b54; border-radius: 8px; color: #aeb6ce; background: transparent; cursor: pointer; }
.logout-button:hover { color: #fff; background: #252d43; }
.main-content { min-width: 0; flex: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 5%; border-bottom: 1px solid #e7eaf2; background: #fff; }
.topbar-heading { display: flex; align-items: center; gap: 14px; }
.topbar strong { display: block; font-size: .95rem; }
.eyebrow { display: block; margin-bottom: 4px; color: #929ab0; font-size: .65rem; font-weight: 700; letter-spacing: .14em; }
.online-indicator { color: #69738d; font-size: .78rem; }.online-indicator i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22c55e; }
.content-area { max-width: 1400px; margin: 0 auto; padding: 38px 5%; }
.page-content { max-width: 1180px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.accent-eyebrow { color: #635bff; }
.outline-button { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 16px; border: 1px solid #d8d5ff; border-radius: 8px; color: #5c54ed; background: #f8f7ff; font-size: .83rem; font-weight: 700; }
.outline-button:hover { color: #fff; border-color: #635bff; background: #635bff; }
h1 { margin: 0 0 8px; color: #111827; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.04em; }
h2 { margin: 0 0 18px; color: #263149; font-size: 1.05rem; }
.page-subtitle { margin: 0 0 30px; color: #7a849b; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; }.dashboard-columns section { margin: 0 0 26px; }
.chart-card { min-height: 285px; }.chart-legend { color: #8b94a9; font-size: .72rem; }.chart-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #635bff; }.bar-chart { display: flex; align-items: end; justify-content: space-around; height: 175px; padding: 15px 8%; border-bottom: 1px solid #eef0f5; }.bar-group { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: 7px; }.bar-group .bar { width: 40px; min-height: 12px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #8e88ff, #635bff); }.bar-group .bar-orange { background: linear-gradient(180deg, #f6bd71, #e58b28); }.bar-group .bar-blue { background: linear-gradient(180deg, #72b7ef, #2985d7); }.bar-group small { color: #8b94a9; font-size: .7rem; }.bar-group strong { color: #3e4962; font-size: .8rem; }.quick-actions { display: grid; gap: 10px; }.quick-actions a { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border: 1px solid #edf0f5; border-radius: 8px; color: #526078; background: #fafbfe; font-size: .8rem; font-weight: 700; }.quick-actions a:hover { border-color: #d8d5ff; color: #5d55ee; background: #f7f6ff; }.quick-actions a span { color: #a3aabd; font-size: 1rem; }.empty-state { display: grid; padding: 28px 15px; place-items: center; color: #8b94a9; text-align: center; }.empty-state span { display: grid; width: 39px; height: 39px; margin-bottom: 9px; place-items: center; border-radius: 12px; color: #635bff; background: #f0efff; }.empty-state strong { color: #59647d; font-size: .85rem; }.empty-state p { margin: 5px 0 0; font-size: .75rem; }.table-secondary { display: block; margin-top: 3px; color: #9aa2b3; font-size: .7rem; }.status-pill { display: inline-block; padding: 5px 9px; border-radius: 20px; font-size: .68rem; font-weight: 700; }.status-active { color: #148253; background: #e9fbf2; }.status-expired { color: #b35b27; background: #fff3e8; }.search-box { max-width: 330px; margin-bottom: 17px; }.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.plan-card { padding: 20px; border: 1px solid #e8ebf2; border-radius: 11px; background: #fafbfe; }.plan-icon { display: grid; width: 32px; height: 32px; margin-bottom: 17px; place-items: center; border-radius: 8px; color: #635bff; background: #eeedff; }.plan-card h3 { margin: 0 0 10px; color: #3d4860; font-size: .95rem; }.plan-card strong { display: block; color: #172033; font-size: 1.3rem; }.plan-card span { display: block; margin-top: 4px; color: #8b94a9; font-size: .72rem; }
.stat-card { position: relative; min-height: 143px; padding: 21px; overflow: hidden; border: 1px solid #e7eaf2; border-radius: 14px; background: #fff; box-shadow: 0 5px 20px rgba(32, 43, 70, .035); }
.stat-card::after { position: absolute; right: -23px; bottom: -35px; width: 105px; height: 105px; border-radius: 50%; content: ""; opacity: .08; background: currentColor; }
.stat-purple { color: #635bff; }.stat-green { color: #16a36b; }.stat-orange { color: #e58b28; }.stat-blue { color: #2985d7; }
.stat-icon { display: grid; width: 29px; height: 29px; margin-bottom: 15px; place-items: center; border-radius: 8px; color: currentColor; background: currentColor; color: #fff; font-size: .85rem; font-weight: 800; }
.stat-label, .stat-card small { display: block; color: #7e88a0; font-size: .72rem; }.stat-value { display: block; margin: 5px 0 3px; color: #172033; font-size: 1.65rem; letter-spacing: -.04em; }.stat-card small { color: #a0a8b9; font-size: .68rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }.section-heading h2 { margin-bottom: 5px; }.section-heading p { margin: 0; color: #8b94a9; font-size: .78rem; }.count-badge { padding: 6px 10px; border-radius: 20px; color: #6159ec; background: #f0efff; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.permission-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }.permission-list > label:first-child { flex-basis: 100%; }.permission-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #e1e5ef; border-radius: 7px; color: #626d83; background: #fafbfe; font-size: .72rem; font-weight: 600; cursor: pointer; }.permission-item:has(input:checked) { border-color: #b9b5ff; color: #5750db; background: #f2f1ff; }.permission-item input { accent-color: #635bff; }.staff-list { margin-top: 26px; }.staff-list h3 { margin: 0 0 10px; color: #59647d; font-size: .82rem; }.staff-row { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-top: 1px solid #eef0f5; color: #4f5a71; font-size: .82rem; }.staff-row span { color: #8b94a9; }
.due-display, .payment-total { min-height: 42px; padding: 10px 12px; border: 1px solid #e5e1ff; border-radius: 8px; color: #5d55ee; background: #f7f6ff; font-weight: 700; }.payment-total { display: flex; align-items: center; gap: 10px; border-color: #d9efe5; color: #187951; background: #f1fcf6; }.payment-total span { color: #718096; font-size: .78rem; }.payment-total strong { font-size: 1.05rem; }.payment-total small { color: #7b8c84; font-weight: 500; }
.date-filter { display: flex; align-items: center; gap: 8px; }.date-filter input { min-width: 145px; min-height: 36px; }.date-filter button, .small-button { min-height: 36px !important; padding: 7px 12px !important; font-size: .72rem; }.small-button { color: #5d55e9 !important; background: #f0efff !important; }.small-button:hover { color: #fff !important; background: #635bff !important; }
.action-menu { position: relative; width: max-content; }.action-menu summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #dedcff; border-radius: 8px; color: #5d55e9; background: #f7f6ff; font-size: .72rem; font-weight: 700; cursor: pointer; list-style: none; }.action-menu summary::-webkit-details-marker { display: none; }.action-menu summary:hover, .action-menu[open] summary { color: #fff; border-color: #635bff; background: #635bff; }.action-menu summary span { font-size: .9rem; line-height: .6; }.action-menu-items { position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; min-width: 170px; padding: 6px; border: 1px solid #e5e8f0; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(31, 42, 69, .14); }.action-menu-items a { display: block; padding: 9px 11px; border-radius: 6px; color: #56617a; font-size: .75rem; font-weight: 600; white-space: nowrap; }.action-menu-items a:hover { color: #5d55e9; background: #f3f2ff; }.stat-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; }.details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.detail-card { display: flex !important; min-height: 76px; flex-direction: column !important; justify-content: center; align-items: flex-start; gap: 8px !important; padding: 15px 17px; border: 1px solid #edf0f5; border-radius: 10px; background: #fafbfe; }.detail-label { display: block !important; color: #929bb0; font-size: .68rem; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; }.detail-value { display: block !important; max-width: 100%; overflow-wrap: anywhere; color: #364157; font-size: .86rem; font-weight: 650; line-height: 1.35; }.detail-card-wide { grid-column: span 2; }
.small-button { min-height: 32px !important; padding: 6px 10px !important; font-size: .7rem; }.section-heading > button.outline-button { min-height: 34px; padding: 6px 11px; color: #5d55e9; border: 1px solid #dedcff; background: #f7f6ff; }
.danger-button { margin-left: 8px; color: #a92f43 !important; background: #fff0f2 !important; }.danger-button:hover { color: #fff !important; background: #b83d50 !important; }
.cancel-button { margin-left: 8px; color: #5d667a !important; background: #eef1f6 !important; }.cancel-button:hover { background: #e2e6ee !important; }
.warning-button { color: #946014 !important; background: #fff3df !important; }.warning-button:hover { color: #754600 !important; background: #ffd98f !important; }.activate-button { color: #126c45 !important; background: #e9fbf2 !important; }.activate-button:hover { color: #075331 !important; background: #b9efcf !important; }.status-text { font-weight: 700; }.text-active { color: #168253; }.text-inactive { color: #b35b27; }
.permission-denied { max-width: 520px; margin: 10vh auto; padding: 42px 28px; border: 1px solid #e5e9f2; border-radius: 16px; background: #fff; box-shadow: 0 12px 35px rgba(32, 43, 70, .06); text-align: center; }.permission-denied-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 15px; place-items: center; border-radius: 50%; color: #b35b27; background: #fff3e8; font-size: 1.3rem; font-weight: 800; }.permission-denied h2 { margin-bottom: 8px; }.permission-denied p { margin: 0 0 20px; color: #8791a6; font-size: .85rem; }
.filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }.filter-row .search-box { margin: 0; }.filter-row input[type=date] { max-width: 170px; }.finance-bars { display: flex; align-items: end; justify-content: center; gap: 70px; height: 180px; padding-bottom: 8px; border-bottom: 1px solid #eef0f5; }.finance-bars > div { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: 8px; }.finance-bars span { display: block; width: 54px; min-height: 12px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #73d6a9, #16a36b); }.finance-bars span.bar-orange { background: linear-gradient(180deg, #f6bd71, #e58b28); }.finance-bars small { color: #7e88a0; font-size: .72rem; }.category-list { display: grid; gap: 16px; }.category-list > div { display: grid; grid-template-columns: 130px 80px 1fr; align-items: center; gap: 15px; color: #59647d; font-size: .8rem; }.category-list strong { color: #263149; text-align: right; }.category-track { height: 8px; overflow: hidden; border-radius: 10px; background: #edf0f5; }.category-track i { display: block; height: 100%; border-radius: inherit; background: #635bff; }
.report-filters { display: flex; align-items: end; gap: 15px; }.report-filters > div { display: grid; min-width: 180px; gap: 7px; }.report-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.report-summary-grid > div { padding: 18px; border-radius: 10px; background: #fafbfe; }.report-summary-grid span, .report-summary-grid strong { display: block; }.report-summary-grid span { margin-bottom: 7px; color: #8b94a9; font-size: .75rem; }.report-summary-grid strong { color: #344058; font-size: 1.2rem; }.income-positive { color: #168253 !important; }.income-negative { color: #b35b27 !important; }
.notification-list { display: grid; gap: 10px; }.notification-row { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid #e5e1ff; border-radius: 10px; background: #faf9ff; }.notification-row.notification-read { border-color: #edf0f5; background: #fff; opacity: .75; }.notification-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; font-weight: 800; }.notification-expiry { color: #a46a19; background: #fff1d8; }.notification-warning { color: #ad3c4e; background: #fff0f2; }.notification-content { display: grid; flex: 1; gap: 5px; }.notification-content strong { color: #3d4860; font-size: .82rem; }.notification-content small { color: #929bb0; font-size: .7rem; }
.table-wrap { overflow-x: auto; }
section { margin: 26px 0; padding: 25px; border: 1px solid #e5e9f2; border-radius: 14px; background: #fff; box-shadow: 0 5px 20px rgba(32, 43, 70, .035); }
section form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
section form > div { display: grid; gap: 7px; }
label { color: #59647d; font-size: .78rem; font-weight: 700; }
input:not([type=checkbox]), select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #dce1ec; border-radius: 8px; color: #1d273b; background: #fff; outline: none; }
input:focus, select:focus { border-color: #766fff; box-shadow: 0 0 0 3px rgba(99, 91, 255, .12); }
button:not(.logout-button) { min-height: 42px; padding: 9px 18px; border: 0; border-radius: 8px; color: #fff; background: #635bff; font-weight: 700; cursor: pointer; }
button:not(.logout-button):hover { background: #5149e8; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th { padding: 11px 12px; color: #8a93a8; border-bottom: 1px solid #e8ebf2; font-size: .7rem; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
td { padding: 14px 12px; border-bottom: 1px solid #f0f2f6; color: #4d5870; }
tr:last-child td { border-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; } li { padding: 11px 0; border-bottom: 1px solid #eef0f5; color: #56617a; }
[role=alert] { padding: 12px 15px; border-radius: 8px; color: #a12d3c; background: #fff0f2; }
[role=status] { padding: 12px 15px; border-radius: 8px; color: #16724a; background: #ecfdf3; }
.login-container { max-width: 420px; margin: 8vh auto; padding: 34px; border: 1px solid #e5e9f2; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(32, 43, 70, .08); }
.login-container h1 { font-size: 1.6rem; }.login-container form { display: grid; gap: 18px; }.login-container form > div { display: grid; gap: 7px; }
.public-nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 6%; background: #fff; border-bottom: 1px solid #edf0f5; }.public-brand { color: #172033; font-size: 1.55rem; font-weight: 850; letter-spacing: -.05em; }.public-brand span { color: #635bff; }.public-nav nav { display: flex; align-items: center; gap: 26px; }.public-nav nav a { color: #68738b; font-size: .82rem; font-weight: 700; }.public-nav nav a:hover { color: #635bff; }.public-nav .nav-login { margin-left: 12px; color: #4c566e; }.public-nav .nav-signup, .landing-button { padding: 11px 17px; border-radius: 9px; color: #fff; background: #635bff; box-shadow: 0 8px 18px rgba(99,91,255,.2); }.public-footer { padding: 28px 6%; color: #8993a8; background: #111827; font-size: .78rem; text-align: center; }.public-footer span { margin-left: 8px; color: #c3c9d7; }.landing-hero { display: grid; max-width: 1180px; min-height: 570px; margin: 0 auto; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 45px; padding: 55px 0 70px; }.landing-copy h1 { max-width: 620px; margin: 14px 0 20px; color: #172033; font-size: clamp(2.6rem, 5vw, 4.7rem); line-height: 1.03; letter-spacing: -.065em; }.landing-copy p { max-width: 520px; margin: 0; color: #718098; font-size: 1.05rem; line-height: 1.75; }.landing-kicker { color: #635bff; font-size: .68rem; font-weight: 800; letter-spacing: .15em; }.landing-actions { display: flex; align-items: center; gap: 25px; margin: 30px 0 18px; }.landing-button { display: inline-flex; align-items: center; gap: 18px; font-size: .84rem; }.landing-button span { font-size: 1.15rem; }.landing-link { color: #59647d; font-size: .82rem; font-weight: 750; }.landing-copy > small { color: #9ca5b7; font-size: .72rem; }.hero-visual { position: relative; min-height: 370px; }.hero-orb { position: absolute; inset: 15px 5% 0 5%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #b5b1ff, #716aff 48%, #3730a3); transform: rotate(-12deg); opacity: .9; }.hero-card { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.65); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 18px 45px rgba(40,36,132,.25); }.hero-card-main { top: 58px; right: 9%; width: 270px; padding: 24px; }.hero-card-main span, .hero-card-float span { display: block; color: #9099ae; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }.hero-card-main strong { display: block; margin: 9px 0 3px; color: #202a43; font-size: 2.25rem; }.hero-card-main small { color: #19a06b; font-size: .7rem; font-weight: 700; }.hero-chart { display: flex; height: 85px; align-items: end; gap: 10px; margin-top: 20px; }.hero-chart i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(#aaa6ff,#645cff); }.hero-chart i:nth-child(1) { height: 35%; }.hero-chart i:nth-child(2) { height: 55%; }.hero-chart i:nth-child(3) { height: 45%; }.hero-chart i:nth-child(4) { height: 75%; }.hero-chart i:nth-child(5) { height: 62%; }.hero-chart i:nth-child(6) { height: 88%; }.hero-chart i:nth-child(7) { height: 100%; }.hero-card-float { bottom: 35px; left: 5%; display: grid; grid-template-columns: 37px 1fr; gap: 3px 10px; align-items: center; padding: 15px 19px; }.hero-card-float b { grid-row: span 2; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #fff; background: #21b77a; }.hero-card-float strong { color: #263149; font-size: 1.05rem; }.landing-section { max-width: 1180px; margin: 0 auto; padding: 70px 0; }.landing-section-heading { max-width: 650px; margin-bottom: 35px; }.landing-section-heading h2 { margin: 12px 0 10px; color: #172033; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.05em; }.landing-section-heading p { margin: 0; color: #7c879d; line-height: 1.6; }.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.feature-item { padding: 25px; border: 1px solid #e9ecf3; border-radius: 14px; background: #fff; }.feature-item b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #635bff; background: #efeeff; }.feature-item h3 { margin: 17px 0 8px; color: #354058; font-size: .95rem; }.feature-item p { margin: 0; color: #8993a8; font-size: .8rem; line-height: 1.6; }.plans-section { max-width: none; padding-right: max(6%, calc((100% - 1180px)/2)); padding-left: max(6%, calc((100% - 1180px)/2)); background: #fafbff; }.public-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.public-plan-card { padding: 26px; border: 1px solid #e6e9f2; border-radius: 15px; background: #fff; }.public-plan-card h3 { margin: 12px 0; color: #2d3851; }.public-plan-card strong { color: #172033; font-size: 1.8rem; }.public-plan-card small { display: block; margin: 4px 0 22px; color: #8d97aa; }.public-plan-card a { color: #635bff; font-size: .8rem; font-weight: 800; }.plan-label { color: #8c85ff; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }.public-plan-empty { padding: 25px; border: 1px dashed #d7d9e8; border-radius: 12px; color: #7e899e; }.auth-page, .contact-page { display: grid; max-width: 1050px; min-height: 620px; margin: 0 auto; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 50px; }.auth-intro h1, .contact-page h1 { margin: 15px 0; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.05; letter-spacing: -.06em; }.auth-intro p, .contact-page > div > p { color: #7a849b; line-height: 1.7; }.auth-intro a { font-size: .8rem; font-weight: 700; }.signup-card { max-width: none; margin: 25px 0; }.signup-card h2, .contact-card h2 { margin-bottom: 5px; }.form-hint { margin: 0 0 20px; color: #8a94a8; font-size: .78rem; }.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 18px; }.auth-form-grid > div, .contact-card form > div { display: grid; gap: 7px; }.auth-switch { margin: 20px 0 0; color: #8590a4; font-size: .78rem; text-align: center; }.contact-page { grid-template-columns: 1fr 1fr; }.contact-email { color: #635bff !important; font-weight: 750; }.contact-card textarea { min-height: 130px; resize: vertical; }

@media (max-width: 850px) {
    .sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 252px; padding: 28px 16px 18px; transform: translateX(-100%); transition: transform .2s ease; }.sidebar.sidebar-open { transform: translateX(0); }.sidebar-overlay { position: fixed; z-index: 10; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(17,24,39,.45); cursor: pointer; }.mobile-menu-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 10px; border: 1px solid #e0e3ec; border-radius: 8px; color: #4f5b73; background: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; }.mobile-menu-button:hover { color: #fff; background: #635bff; }.topbar, .content-area { padding-left: 24px; padding-right: 24px; }
    section form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-grid, .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-columns { grid-template-columns: 1fr; }.plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.detail-card-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
    .topbar { min-height: 64px; }.content-area { padding: 25px 16px; } section { padding: 18px; } section form { grid-template-columns: 1fr; }.dashboard-grid, .compact-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.plan-grid { grid-template-columns: 1fr; }.details-grid { grid-template-columns: 1fr; }.detail-card-wide { grid-column: span 1; }.stat-card { min-height: 130px; padding: 15px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 4px; }.page-heading .outline-button { align-self: stretch; justify-content: center; } table { display: block; overflow-x: auto; white-space: nowrap; }.login-container { margin: 30px 16px; padding: 25px; }
}

.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;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (max-width: 850px) {
    .landing-hero, .auth-page, .contact-page { grid-template-columns: 1fr; }.landing-hero { padding-top: 35px; }.hero-visual { max-width: 560px; width: 100%; margin: 0 auto; }.landing-section { padding: 50px 24px; }.public-plan-grid { grid-template-columns: 1fr 1fr; }.auth-page, .contact-page { min-height: auto; padding: 30px 0; }.auth-intro { text-align: center; }.auth-intro p { max-width: 520px; margin: auto; }
}
@media (max-width: 560px) {
    .public-nav { padding: 0 18px; }.public-nav nav { gap: 10px; }.public-nav nav > a:not(.nav-login):not(.nav-signup) { display: none; }.public-nav .nav-login { margin-left: 0; }.public-nav .nav-signup { padding: 9px 11px; }.landing-hero { padding: 30px 16px 45px; }.landing-copy h1 { font-size: 2.65rem; }.landing-actions { align-items: flex-start; flex-direction: column; gap: 17px; }.hero-visual { min-height: 300px; transform: scale(.9); transform-origin: top center; }.feature-grid, .public-plan-grid { grid-template-columns: 1fr; }.auth-page, .contact-page { padding: 20px 0; gap: 10px; }.auth-form-grid { grid-template-columns: 1fr; }.signup-card, .contact-card { margin: 20px 0; }.public-footer span { display: block; margin: 6px 0 0; }
}