:root {
  --color-bg: #f6f7fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f0f3f8;
  --color-surface-blue: #eef3ff;
  --color-text: #151922;
  --color-text-muted: #5e6675;
  --color-border: #dfe3ea;
  --color-border-strong: #cfd5df;
  --color-primary: #2451ff;
  --color-primary-hover: #173ed6;
  --color-primary-soft: #edf2ff;
  --color-brand-deep: #102a72;
  --color-brand-deep-2: #12328a;
  --color-brand-soft: #e8efff;
  --color-accent: #c8ff49;
  --color-success: #197348;
  --color-success-soft: #edf8f2;
  --color-warning: #8a5b00;
  --color-warning-soft: #fff7e6;
  --color-danger: #b83245;
  --color-danger-soft: #fff0f2;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 28, 45, .05);
  --shadow-md: 0 14px 36px rgba(20, 34, 72, .10);
  --shadow-overlay: 0 24px 72px rgba(15, 23, 42, .20);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --sidebar-width: 240px;
  --content-max: 1480px;
  --focus-ring: 0 0 0 3px rgba(36, 81, 255, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; min-height: 100vh; overflow-x: hidden; color: var(--color-text); background: var(--color-bg); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.nav-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { max-width: 100%; }
button:disabled { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
dialog:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: var(--focus-ring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 2000; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--color-text); color: #fff; text-decoration: none; transform: translateY(-180%); transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); }
/* Shared primitives */
.icon { width: 20px; height: 20px; flex: 0 0 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; flex-basis: 16px; }
.btn { min-height: 42px; padding: 9px 15px; border: 1px solid transparent; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-text); background: transparent; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn-primary { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-outline{ color: var(--color-text); background: var(--color-surface); border-color: var(--color-border-strong); }
.btn-outline:hover{ border-color: #aeb7c5; background: #fafbfc; }
.btn-lime { color: #172100; background: var(--color-accent); border-color: var(--color-accent); }
.btn-lime:hover { background: #b8ef38; border-color: #b8ef38; }
.btn-danger { color: var(--color-danger); background: var(--color-danger-soft); border-color: #f1c9d0; }
.btn-block { width: 100%; }
.compact-action { min-height: 38px; padding: 8px 12px; }

.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 700; text-decoration: none; }
.text-link:hover, .section-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.small { font-size: 13px; }
.muted { color: var(--color-text-muted); }
.landing-kicker { color: var(--color-text-muted); font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; }
.value { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }

.tag{ display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.tag.primary { color: var(--color-primary); background: var(--color-primary-soft); }
.tag.success { color: var(--color-success); background: var(--color-success-soft); }
.tag.warning{ color: var(--color-warning); background: var(--color-warning-soft); }
.progress { height: 7px; overflow: hidden; border-radius: var(--radius-pill); background: #e7eaf0; }
.progress-fill { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: var(--color-primary); }
.progress-label { margin-top: var(--space-2); display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-text-muted); font-size: 12px; }
.progress-label strong { color: var(--color-text); font-weight: 700; }


.section-block { min-width: 0; padding: 0; }
.section-block + .section-block { margin-top: var(--space-7); }
.stack { display: grid; gap: var(--space-5); min-width: 0; }



.section-title { margin-bottom: var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }

.section-title h2 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.012em; }
.section-title a { display: inline-flex; align-items: center; gap: 5px; color: var(--color-primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.dialog-close, .menu-btn, .sidebar-close, .landing-menu-button{ width: 42px; height: 42px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: inline-grid; place-items: center; color: var(--color-text-muted); background: var(--color-surface); cursor: pointer; }
.dialog-close:hover, .menu-btn:hover, .sidebar-close:hover, .landing-menu-button:hover{ color: var(--color-text); border-color: var(--color-border-strong); }
.page-context { margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--color-text-muted); font-size: 13px; }
.page-context strong { color: var(--color-text); font-weight: 700; }
.inline-quiet { margin: 0 0 var(--space-5); color: var(--color-success); font-size: 13px; }
.sidebar-meta { padding: 0 var(--space-2); display: grid; gap: 3px; color: var(--color-text-muted); font-size: 12px; }
.demo-indicator { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--color-text-muted); cursor: help; }
.demo-indicator::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; list-style: none; font-size: 20px; line-height: 1; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary:hover { color: var(--color-text); background: var(--color-surface-muted); }
.action-menu[open] > summary { background: var(--color-surface-muted); }
.action-menu-popover { position: absolute; z-index: 90; top: calc(100% + 6px); right: 0; min-width: 180px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-md); }
.action-menu-popover button,
.action-menu-popover a { width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 6px; display: flex; align-items: center; color: var(--color-text); background: transparent; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.action-menu-popover button:hover,
.action-menu-popover a:hover { background: var(--color-surface-muted); }
.action-menu-popover .danger-text { color: var(--color-danger); }
.demo-tools { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.demo-tools > summary { width: fit-content; cursor: pointer; font-size: 12px; font-weight: 700; }
.demo-tools[open] > summary { color: var(--color-text); }
.demo-tools .demo-state-actions { margin-top: var(--space-3); }
.settings-sections { max-width: 780px; display: grid; gap: var(--space-7); }
.settings-section { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.settings-section:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-section > h2 { margin: 0 0 var(--space-4); font-size: 20px; }
.budget-reconciliation { margin-top: var(--space-4); padding-top: var(--space-4); display: grid; gap: 4px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 13px; }
.budget-reconciliation strong { color: var(--color-text); }

/* Login */
.auth-shell { min-height: 100vh; padding: var(--space-5); display: grid; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); gap: var(--space-5); background: #fbfcfe; }
.auth-visual { position: relative; min-height: calc(100vh - 48px); overflow: hidden; border-radius: var(--radius-xl); color: #fff; background: linear-gradient(145deg, #091a58 0%, #12389e 58%, #1949cb 100%); box-shadow: var(--shadow-md); }
.auth-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom right, rgba(0,0,0,.85), transparent 78%); pointer-events: none; }
.auth-visual::after { content: ""; position: absolute; top: 48px; right: 48px; width: 72px; height: 5px; border-radius: var(--radius-pill); background: var(--color-accent); }
.auth-brand,
.auth-copy { position: absolute; z-index: 1; left: 48px; right: 48px; }
.auth-brand { top: 42px; }
.auth-copy { bottom: 48px; max-width: 650px; }
.auth-home-link { color: inherit; text-decoration: none; display: inline-grid; gap: 3px; }
.brand-word { font-size: 21px; font-weight: 850; letter-spacing: .04em; }
.brand-sub { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.auth-copy h1 { margin: 0; max-width: 680px; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -.03em; }
.auth-copy h1 span { color: var(--color-accent); }
.auth-copy p { margin: var(--space-5) 0 0; max-width: 520px; color: rgba(255,255,255,.78); font-size: 15px; }
.auth-copy .site-note { margin-top: var(--space-5); display: inline-flex; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.auth-copy .site-note:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-form-wrap { min-height: calc(100vh - 48px); padding: var(--space-7); display: grid; place-items: center; position: relative; }
.auth-support { position: absolute; top: 34px; right: 38px; display: flex; gap: var(--space-3); align-items: center; color: var(--color-text-muted); font-size: 13px; }
.support-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; background: var(--color-primary); font-weight: 800; }
.auth-card { width: min(460px, 100%); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.auth-card h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.auth-card .lead { margin: var(--space-2) 0 var(--space-5); color: var(--color-text-muted); font-size: 14px; }
.field { margin-top: var(--space-4); display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; }
.field input,
.field textarea,
.field select { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.field textarea { min-height: 108px; resize: vertical; }
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: #aeb7c5; }
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-color: var(--color-danger); }

.checkbox { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.checkbox input { width: 17px; height: 17px; accent-color: var(--color-primary); }
.auth-divider { height: 1px; margin: var(--space-5) 0 var(--space-4); background: var(--color-border); }
.auth-footer { color: var(--color-text-muted); text-align: center; font-size: 13px; }

/* App shell */
.app-page { background: var(--color-bg); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 40; height: 100vh; min-width: 0; padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.sidebar-head { padding: 0 var(--space-2) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.logo { display: inline-grid; gap: 1px; text-decoration: none; }
.logo strong { font-size: 18px; font-weight: 850; line-height: 1.1; letter-spacing: .035em; }
.logo span { color: var(--color-text-muted); font-size: 12px; font-weight: 650; letter-spacing: .055em; }
.sidebar-close { display: none; }
.nav { display: grid; gap: var(--space-1); }
.nav a,
.sidebar-secondary a { min-height: 42px; padding: 9px 10px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: 14px; font-weight: 650; text-decoration: none; }
.nav a:hover,
.sidebar-secondary a:hover { color: var(--color-text); background: #f7f8fa; }
.nav a.active { color: var(--color-primary); background: var(--color-primary-soft); }
.nav a.active .icon { stroke-width: 2; }
.sidebar-bottom { margin-top: auto; display: grid; gap: var(--space-4); }
.sidebar-secondary { padding-top: var(--space-4); display: grid; gap: var(--space-1); border-top: 1px solid var(--color-border); }





.main { width: min(100%, var(--content-max)); min-width: 0; padding: 36px 44px 56px; }
.page-head { margin-bottom: var(--space-5); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.page-head-copy { min-width: 0; max-width: 980px; }
.page-head h1 { margin: 0; max-width: 960px; font-size: clamp(32px, 2.8vw, 38px); line-height: 1.08; letter-spacing: -.02em; }
.page-lead { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 14px; }






.mobile-topbar { display: none; }
.nav-backdrop { position: fixed; inset: 0; z-index: 45; border: 0; background: rgba(17, 24, 39, .42); }
/* Overview */








.stage-number { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-primary); background: var(--color-primary-soft); font-size: 13px; font-weight: 800; }






.overview-next-stage .text-link { margin-top: var(--space-3); font-size: 13px; }






.finance-summary .text-link { margin-top: var(--space-4); font-size: 13px; }








.milestone-panel .section-title { margin-bottom: var(--space-3); }
.milestone-list { display: grid; }
.milestone-item { padding: 11px 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; border-bottom: 1px solid var(--color-border); }
.milestone-item:last-child { border-bottom: 0; padding-bottom: 0; }
.milestone-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #c8ced8; }
.milestone-dot.done { background: var(--color-success); }
.milestone-dot.current { background: var(--color-primary); }
.milestone-item strong { display: block; font-size: 13px; }
.milestone-item time { color: var(--color-text-muted); font-size: 12px; }
/* Documents shared */


.doc-icon,
.material-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--color-primary); }






table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
th { color: var(--color-text-muted); font-size: 12px; font-weight: 700; background: #fafbfc; }
tbody tr:hover { background: #fbfcfd; }

/* Stages */
.stats-row { margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.stat-mini { padding: var(--space-4); display: grid; gap: 2px; border-right: 1px solid var(--color-border); }
.stat-mini:last-child { border-right: 0; }
.stat-mini strong { font-size: 24px; line-height: 1.1; }
.stage-list { position: relative; display: grid; }
.stage-list::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 21px; width: 2px; background: #e1e6ef; }
.stage-row { min-width: 0; padding: var(--space-4) var(--space-3); display: grid; grid-template-columns: 44px minmax(260px,1fr) minmax(180px,230px) auto; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); }
.stage-row:last-child { border-bottom: 0; }
.stage-row.current { border-radius: var(--radius-md); background: var(--color-primary-soft); }
.stage-index { color: var(--color-text-muted); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stage-list .stage-index { position: relative; z-index: 1; width: 30px; height: 30px; margin-left: 6px; display: grid; place-items: center; border: 2px solid #d9dfe8; border-radius: 50%; background: var(--color-surface); font-size: 11px; }
.stage-row.done .stage-index { color: var(--color-success); border-color: #a8d7c0; background: var(--color-success-soft); }
.stage-row.current .stage-index { color: #fff; border-color: var(--color-primary); background: var(--color-primary); }
.stage-main { min-width: 0; }
.stage-main h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.stage-main p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 12px; }
.stage-state { min-width: 0; display: grid; gap: var(--space-2); }
.stage-state .tag { justify-self: start; }
.stage-detail-btn { min-width: 92px; }
/* Timeline */
.timeline-heading { margin-bottom: var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.timeline-heading h2 { margin: 4px 0 0; font-size: 24px; line-height: 1.2; }
.select-shell { display: inline-flex; align-items: center; }
.select-control { min-height: 40px; padding: 8px 34px 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text); background-color: #fff; background-image: linear-gradient(45deg, transparent 50%, #657080 50%), linear-gradient(135deg, #657080 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.timeline-tabs,
.request-tabs { margin-bottom: var(--space-5); }
.tab { min-height: 36px; padding: 7px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); background: #fff; font-size: 13px; font-weight: 650; cursor: pointer; }
.tab:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.tab.active { color: var(--color-primary); border-color: #bdc9ff; background: var(--color-primary-soft); }
.tab span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.timeline { position: relative; min-width: 0; }
.timeline::before { content: ""; position: absolute; top: 15px; bottom: 15px; left: 129px; width: 1px; background: var(--color-border); }
.timeline-item { min-width: 0; display: grid; grid-template-columns: 105px 48px minmax(0,1fr); gap: var(--space-3); }
.timeline-date { padding-top: 15px; color: var(--color-text-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.timeline-marker { z-index: 1; width: 30px; height: 30px; margin: 8px auto 0; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-primary); background: #fff; }
.timeline-marker .icon { width: 15px; height: 15px; }
.timeline-card { min-width: 0; padding: 10px 0 var(--space-5); border-bottom: 1px solid var(--color-border); }
.timeline-item:last-child .timeline-card { border-bottom: 0; }
.event-kind { color: var(--color-text-muted); font-size: 12px; font-weight: 650; }
.timeline-card h3 { margin: 3px 0 4px; font-size: 15px; line-height: 1.3; }
.timeline-card p { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.timeline-more { margin: var(--space-5) auto 0; display: flex; }
.empty-state { padding: var(--space-7) var(--space-5); text-align: center; color: var(--color-text-muted); }
.empty-state h3 { margin: 0 0 var(--space-2); color: var(--color-text); font-size: 18px; }
.empty-state p { margin: 0; font-size: 13px; }
/* Finance */
.finance-summary-panel { min-width: 0; margin-bottom: var(--space-7); overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid #173a8f; border-radius: var(--radius-lg); color: #fff; background: var(--color-brand-deep); box-shadow: var(--shadow-md); }
.finance-summary-item { min-width: 0; padding: var(--space-5); display: grid; align-content: start; gap: var(--space-2); border-right: 1px solid rgba(255,255,255,.16); }
.finance-summary-item:last-child { border-right: 0; }
.finance-summary-item > span { color: rgba(255,255,255,.68); font-size: 13px; font-weight: 650; }
.finance-summary-item > strong { color: #fff; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.06; letter-spacing: -.025em; }
.finance-summary-item small { color: rgba(255,255,255,.66); font-size: 12px; }
.finance-summary-item.is-primary > strong { color: var(--color-accent); }
.invoice-list { border-top: 1px solid var(--color-border); }
.invoice-card { min-width: 0; padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(180px,.8fr) 180px minmax(260px,1.3fr) 100px; align-items: center; gap: var(--space-5); border-bottom: 1px solid var(--color-border); }
.invoice-meta { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.invoice-number { font-size: 14px; font-weight: 700; }
.invoice-value { font-size: 18px; letter-spacing: -.01em; }
.invoice-card p { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.invoice-card time { color: var(--color-text-muted); font-size: 12px; text-align: right; }
.stage-finance-list { display: grid; border-top: 1px solid var(--color-border); }
.stage-finance-row { min-width: 0; padding: 14px 0; display: grid; grid-template-columns: minmax(250px,1fr) 140px minmax(150px,.65fr) 110px; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); }
.stage-finance-row > div:first-child { min-width: 0; }
.stage-finance-row strong { font-size: 13px; }
.stage-finance-row small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }
.stage-finance-amount { text-align: right; }
.stage-finance-progress { min-width: 0; }
/* Requests */
.request-list { border-top: 1px solid var(--color-border); }
.request-item { min-width: 0; padding: var(--space-4); display: grid; grid-template-columns: 82px minmax(260px,1fr) auto; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: background .15s ease; }
.request-item:hover { background: #f8faff; }
.request-item.waiting_team { box-shadow: inset 3px 0 0 #d9a329; background: #fffdf8; }
.request-item.waiting_client { box-shadow: inset 3px 0 0 var(--color-primary); background: #f8faff; }
.request-item.closed { opacity: .78; }
.request-id { color: var(--color-text-muted); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.request-copy { min-width: 0; }

.request-item h3 { margin: 3px 0 4px; font-size: 15px; line-height: 1.3; }
.request-item p { margin: 0; color: var(--color-text-muted); font-size: 13px; }

.request-row-actions { display: flex; align-items: center; gap: var(--space-2); }
/* Results */
.results-overview { min-width: 0; padding: var(--space-6); display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr); gap: var(--space-6); border: 1px solid #d5dfff; border-radius: var(--radius-lg); background: #f7f9ff; }
.results-main h2 { margin: 0 0 8px; color: var(--color-brand-deep); font-size: 30px; line-height: 1.14; letter-spacing: -.025em; }
.results-main p { margin: 0 0 var(--space-5); max-width: 680px; color: var(--color-text-muted); font-size: 14px; }
.results-metrics { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-left: 1px solid var(--color-border); }
.results-metrics > div { padding: 0 var(--space-5); display: grid; align-content: center; gap: 4px; }
.results-metrics > div + div { border-left: 1px solid var(--color-border); }
.results-metrics dt { color: var(--color-text-muted); font-size: 12px; font-weight: 650; }
.results-metrics dd { margin: 0; color: var(--color-primary); font-size: 36px; font-weight: 850; line-height: 1.05; letter-spacing: -.03em; }
.results-metrics small { color: var(--color-text-muted); font-size: 12px; }

.accepted-results { display: grid; }
.accepted-results > div { padding: 11px 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.accepted-results > div:last-child { border-bottom: 0; }
.accepted-results p { margin: 0; }
.accepted-results strong { display: block; font-size: 13px; }
.accepted-results small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }



.material-list { display: grid; }
.material-row { width: 100%; min-width: 0; padding: 10px 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--space-3); border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.material-row:last-child { border-bottom: 0; }
.material-row:hover { color: var(--color-primary); }
.material-row strong { display: block; color: var(--color-text); font-size: 13px; }
.material-row small { color: var(--color-text-muted); font-size: 12px; }






/* Dialogs and forms */
dialog { width: min(620px, calc(100vw - 32px)); max-height: min(88vh, 820px); padding: 0; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
dialog.dialog-wide { width: min(760px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(15, 23, 42, .48); }
.dialog-body { padding: var(--space-5); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.dialog-head h2 { margin: 3px 0 0; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; }
.dialog-copy { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: 14px; }
.dialog-actions { margin-top: var(--space-5); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }





.demo-note{ margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); font-size: 13px; }
.demo-note { color: #4b5871; background: var(--color-surface-blue); }












.toast { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 2100; max-width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border-radius: var(--radius-sm); color: #fff; background: #182033; box-shadow: var(--shadow-md); font-size: 13px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
/* Landing */
.landing-page { color: var(--color-text); background: #fff; }
.landing-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.landing-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid rgba(223,227,234,.9); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.landing-header-inner { width: min(1220px, calc(100% - 48px)); min-height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.landing-brand { display: inline-grid; gap: 0; text-decoration: none; }
.landing-brand strong { font-size: 18px; line-height: 1.1; letter-spacing: .04em; }
.landing-brand span { color: var(--color-primary); font-size: 12px; font-weight: 750; }
.landing-nav { display: flex; align-items: center; gap: var(--space-6); }
.landing-nav-links,
.landing-nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.landing-nav-links a { color: var(--color-text-muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.landing-nav-links a:hover { color: var(--color-text); }
.landing-menu-button { display: none; }
.landing-hero { padding: 92px 0 96px; background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 100%); border-bottom: 1px solid #dce4ff; }
.hero-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); gap: 72px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-copy h1 { margin: 14px 0 var(--space-5); max-width: 720px; font-size: clamp(60px, 5.5vw, 74px); line-height: 1.01; letter-spacing: -.03em; }
.hero-copy h1 span { color: var(--color-primary); }
.hero-lead { margin: 0; max-width: 650px; color: var(--color-text-muted); font-size: 17px; line-height: 1.65; }
.hero-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-trust { margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: 13px; }
.hero-trust span { margin: 0 5px; color: #b4bbc6; }
.landing-preview { min-width: 0; }
.preview-window { overflow: hidden; border: 1px solid #ccd7ff; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.preview-bar { min-height: 44px; padding: 0 var(--space-4); display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--color-border); background: #f8faff; }
.preview-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #c9d1df; }
.preview-bar > span:nth-child(2) { background: #aebbe0; }
.preview-bar > span:nth-child(3) { background: var(--color-primary); }
.preview-bar small { margin-left: auto; color: var(--color-text-muted); font-size: 12px; font-weight: 700; }
.preview-main { padding: var(--space-5); }
.preview-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.preview-top > div { min-width: 0; display: grid; gap: 4px; }
.preview-top span { color: var(--color-primary); font-size: 12px; font-weight: 800; }
.preview-top strong { max-width: 460px; font-size: 17px; line-height: 1.3; }
.preview-core { margin-top: var(--space-5); padding: var(--space-5); display: grid; grid-template-columns: minmax(0,.8fr) minmax(240px,1.2fr); gap: var(--space-6); align-items: center; border-radius: var(--radius-lg); color: #fff; background: var(--color-brand-deep); }
.preview-core > div:first-child { display: grid; align-content: center; gap: 4px; }
.preview-core > div:first-child small { color: rgba(255,255,255,.72); font-size: 12px; }
.preview-big { display: block; color: #fff; font-size: clamp(48px,5vw,64px); font-weight: 850; line-height: .95; letter-spacing: -.035em; }
.preview-stage { min-width: 0; display: grid; gap: 7px; }
.preview-stage > span { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 650; }
.preview-stage > strong { overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.preview-stage > small { color: rgba(255,255,255,.72); font-size: 12px; }
.preview-stage .progress { background: rgba(255,255,255,.18); }
.preview-stage .progress-fill { background: var(--color-accent); }
.preview-metrics { margin: var(--space-5) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.preview-metrics > div { min-width: 0; padding: 0 var(--space-4); display: grid; gap: 4px; border-left: 1px solid var(--color-border); }
.preview-metrics > div:first-child { padding-left: 0; border-left: 0; }
.preview-metrics > div:last-child { padding-right: 0; }
.preview-metrics span { color: var(--color-text-muted); font-size: 12px; }
.preview-metrics strong { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.landing-section { padding: 96px 0; }
.landing-section + .landing-section { border-top: 0; }
.landing-section-head { max-width: 820px; margin-bottom: var(--space-7); }
.landing-section-head h2 { margin: 10px 0 var(--space-4); font-size: clamp(38px, 4.3vw, 54px); line-height: 1.08; letter-spacing: -.025em; }
.landing-section-head p { margin: 0; max-width: 720px; color: var(--color-text-muted); font-size: 16px; }
.compact-head { margin-bottom: var(--space-6); }
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--space-7); border-top: 1px solid var(--color-border); }
.problem-card { padding: var(--space-5) 0 var(--space-6); border-bottom: 1px solid var(--color-border); }
.problem-card:nth-child(odd) { padding-right: var(--space-6); }
.problem-card:nth-child(even) { padding-left: var(--space-6); border-left: 1px solid var(--color-border); }
.card-index { display: block; margin-bottom: var(--space-4); color: var(--color-primary); font-size: 12px; font-weight: 800; }
.problem-card h3 { margin: 0 0 var(--space-2); font-size: 19px; line-height: 1.3; }
.problem-card p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.bridge-section { background: var(--color-primary-soft); }
.bridge-board { overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 220px minmax(0,1fr); border: 1px solid #ccd7ff; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.bridge-side { padding: var(--space-6); background: #fff; }
.bridge-side:first-child { border-right: 0; background: #f4f6fa; }
.bridge-side:last-child { border-left: 0; background: #f8faff; }
.bridge-label { color: var(--color-text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.bridge-side h3 { margin: var(--space-2) 0 var(--space-4); font-size: 22px; }
.bridge-side ul { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; color: var(--color-text-muted); font-size: 14px; }
.bridge-side li::before { content: "—"; margin-right: 8px; color: #9ba4b1; }
.bridge-core { padding: var(--space-6) var(--space-5); display: grid; place-items: center; align-content: center; text-align: center; color: #fff; background: var(--color-brand-deep); }
.bridge-logo { padding: 7px 12px; border-radius: var(--radius-sm); color: #172100; background: var(--color-accent); font-size: 13px; font-weight: 850; letter-spacing: .04em; }
.bridge-core p { margin: var(--space-3) 0; color: rgba(255,255,255,.76); font-size: 13px; }
.bridge-arrow { width: 100%; display: flex; align-items: center; color: var(--color-accent); }
.bridge-arrow span { flex: 1; height: 1px; background: rgba(200,255,73,.45); }
.bridge-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bridge-footnote { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: 13px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.feature-card { min-height: 230px; padding: var(--space-5); display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.feature-card:hover { border-color: #c8d3ff; background: #f8faff; box-shadow: var(--shadow-sm); }
.feature-icon { width: 36px; height: 36px; margin-bottom: var(--space-5); display: grid; place-items: center; color: var(--color-primary); }
.feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-card h3 { margin: 0 0 var(--space-2); font-size: 19px; }
.feature-card p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.feature-card a { margin-top: auto; padding-top: var(--space-5); color: var(--color-primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.feature-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lifecycle-section { background: var(--color-bg); }
.lifecycle-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--color-border); list-style: none; }
.lifecycle-grid li { padding: var(--space-5) var(--space-5) 0 0; border-right: 1px solid var(--color-border); }
.lifecycle-grid li + li { padding-left: var(--space-5); }
.lifecycle-grid li:last-child { border-right: 0; }
.lifecycle-grid span { color: var(--color-primary); font-size: 12px; font-weight: 800; }
.lifecycle-grid h3 { margin: var(--space-3) 0 var(--space-2); font-size: 18px; }
.lifecycle-grid p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.audience-card { padding: var(--space-6); }
.audience-card + .audience-card { border-left: 1px solid var(--color-border); }
.audience-card > span { color: var(--color-primary); font-size: 12px; font-weight: 800; }
.audience-card h3 { margin: var(--space-3) 0 var(--space-2); font-size: 22px; }
.audience-card p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.industry-line { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--color-text-muted); font-size: 13px; }
.industry-line span + span::before { content: "·"; margin-right: 18px; color: #a8b0bc; }
#audience { background: linear-gradient(180deg, #f8faff 0%, #eef3ff 100%); }
#audience .audience-grid { overflow: hidden; border: 1px solid #d7e0ff; border-radius: var(--radius-lg); background: rgba(255,255,255,.82); box-shadow: var(--shadow-sm); }
.landing-final { padding: 72px 0 96px; background: #eef3ff; }
.final-panel { padding: 54px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); border-radius: var(--radius-xl); color: #fff; background: var(--color-brand-deep); box-shadow: var(--shadow-md); }
.final-panel .landing-kicker { color: rgba(255,255,255,.62); }
.final-panel h2 { margin: 8px 0 var(--space-3); max-width: 760px; font-size: clamp(36px,4.2vw,52px); line-height: 1.08; letter-spacing: -.025em; }
.final-panel p { margin: 0; max-width: 700px; color: rgba(255,255,255,.72); font-size: 15px; }
.final-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.final-secondary { color: #fff; border-color: rgba(255,255,255,.34); background: transparent; }
.final-secondary:hover { border-color: rgba(255,255,255,.64); background: rgba(255,255,255,.07); }
.landing-footer { border-top: 1px solid var(--color-border); background: #fff; }
.footer-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.footer-inner > div:first-child { display: grid; }
.footer-inner strong { font-size: 16px; letter-spacing: .04em; }
.footer-inner span { color: var(--color-text-muted); font-size: 12px; }
.footer-links { display: flex; gap: var(--space-5); }
.footer-links a { color: var(--color-text-muted); font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: var(--color-text); }

/* Responsive */
@media (max-width: 1180px) {.main { padding: 36px 32px 56px; }

.stage-row { grid-template-columns: 40px minmax(220px,1fr) minmax(170px,210px) auto; gap: var(--space-3); }
.invoice-card { grid-template-columns: minmax(160px,.8fr) 150px minmax(220px,1fr) 90px; gap: var(--space-4); }
.request-item { grid-template-columns: 76px minmax(220px,1fr) auto; gap: var(--space-3); }
.hero-layout { grid-template-columns: minmax(0,.85fr) minmax(460px,1.15fr); gap: var(--space-7); }

}

@media (max-width: 1024px) {:root {
  --sidebar-width: 224px;
}
.main { padding: 32px 28px 52px; }
.page-head h1 { font-size: 38px; }



.stage-row { grid-template-columns: 40px minmax(0,1fr) 190px; }
.stage-detail-btn { grid-column: 2; justify-self: start; }
.invoice-card { grid-template-columns: minmax(150px,.8fr) 145px minmax(0,1fr); }
.invoice-card time { grid-column: 3; text-align: left; }
.stage-finance-row { grid-template-columns: minmax(240px,1fr) 130px minmax(120px,.55fr); }
.stage-finance-row .tag { grid-column: 2; justify-self: end; }
.results-overview { grid-template-columns: 1fr; }
.results-metrics { border-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-5); }


.hero-layout { grid-template-columns: 1fr; gap: var(--space-7); }
.hero-copy { max-width: 820px; }
.landing-preview { max-width: 760px; }
.bridge-board { grid-template-columns: 1fr 180px 1fr; }
.feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

}

@media (max-width: 900px) {.app-shell { display: block; }
.mobile-topbar { position: sticky; top: 0; z-index: 42; min-height: 64px; padding: 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.sidebar { position: fixed; top: 0; left: 0; z-index: 50; width: min(320px, 88vw); height: 100dvh; padding: var(--space-5) var(--space-4); box-shadow: var(--shadow-overlay); transform: translateX(-105%); transition: transform .2s ease; }
body.nav-open .sidebar { transform: translateX(0); }
.sidebar-close { display: inline-grid; }
.main { width: 100%; padding: 28px 24px 48px; }
.page-head { margin-bottom: var(--space-5); }
.page-head h1 { font-size: 36px; }
.auth-shell { grid-template-columns: 1fr; padding: 0; gap: 0; }
.auth-visual { min-height: 420px; border-radius: 0; }
.auth-form-wrap { min-height: auto; padding: 72px 24px; }
.auth-support { top: 22px; right: 24px; }
.auth-copy h1 { font-size: 54px; }
.landing-header-inner { width: min(100% - 32px, 1220px); }
.landing-container { width: min(100% - 40px, 1180px); }
.landing-hero { padding: 72px 0 80px; }
.landing-section { padding: 80px 0; }
.lifecycle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.lifecycle-grid li { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.lifecycle-grid li:nth-child(2) { border-right: 0; }
.lifecycle-grid li:nth-child(3) { padding-left: 0; }
.audience-grid { grid-template-columns: 1fr; }
.audience-card + .audience-card { border-left: 0; border-top: 1px solid var(--color-border); }
.final-panel { align-items: flex-start; flex-direction: column; padding: 42px; }

}

@media (max-width: 768px) {.main { padding: 24px 20px 44px; }
.page-head { align-items: flex-start; }
.page-head h1 { font-size: 33px; line-height: 1.07; }
.page-lead { font-size: 13px; }


.page-head > .status-chip { flex: 0 0 auto; }





.stage-row { grid-template-columns: 36px minmax(0,1fr) auto; }
.stage-state { grid-column: 2 / -1; grid-template-columns: auto minmax(120px,1fr); align-items: center; }
.stage-state .progress-label { display: none; }
.stage-detail-btn { grid-column: 2; }
.timeline-heading { align-items: stretch; flex-direction: column; }
.select-control { width: 100%; }
.timeline::before { left: 112px; }
.timeline-item { grid-template-columns: 88px 40px minmax(0,1fr); }
.request-item { grid-template-columns: 72px minmax(0,1fr); }

.request-row-actions { grid-column: 2; }
.invoice-card { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3); }
.invoice-card p { grid-column: 1 / -1; }
.invoice-card time { grid-column: 1; text-align: left; }
.stage-finance-row { grid-template-columns: minmax(0,1fr) auto; }
.stage-finance-progress { grid-column: 1 / -1; }
.stage-finance-row .tag { grid-column: 2; grid-row: 2; }
.stage-finance-amount { text-align: right; }








.landing-nav { position: absolute; top: calc(100% + 1px); left: 16px; right: 16px; padding: var(--space-4); display: none; align-items: stretch; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-overlay); }
.landing-nav.open { display: grid; }
.landing-menu-button { display: inline-grid; }
.landing-nav-links,
  .landing-nav-actions { display: grid; gap: var(--space-2); }
.landing-nav-links a { padding: 10px 8px; }
.landing-nav-actions .btn { width: 100%; }
.hero-copy h1 { font-size: clamp(48px, 11vw, 64px); }
.hero-lead { font-size: 16px; }
.preview-core { grid-template-columns: 1fr; gap: var(--space-5); }
.preview-stage > strong { white-space: normal; }
.preview-metrics > div:first-child { border-left: 0; padding-left: 0; }
.problem-grid { grid-template-columns: 1fr; }
.problem-card:nth-child(odd),
  .problem-card:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
.bridge-board { grid-template-columns: 1fr; }
.bridge-side:first-child { border-right: 0; border-bottom: 1px solid var(--color-border); }
.bridge-side:last-child { border-left: 0; border-top: 1px solid var(--color-border); }
.bridge-core { min-height: 170px; }
.bridge-arrow { max-width: 160px; }
.feature-grid { grid-template-columns: 1fr; }
.feature-card { min-height: 0; }
.landing-section-head h2 { font-size: 38px; }
.final-panel { padding: 36px 28px; }

}

@media (max-width: 640px) {

  .filter-more { width: 100%; }
  .filter-more > summary { width: 100%; justify-content: center; }
  .filter-more-popover { left: 0; right: auto; width: 100%; }
.page-head { display: grid; gap: var(--space-3); }
.page-head h1 { font-size: 31px; }
.page-head > .status-chip { justify-self: start; }






.attention-bar .btn { grid-column: 2; justify-self: start; }
.stats-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stat-mini:nth-child(2) { border-right: 0; }
.stat-mini:nth-child(-n/**/+2) { border-bottom: 1px solid var(--color-border); }
.stage-row { padding: var(--space-4) 0; grid-template-columns: 34px minmax(0,1fr); }
.stage-state { grid-column: 2; grid-template-columns: 1fr; }
.stage-detail-btn { grid-column: 2; width: 100%; }
.timeline::before { left: 13px; }
.timeline-item { grid-template-columns: 28px minmax(0,1fr); gap: var(--space-3); }
.timeline-date { grid-column: 2; padding: 0; text-align: left; }
.timeline-marker { grid-column: 1; grid-row: 1 / span 2; width: 26px; height: 26px; margin: 0; }
.timeline-card { grid-column: 2; padding-top: 0; }





.document-history-main span:not(.doc-icon) { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 12px; }




.document-history-item .btn { justify-self: start; }
.finance-summary-item { padding: var(--space-4); }
.request-item { grid-template-columns: 1fr; gap: var(--space-2); }
.request-id, .request-row-actions{ grid-column: 1; }
.request-row-actions { justify-content: space-between; }
.results-overview { padding: var(--space-5); }
.results-main h2 { font-size: 27px; }
.results-metrics { grid-template-columns: 1fr; }
.results-metrics > div { padding: var(--space-4) 0; }
.results-metrics > div + div { border-left: 0; border-top: 1px solid var(--color-border); }

.dialog-actions .btn { flex: 1 1 160px; }
.auth-visual { min-height: 460px; }
.auth-brand,
  .auth-copy { left: 24px; right: 24px; }
.auth-brand { top: 26px; }
.auth-copy { bottom: 30px; }
.auth-copy h1 { font-size: 40px; }
.auth-form-wrap { padding: 64px 20px 48px; }
.auth-support { left: 20px; right: auto; }
.auth-card { padding: var(--space-5); }

.landing-container { width: min(100% - 32px, 1180px); }
.landing-hero { padding: 56px 0 64px; }
.hero-copy h1 { font-size: 46px; }
.hero-actions { display: grid; }
.hero-actions .btn { width: 100%; }
.hero-trust { line-height: 1.8; }
.preview-main { padding: var(--space-4); }
.preview-top { align-items: flex-start; }
.preview-top .tag { display: none; }
.preview-metrics { grid-template-columns: 1fr; gap: var(--space-3); }
.preview-metrics > div { padding: 0; border-left: 0; }

.landing-section { padding: 64px 0; }
.landing-section-head { margin-bottom: var(--space-6); }
.landing-section-head h2 { font-size: 34px; }
.bridge-side { padding: var(--space-5); }
.lifecycle-grid { grid-template-columns: 1fr; }
.lifecycle-grid li,
  .lifecycle-grid li + li,
  .lifecycle-grid li:nth-child(3) { padding: var(--space-5) 0; border-right: 0; border-bottom: 1px solid var(--color-border); }
.lifecycle-grid li:last-child { border-bottom: 0; }
.audience-card { padding: var(--space-5) 0; }
.industry-line { display: block; line-height: 1.9; }
.industry-line span { display: inline; }
.industry-line span + span::before { margin-right: 8px; }
.final-panel { padding: 30px 22px; }
.final-panel h2 { font-size: 34px; }
.final-actions { width: 100%; display: grid; }
.footer-inner { min-height: 110px; align-items: flex-start; flex-direction: column; justify-content: center; gap: var(--space-3); }

}

@media (max-width: 390px) {.mobile-topbar { min-height: 60px; }
.main { padding: 22px 16px 40px; }
.page-head h1 { font-size: 30px; }


.stage-number { width: 38px; height: 38px; }

.tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.tab { flex: 0 0 auto; }


.landing-header-inner { min-height: 64px; }
.hero-copy h1 { font-size: 42px; }
.landing-section-head h2 { font-size: 31px; }
.feature-card { padding: var(--space-4); }
.final-panel h2 { font-size: 30px; }

}

@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

}

/* SaaS application components */
.tag.danger { color: var(--color-danger); background: var(--color-danger-soft); }
.page-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }




.field small { color: var(--color-text-muted); font-size: 12px; }
.field-error { margin: var(--space-3) 0 0; color: var(--color-danger); font-size: 13px; font-weight: 650; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.field-span { grid-column: 1 / -1; }
.checkbox-grid { padding: 0; border: 0; }
.checkbox-grid legend { margin-bottom: var(--space-2); font-size: 13px; font-weight: 700; }
.checkbox-grid .checkbox { min-height: 34px; }
.business-warning,
.locked-note { padding: 11px 13px; border: 1px solid #ead8a8; border-radius: var(--radius-sm); color: var(--color-warning); background: var(--color-warning-soft); font-size: 13px; }
.locked-note { margin: calc(-1 * var(--space-3)) 0 var(--space-5); display: flex; align-items: center; gap: var(--space-2); }
.dialog-section { margin-top: var(--space-5); }
.dialog-section h3 { margin: 0 0 var(--space-2); font-size: 15px; }
.dialog-section p { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.detail-grid { margin: var(--space-5) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.detail-grid > div { padding: var(--space-4); border-right: 1px solid var(--color-border); }
.detail-grid > div:last-child { border-right: 0; }
.detail-grid dt { color: var(--color-text-muted); font-size: 12px; }
.detail-grid dd { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.clean-list { margin: 0; padding-left: 18px; color: var(--color-text-muted); font-size: 13px; }
.decision-note { margin-top: var(--space-4); padding: var(--space-4); border-left: 3px solid var(--color-warning); background: var(--color-warning-soft); }
.decision-note strong { font-size: 13px; }
.decision-note p { margin: 3px 0 0; color: var(--color-warning); font-size: 13px; }
.empty-action { margin-top: var(--space-4); }

/* Shared SaaS shell */
.sidebar-project-context { margin: 0 var(--space-2) var(--space-4); }
.project-switcher-static span { display: block; margin-bottom: 3px; color: var(--color-text-muted); font-size: 12px; }
.project-switcher { width: 100%; min-height: 40px; padding: 7px 28px 7px 8px; border: 0; border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-surface-muted); font-size: 12px; font-weight: 700; }
.project-switcher-static strong { display: block; font-size: 13px; }


.profile-menu { position: relative; }
.profile-menu > summary { min-height: 48px; padding: 6px 4px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; list-style: none; }
.profile-menu > summary:hover { background: var(--color-surface-muted); }
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary); background: var(--color-primary-soft); font-size: 12px; font-weight: 800; }
.profile-summary-copy { min-width: 0; display: grid; }
.profile-summary-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary-copy small { color: var(--color-text-muted); font-size: 12px; }
.profile-popover { position: absolute; z-index: 70; left: 0; right: 0; bottom: calc(100% + 8px); padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.profile-popover-head { padding: 8px 8px 10px; display: grid; border-bottom: 1px solid var(--color-border); }
.profile-popover-head strong { font-size: 13px; }
.profile-popover-head span { overflow: hidden; color: var(--color-text-muted); font-size: 12px; text-overflow: ellipsis; }
.profile-popover a,
.profile-popover button { width: 100%; min-height: 38px; padding: 8px; border: 0; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; color: var(--color-text); background: transparent; font-size: 12px; text-decoration: none; text-align: left; cursor: pointer; }
.profile-popover a:hover,
.profile-popover button:hover { background: var(--color-surface-muted); }
.profile-popover .danger-text { color: var(--color-danger); }
.access-state { min-height: 65vh; display: grid; place-items: center; align-content: center; text-align: center; }
.access-state-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-primary); background: var(--color-primary-soft); }
.access-state h1 { margin: var(--space-4) 0 var(--space-2); font-size: 34px; }
.access-state p { max-width: 520px; margin: 0 0 var(--space-5); color: var(--color-text-muted); }

/* Authentication */
.auth-card-wide { width: min(520px, 100%); }
.demo-profiles-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.demo-profiles-head strong { font-size: 13px; }
.demo-profiles-head span { color: var(--color-text-muted); font-size: 12px; }
.demo-profiles { margin-top: var(--space-3); display: grid; gap: 8px; }
.demo-profile { width: 100%; min-height: 54px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px var(--space-3); color: var(--color-text); background: #fff; text-align: left; cursor: pointer; }
.demo-profile:hover { border-color: var(--color-border-strong); background: #fafbfc; }
.demo-profile > span { font-size: 13px; font-weight: 700; }
.demo-profile small { grid-column: 1; color: var(--color-text-muted); font-size: 12px; }
.demo-profile .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.auth-card .auth-footer a { display: inline; }

/* Workspace dashboard */
.workspace-metrics { margin-bottom: var(--space-6); overflow: hidden; display: grid; grid-template-columns: 1.15fr repeat(3,minmax(0,1fr)); border: 1px solid #ced9ff; border-radius: var(--radius-lg); background: #f7f9ff; box-shadow: var(--shadow-sm); }
.workspace-metrics > div { min-width: 0; padding: var(--space-5); border-right: 1px solid #dce4ff; }
.workspace-metrics > div:first-child { color: #fff; background: var(--color-brand-deep); }
.workspace-metrics > div:last-child { border-right: 0; }
.workspace-metrics span { display: block; color: var(--color-text-muted); font-size: 12px; font-weight: 650; }
.workspace-metrics > div:first-child span { color: rgba(255,255,255,.7); }
.workspace-metrics strong { display: block; margin-top: 4px; color: var(--color-brand-deep); font-size: clamp(23px,2vw,30px); line-height: 1.08; letter-spacing: -.02em; }
.workspace-metrics > div:first-child strong { color: var(--color-accent); font-size: clamp(30px,2.7vw,38px); }
.workspace-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.75fr); gap: var(--space-5); align-items: start; }
.workspace-grid > .section-block:first-child { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.workspace-grid > .stack > .section-block:first-child { padding: var(--space-5); border: 1px solid #efddb2; border-radius: var(--radius-lg); background: var(--color-warning-soft); }
.workspace-grid > .stack > .section-block:first-child .attention-list a { border-color: rgba(138,91,0,.16); }
.workspace-grid > .stack > .section-block + .section-block { margin-top: 0; }
.portfolio-list,
.projects-list,
.clients-list,
.team-list { display: grid; border-top: 1px solid var(--color-border); }
.portfolio-row { min-width: 0; padding: var(--space-4); display: grid; grid-template-columns: minmax(260px,1.4fr) minmax(180px,.8fr) 90px 34px; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; transition: background .15s ease, box-shadow .15s ease; }
.portfolio-row:hover { background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
.portfolio-row:hover strong { color: var(--color-primary); }
.portfolio-main { min-width: 0; display: grid; gap: 2px; }
.project-code { color: var(--color-primary); font-size: 12px; font-weight: 800; letter-spacing: .035em; }
.portfolio-main strong { font-size: 14px; }
.portfolio-main small,
.portfolio-progress small { color: var(--color-text-muted); font-size: 12px; }
.portfolio-progress { min-width: 0; display: grid; gap: 6px; }
.portfolio-row time { color: var(--color-text-muted); font-size: 12px; text-align: right; }
.attention-count { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--color-warning); background: var(--color-warning-soft); font-size: 12px; font-weight: 800; }
.attention-list { display: grid; }
.attention-list a { padding: 10px 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3); align-items: center; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.attention-list a:last-child { border-bottom: 0; }
.attention-list strong { display: block; font-size: 13px; }
.attention-list small { display: block; color: var(--color-text-muted); font-size: 12px; }
.deadline-list { display: grid; }
.deadline-list a { padding: 10px 0; display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); text-decoration: none; }
.deadline-list a:last-child { border-bottom: 0; }
.deadline-list span { min-width: 0; display: grid; }
.deadline-list strong { font-size: 12px; }
.deadline-list small { overflow: hidden; color: var(--color-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.deadline-list time { color: var(--color-text-muted); font-size: 12px; }
.onboarding-panel { margin-bottom: var(--space-5); }
.onboarding-list { margin: 0; padding: 0; list-style: none; }
.onboarding-list li { padding: var(--space-4) 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); }
.onboarding-list li:last-child { border-bottom: 0; }
.onboarding-list li > span { color: var(--color-primary); font-size: 12px; font-weight: 800; }
.onboarding-list strong { font-size: 14px; }
.onboarding-list p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 12px; }

/* Management lists */
.filter-bar { margin-bottom: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-more { position: relative; }
.filter-more > summary { min-height: 40px; padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); display: flex; align-items: center; color: var(--color-text-muted); background: var(--color-surface); font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more[open] > summary, .filter-more > summary:hover { color: var(--color-text); border-color: #aeb7c5; }
.filter-more-popover { position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; width: min(300px, calc(100vw - 32px)); padding: var(--space-3); display: grid; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); }
.filter-more-popover label { display: grid; gap: 5px; color: var(--color-text-muted); font-size: 12px; }

.search-field { min-width: min(320px,100%); flex: 1 1 280px; min-height: 40px; padding: 0 11px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--space-2); background: #fff; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--color-text); background: transparent; }
.manage-row { min-width: 0; padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(260px,1.25fr) minmax(150px,.55fr) minmax(150px,.55fr) auto; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); }
.manage-row.is-muted { opacity: .65; }
.manage-row-main { min-width: 0; }
.manage-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.manage-row h3 { margin: 4px 0 2px; font-size: 14px; }
.manage-row p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.manage-row-meta,
.role-control { min-width: 0; display: grid; gap: 2px; }
.manage-row-meta > span { font-size: 18px; font-weight: 800; }
.manage-row-meta small,
.role-control small { color: var(--color-text-muted); font-size: 12px; }
.manage-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.member-name { display: flex; align-items: center; gap: var(--space-3); }
.member-name h3 { margin: 0; }
.compact-select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.compact-list { display: grid; }
.compact-list > a,
.compact-list > div { padding: 10px 0; display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); text-decoration: none; }
.compact-list > :last-child { border-bottom: 0; }
.compact-list a span { color: var(--color-text-muted); font-size: 12px; }
.client-access-row span { min-width: 0; display: grid; }
.client-access-row strong { font-size: 13px; }
.client-access-row small { color: var(--color-text-muted); font-size: 12px; }

/* Billing / settings */
.billing-layout { margin-bottom: var(--space-6); display: grid; grid-template-columns: minmax(320px,.75fr) minmax(0,1.25fr); gap: var(--space-7); }
.billing-current { padding: var(--space-6); border: 1px solid #d0dbff; border-radius: var(--radius-lg); background: var(--color-primary-soft); box-shadow: var(--shadow-sm); }
.billing-current h2 { margin: 4px 0 8px; color: var(--color-brand-deep); font-size: 28px; }
.billing-current p { color: var(--color-text-muted); }
.trial-days { margin: var(--space-5) 0; display: flex; align-items: baseline; gap: var(--space-2); }
.trial-days strong { color: var(--color-primary); font-size: 48px; line-height: 1; }
.trial-days span { color: var(--color-text-muted); font-size: 13px; }
.usage-grid { margin: 0; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--color-border); }
.usage-grid > div { padding-top: var(--space-4); }
.usage-grid dt { color: var(--color-text-muted); font-size: 12px; }
.usage-grid dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; }
.commercial-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--color-border); }
.commercial-options article { padding: var(--space-5) var(--space-5) 0 0; }
.commercial-options article + article { padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
.commercial-options h3 { margin: 0 0 4px; font-size: 16px; }
.commercial-options p { margin: 0; color: var(--color-text-muted); font-size: 13px; }

.demo-state-actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.settings-panel { max-width: 860px; }
.settings-actions { justify-content: flex-start; }


/* Project overview */
.project-hero-summary { margin-bottom: var(--space-6); padding: var(--space-6); display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--space-6); border: 1px solid #183a90; border-radius: var(--radius-lg); color: #fff; background: var(--color-brand-deep); box-shadow: var(--shadow-sm); }
.project-progress-block { min-width: 0; }
.project-progress-line { margin-top: var(--space-2); display: grid; grid-template-columns: auto minmax(180px,1fr); align-items: center; gap: var(--space-5); }
.project-progress-line > strong { color: var(--color-accent); font-size: clamp(42px,4.8vw,58px); line-height: 1; letter-spacing: -.03em; }
.project-progress-line .progress { background: rgba(255,255,255,.18); }
.project-progress-line .progress-fill { background: var(--color-accent); }
.project-progress-line small { display: block; margin-top: 7px; color: rgba(255,255,255,.72); font-size: 12px; }
.current-stage-block { padding-left: var(--space-6); display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-4); align-items: center; border-left: 1px solid rgba(255,255,255,.2); }
.current-stage-block .stage-number { color: #172100; background: var(--color-accent); }
.current-stage-block h2 { margin: 4px 0; color: #fff; font-size: 22px; }
.current-stage-block p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; }
.attention-center { margin-bottom: var(--space-6); padding: var(--space-5); border: 1px solid #efddb2; border-radius: var(--radius-lg); background: var(--color-warning-soft); }
.attention-center-head h2 { margin: 0 0 var(--space-3); color: #5f4300; font-size: 20px; }
.attention-center .attention-list a { border-color: rgba(138,91,0,.18); }
.attention-link { color: var(--color-primary); font-size: 12px; font-weight: 750; }
.project-quiet { padding: 11px 14px; border-radius: var(--radius-sm); background: var(--color-success-soft); }




.overview-workflow-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); }
.overview-workflow-grid > .section-block { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.overview-workflow-grid > .section-block:first-child { border-color: #d6e0ff; background: #f8faff; }
.overview-workflow-grid > .section-block + .section-block { margin-top: 0; }
.finance-compact { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--color-border); }
.finance-compact > div { padding: var(--space-4) var(--space-3) 0 0; }
.finance-compact span { display: block; color: var(--color-text-muted); font-size: 12px; }
.finance-compact strong { display: block; margin-top: 3px; font-size: 18px; }
.finance-compact small { color: var(--color-text-muted); font-size: 12px; }
.next-work { margin-top: var(--space-4); padding-top: var(--space-4); display: grid; border-top: 1px solid var(--color-border); }
.next-work span { color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.next-work strong { margin-top: 3px; font-size: 13px; }
.next-work small { color: var(--color-text-muted); font-size: 12px; }
.activity-list { display: grid; }
.activity-row { padding: 10px 0; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.activity-row:last-child { border-bottom: 0; }

.activity-row strong { display: block; font-size: 13px; }
.activity-row p { margin: 2px 0; color: var(--color-text-muted); font-size: 12px; }
.activity-row small { color: var(--color-text-muted); font-size: 12px; }

/* Documents / Requests / Results workflow */
.document-workflow-list { display: grid; }
.document-workflow-row { padding: var(--space-4) 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); }
.document-workflow-row:last-child { border-bottom: 0; }
.document-workflow-row.submitted { box-shadow: inset 3px 0 0 var(--color-primary); background: #f8faff; }
.document-workflow-row.approved { box-shadow: inset 3px 0 0 var(--color-success); }
.document-workflow-row.changes_requested { box-shadow: inset 3px 0 0 #d9a329; background: #fffaf0; }
.document-workflow-main { min-width: 0; }
.document-workflow-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: 12px; }
.document-workflow-main h3 { margin: 4px 0 2px; font-size: 14px; }
.document-workflow-main p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.document-workflow-actions, .deliverable-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.version-list { display: grid; border-top: 1px solid var(--color-border); }
.version-list > div { padding: 10px 0; display: grid; grid-template-columns: 80px 120px minmax(0,1fr); gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.version-list strong { font-size: 12px; }
.version-list span,
.version-list small { color: var(--color-text-muted); font-size: 12px; }
.request-thread-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); font-size: 12px; }
.message-thread { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.thread-message { max-width: none; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.thread-message.client-message { justify-self: stretch; }
.thread-message > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.thread-message strong { font-size: 12px; }
.thread-message span { color: var(--color-text-muted); font-size: 12px; }
.thread-message p { margin: 5px 0 0; font-size: 13px; }
.results-workflow-grid { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); }
.results-workflow-grid > .section-block + .section-block { margin-top: 0; }
.deliverable-list { display: grid; }
.deliverable-row { padding: var(--space-4) 0; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: var(--space-3); align-items: start; border-bottom: 1px solid var(--color-border); }
.deliverable-row:last-child { border-bottom: 0; }
.deliverable-row.submitted { box-shadow: inset 3px 0 0 var(--color-primary); background: #f8faff; }
.deliverable-row.accepted { box-shadow: inset 3px 0 0 var(--color-success); }
.deliverable-row.changes_requested { box-shadow: inset 3px 0 0 #d9a329; background: #fffaf0; }
.deliverable-top { margin-bottom: 4px; }
.deliverable-row h3 { margin: 0 0 3px; font-size: 14px; }
.deliverable-row p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.deliverable-row small { color: var(--color-text-muted); font-size: 12px; }

/* Invoice expansion */
.invoice-card { grid-template-columns: minmax(170px,.75fr) 150px minmax(220px,1.1fr) minmax(170px,.7fr); }
.invoice-card > div:last-child { display: grid; justify-items: end; gap: 7px; }


@media (max-width: 1180px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-grid > .stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .manage-row { grid-template-columns: minmax(220px,1fr) minmax(130px,.45fr) auto; }
  .manage-row > time,
  .manage-row > .muted.small { grid-column: 2; }
  .manage-row-actions { grid-column: 3; grid-row: 1 / span 2; }
  
  .project-hero-summary { grid-template-columns: 1fr; }
  .current-stage-block { padding: var(--space-5) 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }
  .finance-summary-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .invoice-card { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3); }
  .invoice-card p { grid-column: 1 / -1; }
  .invoice-card > div:last-child { grid-column: 1 / -1; justify-items: start; }
  .finance-summary-item:nth-child(2) { border-right: 0; }
  .finance-summary-item:nth-child(-n/**/+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
}

@media (max-width: 900px) {
  .workspace-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workspace-metrics > div:nth-child(2) { border-right: 0; }
  .workspace-metrics > div:nth-child(-n/**/+2) { border-bottom: 1px solid #dce4ff; }
  .portfolio-row { grid-template-columns: minmax(0,1fr) 90px 28px; }
  .portfolio-progress { grid-column: 1 / -1; grid-row: 2; }
  .manage-row { grid-template-columns: minmax(0,1fr) auto; }
  .manage-row > * { grid-column: auto; grid-row: auto; }
  .manage-row-actions { justify-self: end; }
  .billing-layout { grid-template-columns: 1fr; }
  .overview-workflow-grid,
  .results-workflow-grid { grid-template-columns: 1fr; }
  .invoice-card { grid-template-columns: minmax(0,1fr) auto; }
  .invoice-card p { grid-column: 1 / -1; }
  .invoice-card > div:last-child { grid-column: 1 / -1; justify-items: start; }
}

@media (max-width: 640px) {
  .page-head-actions { width: 100%; justify-content: flex-start; }
  .page-head-actions .btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .field-span { grid-column: auto; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > div { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .detail-grid > div:last-child { border-bottom: 0; }
  .workspace-metrics { grid-template-columns: 1fr 1fr; }
  .workspace-metrics > div { padding: var(--space-4); }
  .workspace-grid > .stack { grid-template-columns: 1fr; }
  .portfolio-row { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3); }
  .portfolio-row time { grid-column: 2; grid-row: 1; }
  .portfolio-row > .attention-count { grid-column: 2; grid-row: 2; justify-self: end; }
  .portfolio-progress { grid-column: 1; grid-row: 2; }
  .onboarding-list li { grid-template-columns: 30px minmax(0,1fr); }
  .onboarding-list .btn { grid-column: 2; justify-self: start; }
  .filter-bar { display: grid; }
  .filter-bar > * { width: 100%; }
  .search-field { min-width: 0; }
  .manage-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .manage-row-actions { justify-self: start; }
  .role-control { width: 100%; }
  .commercial-options { grid-template-columns: 1fr; }
  .commercial-options article { padding: var(--space-4) 0; }
  .commercial-options article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .project-hero-summary { padding: var(--space-4); }
  .project-progress-line { grid-template-columns: 1fr; gap: var(--space-3); }
  .project-progress-line > strong { font-size: 48px; }
  .current-stage-block { grid-template-columns: 40px minmax(0,1fr); }
  .current-stage-block h2 { font-size: 18px; }
  .attention-center { padding: var(--space-4); }
  .finance-compact { grid-template-columns: 1fr; }
  .finance-compact > div { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .finance-compact > div:last-child { border-bottom: 0; }
  .document-workflow-row { grid-template-columns: 32px minmax(0,1fr); }
  .document-workflow-actions { grid-column: 2; justify-content: flex-start; }
  .document-workflow-actions .btn { flex: 1 1 120px; }
  .version-list > div { grid-template-columns: 60px minmax(0,1fr); }
  .version-list small { grid-column: 1 / -1; }
  .thread-message { max-width: none; }
  .deliverable-row { grid-template-columns: 30px minmax(0,1fr); }
  .deliverable-actions { grid-column: 2; justify-content: flex-start; }
  .finance-summary-panel { grid-template-columns: 1fr; }
  .finance-summary-item,
  .finance-summary-item:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .finance-summary-item:last-child { border-bottom: 0; }
  .auth-card-wide { width: 100%; }
  .demo-profiles-head { align-items: flex-start; flex-direction: column; gap: 2px; }
}