/* Wise-inspired design system, adapted to Excel's existing blue identity. */
:root {
  --primary: #44bee4;
  --primary-hover: #71d2ee;
  --primary-pale: #dff4fb;
  --canvas-soft: #eaf0f3;
  --ink: #10263c;
  --body: #455b6b;
  --muted: #627786;
  --navy: var(--ink);
  --cyan: var(--primary);
  --cyan-dark: #147d9e;
  --ice: var(--primary-pale);
  --line: #d6e1e7;
  --success: #147d9e;
  --radius-card: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "calt";
  color: var(--ink);
  background: var(--canvas-soft);
  line-height: 1.5;
}
body { background: var(--canvas-soft); color: var(--ink); }
.has-sidebar { padding-left: 256px; }
.app-sidebar { width: 256px; padding: 32px 20px 24px; background: #fff; color: var(--ink); border-right: 1px solid var(--line); box-shadow: none; }
.sidebar-brand { margin: 4px 8px 40px; color: var(--ink); gap: 12px; }
.sidebar-brand > span { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--ink); font-size: 14px; }
.sidebar-brand strong { font-size: 23px; font-weight: 900; letter-spacing: -.06em; }
.sidebar-brand small { color: var(--body); font-size: 10px; letter-spacing: .12em; }
.app-sidebar nav { gap: 8px; }
.app-sidebar nav a { min-height: 48px; padding: 12px 16px; border-radius: 24px; color: var(--body); font-size: 13px; font-weight: 600; }
.app-sidebar nav a:hover { background: var(--canvas-soft); color: var(--ink); }
.app-sidebar nav a[aria-current="page"] { background: var(--primary); color: var(--ink); box-shadow: none; font-weight: 700; }
.app-sidebar nav i { font-size: 19px; }
.sidebar-toggle { border: 0; background: var(--canvas-soft); color: var(--body); border-radius: 50%; }
.sidebar-toggle:hover { background: var(--primary-pale); color: var(--ink); }
.sidebar-account { border-color: var(--line); padding: 24px 12px 0; gap: 8px; }
.sidebar-account span { color: var(--muted); font-size: 10px; }
.sidebar-account strong { color: var(--ink); font-size: 12px; }
.sidebar-account button { min-height: 40px; color: var(--ink); background: var(--canvas-soft); border: 0; font-size: 12px; }
.sidebar-account button:hover { background: var(--primary-pale); color: var(--ink); }
.sidebar-reveal { background: #fff; color: var(--ink); border-radius: 50%; box-shadow: none; }
.shell, .has-sidebar .shell { max-width: 1500px; margin: 0 auto; padding: 48px 40px 72px; }
.has-sidebar .overview-shell { padding-top: 48px; }
.eyebrow { color: var(--cyan-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.wizard-intro { max-width: 860px; margin-bottom: 32px; }
.wizard-intro h1, .records-top h1, .history-top h1, .login-story h1 { font-size: clamp(40px, 4.5vw, 64px); font-weight: 900; line-height: 1.02; letter-spacing: -.055em; margin: 16px 0; text-wrap: balance; }
.wizard-intro p, .records-top p, .history-top p { font-size: 16px; line-height: 1.6; color: var(--body); max-width: 640px; }
.records-top, .history-top { margin-bottom: 32px; align-items: center; }
.card, .summary-card, .request-summary, .request-item, .request-empty, .spreadsheet-mapping-card { border-radius: var(--radius-card); border: 0; background: #fff; box-shadow: none; padding: 24px; }
.card-heading { align-items: flex-start; gap: 16px; }
.card-heading h2, .settings-card h2, .request-dialog h2 { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.card-heading p { font-size: 14px; line-height: 1.6; color: var(--body); }
.step-index { width: 40px; height: 40px; flex-basis: 40px; border-radius: 50%; background: var(--primary-pale); color: var(--ink); font-weight: 700; }
.start-card { max-width: 920px; }
.start-grid { margin-top: 32px; gap: 24px; }
label { color: var(--body); font-size: 13px; font-weight: 600; }
input, select, textarea, .login-form input { padding: 12px 16px; border: 1px solid #9baeba; border-radius: 12px; color: var(--ink); background: #fff; font-size: 14px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { min-height: 48px; }
input:focus, select:focus, textarea:focus, .login-form input:focus { border-color: var(--cyan-dark); outline: 0; box-shadow: 0 0 0 3px #44bee433; }
input:disabled, select:disabled { background: var(--canvas-soft); color: var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cyan-dark); }
button, .page-action, .primary-link, .download-link { border-radius: 24px; font-weight: 600; }
.primary, .page-action, .records-nav .primary-link, .login-form > button { min-height: 48px; padding: 12px 24px; border: 0; border-radius: 24px; background: var(--primary); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: none; }
.primary:hover, .page-action:hover, .login-form > button:hover { background: var(--primary-hover); color: var(--ink); transform: none; box-shadow: none; }
.secondary { min-height: 48px; padding: 12px 24px; background: var(--canvas-soft); color: var(--ink); font-size: 14px; }
.secondary:hover { background: var(--primary-pale); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--cyan-dark); outline-offset: 3px; }
button:disabled, .primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.actions { margin-top: 24px; gap: 12px; }
.field-help, .hint { font-size: 12px; line-height: 1.5; color: var(--muted); }
.progress { gap: 12px; margin-bottom: 32px; }
.progress li { min-height: 80px; padding: 16px; border: 0; border-radius: 24px; background: #ffffff80; color: var(--muted); }
.progress li span { border-radius: 50%; background: #dfe7ec; color: var(--body); }
.progress b { font-size: 13px; font-weight: 600; }
.progress small { font-size: 11px; font-weight: 400; }
.progress .is-current { background: var(--ink); color: #fff; }
.progress .is-current span { background: var(--primary); color: var(--ink); }
.drop-zone { min-height: 240px; padding: 32px 24px; border-radius: 24px; background: var(--primary-pale); border-color: var(--cyan-dark); color: var(--ink); }
.drop-zone strong { font-size: 20px; font-weight: 600; }
.drop-zone small { font-size: 13px; }
.upload-icon { width: 56px; height: 56px; color: var(--ink); }
.paste-area, .export-bar, .request-progress, .quickbooks-verification, .client-overview-panel, .communication-settings-wrap { border-radius: 16px; background: var(--canvas-soft); box-shadow: none; }
.table-wrap, .matrix-wrap { border-radius: 16px; border-color: var(--line); }
th { padding: 16px; background: var(--canvas-soft); color: var(--body); font-size: 11px; font-weight: 600; }
td { padding: 16px; font-size: 13px; border-color: var(--line); }
.summary-card strong, .request-summary-item > strong { font-size: 36px; font-weight: 900; letter-spacing: -.045em; }
.summary-card span { font-size: 11px; font-weight: 600; }
.summary-card.is-done { background: var(--primary-pale); }
.summary-card.is-closed { background: var(--ink); }
.summary-card.is-closed strong { color: var(--primary); }
.client-row, .contact-row, .bank-row, .document-row, .selected-file { border-radius: 16px; }
.client-information-tabs { border-radius: 24px; padding: 6px; }
.client-information-tab { min-height: 40px; border-radius: 24px; font-size: 12px; font-weight: 600; }
.client-information-tab.is-active { box-shadow: none; }
.matrix-heading { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 24px; }
.matrix-filters { grid-template-columns: 110px minmax(0, 1fr); }
.matrix-legend { font-size: 11px; gap: 12px 20px; margin: 24px 0 16px; }
.status-matrix thead th { background: var(--ink); color: #fff; height: 48px; font-size: 10px; }
.status-matrix tbody th a { font-size: 12px; font-weight: 600; }
.status-matrix td { height: 48px; }
.matrix-legend .done, .status-matrix td.done { background: var(--primary-pale); color: var(--cyan-dark); border-color: #b2ddea; }
.product-update-card, .request-dialog { border-radius: 24px; border: 0; box-shadow: 0 24px 80px #10263c24; }
.product-update-card h2 { font-size: 32px; font-weight: 900; }
.request-controls > button { min-height: 48px; border-radius: 24px; font-size: 13px; }
.request-item h2 { font-size: 24px; font-weight: 600; }
.request-description { font-size: 14px; }
.request-item-actions button { min-height: 40px; border-radius: 24px; padding: 10px 16px; font-size: 12px; }
.request-status { padding: 8px 12px; font-weight: 600; font-size: 11px; }
.request-empty { padding: 48px 24px; }
.request-empty h2 { font-size: 24px; }
/* Login uses the same calm split composition as the reference hero. */
body.login-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 64px; padding: 64px max(32px, calc((100vw - 1200px) / 2)); min-height: 100vh; background: var(--canvas-soft); }
.login-story { max-width: 620px; }
.login-story .sidebar-brand { margin: 0 0 64px; }
.login-story h1 { font-size: clamp(48px, 6vw, 80px); }
.login-story > p { max-width: 440px; font-size: 18px; line-height: 1.6; color: var(--body); }
.login-story .login-note { display: inline-flex; margin-top: 24px; padding: 12px 20px; border-radius: 24px; background: var(--primary-pale); color: var(--ink); font-size: 13px; font-weight: 600; }
.login-card { width: 100%; padding: 40px; border: 0; border-radius: 24px; box-shadow: none; }
.login-card h1 { font-size: 36px; line-height: 1.05; font-weight: 900; letter-spacing: -.045em; }
.login-card p { color: var(--body); font-size: 14px; }
.login-form { gap: 20px; }
.login-form label { color: var(--body); font-weight: 600; }
.login-form input { margin: 0; }
.login-form .toggle-password { min-height: 36px; }
.login-card .lock { margin-bottom: 0; margin-top: 24px; font-size: 12px; }
@media (min-width: 1200px) {
  body[data-section="home"] .shell:has(#stepJob:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px 32px; align-items: center; }
  .shell:has(#stepJob:not([hidden])) .wizard-intro { text-align: left; margin: 0; }
  .shell:has(#stepJob:not([hidden])) .wizard-intro h1 { font-size: clamp(48px, 4.5vw, 72px); }
  .shell:has(#stepJob:not([hidden])) #stepJob { grid-column: 2; grid-row: 1; }
  .shell:has(#stepJob:not([hidden])) .progress { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .shell:has(#stepJob:not([hidden])) .start-card { padding: 32px; }
}
@media (max-width: 1023px) {
  .shell, .has-sidebar .shell { padding: 32px 24px 56px; }
  .matrix-heading { grid-template-columns: 1fr; }
  body.login-page { gap: 32px; padding: 40px 24px; }
  .login-card { padding: 32px; }
}
@media (max-width: 760px) {
  .has-sidebar { padding-left: 0; }
  .app-sidebar { position: relative; width: 100%; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-brand { margin: 0 16px 0 0; }
  .sidebar-brand > span { width: 36px; height: 36px; }
  .app-sidebar nav { gap: 4px; }
  .app-sidebar nav a { min-width: 44px; min-height: 44px; padding: 10px; }
  .sidebar-account { margin: 0 0 0 8px; padding: 0 0 0 8px; border-left: 1px solid var(--line); border-top: 0; }
  .sidebar-account button { min-height: 44px; white-space: nowrap; }
  .shell, .has-sidebar .shell, .has-sidebar .overview-shell { padding: 32px 16px 48px; }
  .wizard-intro h1, .records-top h1, .history-top h1 { font-size: 40px; }
  .wizard-intro p, .records-top p, .history-top p { font-size: 14px; }
  .card { padding: 24px; }
  .card-heading h2 { font-size: 24px; }
  .progress { gap: 8px; }
  .progress li { min-height: 64px; }
  .records-top { align-items: flex-start; }
  body.login-page { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px; }
  .login-story .sidebar-brand { margin-bottom: 32px; }
  .login-story h1 { font-size: 48px; }
  .login-story > p { font-size: 16px; }
  .login-story .login-note { display: none; }
  .login-card { max-width: 520px; justify-self: center; }
}
@media (max-width: 480px) {
  .card { padding: 24px 20px; }
  .card-heading { gap: 12px; }
  .card-heading h2 { font-size: 22px; }
  .card-heading p { font-size: 13px; }
  .records-top { flex-direction: column; gap: 16px; }
  .records-top .page-action { align-self: flex-start; }
  .login-card { padding: 32px 24px; }
  .matrix-filters { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.sidebar-brand .excel-logo { display: block; width: 192px; height: auto; max-width: 100%; }
.login-story .sidebar-brand .excel-logo { width: 280px; }
@media (max-width: 760px) {
  .app-sidebar .sidebar-brand { flex-shrink: 0; }
  .app-sidebar .sidebar-brand .excel-logo { width: 100px; }
  .login-story .sidebar-brand .excel-logo { width: 220px; }
}
.app-sidebar nav i svg { display: block; width: 21px; height: 21px; }
.sidebar-toggle svg { width: 16px; height: 16px; }
.sidebar-reveal svg { width: 20px; height: 20px; }
.toggle-password { display: grid; place-items: center; }
.toggle-password svg { width: 20px; height: 20px; }

.toggle-password .eye-slash[hidden] { display: none; }