@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./assets/inter-latin-wght-normal.woff2") format("woff2"); }
* { box-sizing: border-box; }
:root { color-scheme: light; --bw-canvas: #fafafa; --canvas: var(--bw-canvas); --surface: #fff; --surface-soft: #f5f5f6; --line: #e8e8eb; --ink: #202126; --muted: #70727d; --focus: #eeeef1; --accent: #4053cf; --chart-fill: rgba(64,83,207,.07); --success: #658571; --attention: #aa8660; --negative: #a57373; }
html[data-theme="dark"] { color-scheme: dark; --bw-canvas: #111113; --surface: #19191d; --surface-soft: #202025; --line: #2b2b32; --ink: #efeff2; --muted: #a2a3af; --focus: #29292f; --accent: #9ca9f7; --chart-fill: rgba(156,169,247,.07); --success: #8aac96; --attention: #bfa17e; --negative: #c39696; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a, input, textarea { outline: none; box-shadow: none; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; line-height: 20px; transition: background-color 140ms ease, color 140ms ease; }
button:hover, button:focus-visible, a:focus-visible { background: var(--focus); }
button.primary { background: #4053cf; color: #fff; border-color: transparent; }
button.primary:hover, button.primary:focus-visible { background: #3447b9; }
html[data-theme="dark"] button.primary { background: #ededf1; color: #202126; }
html[data-theme="dark"] button.primary:hover, html[data-theme="dark"] button.primary:focus-visible { background: #d5d5dd; }
button.quiet { background: transparent; }
button.quiet:hover, button.quiet:focus-visible { background: var(--focus); }
button.icon-button { padding: 8px; width: 36px; height: 36px; background: transparent; border-color: transparent; flex-shrink: 0; }
button.icon-button:hover, button.icon-button:focus-visible { background: var(--focus); }
.text-button { padding: 0 4px; margin-left: -4px; min-height: 28px; border-color: transparent; background: transparent; text-align: left; font-size: inherit; font-weight: 500; justify-content: flex-start; }
input, textarea { min-width: 0; width: 100%; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
input:focus-visible, textarea:focus-visible { background: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--muted); text-decoration: none; }
textarea { resize: vertical; }
a { color: var(--accent); text-decoration: none; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; line-height: 1.25; font-weight: 500; letter-spacing: -.6px; }
h2 { font-size: 16px; line-height: 1.5; font-weight: 500; }
h3 { font-size: 14px; line-height: 1.5; font-weight: 500; }
strong { font-weight: 500; }
[hidden] { display: none !important; }
.small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); }
.number, .stat strong, .date-block, .chart-summary strong { font-variant-numeric: tabular-nums; }
.align-right { text-align: right; }
.icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.app-shell { display: grid; grid-template-columns: 224px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 16px 20px; background: var(--surface); border-right: 1px solid var(--line); }
.workspace-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 32px; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink); background: var(--surface-soft); }
.workspace-brand strong { display: block; font-size: 16px; letter-spacing: -.2px; }
.workspace-brand div > span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.sidebar-section > p { margin: 0 12px 12px; color: var(--muted); font-size: 12px; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav button { justify-content: flex-start; padding: 8px 12px; border: 0; background: transparent; min-height: 40px; font-weight: 400; color: var(--muted); }
.sidebar nav button[aria-current="page"] { color: var(--ink); background: var(--focus); font-weight: 500; }
.sidebar nav button:hover, .sidebar nav button:focus-visible { background: var(--focus); color: var(--ink); }
.sidebar nav button > .icon { margin-right: 2px; }
.nav-count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.sidebar-bottom { margin-top: auto; padding-top: 40px; }
.workspace-person { display: flex; align-items: center; gap: 10px; padding: 16px 12px; border-top: 1px solid var(--line); margin-top: 16px; }
.workspace-person strong { display: block; font-size: 13px; }
.workspace-person div > span { display: block; color: var(--muted); font-size: 11px; }
.guide-button, .back-link { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 36px; padding: 8px 12px; gap: 10px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 400; }
.guide-button:hover, .back-link:hover { color: var(--ink); background: var(--focus); }
.avatar { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--focus); color: var(--ink); font-size: 11px; font-weight: 500; flex-shrink: 0; }
.avatar-large { width: 48px; height: 48px; font-size: 16px; }
.workspace { min-width: 0; }
.topbar { height: 64px; padding: 0 36px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: center; justify-content: space-between; background: var(--canvas); }
.demo-conversion { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 36px; border-bottom: 1px solid var(--line); }
.demo-conversion > p { color: var(--muted); font-size: 12px; }
.demo-build-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font-size: 12px; font-weight: 500; transition: background-color 140ms ease, color 140ms ease; }
.demo-build-link:hover, .demo-build-link:focus-visible { background: var(--focus); }
.demo-build-link .icon { width: 16px; height: 16px; }
.breadcrumbs { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); min-width: 0; }
.breadcrumbs i { color: var(--muted); font-style: normal; opacity: .5; }
.breadcrumbs strong { color: var(--ink); font-weight: 400; white-space: nowrap; }
.topbar-right, .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-right { flex-shrink: 0; }
.demo-label { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; white-space: nowrap; }
.demo-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); }
.reset-button { min-height: 32px; font-size: 12px; padding: 6px 8px; border-color: transparent; font-weight: 400; color: var(--muted); }
main { padding: 36px; width: 100%; max-width: 1560px; margin: 0 auto; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.page-head p { color: var(--muted); margin-top: 8px; max-width: 600px; font-size: 13px; }
.page-head .actions { flex-shrink: 0; }
.page-head .primary { min-height: 40px; }
.stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0 0 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.stat { padding: 0 28px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat p { font-size: 12px; color: var(--muted); }
.stat strong { display: block; margin: 8px 0 4px; font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -.6px; }
.stat .small { font-size: 11px; }
body[data-demo="dashboard"] .stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-head > div > p { margin-top: 4px; }
.panel-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.panel-foot .icon { width: 16px; height: 16px; margin-right: 6px; }
.progress { height: 4px; border-radius: 4px; background: var(--focus); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 24px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.project-cover-button { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; overflow: hidden; }
.project-cover-button:focus-visible { opacity: .85; }
.project-cover { height: 184px; padding: 20px; overflow: hidden; }
.cover-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; }
.cover-nav strong { font-size: 13px; letter-spacing: -.2px; }
.cover-nav span { font-size: 11px; }
.cover-content { display: flex; align-items: center; gap: 12px; height: 132px; }
.cover-content > div:first-child { flex: 1; text-align: left; }
.cover-content > div > span { display: block; font-size: 11px; }
.cover-content strong { display: block; font-size: 24px; line-height: 1.05; margin: 8px 0 12px; font-weight: 500; }
.cover-content .cover-link { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.cover-link .icon { width: 12px; height: 12px; }
.cover-northline { background: #eeece6; color: #38372f; }
.cover-object { position: relative; flex-shrink: 0; width: 80px; height: 100px; margin-top: 16px; }
.cover-object i { display: block; position: absolute; background: #9e9c88; }
.cover-object i:first-child { width: 62px; height: 60px; border-radius: 32px 32px 4px 4px; top: 4px; left: 10px; }
.cover-object i:nth-child(2) { width: 76px; height: 12px; border-radius: 4px; top: 64px; left: 2px; }
.cover-object i:last-child { width: 52px; height: 30px; top: 76px; left: 14px; border-left: 8px solid #777562; border-right: 8px solid #777562; background: transparent; }
.cover-cedar { background: #e8e9e4; color: #353c33; }
.cover-package { position: relative; width: 70px; height: 102px; margin-top: 16px; flex-shrink: 0; background: #bac3ae; border-radius: 4px; text-align: left; }
.cover-package i { display: block; height: 18px; background: #a9b39c; border-radius: 4px 4px 0 0; }
.cover-package > span { padding: 12px; font-size: 16px !important; line-height: 1.3; color: #46503d; }
.cover-field { background: #e9ebf3; color: #373e5a; }
.cover-onboarding { display: flex; align-items: center; flex-direction: column; padding-top: 12px; text-align: center; }
.cover-check { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #fff; border-radius: 8px; margin-bottom: 8px; }
.cover-check .icon { width: 16px; height: 16px; }
.cover-onboarding > strong { font-size: 15px; font-weight: 500; }
.cover-onboarding > span:last-child { font-size: 11px; margin-top: 8px; }
.cover-onboarding > div { display: flex; gap: 4px; margin-top: 12px; }
.cover-onboarding i { width: 36px; height: 3px; border-radius: 4px; background: #9ba5c3; }
.project-card-body { padding: 20px; }
.project-title { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.project-title h3 { min-width: 0; }
.project-state { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.project-state .icon { width: 12px; height: 12px; }
.project-card-body > .small { margin-top: 4px; }
.progress-heading { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin: 20px 0 8px; color: var(--muted); }
.progress-heading strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.project-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.project-meta > span { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; }
.project-meta .icon { width: 14px; height: 14px; }
.project-meta .avatar { width: 24px; height: 24px; font-size: 11px; }
.portal-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.handoffs { display: grid; }
.handoff { display: flex; justify-content: flex-start; padding: 12px 0; gap: 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; }
.handoff:first-child { border-top: 0; padding-top: 0; }
.handoff > span:nth-child(2) { flex: 1; min-width: 0; }
.handoff > span:nth-child(2) > strong, .handoff > span:nth-child(2) > span { display: block; }
.handoff > span:nth-child(2) > span { color: var(--muted); font-size: 12px; margin-top: 4px; }
.handoff > .icon { color: var(--muted); }
.date-block { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 48px; background: var(--surface-soft); border-radius: 8px; color: var(--muted); }
.date-block strong { font-size: 18px; color: var(--ink); }
.date-block span { font-size: 11px; }
.activity { list-style: none; padding: 0; margin: 0; display: grid; }
.activity li { position: relative; display: flex; gap: 14px; padding: 0 0 16px; }
.activity li:last-child { padding-bottom: 0; }
.activity li:not(:last-child)::after { content: ""; position: absolute; left: 3px; top: 14px; width: 1px; height: calc(100% - 18px); background: var(--line); }
.timeline-dot { width: 7px; height: 7px; margin-top: 6px; background: var(--muted); border-radius: 50%; flex-shrink: 0; opacity: .6; }
.activity li p { font-size: 12px; }
.activity li .small { display: block; margin-top: 4px; font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 18px; white-space: nowrap; }
.status i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.status-active i, .status-approved i, .status-paid i { background: var(--success); }
.status-pending i, .status-open i, .status-trial i { background: var(--attention); }
.status-rejected i, .status-paused i { background: var(--negative); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { font-size: 11px; font-weight: 400; color: var(--muted); background: var(--canvas); }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-soft); }
td { font-size: 12px; }
td.number { font-size: 13px; }
.file-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; }
.file-toolbar > span { display: inline-flex; gap: 6px; align-items: center; }
.file-toolbar .icon { width: 14px; height: 14px; }
.file-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.file-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.file-preview { display: flex; width: 100%; height: 232px; padding: 28px; border: 0; border-radius: 0; background: var(--surface-soft); }
.file-preview:focus-visible { background: var(--focus); }
.document-sheet { width: 164px; height: 180px; display: block; padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); text-align: left; box-shadow: 0 8px 16px rgba(17,17,19,.04); }
.document-icon { display: block; color: var(--muted); margin-bottom: 12px; }
.document-sheet strong { display: block; font-size: 12px; margin-bottom: 12px; }
.document-sheet > i { display: block; height: 3px; margin-bottom: 6px; border-radius: 2px; background: var(--line); }
.document-sheet > i:nth-last-of-type(1) { width: 60%; }
.document-sheet > span:last-child { display: block; margin-top: 16px; font-size: 11px; color: var(--muted); }
.file-body { padding: 20px; }
.file-body > p { margin-top: 4px; }
.file-meta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-note { margin-top: 24px; padding: 24px; border: 1px dashed var(--line); border-radius: 12px; display: flex; align-items: center; gap: 16px; color: var(--muted); }
.share-note strong { color: var(--ink); font-size: 13px; }
.share-note p { font-size: 12px; margin-top: 4px; }
.filters { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.filters button { border-color: transparent; padding: 6px 10px; min-height: 32px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 400; }
.filters button[aria-pressed="true"] { color: var(--ink); background: var(--focus); font-weight: 500; }
.filters button:hover, .filters button:focus-visible { background: var(--focus); color: var(--ink); }
.search-field { display: flex; align-items: center; min-width: 0; width: 224px; border: 1px solid var(--line); border-radius: 8px; padding-left: 10px; color: var(--muted); background: var(--canvas); }
.search-field input { border: 0; padding: 8px 10px; font-size: 12px; background: transparent; min-height: 34px; }
.search-field:focus-within { background: var(--focus); }
.search-field > .icon { width: 16px; height: 16px; }
.approval-workspace { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.9fr); gap: 24px; align-items: start; }
.request-list { padding: 24px 0 0; }
.request-list > .panel-head { padding: 0 24px; }
.request-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 24px 20px; }
.request-toolbar .search-field { width: 100%; }
.request-list-head { display: flex; justify-content: space-between; padding: 10px 24px; background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.request-row { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.request-row.is-selected { background: var(--surface-soft); }
.request-row:last-child { border-bottom: 0; }
.request-select { width: 100%; padding: 0; min-height: 48px; border-color: transparent; background: transparent; text-align: left; justify-content: flex-start; gap: 12px; }
.request-select > span:nth-child(2) { flex: 1; min-width: 0; }
.request-select strong { display: block; font-size: 13px; }
.request-select .small { display: block; font-size: 11px; margin-top: 4px; }
.request-row-amount { text-align: right; flex-shrink: 0; }
.request-row-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.row-decisions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.row-decisions button { border-color: transparent; background: transparent; min-height: 28px; padding: 2px 8px; font-size: 11px; font-weight: 400; color: var(--muted); }
.row-decisions button:hover, .row-decisions button:focus-visible { background: var(--focus); color: var(--ink); }
.row-decisions .icon { width: 12px; height: 12px; }
.reason-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); max-width: 220px; }
.request-list > .panel-foot { margin-top: 0; padding: 16px 24px; }
.request-detail { padding: 24px; }
.request-detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.request-person { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.request-person strong { font-size: 13px; }
.request-detail > h2 { font-size: 20px; }
.request-description { color: var(--muted); font-size: 13px; margin-top: 8px; }
.request-amount { margin-top: 24px; padding: 20px; background: var(--surface-soft); border-radius: 8px; }
.request-amount > strong { display: block; font-size: 32px; margin-top: 4px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.4px; }
.detail-list { margin: 24px 0; }
.detail-list > div { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-top: 12px; font-size: 12px; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; text-align: right; }
.attachment { display: flex; width: 100%; padding: 12px; border-radius: 8px; border-color: var(--line); background: transparent; text-align: left; }
.attachment > span { flex: 1; }
.attachment strong, .attachment .small { display: block; }
.attachment > .icon { color: var(--muted); }
.attachment strong { font-size: 12px; }
.attachment .small { font-size: 11px; margin-top: 2px; }
.decision-trail { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.decision-trail > div { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 12px; }
.decision-trail .icon { width: 14px; height: 14px; }
.decision-trail blockquote { margin: 16px 0 0; padding: 12px; background: var(--surface-soft); border-radius: 8px; font-size: 12px; color: var(--ink); }
.decision-actions { margin-top: 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.empty { padding: 40px 24px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 12px; }
.empty > strong { font-size: 14px; color: var(--ink); }
.empty > .icon { width: 20px; height: 20px; }
.team-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.team-member { display: flex; align-items: center; text-align: center; flex-direction: column; gap: 8px; padding: 28px 16px; }
.team-member h2 { margin-top: 8px; font-size: 15px; }
.team-member .muted { font-size: 12px; }
.dashboard-analytics { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(260px,1fr); gap: 24px; margin-bottom: 24px; }
.analytics-aside { display: grid; gap: 20px; }
.revenue-panel { padding: 24px; }
.period-control { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; }
.period-control button { background: transparent; border: 0; padding: 4px 8px; min-height: 28px; font-size: 11px; font-weight: 400; color: var(--muted); border-radius: 6px; }
.period-control button[aria-pressed="true"], .period-control button:focus-visible { background: var(--focus); color: var(--ink); }
.chart-summary { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.chart-summary strong { font-size: 28px; font-weight: 500; letter-spacing: -.4px; }
.chart-summary > span { font-size: 11px; color: var(--muted); }
.chart-wrap { display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: 8px; margin-top: 32px; }
.chart { width: 100%; height: 240px; display: block; overflow: visible; }
.chart-y-axis, .chart-x-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-y-axis { flex-direction: column; line-height: 1; }
.chart-x-axis { grid-column: 2; margin-top: 12px; }
.chart-grid { stroke: var(--line); fill: none; stroke-dasharray: 3 4; stroke-width: 1; }
.chart-line { stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--chart-fill); stroke: none; }
.chart-point { fill: var(--surface); stroke: var(--accent); stroke-width: 2; opacity: 0; }
.chart-point:hover { opacity: 1; }
.chart-legend { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 16px; }
.chart-legend i { width: 12px; height: 3px; background: var(--accent); border-radius: 2px; }
.plan-panel { padding: 24px; }
.plan-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 16px; }
.plan-row:last-of-type { margin-bottom: 0; }
.plan-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-row strong { font-size: 12px; }
.plan-row .small { font-size: 11px; }
.plan-row > .number { text-align: right; }
.plan-bar { height: 4px; border-radius: 4px; background: var(--focus); grid-column: 1 / -1; overflow: hidden; }
.plan-bar > span { display: block; height: 100%; background: var(--muted); opacity: .45; border-radius: 4px; }
.plan-panel .panel-foot { margin-top: 20px; font-size: 11px; }
.trial-panel { padding: 20px 24px; }
.trial-mark { display: inline-flex; color: var(--muted); margin-bottom: 8px; }
.trial-panel > h2 { font-size: 14px; }
.trial-panel > p { font-size: 12px; color: var(--muted); margin-top: 4px; }
.trial-customer { display: flex; justify-content: flex-start; text-align: left; width: 100%; border: 0; background: transparent; padding: 12px 0 0; margin-top: 8px; gap: 10px; }
.trial-customer > span:nth-child(2) { flex: 1; }
.trial-customer strong, .trial-customer .small { display: block; }
.trial-customer strong { font-size: 12px; }
.trial-customer .small { font-size: 11px; margin-top: 2px; }
.trial-customer > .icon { color: var(--muted); width: 14px; height: 14px; }
.customer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.customer-name { background: transparent; border: 0; text-align: left; justify-content: flex-start; padding: 0; gap: 12px; }
.customer-name > span:nth-child(2) { min-width: 0; }
.customer-name strong, .customer-name .small { display: block; }
.customer-name strong { font-size: 12px; }
.customer-name .small { font-size: 11px; margin-top: 3px; }
.plan-label { font-size: 12px; }
.subscription-list { display: grid; }
.subscription-row { display: flex; gap: 16px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.subscription-row:first-child { border-top: 0; padding-top: 0; }
.subscription-row > div:nth-child(2) { flex: 1; }
.subscription-value { min-width: 92px; text-align: right; }
.subscription-value strong, .subscription-value .small { display: block; }
.subscription-value strong { font-size: 16px; }
.demo-note { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 32px; }
.demo-note .icon { width: 14px; height: 14px; margin-top: 2px; }
.mobile-workspace-links { display: none; }
.notice { position: fixed; z-index: 20; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 10px; max-width: min(480px,calc(100vw - 32px)); color: var(--ink); font-size: 12px; }
.notice:not(:empty) { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
dialog { width: min(560px,calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; overflow: auto; }
dialog::backdrop { background: rgba(17,17,19,.3); }
dialog.drawer { margin: 0 0 0 auto; width: min(520px,100vw); height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; border-left: 1px solid var(--line); }
.dialog-head { padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: 20px; margin-top: 4px; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 20px 24px; border-top: 1px solid var(--line); }
.form-body { padding: 24px; }
.form-body > p:first-child { font-size: 13px; }
.form-body > label { display: grid; gap: 8px; margin-top: 20px; font-size: 12px; }
.form-body > .small { margin-top: 16px; }
.form-choice { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin: 20px 0 0; padding: 0; border: 0; }
.form-choice legend { padding: 0; margin-bottom: 8px; font-size: 12px; }
.form-choice label { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 12px; border-radius: 8px; cursor: pointer; }
.form-choice label:has(input:checked) { background: var(--surface-soft); }
.form-choice label:focus-within { background: var(--focus); }
.form-choice input { display: grid; place-items: center; width: 16px; height: 16px; margin: 0; padding: 0; appearance: none; border: 1px solid var(--line); border-radius: 50%; }
.form-choice input::before { content: ""; width: 6px; height: 6px; background: var(--ink); border-radius: 50%; opacity: 0; }
.form-choice input:checked::before { opacity: 1; }
.form-choice label > span > strong, .form-choice label > span > .small { display: block; }
.form-choice label .small { font-size: 11px; margin-top: 2px; }
.error:not(:empty) { margin-top: 16px; color: var(--ink); padding: 10px 12px; border-radius: 8px; background: var(--focus); font-size: 12px; }
.drawer-body { padding: 24px; }
.drawer-body > .project-cover { border-radius: 8px; height: 224px; padding: 24px; }
.drawer-body > .project-cover .cover-content { height: 164px; }
.drawer-body > .project-cover .cover-content strong { font-size: 32px; }
.drawer-body > .project-cover .cover-object { transform: scale(1.25); margin-right: 16px; }
.drawer-body > .project-cover .cover-package { transform: scale(1.25); margin-right: 16px; }
.drawer-summary { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.drawer-summary > div > strong { display: block; font-size: 28px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.milestone-list { margin: 28px 0; }
.milestone-list h3 { margin-bottom: 12px; }
.milestone-list button { display: flex; width: 100%; justify-content: flex-start; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 400; text-align: left; }
.milestone-list button > span:nth-child(2) { flex: 1; }
.check-box { width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.check-box .icon { width: 14px; height: 14px; }
.milestone-list button[aria-checked="true"] .check-box { background: var(--focus); }
.milestone-list button:hover, .milestone-list button:focus-visible { background: var(--focus); }
.drawer-actions { margin: 28px 0 16px; }
.drawer-actions button { width: 100%; min-height: 40px; }
.customer-profile { text-align: center; padding: 8px 0 24px; }
.customer-profile .avatar { width: 64px; height: 64px; font-size: 20px; }
.customer-profile h3 { font-size: 20px; margin-top: 16px; }
.customer-profile p { margin: 4px 0 16px; font-size: 13px; }
.customer-subscription { display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.customer-subscription h3 { font-size: 18px; margin-top: 4px; }
.customer-subscription > strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.seat-section h3 { margin-bottom: 12px; }
.seat-section .small { margin-top: 8px; }
.document-content { padding: 28px; }
.document-content pre { font: 13px/1.7 Inter,sans-serif; white-space: pre-wrap; margin: 0; color: var(--ink); }
.invoice-document { padding: 28px; }
.invoice-document > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.invoice-document > div:first-child > strong { font-size: 20px; }
.invoice-document > h3 { margin-top: 4px; }
.invoice-total { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; margin-top: 28px; border-top: 1px solid var(--line); }
.invoice-total > strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.help-content { padding: 24px; font-size: 13px; }
.help-content ol { display: grid; gap: 16px; margin: 24px 0; padding-left: 20px; }
.help-content > a { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1279px) {
  .app-shell { grid-template-columns: 208px minmax(0,1fr); }
  main, .topbar, .demo-conversion { padding-left: 28px; padding-right: 28px; }
  .project-grid { gap: 16px; }
  .project-cover { padding: 16px; }
  .cover-nav > span { display: none; }
  .cover-content strong { font-size: 20px; }
  .cover-object { width: 64px; transform: scale(.8); transform-origin: center right; }
  .cover-package { width: 56px; }
  .project-title { align-items: start; flex-direction: column; gap: 0; }
  .project-card-body { padding: 16px; }
  .stat { padding-left: 20px; padding-right: 20px; }
  .approval-workspace { grid-template-columns: minmax(0,1.35fr) minmax(280px,1fr); gap: 20px; }
  .request-row { padding-left: 20px; padding-right: 20px; }
  .dashboard-analytics { grid-template-columns: minmax(0,1.8fr) minmax(240px,1fr); gap: 20px; }
  .revenue-panel, .plan-panel, .request-detail { padding: 20px; }
  .chart-summary { display: block; }
  .chart-summary > span { display: block; margin-top: 4px; }
}
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 184px minmax(0,1fr); }
  .sidebar { padding: 24px 12px 16px; }
  .workspace-brand { gap: 8px; padding-left: 4px; padding-right: 4px; }
  .workspace-brand strong { font-size: 14px; }
  .workspace-brand div > span { font-size: 11px; }
  .page-head { align-items: start; flex-direction: column; gap: 16px; }
  .page-head p { max-width: none; }
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-cover { padding: 20px; }
  .portal-bottom, .approval-workspace, .dashboard-analytics { grid-template-columns: minmax(0,1fr); }
  .analytics-aside { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
  .request-toolbar .search-field { width: 224px; }
  .team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .file-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .breadcrumbs > span { display: none; }
  .breadcrumbs i { display: none; }
  .demo-label { font-size: 11px; }
  .stats, body[data-demo="dashboard"] .stats { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 20px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 680px) {
  h1 { font-size: 24px; line-height: 1.25; letter-spacing: -.3px; }
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: 16px 16px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace-brand { padding: 0 0 16px; gap: 10px; }
  .workspace-brand strong { font-size: 16px; }
  .workspace-brand div > span { font-size: 12px; }
  .sidebar-section > p, .sidebar-bottom { display: none; }
  .sidebar nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .sidebar nav button { padding: 8px 10px; flex-shrink: 0; min-height: 36px; font-size: 12px; }
  .sidebar nav button .icon { width: 16px; height: 16px; }
  .nav-count { margin-left: 4px; }
  .topbar { height: 52px; padding: 0 16px; }
  .demo-conversion { gap: 12px; padding: 12px 16px; }
  .breadcrumbs { gap: 8px; font-size: 11px; }
  .breadcrumbs .icon { width: 14px; height: 14px; }
  .topbar-right { gap: 4px; }
  .demo-label { gap: 6px; }
  .reset-button { font-size: 11px; padding: 6px; gap: 4px; }
  .reset-button .icon { width: 14px; height: 14px; }
  main { padding: 28px 16px; }
  .page-head { gap: 16px; margin-bottom: 28px; }
  .page-head p { font-size: 12px; }
  .page-head .actions { gap: 8px; }
  .stats { margin-bottom: 24px; padding-bottom: 20px; }
  .stat { padding-left: 20px; padding-right: 12px; }
  .stat strong { font-size: 28px; }
  .stat .small { font-size: 11px; }
  .panel { padding: 20px; }
  .project-grid, .file-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .project-cover { height: 204px; padding: 24px; }
  .cover-nav > span { display: block; }
  .cover-content { height: 144px; }
  .cover-content strong { font-size: 26px; }
  .cover-object { transform: none; width: 80px; margin-right: 12px; }
  .cover-package { width: 70px; margin-right: 12px; }
  .project-title { flex-direction: row; align-items: center; gap: 8px; }
  .project-card-body { padding: 20px; }
  .portal-bottom { gap: 20px; }
  .file-toolbar { align-items: start; flex-direction: column; gap: 8px; }
  .file-preview { height: 244px; }
  .share-note { padding: 20px; align-items: start; }
  .request-list { padding: 20px 0 0; }
  .request-list > .panel-head, .request-toolbar { padding-left: 20px; padding-right: 20px; }
  .request-toolbar .search-field { width: 100%; }
  .request-row { padding: 16px 20px; }
  .request-select { gap: 8px; }
  .request-select .avatar { width: 28px; height: 28px; font-size: 11px; }
  .request-select strong { font-size: 12px; }
  .request-row-amount { font-size: 12px; }
  .request-list-head { padding-left: 20px; padding-right: 20px; }
  .request-list > .panel-foot { padding: 16px 20px; }
  .request-detail { padding: 24px; }
  .analytics-aside { grid-template-columns: minmax(0,1fr); }
  .revenue-panel { padding: 20px 16px; }
  .revenue-panel .panel-head { align-items: start; gap: 12px; }
  .revenue-panel h2 { font-size: 14px; }
  .revenue-panel .small { font-size: 11px; }
  .period-control button { font-size: 11px; padding: 4px 6px; white-space: nowrap; }
  .chart-wrap { margin-top: 24px; }
  .chart { height: 176px; }
  .chart-legend { font-size: 11px; }
  .customer-panel .panel-head { align-items: start; flex-direction: column; gap: 16px; }
  .customer-panel .search-field { width: 100%; }
  .customer-toolbar { gap: 8px; }
  .customer-toolbar > .small { white-space: nowrap; font-size: 11px; }
  .customer-toolbar .filters { gap: 0; }
  .customer-toolbar .filters button { padding: 6px 8px; font-size: 11px; }
  .subscription-row { gap: 12px; flex-wrap: wrap; }
  .subscription-row > div:nth-child(2) { min-width: calc(100% - 52px); }
  .subscription-value { text-align: left; flex: 1; }
  .demo-note { font-size: 11px; margin-top: 28px; }
  .mobile-workspace-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
  .mobile-workspace-links .guide-button, .mobile-workspace-links .back-link { width: auto; padding: 4px 0; }
  .mobile-workspace-links .icon { width: 14px; height: 14px; }
  .notice { bottom: 16px; right: 16px; }
  .dialog-head, .form-body, .drawer-body, .help-content { padding: 20px; }
  .dialog-actions { padding: 16px 20px; }
  .drawer-body > .project-cover { padding: 20px; }
  .drawer-body > .project-cover .cover-content strong { font-size: 26px; }
  .drawer-body > .project-cover .cover-object, .drawer-body > .project-cover .cover-package { transform: none; margin-right: 4px; }
  .customer-subscription { padding: 16px; }
  .customer-subscription > strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }