.dashboard-page {
  min-height: 100vh;
  background: #f2f3ef;
  color: var(--ink-950);
  font-size: 14px;
}

.demo-shell { min-height: 100vh; }

.dashboard-sidebar {
  position: fixed;
  z-index: 80;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  width: 236px;
  flex-direction: column;
  padding: 24px 16px 16px;
  background: var(--navy-900);
  color: #dce5e3;
}

.sidebar-head { display: flex; align-items: center; min-height: 38px; padding: 0 8px; }
.dashboard-brand { display: flex; align-items: center; gap: 10px; }
.dashboard-brand .brand-mark { width: 29px; height: 29px; background: rgba(255,255,255,.06); }
.dashboard-brand > span:last-child { display: grid; line-height: 1.2; }
.dashboard-brand strong { color: white; font-size: 12px; letter-spacing: .14em; }
.dashboard-brand small { color: #6e8985; font-size: 6px; letter-spacing: .08em; }
.sidebar-close { display: none; }
.workspace-chip { display: grid; min-height: 64px; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; margin: 24px 0 20px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(255,255,255,.04); }
.workspace-chip > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #dfe6d2; color: var(--navy-900); font-size: 10px; font-weight: 900; }
.workspace-chip > div { display: grid; line-height: 1.4; }.workspace-chip strong { color: white; font-size: 10px; }.workspace-chip small { color: #829895; font-size: 8px; }.workspace-chip b { color: #839895; font-size: 10px; }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-nav p { margin: 13px 10px 5px; color: #5f7c78; font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.sidebar-nav button { position: relative; display: grid; min-height: 42px; grid-template-columns: 28px 1fr auto; align-items: center; gap: 3px; padding: 0 11px; border: 0; border-radius: 3px; background: transparent; color: #90a6a2; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.sidebar-nav button:hover { background: rgba(255,255,255,.055); color: #e1e9e7; }.sidebar-nav button.active { background: rgba(255,255,255,.1); color: white; }.sidebar-nav button.active::before { position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: #b8cc6c; content: ""; }
.nav-icon { display: inline-grid; width: 19px; place-items: center; font-size: 13px; font-weight: 500; }.ai-nav-icon { width: 19px; height: 19px; border-radius: 50%; background: #b5ca69; color: var(--navy-900); font-size: 8px; font-weight: 900; }.sidebar-nav button b { font-size: 11px; font-weight: 700; }.sidebar-nav button em { display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.09); color: #a7bab6; font-size: 7px; font-style: normal; }.sidebar-nav button.active em { background: #b5ca69; color: var(--navy-900); }.sidebar-nav button > i { padding: 2px 4px; border-radius: 2px; background: rgba(181,202,105,.15); color: #b5ca69; font-size: 6px; font-style: normal; font-weight: 900; }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 15px 9px 4px; border-top: 1px solid rgba(255,255,255,.1); }.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #b5ca69; box-shadow: 0 0 0 4px rgba(181,202,105,.09); }.sidebar-foot div { display: grid; line-height: 1.45; }.sidebar-foot strong { color: #9bb0ac; font-size: 7px; letter-spacing: .08em; }.sidebar-foot small { color: #5e7975; font-size: 7px; }
.sidebar-foot small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sidebar-overlay { display: none; }

.dashboard-workspace { min-height: 100vh; margin-left: 236px; }
.dashboard-header { position: sticky; z-index: 40; top: 0; display: flex; height: 72px; align-items: center; padding: 0 30px; border-bottom: 1px solid #dde2dc; background: rgba(249,250,247,.95); backdrop-filter: blur(14px); }
.sidebar-open { display: none; }
.header-crumb { display: flex; align-items: center; gap: 9px; color: var(--ink-500); font-size: 10px; }.header-crumb i { color: #bdc5bf; font-style: normal; }.header-crumb strong { color: var(--ink-800); font-size: 11px; }
.dashboard-header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.demo-badge { display: flex; align-items: center; gap: 6px; margin-right: 6px; padding: 5px 8px; border: 1px solid #ccd8cd; border-radius: 2px; color: #557664; font-size: 7px; font-weight: 900; letter-spacing: .09em; }.demo-badge i { width: 5px; height: 5px; border-radius: 50%; background: #6fa07e; }
.icon-button { position: relative; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 3px; background: white; cursor: pointer; }.icon-button > span { color: var(--ink-650); font-size: 17px; transform: rotate(45deg); }.icon-button i { position: absolute; right: -3px; top: -4px; display: grid; width: 16px; height: 16px; place-items: center; border: 2px solid #f9faf7; border-radius: 50%; background: var(--red); color: white; font-size: 6px; font-style: normal; font-weight: 900; }
.ai-open-button { display: flex; height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--navy-900); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }.ai-open-button > span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #b5ca69; color: var(--navy-900); font-size: 7px; }
.profile-button { display: flex; height: 42px; align-items: center; gap: 8px; padding: 0 3px 0 9px; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; }.profile-button > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #dce6df; color: var(--navy-800); font-size: 9px; font-weight: 900; }.profile-button > div { display: grid; min-width: 42px; text-align: left; line-height: 1.3; }.profile-button strong { font-size: 9px; }.profile-button small { color: var(--ink-500); font-size: 7px; }.profile-button b { color: var(--ink-500); font-size: 8px; }

.notification-panel { position: absolute; z-index: 100; right: 29px; top: 62px; width: 340px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: white; box-shadow: var(--shadow-md); }.notification-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 18px 19px; border-bottom: 1px solid var(--line-soft); }.notification-panel header > div { display: grid; }.notification-panel header strong { font-size: 13px; }.notification-panel header span { color: var(--ink-500); font-size: 8px; }.notification-panel header button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-500); font-size: 18px; cursor: pointer; }.notification-panel ul { margin: 0; padding: 0; list-style: none; }.notification-panel li { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 15px 19px; border-bottom: 1px solid var(--line-soft); }.notification-panel li > i { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; }.notification-panel li div { display: grid; }.notification-panel li strong { font-size: 10px; }.notification-panel li p { margin: 2px 0 0; color: var(--ink-500); font-size: 8px; }.status-red { background: var(--red); }.status-amber { background: var(--amber); }.status-green { background: #598c71; }.notification-action { width: 100%; padding: 13px; border: 0; background: #f8f9f5; color: var(--navy-800); font-size: 9px; font-weight: 800; cursor: pointer; }

.dashboard-content { min-height: calc(100vh - 72px); padding: 27px 30px 44px; outline: none; }
.view-section { max-width: 1410px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.page-heading > div:first-child > span { color: #789087; font-size: 7px; font-weight: 900; letter-spacing: .14em; }.page-heading h1 { margin: 3px 0 2px; font-size: 25px; line-height: 1.3; letter-spacing: -.04em; }.page-heading > div:first-child p { margin: 0; color: var(--ink-500); font-size: 10px; }
.page-demo-label { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); background: #f9faf7; }.page-demo-label > i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }.page-demo-label p { display: grid; margin: 0; line-height: 1.3; }.page-demo-label strong { color: var(--ink-650); font-size: 7px; letter-spacing: .1em; }.page-demo-label small { color: var(--ink-500); font-size: 7px; }

.kpi-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; margin-bottom: 11px; }.kpi-card { min-height: 104px; padding: 15px 16px; border: 1px solid #dfe4de; border-radius: 3px; background: white; }.kpi-card header { display: flex; align-items: center; justify-content: space-between; }.kpi-card header span { color: var(--ink-500); font-size: 8px; font-weight: 650; }.kpi-card header i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #edf0eb; color: var(--ink-650); font-size: 8px; font-style: normal; }.kpi-card strong { display: block; margin-top: 8px; font-size: clamp(14px,1.3vw,19px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }.kpi-card strong small { margin-left: 2px; font-size: 8px; }.kpi-card p { margin: 7px 0 0; color: var(--ink-500); font-size: 7px; }.kpi-card.positive p { color: #4d7f67; }.kpi-card.danger p { color: var(--red); }.kpi-card.warning p { color: var(--amber); }.kpi-card.danger header i { background: var(--red-soft); color: var(--red); }.kpi-card.warning header i { background: var(--amber-soft); color: var(--amber); }

.today-layout { display: grid; grid-template-columns: 1.18fr .82fr 1fr; gap: 11px; }.dash-card { border: 1px solid #dfe4de; border-radius: 3px; background: white; }.card-heading { display: flex; align-items: center; justify-content: space-between; }.card-heading > div { display: grid; }.card-heading > div > span { color: var(--ink-500); font-size: 6px; font-weight: 900; letter-spacing: .11em; }.card-heading h2 { margin: 2px 0 0; font-size: 13px; letter-spacing: -.02em; }.card-heading > b { display: grid; min-width: 23px; height: 23px; padding: 0 5px; place-items: center; border-radius: 50%; background: var(--ivory); font-size: 8px; }.card-heading button { padding: 0; border: 0; background: transparent; color: var(--ink-500); font-size: 7px; font-weight: 700; cursor: pointer; }
.briefing-card { min-height: 325px; padding: 17px; }.briefing-list { margin: 14px 0 0; padding: 0; list-style: none; }.briefing-list li { display: grid; min-height: 49px; grid-template-columns: 7px 1fr auto; gap: 9px; align-items: center; border-top: 1px solid var(--line-soft); }.signal { width: 5px; height: 5px; border-radius: 50%; }.signal.blue { background: var(--blue); }.signal.red { background: var(--red); }.signal.amber { background: var(--amber); }.signal.green { background: #578c70; }.briefing-list li > div { display: grid; }.briefing-list strong { font-size: 9px; }.briefing-list small { color: var(--ink-500); font-size: 7px; }
.status-tag, .stage-tag { display: inline-flex; min-height: 22px; align-items: center; justify-content: center; padding: 0 8px; border-radius: 2px; font-size: 7px; font-weight: 800; white-space: nowrap; }.status-tag.red,.stage-tag.red { background: var(--red-soft); color: var(--red); }.status-tag.amber,.stage-tag.amber { background: var(--amber-soft); color: #9b651e; }.status-tag.green,.stage-tag.green { background: var(--sage-soft); color: #4f8068; }.status-tag.blue,.stage-tag.blue { background: var(--blue-soft); color: var(--blue); }.status-tag.slate,.stage-tag.slate { background: #edf0ef; color: var(--ink-650); }
.pipeline-card { min-height: 325px; padding: 17px; }.pipeline-list { display: grid; gap: 4px; margin-top: 12px; }.pipeline-list button { position: relative; display: flex; min-height: 48px; align-items: center; justify-content: space-between; overflow: hidden; padding: 0 11px; border: 1px solid var(--line-soft); background: #fafbf8; cursor: pointer; }.pipeline-list button:hover { border-color: #b8c6bd; }.pipeline-list button > em { position: absolute; left: 0; bottom: 0; width: var(--width); height: 2px; background: var(--sage); }.pipeline-stage { display: flex; align-items: center; gap: 8px; color: var(--ink-650); font-size: 8px; }.pipeline-stage i { width: 6px; height: 6px; border-radius: 50%; }.pipeline-stage i.slate { background: #82908d; }.pipeline-stage i.blue { background: var(--blue); }.pipeline-stage i.amber { background: var(--amber); }.pipeline-stage i.green { background: #568a6d; }.pipeline-stage i.navy { background: var(--navy-900); }.pipeline-list strong { font-size: 15px; }.pipeline-list strong small { margin-left: 2px; color: var(--ink-500); font-size: 7px; }
.priority-card { min-height: 284px; grid-column: span 2; padding: 17px; }.priority-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 20px; margin-top: 11px; }.priority-list article { display: grid; min-height: 66px; grid-template-columns: 25px 1fr auto; gap: 9px; align-items: center; border-top: 1px solid var(--line-soft); }.priority-list article > span { color: #a2ada8; font-size: 8px; font-weight: 900; }.priority-list article > div:nth-child(2) { display: grid; }.priority-list article strong { font-size: 9px; }.priority-list article small { color: var(--ink-500); font-size: 7px; }.priority-list article > div:last-child { display: grid; justify-items: end; gap: 5px; }.priority-list em { padding: 2px 5px; font-size: 6px; font-style: normal; font-weight: 800; }.priority-list time { color: var(--ink-500); font-size: 7px; }
.priority-높음 { background: var(--red-soft); color: var(--red); }.priority-보통 { background: var(--amber-soft); color: var(--amber); }.priority-낮음 { background: var(--sage-soft); color: #4f8068; }
.revenue-summary-card { min-height: 284px; padding: 17px; }.revenue-figure { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 11px; }.revenue-figure strong { font-size: 19px; letter-spacing: -.03em; }.revenue-figure strong small { font-size: 8px; }.revenue-figure > span { color: var(--ink-500); font-size: 7px; }.revenue-figure > span b { color: #4f8068; }.simple-bars { display: flex; height: 155px; align-items: flex-end; gap: 7px; padding-top: 24px; border-bottom: 1px solid var(--line); }.simple-bars div { display: flex; height: 100%; flex: 1; align-items: center; justify-content: flex-end; flex-direction: column; }.simple-bars span { position: relative; width: 100%; height: var(--height); background: #dce6df; }.simple-bars div:last-child span { background: var(--navy-800); }.simple-bars b { position: absolute; left: 50%; top: -14px; color: var(--ink-500); font-size: 6px; transform: translateX(-50%); }.simple-bars small { padding: 4px 0; color: var(--ink-500); font-size: 6px; }
.content-summary-card { min-height: 215px; grid-column: span 2; padding: 17px; }.content-progress { margin-top: 18px; }.content-progress > div { display: flex; justify-content: space-between; margin-bottom: 7px; }.content-progress strong,.content-progress span { font-size: 8px; }.content-progress progress { width: 100%; height: 5px; border: 0; background: #edf0eb; }.content-progress progress::-webkit-progress-bar { background: #edf0eb; }.content-progress progress::-webkit-progress-value { background: var(--navy-800); }.content-status-row { display: flex; gap: 20px; margin: 17px 0; }.content-status-row span { display: flex; align-items: center; gap: 6px; color: var(--ink-650); font-size: 7px; }.content-status-row i { width: 5px; height: 5px; border-radius: 50%; }.content-status-row i.blue { background: var(--blue); }.content-status-row i.amber { background: var(--amber); }.content-status-row i.green { background: #568a6d; }.content-status-row b { color: var(--ink-950); }.next-content { display: grid; grid-template-columns: 70px 1fr; padding-top: 11px; border-top: 1px solid var(--line-soft); }.next-content > span { color: var(--ink-500); font-size: 7px; }.next-content > div { display: grid; }.next-content strong { font-size: 8px; }.next-content small { color: var(--ink-500); font-size: 7px; }
.ai-recommend-card { min-height: 215px; padding: 17px; background: var(--navy-900); color: white; }.ai-recommend-card header { display: flex; align-items: center; gap: 10px; }.mini-ai { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #b5ca69; color: var(--navy-900); font-size: 10px; font-weight: 900; }.ai-recommend-card header div { display: grid; }.ai-recommend-card header small { color: #77918d; font-size: 6px; letter-spacing: .1em; }.ai-recommend-card h2 { margin: 2px 0 0; font-size: 13px; }.ai-recommend-card p { margin: 18px 0; color: #adbfbc; font-size: 9px; line-height: 1.7; }.ai-recommend-card button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 2px; background: rgba(255,255,255,.05); color: white; font-size: 8px; font-weight: 800; cursor: pointer; }

.summary-strip { display: grid; grid-template-columns: repeat(6,1fr); margin-bottom: 16px; border: 1px solid var(--line); background: white; }.summary-strip > div { display: flex; min-height: 82px; align-items: center; justify-content: space-between; padding: 0 19px; border-right: 1px solid var(--line); }.summary-strip > div:last-child { border-right: 0; }.summary-strip span { color: var(--ink-500); font-size: 8px; }.summary-strip strong { font-size: 19px; }.summary-strip small { margin-left: 2px; color: var(--ink-500); font-size: 7px; }
.list-toolbar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; margin-bottom: 10px; }.list-toolbar > span { color: var(--ink-500); font-size: 8px; }.filter-group { display: flex; flex-wrap: wrap; gap: 5px; }.filter-button { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 2px; background: white; color: var(--ink-650); font-size: 8px; cursor: pointer; }.filter-button:hover { border-color: #9eaea5; }.filter-button.active { border-color: var(--navy-900); background: var(--navy-900); color: white; }.filter-button span { display: grid; min-width: 15px; height: 15px; place-items: center; border-radius: 50%; background: #edf0eb; color: var(--ink-500); font-size: 6px; }.filter-button.active span { background: rgba(255,255,255,.14); color: white; }.filter-group.compact { justify-content: flex-end; }.filter-group.compact .filter-button { min-height: 27px; font-size: 7px; }
.data-table { overflow-x: auto; border: 1px solid var(--line); background: white; }.data-table table { width: 100%; border-collapse: collapse; white-space: nowrap; }.data-table th { height: 40px; padding: 0 15px; border-bottom: 1px solid var(--line); background: #f8f9f5; color: var(--ink-500); font-size: 7px; font-weight: 800; text-align: left; letter-spacing: .02em; }.data-table td { height: 69px; padding: 10px 15px; border-bottom: 1px solid var(--line-soft); color: var(--ink-650); font-size: 8px; }.data-table tr:last-child td { border-bottom: 0; }.data-table td > strong { color: var(--ink-950); font-size: 9px; }.customer-table td:first-child { min-width: 240px; }.customer-table td:first-child > strong,.customer-table td:first-child > small { display: block; }.customer-table td:first-child small { margin-top: 3px; color: var(--ink-500); font-size: 7px; line-height: 1.45; }.owner-chip { display: inline-grid; width: 22px; height: 22px; margin-right: 6px; place-items: center; border-radius: 50%; background: #e4ebe6; color: var(--navy-800); font-size: 7px; font-weight: 900; }

.task-metrics { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 10px; border: 1px solid var(--line); background: white; }.task-metrics article { display: flex; min-height: 82px; align-items: center; justify-content: space-between; padding: 0 24px; border-right: 1px solid var(--line); }.task-metrics article:last-child { border-right: 0; }.task-metrics span { color: var(--ink-500); font-size: 9px; }.task-metrics strong { font-size: 24px; }.task-metrics .danger strong { color: var(--red); }
.task-board { border: 1px solid var(--line); background: white; }.task-row { display: grid; min-height: 70px; grid-template-columns: 28px minmax(230px,1.5fr) minmax(100px,.65fr) 90px 52px 75px 30px; gap: 13px; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--line-soft); }.task-row:last-child { border-bottom: 0; }.task-row.is-complete { background: #fafbf9; opacity: .67; }.task-row.is-complete .task-main strong { text-decoration: line-through; }.task-check { width: 21px; height: 21px; border: 1px solid #bfc9c3; border-radius: 2px; background: white; color: white; font-size: 9px; cursor: pointer; }.is-complete .task-check { border-color: var(--navy-800); background: var(--navy-800); }.task-main { display: grid; }.task-main strong { font-size: 9px; }.task-main small { color: var(--ink-500); font-size: 7px; }.owner-with-avatar { display: flex; align-items: center; gap: 6px; color: var(--ink-650); font-size: 8px; }.owner-with-avatar i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e4ebe6; color: var(--navy-800); font-size: 7px; font-style: normal; font-weight: 900; }.task-row time { color: var(--ink-650); font-size: 8px; }.task-row > em { justify-self: start; padding: 3px 6px; font-size: 7px; font-style: normal; font-weight: 800; }.row-more { border: 0; background: transparent; color: var(--ink-500); font-size: 9px; cursor: pointer; }

.revenue-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 10px; }.revenue-kpis article { min-height: 116px; padding: 20px; border: 1px solid var(--line); background: white; }.revenue-kpis span { color: var(--ink-500); font-size: 8px; }.revenue-kpis strong { display: block; margin: 8px 0 5px; font-size: 21px; letter-spacing: -.03em; }.revenue-kpis strong small { margin-left: 2px; font-size: 8px; }.revenue-kpis p { margin: 0; color: var(--ink-500); font-size: 7px; }.revenue-kpis p.positive { color: #4d7f67; }.revenue-kpis .danger p { color: var(--red); }
.revenue-layout { display: grid; grid-template-columns: 1.5fr .5fr; gap: 10px; margin-bottom: 10px; }.revenue-chart-card,.unpaid-card { min-height: 355px; padding: 20px; }.large-bar-chart { display: flex; height: 250px; align-items: flex-end; gap: clamp(12px,2.7vw,36px); padding: 36px 25px 0; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 49px, #edf0eb 50px); }.large-bar-chart > div { display: flex; height: 100%; flex: 1; align-items: center; justify-content: flex-end; flex-direction: column; }.large-bar-chart span { position: relative; width: 100%; max-width: 52px; height: var(--height); background: #cbdad1; }.large-bar-chart div:last-child span { background: var(--navy-800); }.large-bar-chart b { position: absolute; left: 50%; top: -22px; display: flex; align-items: baseline; gap: 2px; font-size: 8px; transform: translateX(-50%); white-space: nowrap; }.large-bar-chart b small { color: var(--ink-500); font-size: 6px; font-weight: 500; }.large-bar-chart em { padding: 6px 0; color: var(--ink-500); font-size: 7px; font-style: normal; }.revenue-chart-card footer { display: flex; justify-content: space-between; padding-top: 9px; color: var(--ink-500); font-size: 7px; }.revenue-chart-card footer i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; background: var(--navy-800); }.revenue-chart-card footer p { margin: 0; }
.unpaid-total { margin: 19px 0 8px; padding: 17px; background: var(--red-soft); }.unpaid-total span { color: var(--red); font-size: 7px; }.unpaid-total strong { display: block; margin-top: 3px; color: #8e3831; font-size: 19px; }.unpaid-total small { font-size: 7px; }.unpaid-card ul { margin: 0; padding: 0; list-style: none; }.unpaid-card li { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }.unpaid-card li > div,.unpaid-card li > span { display: grid; }.unpaid-card li strong { font-size: 8px; }.unpaid-card li small { color: var(--ink-500); font-size: 7px; }.unpaid-card li > span { font-size: 8px; text-align: right; }.unpaid-card button { width: 100%; margin-top: 13px; padding: 9px; border: 1px solid var(--line); background: white; color: var(--navy-800); font-size: 7px; font-weight: 800; cursor: pointer; }.transaction-card { padding: 20px; }.transaction-card > header { margin-bottom: 13px; }.transaction-card > header > span { color: var(--ink-500); font-size: 7px; }

.content-overview { display: grid; grid-template-columns: repeat(6,1fr); margin-bottom: 12px; border: 1px solid var(--line); background: white; }.content-overview button { display: grid; min-height: 85px; grid-template-columns: 7px 1fr; gap: 9px; align-items: center; padding: 0 17px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }.content-overview button:last-child { border-right: 0; }.content-overview button.active { background: #f1f4ee; }.content-overview button > span { width: 6px; height: 32px; }.content-overview button > span.red { background: var(--red); }.content-overview button > span.amber { background: var(--amber); }.content-overview button > span.green { background: #568a6d; }.content-overview button > span.blue { background: var(--blue); }.content-overview button > span.slate { background: #899795; }.content-overview p { display: grid; margin: 0; color: var(--ink-500); font-size: 8px; }.content-overview strong { color: var(--ink-950); font-size: 20px; }
.content-list { border: 1px solid var(--line); background: white; }.content-list article { display: grid; min-height: 88px; grid-template-columns: 75px 1fr auto 31px; gap: 18px; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line-soft); }.content-list article:last-child { border-bottom: 0; }.content-date { display: grid; padding-right: 18px; border-right: 1px solid var(--line); }.content-date strong { font-size: 12px; }.content-date small { color: var(--ink-500); font-size: 7px; }.content-main { display: grid; }.content-main > span { color: var(--sage); font-size: 7px; font-weight: 900; letter-spacing: .05em; }.content-main h2 { margin: 3px 0; font-size: 11px; }.content-main p { margin: 0; color: var(--ink-500); font-size: 7px; }.content-state { display: flex; gap: 6px; }.content-list article > button { width: 28px; height: 28px; border: 1px solid var(--line); background: white; color: var(--ink-500); cursor: pointer; }

.resource-categories { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-bottom: 10px; }.resource-categories article { display: grid; min-height: 100px; grid-template-columns: 33px 1fr auto; gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--line); background: white; }.folder-shape { position: relative; width: 29px; height: 23px; border: 1px solid #8fa29a; background: #eef2ed; }.folder-shape::before { position: absolute; left: -1px; top: -6px; width: 14px; height: 6px; border: 1px solid #8fa29a; border-bottom: 0; background: #eef2ed; content: ""; }.resource-categories article > div:nth-child(2) { display: grid; }.resource-categories strong { font-size: 9px; }.resource-categories small { color: var(--ink-500); font-size: 7px; }.resource-categories b { color: var(--ink-500); font-size: 9px; }
.recent-resources { padding: 20px; }.recent-resources > header > span { color: var(--ink-500); font-size: 7px; }.resource-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 16px; }.resource-grid > button { display: flex; min-height: 206px; flex-direction: column; align-items: stretch; padding: 17px; border: 1px solid var(--line); background: #fafbf8; text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }.resource-grid > button:hover { border-color: #9fb0a7; transform: translateY(-2px); }.doc-symbol { display: grid; width: 29px; height: 34px; align-content: center; gap: 4px; padding: 7px 5px; border: 1px solid #8ca096; background: white; }.doc-symbol i { display: block; height: 1px; background: #aebbb4; }.resource-grid > button > span { margin-top: 14px; color: var(--sage); font-size: 7px; font-weight: 900; }.resource-grid > button > strong { margin-top: 3px; font-size: 10px; }.resource-grid > button > p { margin: 9px 0 14px; color: var(--ink-500); font-size: 8px; line-height: 1.6; }.resource-grid footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line-soft); }.resource-grid footer small { color: var(--ink-500); font-size: 7px; }.resource-grid footer b { color: var(--navy-800); font-size: 7px; }

.settings-layout { display: grid; min-height: 570px; grid-template-columns: 190px 1fr; border: 1px solid var(--line); background: white; }.settings-layout > nav { display: flex; flex-direction: column; padding: 18px 12px; border-right: 1px solid var(--line); background: #f8f9f5; }.settings-layout > nav button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 2px; background: transparent; color: var(--ink-650); font-size: 9px; text-align: left; cursor: default; }.settings-layout > nav button.active { background: var(--navy-900); color: white; font-weight: 800; }.settings-panel { padding: 32px; }.settings-panel > header { display: flex; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.settings-panel h2 { margin-bottom: 4px; font-size: 18px; }.settings-panel header p { margin: 0; color: var(--ink-500); font-size: 9px; }.settings-panel header > span { align-self: flex-start; padding: 4px 7px; border: 1px solid var(--line); color: var(--ink-500); font-size: 7px; font-weight: 900; letter-spacing: .08em; }.settings-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; padding: 26px 0; }.settings-form label { display: grid; gap: 7px; color: var(--ink-650); font-size: 8px; font-weight: 800; }.settings-form label.full { grid-column: 1 / -1; }.settings-form input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: #f8f9f5; color: var(--ink-800); font-size: 9px; }.readonly-note { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid #cddbd0; background: var(--sage-soft); }.readonly-note i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #5c866e; color: white; font-size: 8px; font-style: normal; }.readonly-note p { display: grid; margin: 0; color: #557062; font-size: 8px; }.readonly-note strong { color: #355847; font-size: 9px; }.demo-data-info { margin-top: 24px; }.demo-data-info h3 { font-size: 12px; }.demo-data-info ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }.demo-data-info li { display: flex; align-items: center; gap: 8px; color: var(--ink-650); font-size: 8px; }.demo-data-info li span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: var(--sage-soft); color: #4e7d66; font-size: 7px; }

.ai-drawer { position: fixed; z-index: 150; right: 0; top: 0; bottom: 0; display: flex; width: min(430px, 100vw); flex-direction: column; background: #f7f8f4; box-shadow: -20px 0 60px rgba(8,29,33,.18); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility .28s; }.ai-drawer.is-open { transform: none; visibility: visible; }.drawer-overlay { position: fixed; z-index: 140; inset: 0; background: rgba(8,29,33,.38); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer-header { display: flex; min-height: 76px; align-items: center; gap: 11px; padding: 0 21px; border-bottom: 1px solid var(--line); background: white; }.drawer-ai-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--navy-900); color: #b5ca69; font-size: 12px; font-weight: 900; }.drawer-header > div:nth-child(2) { display: grid; }.drawer-header span { color: var(--ink-500); font-size: 6px; font-weight: 900; letter-spacing: .12em; }.drawer-header h2 { margin: 0; font-size: 14px; }.drawer-header button { width: 32px; height: 32px; margin-left: auto; border: 1px solid var(--line); border-radius: 2px; background: white; color: var(--ink-500); font-size: 18px; cursor: pointer; }.drawer-demo-note { display: flex; align-items: center; gap: 10px; margin: 15px 18px 0; padding: 10px 12px; border: 1px solid #d5dfd6; background: var(--sage-soft); }.drawer-demo-note i { width: 6px; height: 6px; border-radius: 50%; background: #5e8d73; }.drawer-demo-note p { display: grid; margin: 0; color: #597261; font-size: 7px; }.drawer-demo-note strong { color: #3d624e; font-size: 8px; }.drawer-body { overflow-y: auto; padding: 20px 18px 26px; }.ai-greeting { padding: 6px 2px 21px; }.ai-greeting > span { color: #6e8e82; font-size: 7px; font-weight: 900; letter-spacing: .07em; }.ai-greeting h3 { margin: 8px 0; font-size: 20px; line-height: 1.35; letter-spacing: -.035em; }.ai-greeting p { margin: 0; color: var(--ink-500); font-size: 8px; }.ai-priority,.ai-signals { padding: 17px; border: 1px solid var(--line); background: white; }.ai-priority > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }.ai-priority h3,.ai-signals h3 { margin: 0; font-size: 11px; }.ai-priority > header span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--ivory); font-size: 8px; }.ai-priority ol { margin: 0; padding: 0; list-style: none; }.ai-priority li { display: grid; grid-template-columns: 27px 1fr; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }.ai-priority li:last-child { border-bottom: 0; }.ai-priority li > b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--navy-900); color: #b5ca69; font-size: 8px; }.ai-priority li > div { display: grid; }.ai-priority strong { font-size: 9px; }.ai-priority p { margin: 4px 0 8px; color: var(--ink-500); font-size: 8px; line-height: 1.6; }.ai-priority button { display: flex; align-items: center; gap: 15px; justify-self: start; padding: 0; border: 0; border-bottom: 1px solid #a5b3ac; background: transparent; color: var(--navy-800); font-size: 7px; font-weight: 800; cursor: pointer; }.ai-signals { margin-top: 10px; }.ai-signals ul { margin: 11px 0 14px; padding: 0; list-style: none; }.ai-signals li { display: grid; grid-template-columns: 7px 1fr; gap: 8px; padding: 8px 0; }.ai-signals li i { width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; }.ai-signals li p { margin: 0; color: var(--ink-650); font-size: 8px; }.ai-signals > button { width: 100%; padding: 9px; border: 1px solid var(--line); background: #f8f9f5; color: var(--navy-800); font-size: 7px; font-weight: 800; cursor: pointer; }.ai-drawer > footer { display: flex; align-items: center; gap: 9px; min-height: 48px; margin-top: auto; padding: 0 20px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: 7px; }

.modal-overlay { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,29,33,.48); opacity: 0; transition: opacity .18s ease; }.modal-overlay.is-open { opacity: 1; }.resource-modal { width: min(610px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 5px; background: white; box-shadow: var(--shadow-md); transform: translateY(10px); transition: transform .18s ease; }.modal-overlay.is-open .resource-modal { transform: none; }.resource-modal > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 27px; border-bottom: 1px solid var(--line); }.resource-modal header > div { display: grid; }.resource-modal header span { color: var(--sage); font-size: 7px; font-weight: 900; letter-spacing: .1em; }.resource-modal h2 { margin: 4px 0 0; font-size: 21px; }.resource-modal header button { width: 32px; height: 32px; border: 1px solid var(--line); background: white; color: var(--ink-500); font-size: 18px; cursor: pointer; }.modal-content { padding: 25px 27px 29px; }.modal-meta { display: flex; gap: 7px; }.modal-meta span { padding: 4px 7px; border: 1px solid var(--line); color: var(--ink-500); font-size: 7px; }.modal-summary { margin: 21px 0 26px; color: var(--ink-650); font-size: 11px; line-height: 1.8; }.modal-content h3 { font-size: 11px; }.modal-content ol { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.modal-content li { display: grid; min-height: 62px; grid-template-columns: 37px 1fr; gap: 9px; align-items: center; border-bottom: 1px solid var(--line); }.modal-content li > span { color: var(--sage); font-size: 8px; font-weight: 900; }.modal-content li p { margin: 0; color: var(--ink-800); font-size: 9px; }.modal-note { display: flex; gap: 10px; margin-top: 22px; padding: 13px; background: var(--ivory); }.modal-note i { display: grid; flex: 0 0 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--navy-800); color: white; font-size: 7px; font-style: normal; }.modal-note p { margin: 0; color: var(--ink-650); font-size: 8px; }

.toast-region { position: fixed; z-index: 300; right: 22px; bottom: 22px; }.toast { display: flex; width: min(350px,calc(100vw - 32px)); align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: var(--navy-900); color: white; box-shadow: var(--shadow-md); animation: toast-in .25s ease; }.toast i { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: #b5ca69; color: var(--navy-900); font-size: 8px; font-style: normal; font-weight: 900; }.toast p { margin: 0; font-size: 9px; line-height: 1.5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }