:root { --navy: #132238; --green: #24a36a; --ink: #1e293b; --muted: #64748b; --line: #e2e8f0; --surface: #f8fafc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--surface); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 245px; padding: 28px 20px; color: #dbeafe; background: var(--navy); display: flex; flex-direction: column; }
.brand { color: white; font-size: 24px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }.brand span { color: #52d18d; }
.eyebrow { margin: 36px 0 4px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.workspace { margin: 0 0 22px; font-weight: 700; }
.workspace-switcher { margin: 0 0 22px; }.workspace-switcher select { width: 100%; padding: 9px 8px; color: #e2e8f0; border: 1px solid #3c506e; border-radius: 7px; background: #243752; font: inherit; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
nav { display: grid; gap: 5px; }.nav-link { padding: 10px 12px; color: #cbd5e1; border-radius: 8px; text-decoration: none; }.nav-link:hover, .nav-link.active { color: white; background: #243752; }.nav-link.disabled { color: #7c8ba1; }.nav-link small { display: block; font-size: 10px; }
.sidebar-footer { margin-top: auto; color: #94a3b8; font-size: 12px; }.main-content { width: min(1180px, 100%); margin: 0 auto; padding: 34px 42px; }.topbar { display: flex; justify-content: space-between; align-items: start; margin-bottom: 32px; }.topbar .eyebrow { margin: 0; }.topbar h1 { margin: 4px 0 0; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.04em; }.link-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.notice { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: white; }.notice.error { color: #b42318; border-color: #fecdca; background: #fff6f6; }.metric-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }.metric, .panel { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 2px 8px #0f172a08; }.metric span { display: block; color: var(--muted); font-size: 13px; }.metric strong { display: block; margin-top: 10px; color: var(--navy); font-size: 28px; }.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }.panel-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 18px; padding-bottom: 12px; }.panel h2 { margin: 0; font-size: 18px; }.muted { color: var(--muted); }.finance-total { color: var(--navy); font-size: 32px; font-weight: 800; }.activity { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }.activity span { color: var(--muted); }
.global-search-panel { margin-bottom: 18px; }.global-search-panel h2 { margin: 0 0 10px; font-size: 18px; }.global-search-form { display: flex; gap: 8px; }.global-search-form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }.global-search-form button { padding: 10px 14px; color: white; border: 0; border-radius: 7px; background: var(--green); cursor: pointer; font-weight: 700; }.global-search-results { display: grid; gap: 7px; margin-top: 12px; }.global-search-result { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }.global-search-result span { color: var(--muted); font-size: 13px; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; }.login-card { width: min(420px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 12px 40px #0f172a12; }.login-card h1 { margin: 40px 0 4px; }.login-card form { display: grid; gap: 8px; margin-top: 24px; }.login-card label { margin-top: 8px; font-weight: 650; }.login-card input { width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }.primary-button { margin-top: 14px; padding: 12px; color: white; border: 0; border-radius: 8px; background: var(--green); cursor: pointer; font-weight: 700; }
.login-help { margin: 18px 0 0; text-align: center; }.login-help a { color: #1d4ed8; }.button-link { display: inline-block; text-decoration: none; text-align: center; }
@media (max-width: 900px) { .sidebar { width: 205px; }.main-content { padding: 26px; }.metric-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .app-shell { display: block; }.sidebar { width: 100%; padding: 18px; }.sidebar .eyebrow { margin-top: 20px; }.sidebar-footer { margin-top: 20px; }.main-content { padding: 22px 16px; }.topbar { gap: 12px; }.metric-grid, .content-grid { grid-template-columns: 1fr 1fr; }.metric { padding: 14px; }.metric strong { font-size: 23px; } }
.contacts-layout { align-items: start; }.data-form { display: grid; gap: 7px; }.data-form label { margin-top: 5px; font-weight: 650; }.data-form input, .data-form select { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }.data-form input[type="checkbox"] { width: auto; margin-right: 6px; }.data-form label:has(input[type="checkbox"]) { font-weight: 500; }.form-error { color: #b42318; }.search-form { display: flex; gap: 6px; }.search-form input { width: 150px; padding: 7px; border: 1px solid #cbd5e1; border-radius: 7px; }.search-form button { border: 1px solid #cbd5e1; border-radius: 7px; background: white; cursor: pointer; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th, td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.search-form select { padding: 7px; border: 1px solid #cbd5e1; border-radius: 7px; background: white; }.stage-badge { padding: 3px 8px; border-radius: 999px; background: #e2e8f0; font-size: 12px; }.stage-won { color: #166534; background: #dcfce7; }.stage-lost { color: #991b1b; background: #fee2e2; }.stage-proposal { color: #1d4ed8; background: #dbeafe; }
.inline-form { display: flex; align-items: center; gap: 6px; }.inline-form input { width: 82px; padding: 6px; border: 1px solid #cbd5e1; border-radius: 6px; }.small-action { padding: 6px 9px; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 6px; background: #eff6ff; font-size: 12px; text-decoration: none; cursor: pointer; }
.finance-entry { margin-bottom: 18px; }.finance-lines { display: grid; gap: 9px; margin: 18px 0; }.finance-line { display: grid; grid-template-columns: 25px 1.4fr 1.4fr 1fr 1fr; gap: 8px; align-items: end; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }.finance-line > div { display: grid; gap: 4px; }.finance-line input, .finance-line select { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }.finance-line > span { padding-bottom: 9px; color: var(--muted); font-weight: 700; }
.period-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 16px; }.period-form label { color: var(--muted); font-size: 12px; font-weight: 700; }.period-form input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }.statement-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }.statement-summary .metric { padding: 14px; }.statement-summary .metric strong { margin-top: 5px; font-size: 22px; }
@media (max-width: 900px) { .finance-line { grid-template-columns: 22px 1fr 1fr; }.finance-line > div:nth-of-type(n+3) { grid-column: span 1; } }
.quote-create { margin-bottom: 18px; }.quote-create h3 { margin: 24px 0 10px; font-size: 16px; }.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.form-grid > div, .quote-line > div { display: grid; gap: 5px; }.form-grid input, .form-grid select, .form-grid textarea, .quote-line input, .quote-line select { width: 100%; padding: 9px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }.quote-lines { display: grid; gap: 10px; }.quote-line { display: grid; grid-template-columns: 28px 1.2fr 1.5fr .7fr .8fr .6fr; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }.line-number { padding-bottom: 10px; color: var(--muted); font-weight: 700; }
@media (max-width: 900px) { .form-grid { grid-template-columns: repeat(2, 1fr); }.quote-line { grid-template-columns: 22px 1fr 1fr; }.quote-line > div:nth-of-type(n+4) { grid-column: span 1; } }
.portal-shell { min-height: 100vh; background: var(--surface); }.portal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(18px, 5vw, 72px); background: var(--navy); }.portal-brand { font-size: 22px; }.portal-account { display: flex; align-items: center; gap: 18px; color: #dbeafe; font-size: 14px; }.portal-account .link-button { color: #cbd5e1; }.portal-main { width: min(1120px, 100%); margin: 0 auto; padding: 54px 28px; }.portal-eyebrow { margin: 0; color: var(--green); }.portal-main h1 { margin: 4px 0 8px; color: var(--navy); font-size: clamp(28px, 5vw, 44px); letter-spacing: -.04em; }.portal-intro { max-width: 650px; margin: 0 0 30px; color: var(--muted); }.portal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.portal-panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 2px 8px #0f172a08; }.portal-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }.portal-row:last-child { border-bottom: 0; }.portal-row strong, .portal-row span { display: block; }.portal-row .small-action { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 780px) { .portal-main { padding: 38px 18px; }.portal-cards { grid-template-columns: 1fr; }.portal-header { padding: 16px 18px; } }
.portal-actions { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.portal-ticket-reply { display: flex; gap: 5px; align-items: center; }.portal-ticket-reply input { width: 120px; padding: 6px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.portal-ticket-create { display: grid; gap: 8px; margin: 0 0 14px; }.portal-ticket-create textarea { min-height: 5rem; resize: vertical; }
.public-knowledge-shell { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0; }.public-knowledge-shell h1 { color: var(--navy); }.public-knowledge-list { display: grid; gap: 14px; margin-top: 28px; }.public-knowledge-card, .public-knowledge-article { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: white; }.public-knowledge-card h2 { margin: 0 0 8px; font-size: 21px; }.public-knowledge-card a, .public-knowledge-shell a { color: var(--navy); }.public-knowledge-card p, .public-knowledge-summary { color: var(--muted); }.public-knowledge-body { line-height: 1.7; }
.public-blog-shell { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0; }.public-blog-shell h1 { color: var(--navy); }.public-blog-list { display: grid; gap: 16px; margin-top: 28px; }.public-blog-card, .public-blog-article { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: white; }.public-blog-card h2 { margin: 0 0 8px; }.public-blog-card a, .public-blog-shell a { color: var(--navy); }.public-blog-card p, .public-blog-summary { color: var(--muted); }.public-blog-body { line-height: 1.75; }
.landing-shell { min-height: 100vh; color: var(--ink); background: linear-gradient(180deg, #f8fafc 0%, #eef7f2 100%); }.landing-header { display: flex; justify-content: space-between; align-items: center; width: min(1200px, 100%); margin: 0 auto; padding: 24px 28px; }.landing-header .brand { color: var(--navy); }.landing-nav { display: flex; align-items: center; gap: 22px; }.landing-nav a:not(.primary-button) { color: var(--muted); text-decoration: none; }.landing-login { font-weight: 700; }.landing-nav .primary-button { margin-top: 0; padding: 9px 14px; }.landing-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: center; width: min(1200px, 100%); margin: 0 auto; padding: 86px 28px 100px; }.landing-eyebrow { margin: 0 0 10px; color: var(--green); }.landing-hero h1 { max-width: 720px; margin: 0; color: var(--navy); font-size: clamp(42px, 7vw, 76px); line-height: 1.02; letter-spacing: -.065em; }.landing-lead { max-width: 650px; margin: 26px 0 0; color: var(--muted); font-size: 19px; }.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }.landing-actions .primary-button { margin-top: 0; }.landing-secondary { color: var(--navy); font-weight: 700; text-decoration: none; }.landing-hero-card { padding: 30px; border: 1px solid #b9e2cb; border-radius: 22px; background: #ffffffcc; box-shadow: 0 20px 55px #174b341c; }.landing-hero-card .stage-badge { display: inline-block; color: #166534; background: #dcfce7; }.landing-hero-card h2 { margin: 26px 0 8px; color: var(--navy); font-size: 28px; }.landing-hero-card p { color: var(--muted); }.landing-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }.landing-stat-grid strong, .landing-stat-grid span { display: block; }.landing-stat-grid strong { color: var(--green); font-size: 30px; }.landing-stat-grid span { color: var(--muted); font-size: 12px; }.landing-section { width: min(1200px, 100%); margin: 0 auto; padding: 30px 28px 92px; }.landing-section h2, .landing-cta h2 { max-width: 700px; margin: 0 0 16px; color: var(--navy); font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; }.landing-audience p:last-child { max-width: 680px; color: var(--muted); font-size: 18px; }.landing-module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }.landing-module-grid article { min-height: 190px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; }.landing-module-grid article span { color: var(--green); font-size: 12px; font-weight: 800; }.landing-module-grid h3 { margin: 22px 0 7px; color: var(--navy); font-size: 20px; }.landing-module-grid p { margin: 0; color: var(--muted); font-size: 14px; }.landing-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: min(1200px, calc(100% - 56px)); margin: 0 auto 70px; padding: 34px; border-radius: 18px; background: var(--navy); }.landing-cta h2 { margin: 0; color: white; font-size: 34px; }.landing-cta .landing-eyebrow { color: #7ee2aa; }.landing-cta .primary-button { flex-shrink: 0; margin-top: 0; }.landing-footer { display: flex; justify-content: space-between; width: min(1200px, 100%); margin: 0 auto; padding: 24px 28px 34px; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .landing-hero { grid-template-columns: 1fr; gap: 30px; padding-top: 55px; }.landing-module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .landing-header { align-items: flex-start; }.landing-nav { gap: 10px; }.landing-nav > a:not(.primary-button) { display: none; }.landing-hero { padding: 42px 18px 68px; }.landing-section { padding: 22px 18px 64px; }.landing-module-grid { grid-template-columns: 1fr; }.landing-cta { display: block; width: calc(100% - 36px); margin-bottom: 45px; padding: 26px; }.landing-cta .primary-button { display: inline-block; margin-top: 20px; }.landing-footer { display: block; padding: 18px; }.landing-footer span { display: block; margin-top: 5px; } }
.features-shell { min-height: 100vh; color: var(--ink); background: linear-gradient(180deg, #f8fafc 0%, #eef7f2 100%); }.features-header { display: flex; justify-content: space-between; align-items: center; width: min(1200px, 100%); margin: 0 auto; padding: 24px 28px; }.features-header .brand { color: var(--navy); }.features-nav { display: flex; align-items: center; gap: 20px; }.features-nav a:not(.primary-button) { color: var(--muted); text-decoration: none; }.features-nav .primary-button { margin-top: 0; padding: 9px 14px; }.features-hero { width: min(900px, 100%); margin: 0 auto; padding: 76px 28px 58px; }.features-hero h1 { max-width: 820px; margin: 0; color: var(--navy); font-size: clamp(38px, 6vw, 68px); line-height: 1.04; letter-spacing: -.06em; }.features-hero > p:last-child { max-width: 650px; margin-top: 24px; color: var(--muted); font-size: 19px; }.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: min(1200px, 100%); margin: 0 auto; padding: 0 28px 82px; }.feature-card { min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: white; }.feature-number { margin: 0; color: var(--green); font-size: 12px; font-weight: 800; }.feature-card h2 { margin: 24px 0 8px; color: var(--navy); font-size: 21px; }.feature-card p:not(.feature-number) { margin: 0; color: var(--muted); font-size: 14px; }.feature-card span { display: block; margin-top: 18px; color: var(--ink); font-size: 13px; line-height: 1.5; }.features-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: min(1144px, calc(100% - 56px)); margin: 0 auto 70px; padding: 34px; border-radius: 18px; background: var(--navy); }.features-cta h2 { max-width: 650px; margin: 0; color: white; font-size: 32px; letter-spacing: -.04em; }.features-cta .eyebrow { margin: 0 0 9px; color: #7ee2aa; }.features-cta .primary-button { flex-shrink: 0; margin-top: 0; }.features-shell .landing-footer { color: var(--muted); }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features-header { align-items: flex-start; padding: 20px 18px; }.features-hero { padding: 48px 18px 36px; }.features-grid { grid-template-columns: 1fr; padding: 0 18px 58px; }.features-cta { display: block; width: calc(100% - 36px); margin-bottom: 45px; padding: 26px; }.features-cta .primary-button { display: inline-block; margin-top: 20px; } }
.features-cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }