/* Isolated app-style demo, not a connected or purchasable software product. */
.workspace-preview { --app-ink: #18323e; --app-muted: #536b77; --app-line: #d7e1e5; margin-top: 48px; border: 1px solid #64868d; border-radius: 14px; overflow: hidden; background: #102735; color: var(--app-ink); text-align: left; box-shadow: 0 0 0 6px #7bc9c10b, 0 28px 80px #0006; }
.workspace-preview button, .workspace-preview input { font: inherit; }
.workspace-preview button { cursor: pointer; }
.workspace-preview button:disabled { cursor: default; }
.workspace-preview button:focus-visible, .workspace-preview input:focus-visible { outline: 3px solid #218c84; outline-offset: 3px; }
.workspace-preview h2, .workspace-preview h3 { color: var(--app-ink); text-wrap: initial; }
.workspace-preview p { color: var(--app-muted); }
.app-topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; border-bottom: 1px solid #35515e; color: #dbe9ec; background: #112a38; font-size: .8125rem; }
.app-identity { display: flex; align-items: center; gap: 12px; }
.app-identity strong { font-size: .9375rem; }
.app-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #a4ddcf; color: #12342f; font-weight: 750; font-size: .875rem; letter-spacing: -.06em; }
.app-divider { color: #63808e; }
.app-demo-badge { font-size: .75rem; color: #c1d7dc; border: 1px solid #46616e; border-radius: 5px; padding: 4px 8px; white-space: nowrap; }
.app-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); }
.app-sidebar { display: flex; flex-direction: column; padding: 24px 12px 18px; background: #112a38; color: #c0d4dc; }
.workspace-preview .app-nav-label { color: #91abb7; font-size: .75rem; letter-spacing: .1em; padding: 0 12px; margin-bottom: 12px; }
.app-navigation { display: flex; flex-direction: column; gap: 6px; }
.app-navigation button { display: flex; align-items: center; gap: 10px; min-height: 44px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #b8cfd7; padding: 10px; font-size: .875rem; text-align: left; }
.app-navigation button[aria-selected="true"] { background: #244b53; color: #cbf2e8; border-color: #3f696e; }
.app-navigation button:hover { background: #1e404d; }
.app-navigation .icon { width: 18px; height: 18px; }
.nav-count { margin-left: auto; padding: 0 5px; border-radius: 4px; background: #173841; font-size: .75rem; }
.app-sidebar-note { margin-top: auto; border-top: 1px solid #35515e; padding: 20px 10px 0; font-size: .75rem; }
.app-local-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8bcdbb; margin-right: 7px; vertical-align: middle; }
.app-sidebar-note strong { font-weight: 500; }
.workspace-preview .app-sidebar-note p { color: #91adb8; margin-top: 5px; font-size: .75rem; }
.app-content { min-width: 0; padding: 25px; background: #edf2f4; min-height: 565px; }
.app-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.workspace-preview .app-breadcrumb { color: #536b77; font-size: .75rem; margin-bottom: 7px; }
.workspace-preview .app-page-heading h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.035em; }
.workspace-preview .app-page-heading p:last-child { margin-top: 7px; font-size: .875rem; }
.app-reset, .app-period { flex-shrink: 0; border: 1px solid #c9d7dd; background: #fff; border-radius: 6px; color: #425d69; padding: 8px 10px; font-size: .75rem !important; }
.app-reset { min-height: 38px; }
.app-reset span { margin-left: 8px; }
.app-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.app-queue { min-width: 0; }
.app-queue-toolbar { padding: 14px; background: #fff; border: 1px solid var(--app-line); border-radius: 8px 8px 0 0; }
.app-queue-toolbar > strong { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 12px; }
.app-queue-toolbar > strong span { background: #edf2f4; padding: 2px 6px; border-radius: 4px; margin-left: 5px; color: #536b77; font-size: .75rem; }
.app-search { display: block; }
.app-search input { width: 100%; min-width: 0; appearance: auto; height: 36px; padding: 6px 10px; border: 1px solid #d0dde2; border-radius: 5px; background: #f6f9fa; color: #25434f; font-size: .8125rem; }
.app-search input::placeholder { color: #536b77; opacity: 1; }
.app-list-caption { display: flex; justify-content: space-between; background: #f5f8f9; padding: 9px 14px; font-size: .75rem; letter-spacing: .08em; color: #536b77; border-inline: 1px solid var(--app-line); }
.app-request-list { border-inline: 1px solid var(--app-line); background: #fff; }
.app-request { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 12px; background: #fff; border: 0; border-top: 1px solid #e2e9ec; color: #274450; text-align: left; }
.app-request[aria-pressed="true"] { background: #e6f3ee; box-shadow: inset 3px 0 #368d78; }
.app-request:hover { background: #f0f6f7; }
.request-glyph { width: 30px; height: 33px; display: grid; place-items: center; flex-shrink: 0; border-radius: 6px; background: #dcedea; color: #307664; font-size: 1.1rem; }
.invoice-glyph { background: #e8edf4; color: #56728e; }
.service-glyph { background: #f1edde; color: #857139; }
.request-name { flex: 1; min-width: 0; }
.request-name strong { display: block; font-size: .875rem; font-weight: 600; }
.request-name small { display: block; margin-top: 3px; color: #536b77; font-size: .75rem; }
.request-status { font-size: .75rem; font-weight: 600; border: 1px solid #e6d3a4; border-radius: 4px; padding: 2px 5px; color: #805c18; background: #fff7e3; white-space: nowrap; }
.request-status.is-approved { background: #e6f3ee; color: #2e6e57; border-color: #badbc9; }
.app-queue-footer { padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 0 0 8px 8px; background: #fff; color: #536b77; font-size: .75rem; display: flex; justify-content: space-between; }
.app-empty { padding: 18px; background: white; margin: 0; border-inline: 1px solid var(--app-line); font-size: .8125rem; }
.app-automation-note { display: flex; gap: 12px; margin-top: 18px; padding: 15px; border: 1px dashed #bdd0d4; border-radius: 8px; background: #e5eeef; }
.app-automation-note > span { color: #368874; font-size: 1.25rem; }
.app-automation-note strong { font-size: .8125rem; font-weight: 600; }
.workspace-preview .app-automation-note p { font-size: .75rem; line-height: 1.6; margin-top: 5px; }
.app-detail { padding: 19px; background: #fff; border: 1px solid #ccdce0; border-radius: 8px; box-shadow: 0 3px 8px #1b354208; min-width: 0; }
.app-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .75rem; color: #536b77; margin-bottom: 13px; }
.detail-status { background: #fff5de; color: #805c18; border: 1px solid #ecd8a9; border-radius: 4px; padding: 2px 6px; }
.workspace-preview .app-detail h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; }
.workspace-preview .app-detail-source { font-size: .75rem; color: #536b77; margin-top: 5px; }
.app-summary { margin-top: 20px; padding: 13px; border: 1px solid #c7e1d8; border-radius: 6px; background: #eff8f4; }
.app-summary > span { color: #38765f; font-size: .75rem; letter-spacing: .055em; font-weight: 650; }
.workspace-preview .app-summary p { font-size: .8125rem; color: #395d51; line-height: 1.6; margin-top: 7px; }
.app-fields { margin: 16px 0; font-size: .75rem; }
.app-fields > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.app-fields dt { color: #536b77; }
.app-fields dd { margin: 0; text-align: right; color: #294652; font-weight: 500; }
.app-audit { list-style: none; display: flex; justify-content: space-between; gap: 10px; padding: 16px 0; margin: 0; border-block: 1px solid #e2e9ec; }
.app-audit li { flex: 1; min-width: 0; }
.app-audit li > span { display: grid; place-items: center; width: 22px; height: 22px; font-size: .75rem; background: #e2f2e9; color: #397556; border: 1px solid #bcdbca; border-radius: 50%; margin-bottom: 7px; }
.app-audit .current > span { background: #fff5da; color: #886419; border-color: #ddc993; }
.app-audit strong { display: block; color: #38545f; font-size: .75rem; font-weight: 600; }
.app-audit small { color: #536b77; display: block; font-size: .75rem; margin-top: 3px; }
.app-review-actions { margin-top: 16px; }
.app-review-actions button { width: 100%; min-height: 40px; display: flex; justify-content: center; align-items: center; gap: 12px; border: 1px solid #205d4d; border-radius: 6px; background: #226651; color: #fff; font-size: .8125rem; font-weight: 600; }
.app-review-actions button:hover { background: #1b5342; }
.app-review-actions button:disabled { background: #e7f1ec; border-color: #c0d8cb; color: #44765c; }
.workspace-preview .app-action-note { font-size: .75rem; line-height: 1.5; margin: 10px 0 0; color: #536b77; }
.app-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.app-metrics > div { padding: 19px; border: 1px solid #d1dfe3; border-radius: 8px; background: #fff; }
.app-metrics span { display: block; font-size: .8125rem; color: #536f7b; }
.app-metrics strong { display: block; font-family: var(--font-heading); font-size: 2rem; font-weight: 600; letter-spacing: -.04em; color: #1a3d49; margin: 6px 0; line-height: 1.2; }
.app-metrics small { display: block; font-size: .75rem; color: #536b77; }
.app-metrics strong small { display: inline; font-size: .875rem; color: #536b77; font-family: var(--font-body); }
.app-metrics .app-metric-review { background: #f1f6df; border-color: #d0dbac; }
.app-analytics-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; }
.activity-chart { padding: 19px 22px 40px; border: 1px solid #d1dfe3; border-radius: 8px; background: #fff; min-width: 0; }
.chart-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.chart-heading strong { color: #274753; font-size: .875rem; font-weight: 600; }
.chart-heading > span { color: #536b77; font-size: .75rem; }
.chart-bars { height: 168px; margin-top: 38px; display: flex; align-items: end; gap: 20px; padding-inline: 8px; background: repeating-linear-gradient(to top, #e2ebee 0 1px, transparent 1px 42px); border-bottom: 1px solid #c5d6dc; }
.chart-bars > span { flex: 1; height: var(--bar); position: relative; }
.chart-bars i { position: absolute; inset: 0; background: #64aa99; border-radius: 4px 4px 0 0; border: 1px solid #4d9b88; border-bottom: 0; }
.chart-bars > span:nth-child(3) i { background: #255c50; border-color: #255c50; }
.bar-value { position: absolute; left: 0; right: 0; top: -26px; text-align: center; color: #355c59; font-size: .75rem; font-weight: 600; }
.chart-bars b { position: absolute; bottom: -26px; left: 0; right: 0; text-align: center; font-size: .75rem; font-weight: 400; color: #536b77; }
.app-review-insight { padding: 20px; background: #173b3f; border: 1px solid #315a58; border-radius: 8px; color: #e1eee8; display: flex; flex-direction: column; }
.insight-kicker { color: #bdd69d; font-size: .75rem; font-weight: 650; letter-spacing: .09em; }
.app-review-insight > strong { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 500; line-height: 1.35; letter-spacing: -.03em; margin-top: 20px; }
.workspace-preview .app-review-insight p { font-size: .8125rem; line-height: 1.7; color: #b5ccc6; margin-top: 16px; }
.app-review-insight button { background: transparent; border: 0; padding: 14px 0 6px; color: #d0e49f; text-align: left; font-size: .75rem; font-weight: 600; margin-top: auto; min-height: 40px; }
.app-review-insight small { font-size: .75rem; color: #aac6be; }
.app-statusbar { padding: 9px 20px; background: #112a38; color: #a4bec8; font-size: .75rem; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #35515e; }
.workspace-preview .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 148px minmax(0, 1fr); }
  .app-sidebar { padding-inline: 8px; }
  .app-content { padding: 20px; }
  .app-workspace-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; }
  .request-glyph { display: none; }
  .app-request { padding-inline: 10px; }
  .app-analytics-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar { padding: 10px 18px; border-bottom: 1px solid #3a5662; }
  .app-navigation { flex-direction: row; }
  .app-navigation button { padding-inline: 14px; }
  .app-nav-label, .app-sidebar-note { display: none; }
  .app-workspace-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .app-statusbar > span:last-child { display: none; }
}
@media (max-width: 640px) {
  .app-topbar { flex-wrap: wrap; padding: 14px 18px; gap: 9px; }
  .app-identity > span:last-child, .app-divider { display: none; }
  .app-content { padding: 20px 15px; }
  .app-page-heading { flex-wrap: wrap; }
  .app-workspace-grid, .app-analytics-grid { grid-template-columns: minmax(0, 1fr); }
  .request-glyph { display: grid; }
  .app-automation-note { display: none; }
  .app-queue { margin-bottom: 5px; }
  .app-metrics { gap: 8px; }
  .app-metrics > div { padding: 13px 10px; }
  .app-metrics strong { font-size: 1.75rem; }
  .app-review-insight > strong br { display: none; }
  .app-review-insight > strong { margin-top: 10px; }
  .app-review-insight p { margin-top: 10px; }
}
@media (max-width: 400px) {
  .app-metrics { grid-template-columns: minmax(0, 1fr); }
  .app-metrics > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }
  .app-metrics strong { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }
  .app-metrics > div > small { grid-column: 1; }
  .chart-bars { gap: 14px; }
}