:root {
    color-scheme: light;
    --page: #f6f8fc;
    --surface: #fff;
    --surface-soft: #f9faff;
    --sidebar: #fff;
    --text: #222b3c;
    --muted: #8892a4;
    --line: #e9edf4;
    --line-strong: #dce2ec;
    --primary: #3269e8;
    --primary-dark: #2457cc;
    --primary-soft: #edf3ff;
    --shadow: 0 3px 14px rgba(31, 51, 91, .035);
    --font-body: 'DM Sans', 'Segoe UI', sans-serif;
    --font-heading: 'Manrope', 'Segoe UI', sans-serif;
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --page: #131925;
    --surface: #1b2433;
    --surface-soft: #202b3b;
    --sidebar: #182130;
    --text: #edf2fb;
    --muted: #9ba8bc;
    --line: #2b3749;
    --line-strong: #39475b;
    --primary: #6b95ff;
    --primary-dark: #87a9ff;
    --primary-soft: #253452;
    --shadow: 0 3px 14px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-body); font-size: 13px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(50, 105, 232, .28); outline-offset: 2px; }
.app-shell { min-height: 100vh; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 240px; flex-direction: column; border-right: 1px solid var(--line); background: var(--sidebar); padding: 25px 16px 16px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #4482ff, #2456ce); color: white; font-family: var(--font-heading); font-size: 17px; font-weight: 800; box-shadow: 0 4px 9px #3269e82b; }
.brand-name { color: var(--text); font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.8px; }
.brand-name span { color: #7690c7; font-weight: 500; }
.workspace-switcher { display: flex; align-items: center; gap: 9px; margin: 30px 0 25px; padding: 10px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.workspace-avatar, .profile-avatar, .topbar-avatar { display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #e8efff; color: #3269e8; font-weight: 700; }
.workspace-avatar { width: 30px; height: 30px; }
.workspace-copy, .profile-copy { display: grid; min-width: 0; gap: 2px; }
.workspace-copy strong, .profile-copy strong { color: var(--text); font-size: 11px; font-weight: 700; }
.workspace-copy small, .profile-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-chevron { margin-left: auto; color: var(--muted); font-size: 17px; }
.nav-caption { margin: 0 9px 9px; color: #a4adbd; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.side-nav { display: grid; gap: 4px; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 38px; border-radius: 7px; padding: 0 10px; color: #707b8f; font-size: 12px; font-weight: 500; transition: background .16s, color .16s; }
.nav-link:hover { background: var(--surface-soft); color: var(--text); }
.nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.nav-icon { display: grid; width: 17px; height: 17px; place-items: center; }
.nav-icon svg, .icon-button svg, .global-search svg, .metric-icon svg, .chart-empty-icon svg, .activity-empty-art svg, .empty-document svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sidebar-bottom { margin-top: auto; }
.setup-card { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 14px; padding: 11px 9px; border: 1px solid var(--line); border-radius: 8px; }
.setup-indicator { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #efa943; box-shadow: 0 0 0 3px #efa94320; }
.setup-card div { display: grid; gap: 4px; }
.setup-card strong { color: var(--text); font-size: 10px; }
.setup-card small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-row { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); padding: 14px 5px 0; }
.profile-avatar, .topbar-avatar { width: 30px; height: 30px; border-radius: 50%; }
.profile-copy strong { font-size: 11px; }

.main-area { min-height: 100vh; margin-left: 240px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 69px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 91%, transparent); padding: 0 38px; backdrop-filter: blur(12px); }
.topbar-context { display: flex; align-items: center; gap: 9px; color: #69758a; font-size: 11px; }
.context-dot, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8aa45; }
.context-divider { color: #c1c8d3; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.global-search { display: flex; width: 213px; height: 34px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 0 8px; color: #909aae; }
.global-search svg { width: 15px; height: 15px; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.global-search input::placeholder { color: #a4adbc; }
.global-search kbd { border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; background: var(--surface-soft); color: var(--muted); font-family: var(--font-body); font-size: 10px; }
.icon-button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #778398; cursor: pointer; }
.icon-button:hover { background: var(--surface); color: var(--text); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.topbar-avatar { width: 29px; height: 29px; background: #e8efff; color: #3269e8; font-size: 11px; }
.mobile-menu { display: none; }
.page-content { width: min(100%, 1480px); margin: 0 auto; padding: 33px 38px 44px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 8px; color: #a3adbd; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; color: var(--text); font-family: var(--font-heading); font-size: 25px; font-weight: 750; letter-spacing: -.8px; }
.page-subtitle { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.date-pill, .draft-badge { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 7px 10px; color: #758095; font-size: 10px; white-space: nowrap; }
.date-pill .status-dot { width: 6px; height: 6px; }
.button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; padding: 0 13px; font-size: 11px; font-weight: 600; transition: .15s ease; cursor: pointer; }
.button-primary { background: var(--primary); color: white; box-shadow: 0 3px 7px #3269e826; }
.button-primary:hover { background: var(--primary-dark); color: white; }
.button-subtle { border-color: var(--line-strong); background: var(--surface); color: #707b8d; }
.button-subtle:hover { border-color: #b7c3d6; color: var(--text); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button-small { min-height: 31px; padding: 0 11px; font-size: 10px; }
.welcome-banner { position: relative; display: flex; align-items: center; gap: 16px; overflow: hidden; min-height: 137px; margin-bottom: 18px; border: 1px solid #e5ecfb; border-radius: 10px; background: linear-gradient(112deg, #f3f7ff, #f8faff 65%, #f0f5ff); padding: 23px 25px; }
.welcome-banner::after { position: absolute; top: -60px; right: 12%; width: 210px; height: 210px; border: 1px solid #dfe9fd; border-radius: 50%; content: ''; box-shadow: 0 0 0 22px #ffffff40, 0 0 0 44px #ffffff30; }
.welcome-icon { z-index: 1; display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid #dce7ff; border-radius: 10px; background: #fff; color: #5482e9; }
.welcome-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.welcome-copy { z-index: 1; max-width: 700px; }
.banner-label { color: #7292d2; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.welcome-copy h2 { margin: 5px 0 4px; color: #27344a; font-family: var(--font-heading); font-size: 15px; font-weight: 700; }
.welcome-copy p { margin: 0; color: #79869b; font-size: 11px; line-height: 1.6; }
.welcome-banner .button { z-index: 1; flex: 0 0 auto; margin-left: auto; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); }
.metric-card { min-width: 0; padding: 15px 16px 14px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 600; }
.metric-icon svg { width: 16px; height: 16px; }
.metric-icon.blue { background: #edf3ff; color: #4a7be4; }
.metric-icon.violet { background: #f2efff; color: #8a72df; }
.metric-icon.amber { background: #fff5e8; color: #e8a143; }
.metric-icon.green { background: #eaf8f1; color: #46af7f; }
.metric-period { color: #a0a9b8; font-size: 9px; }
.metric-label { margin: 13px 0 4px; color: #7c8799; font-size: 10px; }
.metric-value { margin: 0 0 5px; color: var(--text); font-family: var(--font-heading); font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.metric-note { overflow: hidden; margin: 0; color: #a0a9b8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 14px; }
.panel { min-width: 0; padding: 18px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h2 { margin: 0 0 4px; color: var(--text); font-family: var(--font-heading); font-size: 12px; font-weight: 700; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.select-static { display: inline-flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); padding: 7px 9px; color: #778297; font-size: 10px; white-space: nowrap; }
.chart-panel { min-height: 285px; }
.chart-empty { display: flex; min-height: 205px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.chart-empty-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 10px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.chart-empty-icon svg { width: 20px; height: 20px; }
.chart-empty strong, .activity-empty strong { margin-bottom: 5px; color: #606d82; font-size: 11px; font-weight: 600; }
.chart-empty span, .activity-empty span:last-child { color: #a0a9b8; font-size: 10px; }
.panel-menu { color: #9aa4b4; font-size: 17px; letter-spacing: 2px; line-height: 10px; }
.activity-panel { min-height: 285px; }
.activity-empty { display: flex; min-height: 204px; flex-direction: column; align-items: center; justify-content: center; }
.activity-empty-art { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 9px; border-radius: 14px; background: var(--surface-soft); color: #9ab0d9; }
.activity-empty-art svg { width: 28px; height: 28px; }
.app-footer { display: flex; gap: 8px; padding: 0 38px 22px; color: #a2abba; font-size: 9px; }
.footer-divider { color: #cbd1db; }

.heading-actions { display: flex; align-items: center; gap: 8px; }
.view-toggle { display: flex; gap: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 3px; color: #909aab; }
.view-toggle span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 4px; font-size: 14px; }
.view-toggle .toggle-active { background: var(--primary-soft); color: var(--primary); }
.notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 17px; border: 1px solid; border-radius: 8px; padding: 13px 15px; }
.notice-info { border-color: #e3eaf8; background: #f7f9fe; }
.notice-warning { border-color: #f3e5c7; background: #fffaf0; }
.notice-success { border-color: #d7eee2; background: #f3fbf6; }
.notice-success strong { color: #438d67; }
.notice-icon { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e8efff; color: #5180e3; font-family: var(--font-heading); font-size: 11px; font-weight: 700; }
.notice-warning .notice-icon { background: #fff0cc; color: #b27b18; }
.notice strong { display: block; margin: 1px 0 3px; color: #4c5a70; font-size: 10px; }
.notice p { margin: 0; color: #8792a4; font-size: 10px; line-height: 1.5; }
.deal-board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); grid-auto-flow: column; gap: 12px; overflow-x: auto; padding: 1px 1px 12px; }
.billing-section { margin-bottom: 18px; }
.billing-plan-prices { margin: 14px 0; border-top: 1px solid var(--line); }
.billing-plan-prices p { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; border-bottom: 1px solid var(--line); padding: 9px 0; color: var(--muted); font-size: 11px; }
.billing-plan-prices strong { min-width: 150px; color: var(--text); }
.deal-column { min-height: 350px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 72%, var(--page)); padding: 12px; }
.column-heading { display: flex; align-items: center; justify-content: space-between; padding: 1px 1px 11px; border-bottom: 1px solid var(--line); }
.column-heading > div { display: flex; align-items: center; gap: 8px; }
.column-heading h2 { margin: 0; color: var(--text); font-family: var(--font-heading); font-size: 10px; font-weight: 700; }
.stage-dot { width: 7px; height: 7px; border-radius: 50%; background: #7f9fe7; }
.stage-1 { background: #d9a64e; }.stage-2 { background: #8c79db; }.stage-3 { background: #46ae82; }
.stage-4 { background: #46ae82; }.stage-5 { background: #d27676; }
.column-count { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 6px; background: var(--surface); color: #97a1b1; font-size: 9px; }
.column-more { color: #a6afbd; font-size: 15px; letter-spacing: 2px; }
.column-empty { display: flex; height: 260px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #a3adbc; font-size: 10px; }
.column-empty-icon { display: grid; width: 33px; height: 33px; place-items: center; border: 1px dashed var(--line-strong); border-radius: 9px; color: #9cadd1; font-size: 14px; }
.deal-cards { display: grid; gap: 9px; padding-top: 10px; }
.deal-card { display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 11px; box-shadow: var(--shadow); }
.deal-card > strong { color: var(--text); font-size: 10px; line-height: 1.5; }
.deal-card > span { color: var(--muted); font-size: 9px; }
.deal-card > b { color: #4a5870; font-size: 10px; }
.deal-card form { display: grid; gap: 6px; }
.deal-card .form-select { min-height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: 9px; }
.activity-list { display: grid; gap: 0; padding-top: 10px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--line); padding: 11px 1px; }
.activity-item:last-child { border-bottom: 0; }
.activity-mark { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #7d9de7; }
.activity-item > span:last-child { display: grid; gap: 4px; }
.activity-item strong { color: var(--text); font-size: 10px; font-weight: 600; }
.activity-item small { color: var(--muted); font-size: 9px; }

.invoice-list-panel { padding: 0; overflow: hidden; }
.table-toolbar { display: flex; height: 56px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 18px; }
.table-tabs { display: flex; height: 100%; align-items: center; }
.table-tab { display: flex; height: 100%; align-items: center; gap: 8px; border-bottom: 2px solid var(--primary); color: var(--text); font-size: 11px; font-weight: 600; }
.table-tab span { border-radius: 5px; background: var(--surface-soft); padding: 3px 6px; color: #919bad; font-size: 9px; }
.invoice-filter { width: auto; min-height: 32px; border-radius: 5px; padding: 5px 28px 5px 9px; font-size: 10px; }
.invoice-table { width: 100%; border-collapse: collapse; }
.invoice-table th { height: 41px; border-bottom: 1px solid var(--line); background: var(--surface-soft); padding: 0 14px; color: #9aa4b3; font-size: 8px; font-weight: 700; letter-spacing: .7px; text-align: left; white-space: nowrap; }
.invoice-table td { color: var(--text); font-size: 11px; }
.table-empty { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.empty-document { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 2px; border-radius: 13px; background: var(--primary-soft); color: #6c91df; }
.empty-document svg { width: 27px; height: 27px; }
.table-empty strong { color: #606d82; font-size: 11px; }
.table-empty > span:not(.empty-document) { margin-bottom: 7px; color: #a0a9b8; font-size: 10px; }
.invoice-table tbody tr:not(:first-child) td { border-bottom: 1px solid var(--line); padding: 12px 14px; }
.invoice-table tbody tr[data-searchable] td { border-bottom: 1px solid var(--line); padding: 12px 14px; }
.invoice-table td strong { color: var(--text); font-size: 10px; }
.invoice-status { display: inline-flex; border-radius: 20px; background: #f0f3f8; padding: 4px 8px; color: #788499; font-size: 9px; text-transform: capitalize; }
.status-draft { background: #f0f3f8; color: #788499; }
.status-sent, .status-partially_paid { background: #fff5e8; color: #bd8533; }
.status-paid { background: #eaf8f1; color: #42996e; }
.deal-form { display: grid; max-width: 700px; gap: 16px; }

.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 15px; color: #7c8799; font-size: 10px; }
.back-link:hover { color: var(--primary); }
.invoice-heading { align-items: center; }
.draft-badge { color: #818b9d; }
.draft-badge span { width: 6px; height: 6px; border-radius: 50%; background: #e8aa45; }
.invoice-editor { display: grid; gap: 14px; }
.invoice-details-panel, .line-items-panel, .notes-panel { padding: 19px; }
.editor-panel-heading { margin-bottom: 20px; }
.invoice-number { border-radius: 5px; background: var(--surface-soft); padding: 7px 9px; color: #818b9c; font-size: 10px; }
.invoice-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 17px 19px; }
.field-label { display: grid; min-width: 0; gap: 8px; color: #596779; font-size: 11px; font-weight: 650; }
.form-control, .form-select { display: block; width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 7px; background-color: var(--surface); padding: 9px 12px; color: var(--text); font-size: 12px; line-height: 1.4; box-shadow: 0 1px 2px #17263b08; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.form-control::placeholder { color: #a4afbd; opacity: 1; }
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: #b9c5d2; }
.form-control:focus, .form-select:focus { border-color: #6684d5; outline: 0; box-shadow: 0 0 0 3px #5278d51f; background-color: var(--surface); color: var(--text); }
.form-control:disabled, .form-select:disabled { border-color: var(--line); background-color: var(--surface-soft); color: #929cad; cursor: not-allowed; opacity: 1; }
.form-control[readonly] { background-color: var(--surface-soft); }
.form-control[type="date"], .form-control[type="month"], .form-control[type="time"] { min-height: 42px; }
.form-control[type="checkbox"], .form-control[type="radio"], input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: #3269e8; }
.field-label input[type="checkbox"], .field-label input[type="radio"] { margin: 0 5px 0 0; vertical-align: middle; }
textarea.form-control { min-height: 96px; padding-top: 11px; resize: vertical; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 16px 0 4px; }
.filter-row label { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; color: #596779; font-size: 11px; font-weight: 600; }
.filter-row input[type="checkbox"], .filter-row input[type="radio"] { flex: 0 0 auto; margin: 0; }
.stacked-form { display: grid; gap: 16px; }
.deal-form { padding: 22px; }
.deal-form .field-label { max-width: 100%; }
.invoice-editor { gap: 16px; }
.invoice-editor .panel { padding: 22px; }
.editor-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; padding: 5px 0 2px; }
.editor-footer .button { min-height: 39px; }
.line-items-table .form-control, .line-items-table .form-select { min-height: 36px; border-radius: 6px; padding: 7px 9px; font-size: 11px; }
.form-help { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.line-items-panel { padding-bottom: 16px; }
.line-items-scroll { overflow-x: auto; }
.line-items-table { width: 100%; min-width: 580px; border-collapse: collapse; }
.line-items-table th { height: 35px; border-bottom: 1px solid var(--line); color: #9aa4b3; font-size: 8px; letter-spacing: .65px; text-align: left; }
.line-items-table td { padding: 9px 5px 4px 0; }
.line-items-table th:not(:first-child), .line-items-table td:not(:first-child) { padding-left: 9px; }
.line-items-table input { width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); padding: 0 9px; color: var(--text); font-size: 10px; }
.line-items-table input::placeholder { color: #aab3c0; }
.line-items-table th:nth-child(1) { width: 44%; }.line-items-table th:nth-child(2) { width: 12%; }.line-items-table th:nth-child(3) { width: 18%; }.line-items-table th:nth-child(4) { width: 18%; }
.line-amount { color: #546176; font-size: 10px; white-space: nowrap; }
.remove-line { width: 25px; height: 25px; border: 0; border-radius: 5px; background: transparent; color: #99a3b2; font-size: 17px; cursor: pointer; }
.remove-line:hover:not(:disabled) { background: #fff0f0; color: #d45d5d; }
.remove-line:disabled { opacity: .35; cursor: not-allowed; }
.invoice-totals { display: grid; width: min(300px, 100%); gap: 10px; margin: 14px 0 0 auto; padding-top: 13px; border-top: 1px solid var(--line); }
.invoice-totals > div { display: flex; align-items: center; justify-content: space-between; color: #7d889a; font-size: 10px; }
.invoice-totals strong { color: #566277; font-size: 11px; font-weight: 600; }
.invoice-totals .tax-note { color: #a1aab8; font-size: 9px; }
.invoice-totals .total-row { margin-top: 2px; border-top: 1px solid var(--line); padding-top: 11px; color: var(--text); font-weight: 700; }
.invoice-totals .total-row strong { color: var(--text); font-size: 15px; }
.notes-panel textarea { min-height: 75px; resize: vertical; }
.editor-footer { display: flex; justify-content: flex-end; gap: 8px; padding-bottom: 5px; }
.search-hidden { display: none !important; }
.sidebar-scrim { display: none; }
.auth-page { min-height: 100vh; background: #f5f7f5; color: #1b2b30; }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(330px,.82fr) minmax(0,1.18fr); }
.auth-aside { position: relative; display: flex; min-height: 100vh; flex-direction: column; overflow: hidden; background: #12363a; padding: 34px clamp(32px,6vw,88px); color: #f2f5ee; }
.auth-aside::before { position: absolute; inset: 0; background-image: linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(#ffffff08 1px,transparent 1px); background-size: 42px 42px; content: ''; mask-image: linear-gradient(135deg,#000 0%,transparent 75%); pointer-events: none; }
.auth-aside::after { position: absolute; right: -135px; bottom: 8%; width: 320px; height: 320px; border: 1px solid #d5ef8c30; border-radius: 50%; box-shadow: 0 0 0 34px #d5ef8c0b,0 0 0 70px #d5ef8c08; content: ''; pointer-events: none; }
.auth-brand { position: relative; z-index: 1; display: inline-flex; width: max-content; align-items: center; gap: 10px; color: #fff; }
.auth-brand .brand-name { color: #f5f7f2; }
.auth-brand .brand-name span { color: #c4d2b5; }
.auth-aside-copy { position: relative; z-index: 1; width: min(100%,500px); margin: auto 0; padding: 75px 0; }
.auth-aside-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: #c3d6c1; font-size: 9px; font-weight: 800; }
.auth-aside-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #d7ed92; box-shadow: 0 0 0 5px #d7ed921c; }
.auth-aside-copy h1 { max-width: 490px; margin: 0 0 16px; color: #fff; font-family: var(--font-heading); font-size: clamp(36px,4.2vw,58px); font-weight: 750; line-height: 1.08; letter-spacing: -1.5px; }
.auth-aside-copy > p:not(.auth-aside-kicker) { max-width: 430px; margin-bottom: 30px; color: #c1d0cc; font-size: 13px; line-height: 1.8; }
.auth-capability-list { display: grid; max-width: 380px; gap: 0; border-top: 1px solid #ffffff20; }
.auth-capability-list span { display: flex; align-items: center; gap: 14px; min-height: 46px; border-bottom: 1px solid #ffffff20; color: #edf2eb; font-size: 11px; font-weight: 600; }
.auth-capability-list b { color: #d7ed92; font-size: 9px; font-weight: 700; }
.auth-aside-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; color: #adc2ba; font-size: 9px; line-height: 1.6; }
.auth-secure-symbol { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d7ed9240; border-radius: 50%; color: #d7ed92; }
.auth-aside-foot strong { color: #e5eee2; font-weight: 600; }
.auth-main { display: flex; min-width: 0; min-height: 100vh; flex-direction: column; justify-content: space-between; padding: 28px clamp(24px,6vw,90px) 22px; background: radial-gradient(ellipse at 85% 4%,#e9eee4 0,transparent 38%),#fafbf9; }
.auth-main-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.auth-back-link { color: #64746e; font-size: 10px; font-weight: 600; }
.auth-back-link span { padding-right: 5px; color: #285d56; }
.auth-secure-label { display: inline-flex; align-items: center; gap: 7px; color: #829089; font-size: 8px; font-weight: 800; }
.auth-secure-label i { width: 6px; height: 6px; border-radius: 50%; background: #54a580; }
.auth-content { display: grid; width: min(100%,470px); align-self: center; gap: 18px; margin: 35px 0; }
.auth-tenant-brand { display: flex; align-items: center; gap: 11px; color: #334842; font-family: var(--font-heading); font-size: 13px; }
.auth-company-mark { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #dcebe1; color: #246653; font-family: var(--font-heading); font-size: 16px; font-weight: 800; }
.auth-company-logo { width: auto; max-width: 185px; height: 44px; object-fit: contain; }
.login-layout { width: 100%; }
.login-card { border: 1px solid #e4e9e3; border-radius: 12px; background: #fff; padding: clamp(25px,4vw,39px); box-shadow: 0 18px 55px #203b2e0d; }
.auth-form-kicker { margin-bottom: 10px; color: #618b72; font-size: 9px; font-weight: 800; }
.login-card h1 { margin-bottom: 8px; color: #213832; font-size: 26px; letter-spacing: -.5px; }
.login-card > .page-subtitle { margin-bottom: 26px; color: #77857e; line-height: 1.65; }
.login-card form { display: grid; gap: 17px; }
.login-card .field-label { gap: 8px; color: #596c63; font-size: 10px; }
.login-card .form-control, .login-card .form-select { min-height: 45px; border-color: #dce4dd; border-radius: 6px; background: #fcfdfb; padding-right: 12px; padding-left: 12px; font-size: 12px; }
.login-card .form-control:focus, .login-card .form-select:focus { border-color: #69a287; box-shadow: 0 0 0 3px #69a28720; }
.login-submit { width: 100%; min-height: 46px; margin-top: 3px; border-radius: 6px; background: #245f50; box-shadow: none; font-size: 12px; }
.login-submit:hover { background: #184a40; }
.login-footnote { margin: 18px 0 0; color: #829087; font-size: 10px; text-align: center; }
.login-footnote a { color: #2e715c; font-weight: 700; }
.auth-alternate-links { display: grid; gap: 10px; padding: 0 3px; }
.auth-alternate-links a { display: flex; align-items: center; justify-content: space-between; color: #62736b; font-size: 10px; font-weight: 600; }
.auth-alternate-links a span { color: #388368; font-size: 14px; }
.auth-main-foot { display: flex; justify-content: space-between; gap: 12px; color: #98a39c; font-size: 9px; }
.suspended-panel { width: min(100%,470px); margin: 0; border: 1px solid #e4e9e3; border-radius: 12px; background: #fff; padding: clamp(25px,4vw,39px); text-align: left; box-shadow: 0 18px 55px #203b2e0d; }
.suspended-panel .metric-icon { margin: 0 0 18px; }
.suspended-panel h1 { font-size: 24px; }
.suspended-panel p { margin: 0 0 11px; color: #77857e; line-height: 1.7; }
.platform-notice { margin-top: 18px; }
.platform-notice h2 { margin: 0 0 8px; color: var(--text); font-family: var(--font-heading); font-size: 13px; }
.platform-notice p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.suspended-panel { max-width: 640px; margin: 60px auto; padding: 32px; text-align: center; }
.suspended-panel .metric-icon { margin: 0 auto 15px; }
.suspended-panel h1 { font-size: 20px; }
.suspended-panel p { margin: 0; color: var(--muted); line-height: 1.7; }

:root[data-theme='dark'] .welcome-banner { border-color: #2b3c5a; background: linear-gradient(112deg, #202e47, #202b3b 68%, #25324a); }
:root[data-theme='dark'] .welcome-banner::after { border-color: #354561; box-shadow: 0 0 0 22px #ffffff05, 0 0 0 44px #ffffff04; }
:root[data-theme='dark'] .welcome-icon { border-color: #364766; background: #263650; }
:root[data-theme='dark'] .welcome-copy h2, :root[data-theme='dark'] .notice strong, :root[data-theme='dark'] .chart-empty strong, :root[data-theme='dark'] .activity-empty strong, :root[data-theme='dark'] .table-empty strong { color: var(--text); }
:root[data-theme='dark'] .welcome-copy p, :root[data-theme='dark'] .notice p { color: #a5b1c4; }
:root[data-theme='dark'] .notice-info { border-color: #2f3d54; background: #202c41; }
:root[data-theme='dark'] .notice-warning { border-color: #51432b; background: #302a20; }
:root[data-theme='dark'] .notice-success { border-color: #284638; background: #1d3129; }
:root[data-theme='dark'] .workspace-avatar, :root[data-theme='dark'] .profile-avatar, :root[data-theme='dark'] .topbar-avatar { background: #263958; color: #91afff; }
:root[data-theme='dark'] .metric-icon.blue { background: #253452; }
:root[data-theme='dark'] .metric-icon.violet { background: #312b4a; }
:root[data-theme='dark'] .metric-icon.amber { background: #3a3023; }
:root[data-theme='dark'] .metric-icon.green { background: #20392f; }
:root[data-theme='dark'] .deal-card > b { color: #c5d0e2; }
:root[data-theme='dark'] .invoice-status { background: #293447; }

@media (max-width: 1100px) {
    .sidebar { width: 215px; }
    .main-area { margin-left: 215px; }
    .page-content { padding-right: 25px; padding-left: 25px; }
    .topbar { padding-right: 25px; padding-left: 25px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .sidebar { z-index: 30; width: 250px; transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.sidebar-open { transform: translateX(0); }
    .sidebar-scrim { position: fixed; inset: 0; z-index: 25; display: none; border: 0; background: #13203966; }
    .nav-open .sidebar-scrim { display: block; }
    .main-area { margin-left: 0; }
    .topbar { min-height: 60px; padding: 0 17px; }
    .mobile-menu { display: grid; margin-right: 7px; }
    .mobile-menu svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
    .topbar-context { margin-right: auto; }
    .topbar-actions { gap: 8px; }
    .global-search { width: min(38vw, 190px); }
    .page-content { padding: 25px 17px 35px; }
    .app-footer { padding-right: 17px; padding-left: 17px; }
    .page-heading { align-items: flex-start; }
    .date-pill { display: none; }
    .welcome-banner { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
    .welcome-copy { flex: 1 1 calc(100% - 60px); }
    .welcome-banner .button { margin-left: 55px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
    .view-toggle { display: none; }
}
@media (max-width: 520px) {
    .topbar-context { font-size: 10px; }
    .topbar-context .context-divider, .topbar-context { gap: 6px; }
    .global-search { width: 34px; border: 0; background: transparent; padding: 0; }
    .global-search input, .global-search kbd { display: none; }
    .global-search svg { width: 18px; height: 18px; }
    .topbar-avatar { width: 27px; height: 27px; }
    .page-heading { flex-direction: column; align-items: flex-start; }
    .page-heading > .button { align-self: flex-start; }
    .heading-actions { width: 100%; justify-content: flex-start; }
    h1 { font-size: 23px; }
    .metric-grid { gap: 9px; }
    .metric-card { padding: 12px; }
    .metric-value { font-size: 19px; }
    .metric-note { font-size: 8px; }
    .invoice-form-grid { grid-template-columns: 1fr; gap: 12px; }
    .invoice-details-panel, .line-items-panel, .notes-panel { padding: 15px; }
    .table-toolbar { padding: 0 12px; }
}
@media print {
    body, :root { background: #fff !important; color: #222 !important; }
    .sidebar, .topbar, .app-footer, .page-heading, .notice, .editor-footer, [data-add-line], .remove-line { display: none !important; }
    .main-area { margin: 0 !important; }
    .page-content { width: 100%; padding: 0 !important; }
    .invoice-editor { gap: 8px; }
    .invoice-editor .panel { break-inside: avoid; border: 1px solid #ddd; box-shadow: none; }
    .form-control, .form-select, .line-items-table input { border: 0; padding-left: 0; }
}

.marketing-site { --marketing-ink: #17233b; --marketing-muted: #6f7d93; --marketing-blue: #3269e8; background: #fff; color: var(--marketing-ink); font-family: var(--font-body); font-size: 15px; }
.marketing-site h1, .marketing-site h2, .marketing-site h3 { color: var(--marketing-ink); font-family: var(--font-heading); }
.marketing-header { position: sticky; top: 0; z-index: 20; display: flex; min-height: 76px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f5; background: rgba(255,255,255,.94); padding: 0 max(calc((100vw - 1200px) / 2), 5vw); backdrop-filter: blur(14px); }
.marketing-brand { display: inline-flex; align-items: center; gap: 10px; color: #17233b; font-family: var(--font-heading); font-size: 20px; font-weight: 800; letter-spacing: -.8px; }
.marketing-brand > span:last-child > span { color: #8092b7; font-weight: 500; }
.marketing-brand-mark { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: linear-gradient(145deg,#4482ff,#2456ce); color: #fff; font-size: 20px; box-shadow: 0 5px 13px #3269e833; }
.marketing-nav, .marketing-actions { display: flex; align-items: center; gap: 28px; }
.marketing-nav a, .marketing-signin { color: #627087; font-size: 13px; font-weight: 600; }
.marketing-nav a:hover, .marketing-signin:hover, .marketing-footer a:hover { color: var(--marketing-blue); }
.marketing-actions { gap: 20px; }
.marketing-site .button { min-height: 43px; padding: 0 17px; font-size: 12px; }
.marketing-hero { position: relative; display: grid; min-height: 635px; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: 55px; overflow: hidden; padding: 80px max(calc((100vw - 1200px) / 2), 5vw) 92px; background: radial-gradient(ellipse at 82% 50%, #eaf1ff 0, #f8faff 38%, transparent 68%), linear-gradient(180deg,#fff,#fbfcff); }
.marketing-hero-copy { position: relative; z-index: 1; max-width: 565px; }
.marketing-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #dde7fb; border-radius: 24px; background: #fff; padding: 8px 13px; color: #506584; font-size: 11px; font-weight: 700; }
.marketing-pill > span { width: 7px; height: 7px; border-radius: 50%; background: #3ab78a; box-shadow: 0 0 0 4px #3ab78a1c; }
.marketing-hero h1 { max-width: 590px; margin: 24px 0 17px; font-size: clamp(42px,5.1vw,65px); font-weight: 800; letter-spacing: -3.4px; line-height: 1.06; }
.marketing-hero-copy > p { max-width: 520px; margin-bottom: 26px; color: var(--marketing-muted); font-size: 16px; line-height: 1.8; }
.marketing-hero-actions { display: flex; align-items: center; gap: 22px; }
.marketing-text-link { color: #455874; font-size: 12px; font-weight: 700; }
.marketing-proof { display: flex; flex-wrap: wrap; gap: 13px 20px; margin-top: 37px; color: #718098; font-size: 10px; }
.marketing-proof span { display: inline-flex; align-items: center; gap: 6px; }
.marketing-proof b { display: inline-grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; background: #e8f7f0; color: #269d69; font-size: 10px; }
.marketing-product { position: relative; min-width: 0; padding: 24px 0 25px 20px; }
.product-window { overflow: hidden; border: 1px solid #dfe6f2; border-radius: 13px; background: #fff; box-shadow: 0 28px 80px #173a7320, 0 4px 12px #2036560d; transform: perspective(1200px) rotateY(-5deg) rotateX(1deg); }
.product-topbar { display: flex; height: 49px; align-items: center; gap: 8px; border-bottom: 1px solid #edf0f5; padding: 0 15px; color: #28354c; font-size: 10px; }
.product-logo { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; background: #3269e8; color: #fff; font-size: 14px; font-weight: 800; }
.product-topbar-spacer { flex: 1; }
.product-avatar { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #eaf0ff; color: #3569dc; font-size: 10px; font-weight: 700; }
.product-body { display: flex; min-height: 330px; }
.product-sidebar { display: grid; width: 46px; align-content: start; gap: 17px; border-right: 1px solid #eff2f7; padding: 18px 14px; }
.product-sidebar i { width: 16px; height: 16px; border-radius: 5px; background: #e9edf4; }
.product-sidebar i.selected { background: #dce7ff; box-shadow: inset 0 0 0 5px #3269e8; }
.product-content { flex: 1; min-width: 0; padding: 20px 19px; }
.product-greeting, .product-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-greeting > div, .product-chart-heading > span:first-child { display: grid; gap: 5px; }
.product-greeting small, .product-chart-heading small, .product-float small { color: #98a4b7; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.product-greeting strong { font-size: 14px; letter-spacing: -.3px; }
.product-greeting > span { border: 1px solid #e8ecf3; border-radius: 5px; padding: 7px 8px; color: #718098; font-size: 8px; }
.product-greeting > span b { padding-left: 5px; color: #9aa7ba; }
.product-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 18px; }
.product-stats > div { display: grid; gap: 6px; border: 1px solid #edf0f5; border-radius: 7px; padding: 11px 9px; }
.product-stats small { color: #8190a7; font-size: 8px; }
.product-stats strong { font-size: 16px; letter-spacing: -.4px; }
.product-stats em { color: #a0a9b8; font-size: 7px; font-style: normal; }
.product-chart { margin-top: 13px; border: 1px solid #edf0f5; border-radius: 7px; padding: 12px 12px 8px; }
.product-chart-heading strong { font-size: 10px; }
.chart-key { color: #9aa5b7; font-size: 7px; }
.chart-key i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #5884ed; }
.chart-bars { display: flex; height: 91px; align-items: end; justify-content: space-around; gap: 8px; margin-top: 8px; border-bottom: 1px solid #edf0f5; background: repeating-linear-gradient(to bottom,transparent 0,transparent 29px,#f2f4f8 30px); }
.chart-bars i { width: 6%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#6f9aff,#a7c0ff); }
.chart-bars i:nth-child(1) { height: 34%; }
.chart-bars i:nth-child(2) { height: 53%; }
.chart-bars i:nth-child(3) { height: 43%; }
.chart-bars i:nth-child(4) { height: 69%; }
.chart-bars i:nth-child(5) { height: 59%; }
.chart-bars i:nth-child(6) { height: 85%; }
.chart-bars i:nth-child(7) { height: 74%; }
.chart-bars i:nth-child(8) { height: 96%; }
.chart-bars i:nth-child(3n) { background: linear-gradient(180deg,#3b6fdc,#8eb0ff); }
.chart-months { display: flex; justify-content: space-between; padding-top: 6px; color: #a4adbb; font-size: 7px; }
.product-company-row { display: flex; align-items: center; gap: 7px; margin-top: 11px; border: 1px solid #edf0f5; border-radius: 6px; padding: 9px; font-size: 8px; }
.product-company-row > span:first-child { color: #526179; font-weight: 700; }
.product-company-row > span:first-child b { color: #36b27e; }
.product-company-row > span:nth-child(2) { margin-left: auto; color: #8d99aa; }
.product-company-row > strong { color: #3269e8; font-size: 7px; white-space: nowrap; }
.product-float { position: absolute; right: -16px; bottom: 1px; display: flex; align-items: center; gap: 10px; border: 1px solid #e8edf5; border-radius: 9px; background: #fff; padding: 12px 15px; box-shadow: 0 12px 35px #1839651c; }
.float-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #e9f8f1; color: #219e69; font-weight: 800; }
.product-float > span:last-child { display: grid; gap: 4px; }
.product-float strong { color: #334159; font-size: 9px; }
.marketing-proof-strip { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 25px; overflow: hidden; border-top: 1px solid #eef2f5; border-bottom: 1px solid #e8eee9; background: linear-gradient(90deg,#f3f8f5,#f7f9fd 52%,#fff8ef); padding: 17px max(calc((100vw - 1200px) / 2), 5vw); }
.marketing-proof-label { display: inline-flex; align-items: center; gap: 9px; color: #61736b; font-size: 9px; font-weight: 800; white-space: nowrap; }
.proof-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34a878; box-shadow: 0 0 0 4px #34a8781a; animation: proof-pulse 2.4s ease-in-out infinite; }
.proof-marquee-window { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.proof-marquee-track { display: flex; width: max-content; animation: proof-marquee 32s linear infinite; }
.proof-marquee-window:hover .proof-marquee-track, .proof-marquee-window:focus-within .proof-marquee-track { animation-play-state: paused; }
.proof-marquee-group { display: flex; flex: none; align-items: center; gap: 13px; padding-right: 13px; }
.proof-marquee-item { display: grid; min-height: 51px; min-width: 265px; align-content: center; gap: 4px; border-left: 2px solid #66a782; padding: 4px 14px; }
.proof-marquee-item > span { color: #8b978e; font-size: 8px; font-weight: 800; }
.proof-marquee-item > strong { color: #30433a; font-size: 11px; font-weight: 700; }
.proof-marquee-item.proof-demo { border-color: #d49843; }
.proof-marquee-item.proof-report { border-color: #6484d8; }
@keyframes proof-marquee { to { transform: translateX(-50%); } }
@keyframes proof-pulse { 50% { box-shadow: 0 0 0 7px #34a8780a; } }
.marketing-section, .marketing-journey, .marketing-bottom-cta, .marketing-footer { padding-right: max(calc((100vw - 1120px) / 2), 6vw); padding-left: max(calc((100vw - 1120px) / 2), 6vw); }
.marketing-trust { padding-top: 35px; padding-bottom: 36px; border-bottom: 1px solid #eef1f6; text-align: center; }
.marketing-trust p { margin-bottom: 19px; color: #a0aabd; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.marketing-trust > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px 65px; color: #78869d; font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.marketing-section { padding-top: 98px; padding-bottom: 100px; }
.marketing-section-heading { max-width: 650px; margin: 0 auto 43px; text-align: center; }
.marketing-eyebrow { color: #6b8ee2; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.marketing-section-heading h2, .marketing-journey h2, .marketing-bottom-cta h2 { margin: 12px 0; font-size: 35px; font-weight: 800; letter-spacing: -1.6px; }
.marketing-section-heading p, .marketing-journey-copy > p, .marketing-bottom-cta p { color: var(--marketing-muted); font-size: 13px; line-height: 1.75; }
.marketing-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.marketing-feature-card { min-height: 225px; border: 1px solid #e9edf4; border-radius: 10px; background: #fff; padding: 22px; transition: transform .18s, box-shadow .18s; }
.marketing-feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px #1d37600d; }
.feature-symbol { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 10px; font-size: 17px; font-weight: 700; }
.feature-blue { background: #edf3ff; color: #386fe0; }
.feature-violet { background: #f2edff; color: #7758d1; }
.feature-green { background: #eaf8f1; color: #319c6c; }
.feature-orange { background: #fff4e8; color: #d38836; }
.marketing-feature-card h3 { margin: 17px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.marketing-feature-card p { min-height: 55px; margin-bottom: 14px; color: #7d899d; font-size: 11px; line-height: 1.7; }
.marketing-feature-card > a:not(.button) { color: #386fe0; font-size: 10px; font-weight: 700; }
.marketing-feature-card > a span { padding-left: 4px; }
.marketing-feature-cta { border-color: #e2eafe; background: linear-gradient(135deg,#f6f9ff,#eef4ff); }
.marketing-feature-cta h3 { margin-top: 13px; }
.marketing-journey { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; padding-top: 78px; padding-bottom: 80px; background: #f7f9fd; }
.marketing-journey h2 { font-size: 32px; }
.marketing-journey-copy .button { margin-top: 10px; }
.marketing-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.marketing-steps li { display: flex; gap: 17px; border-bottom: 1px solid #e6ebf3; padding: 17px 0; }
.marketing-steps li:first-child { padding-top: 0; }
.marketing-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.marketing-steps li > span { color: #7a98dc; font-family: var(--font-heading); font-size: 13px; font-weight: 800; }
.marketing-steps h3 { margin: 0 0 5px; font-size: 13px; font-weight: 800; }
.marketing-steps p { margin: 0; color: #7d899d; font-size: 11px; line-height: 1.6; }
.marketing-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 76px auto; padding-top: 32px; padding-bottom: 32px; border: 1px solid #e5ecfb; border-radius: 12px; background: radial-gradient(circle at 90% 20%,#e7efff,transparent 50%),#f7f9ff; width: min(1120px,calc(100% - 40px)); }
.marketing-bottom-cta h2 { margin: 9px 0 5px; font-size: 27px; }
.marketing-bottom-cta p { margin-bottom: 0; }
.marketing-footer { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #edf0f5; }
.marketing-footer .marketing-brand { font-size: 16px; }
.marketing-footer .marketing-brand-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 16px; }
.marketing-footer > span { color: #929db0; font-size: 10px; }
.marketing-footer > div { display: flex; gap: 18px; }
.marketing-footer > div a { color: #68768d; font-size: 10px; font-weight: 600; }
.hr-editor { margin-top: 18px; }
.hr-editor > summary { width: max-content; }
.hr-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 15px; border-top: 1px solid var(--line); padding-top: 17px; }
.hr-full-width, .hr-form-submit { grid-column: 1 / -1; }
.hr-form-submit { display: flex; justify-content: flex-end; }
.hr-create-login > span { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 11px; }
.hr-create-login input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.hr-created-login { margin-top: 16px; border-color: #cfe7d8; background: #f1f8f2; }
.hr-created-login dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 12px 0 0; }
.hr-created-login dl > div { min-width: 0; border: 1px solid #dcebe0; border-radius: 6px; background: #fff; padding: 9px 10px; }
.hr-created-login dt { margin-bottom: 5px; color: #78877d; font-size: 9px; font-weight: 700; }
.hr-created-login dd { margin: 0; overflow-wrap: anywhere; color: #2c4938; font-size: 11px; font-weight: 700; }
.hr-created-login code { color: #235a41; font-size: 11px; user-select: all; }
.hr-action-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.hr-action-row form { display: flex; align-items: end; gap: 8px; }
.hr-action-row .field-label { min-width: 180px; }
.hr-decision-form { display: grid; min-width: 150px; gap: 6px; }
.hr-disclaimer { margin: 16px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

@media (max-width: 1000px) {
    .marketing-header { padding-right: 4vw; padding-left: 4vw; }
    .marketing-hero { grid-template-columns: 1fr; gap: 35px; padding: 65px 8vw 80px; }
    .marketing-hero-copy { max-width: 740px; }
    .marketing-product { width: min(700px, 100%); margin: 0 auto; padding-right: 15px; }
    .marketing-journey { gap: 45px; }
    .marketing-section, .marketing-journey, .marketing-bottom-cta, .marketing-footer { padding-right: 7vw; padding-left: 7vw; }
}
@media (max-width: 700px) {
    .marketing-header { min-height: 66px; }
    .marketing-nav { display: none; }
    .marketing-actions { gap: 12px; }
    .marketing-actions .button { min-height: 37px; padding: 0 10px; font-size: 10px; }
    .marketing-signin { font-size: 11px; }
    .marketing-brand { font-size: 17px; }
    .marketing-brand-mark { width: 30px; height: 30px; }
    .marketing-hero { min-height: 0; padding-top: 53px; padding-bottom: 66px; }
    .marketing-hero h1 { font-size: clamp(39px,10vw,56px); letter-spacing: -2.4px; }
    .marketing-hero-copy > p { font-size: 14px; }
    .marketing-proof-strip { grid-template-columns: 1fr; gap: 6px; padding: 12px 7vw 14px; }
    .marketing-proof-label { font-size: 8px; }
    .proof-marquee-item { min-width: 235px; }
    .marketing-proof { gap: 10px 15px; margin-top: 28px; }
    .marketing-product { padding-left: 0; }
    .product-window { transform: none; }
    .product-content { padding: 15px 11px; }
    .product-stats { gap: 5px; }
    .product-stats > div { padding: 8px 6px; }
    .product-stats strong { font-size: 13px; }
    .product-stats small, .product-stats em { font-size: 6px; }
    .product-company-row > span:nth-child(2) { display: none; }
    .product-float { right: -4px; }
    .marketing-trust > div { gap: 15px 25px; font-size: 10px; }
    .marketing-section { padding-top: 65px; padding-bottom: 65px; }
    .marketing-section-heading h2, .marketing-journey h2 { font-size: 29px; }
    .marketing-feature-grid { grid-template-columns: 1fr; }
    .marketing-feature-card { min-height: 0; }
    .marketing-feature-card p { min-height: 0; }
    .marketing-journey { grid-template-columns: 1fr; gap: 32px; padding-top: 58px; padding-bottom: 58px; }
    .marketing-bottom-cta { align-items: flex-start; flex-direction: column; margin-top: 45px; margin-bottom: 45px; padding-top: 25px; padding-bottom: 25px; }
    .marketing-bottom-cta h2 { font-size: 24px; }
    .marketing-footer { align-items: flex-start; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
    .marketing-footer > span { order: 3; width: 100%; }
    .hr-form-grid { grid-template-columns: 1fr; }
    .hr-full-width, .hr-form-submit { grid-column: auto; }
    .hr-created-login dl { grid-template-columns: 1fr; }
    .hr-action-row form { align-items: stretch; flex: 1 1 100%; }
    .hr-action-row .field-label { flex: 1; }
}
@media (max-width: 850px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { min-height: 0; padding: 22px 28px 18px; }
    .auth-aside-copy { padding: 28px 0 18px; }
    .auth-aside-kicker { margin-bottom: 12px; }
    .auth-aside-copy h1 { max-width: 620px; font-size: 32px; }
    .auth-aside-copy > p:not(.auth-aside-kicker) { max-width: 620px; margin-bottom: 17px; font-size: 12px; }
    .auth-capability-list { max-width: 600px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border-top: 0; }
    .auth-capability-list span { min-height: 48px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; border: 1px solid #ffffff18; border-radius: 5px; padding: 7px 9px; font-size: 9px; }
    .auth-aside-foot { display: none; }
    .auth-main { min-height: 570px; padding: 20px 28px 16px; }
    .auth-content { margin: 30px 0; }
}
@media (max-width: 520px) {
    .auth-aside { padding: 17px 19px 14px; }
    .auth-brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; font-size: 15px; }
    .auth-brand .brand-name { font-size: 15px; }
    .auth-aside-copy { padding: 21px 0 13px; }
    .auth-aside-kicker { margin-bottom: 9px; font-size: 8px; }
    .auth-aside-copy h1 { max-width: 390px; margin-bottom: 9px; font-size: 27px; }
    .auth-aside-copy > p:not(.auth-aside-kicker) { margin-bottom: 12px; font-size: 11px; line-height: 1.55; }
    .auth-capability-list { gap: 5px; }
    .auth-capability-list span { min-height: 43px; padding: 6px; font-size: 8px; }
    .auth-main { min-height: 510px; padding: 16px 18px 14px; }
    .auth-back-link { font-size: 9px; }
    .auth-secure-label { font-size: 7px; }
    .auth-content { margin: 24px 0; }
    .login-card, .suspended-panel { padding: 24px 20px; }
    .login-card h1 { font-size: 23px; }
    .login-card > .page-subtitle { margin-bottom: 21px; font-size: 11px; }
    .auth-main-foot { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .proof-live-dot { animation: none; }
    .proof-marquee-window { overflow-x: auto; mask-image: none; }
    .proof-marquee-track { animation: none; }
}

.sidebar-signout { width: 100%; margin-top: 8px; }
.auth-aside .auth-company-logo { max-height: 48px; max-width: 200px; background: #fff; padding: 6px; border-radius: 8px; }