Spaces:
Sleeping
Sleeping
| /* | |
| * CFO HRM — Gradio presentation layer | |
| * | |
| * A restrained accounting-report theme for Gradio 6. Component-specific | |
| * selectors use elem_id and elem_classes hooks supplied by the application. | |
| */ | |
| .gradio-container { | |
| --cfo-page: #f5f3ed; | |
| --cfo-panel: #fffefa; | |
| --cfo-panel-soft: #eeece5; | |
| --cfo-text: #25282c; | |
| --cfo-muted: #65707b; | |
| --cfo-border: #d6d3ca; | |
| --cfo-border-strong: #b9bec3; | |
| --cfo-navy: #173853; | |
| --cfo-navy-hover: #0f2a40; | |
| --cfo-rust: #9a4c35; | |
| --cfo-rust-soft: #f2e3dc; | |
| --cfo-success: #33644f; | |
| --cfo-success-soft: #e4efe9; | |
| --cfo-warning: #8a5b1f; | |
| --cfo-warning-soft: #f5ead6; | |
| --cfo-danger: #8b3f3c; | |
| --cfo-danger-soft: #f5e3e1; | |
| --cfo-focus: #2174a5; | |
| --cfo-radius: 10px; | |
| --cfo-shadow: 0 1px 2px rgba(27, 34, 40, 0.06); | |
| min-height: 100vh; | |
| padding: clamp(0.75rem, 2.5vw, 2rem) ; | |
| color: var(--cfo-text); | |
| background: var(--cfo-page); | |
| font-family: | |
| Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", | |
| sans-serif; | |
| font-size: 16px; | |
| line-height: 1.55; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| html.dark .gradio-container, | |
| .dark .gradio-container, | |
| .gradio-container.dark, | |
| [data-theme="dark"] .gradio-container { | |
| --cfo-page: #151a20; | |
| --cfo-panel: #1d242c; | |
| --cfo-panel-soft: #252e38; | |
| --cfo-text: #edf0f2; | |
| --cfo-muted: #acb5be; | |
| --cfo-border: #39434e; | |
| --cfo-border-strong: #56616d; | |
| --cfo-navy: #8eb4d4; | |
| --cfo-navy-hover: #afd0e9; | |
| --cfo-rust: #d18a70; | |
| --cfo-rust-soft: #3d2b27; | |
| --cfo-success: #83b89f; | |
| --cfo-success-soft: #23382f; | |
| --cfo-warning: #d7af70; | |
| --cfo-warning-soft: #3b3326; | |
| --cfo-danger: #dda09c; | |
| --cfo-danger-soft: #3e2929; | |
| --cfo-focus: #76b9e6; | |
| --cfo-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); | |
| } | |
| .gradio-container *, | |
| .gradio-container *::before, | |
| .gradio-container *::after { | |
| box-sizing: border-box; | |
| } | |
| .gradio-container > .main, | |
| .gradio-container .main, | |
| #cfo-app { | |
| width: min(100%, 1120px); | |
| margin-inline: auto; | |
| } | |
| #cfo-app { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.25rem; | |
| } | |
| #cfo-app a { | |
| color: var(--cfo-navy); | |
| text-decoration-color: color-mix(in srgb, var(--cfo-navy) 55%, transparent); | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 0.18em; | |
| } | |
| #cfo-app a:hover { | |
| color: var(--cfo-rust); | |
| text-decoration-color: currentColor; | |
| } | |
| #cfo-app :focus-visible { | |
| outline: 3px solid var(--cfo-focus) ; | |
| outline-offset: 3px ; | |
| } | |
| #app-header { | |
| padding: clamp(1.35rem, 3vw, 2.25rem); | |
| overflow: hidden; | |
| border: 1px solid var(--cfo-border); | |
| border-radius: var(--cfo-radius); | |
| background: var(--cfo-panel); | |
| box-shadow: var(--cfo-shadow); | |
| } | |
| #app-header .prose, | |
| #app-header.prose { | |
| max-width: none; | |
| } | |
| #app-header h1 { | |
| max-width: 24ch; | |
| margin: 0; | |
| color: var(--cfo-text); | |
| font-size: clamp(1.75rem, 3.2vw, 2.45rem); | |
| font-weight: 700; | |
| letter-spacing: -0.035em; | |
| line-height: 1.12; | |
| } | |
| #app-header h2, | |
| #app-header h3 { | |
| margin: 0; | |
| color: var(--cfo-text); | |
| font-size: 1.05rem; | |
| font-weight: 650; | |
| } | |
| #app-header p { | |
| max-width: 66ch; | |
| margin: 0.7rem 0 0; | |
| color: var(--cfo-muted); | |
| font-size: 1rem; | |
| } | |
| .header-row { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 1.5rem; | |
| } | |
| .model-badge, | |
| .status-badge { | |
| display: inline-flex; | |
| min-height: 1.8rem; | |
| padding: 0.28rem 0.62rem; | |
| align-items: center; | |
| gap: 0.42rem; | |
| border: 1px solid var(--cfo-border-strong); | |
| border-radius: 999px; | |
| color: var(--cfo-muted); | |
| background: var(--cfo-panel-soft); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| white-space: nowrap; | |
| } | |
| .model-badge::before, | |
| .status-badge::before { | |
| width: 0.48rem; | |
| height: 0.48rem; | |
| flex: 0 0 auto; | |
| border-radius: 50%; | |
| background: var(--cfo-success); | |
| content: ""; | |
| } | |
| #model-status, | |
| .status-card { | |
| padding: 1rem 1.1rem; | |
| border: 1px solid var(--cfo-border); | |
| border-left: 4px solid var(--cfo-navy); | |
| border-radius: var(--cfo-radius); | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel); | |
| box-shadow: var(--cfo-shadow); | |
| } | |
| #model-status p, | |
| .status-card p { | |
| margin: 0; | |
| } | |
| #model-status strong, | |
| .status-card strong { | |
| color: var(--cfo-text); | |
| } | |
| .section-intro { | |
| padding-top: 0.45rem; | |
| } | |
| .section-intro .prose, | |
| .section-intro.prose { | |
| max-width: 74ch; | |
| } | |
| .section-intro h2 { | |
| margin: 0; | |
| color: var(--cfo-text); | |
| font-size: clamp(1.35rem, 2.3vw, 1.75rem); | |
| font-weight: 680; | |
| letter-spacing: -0.025em; | |
| line-height: 1.2; | |
| } | |
| .section-intro p { | |
| margin: 0.45rem 0 0; | |
| color: var(--cfo-muted); | |
| } | |
| .app-card, | |
| #demo-panel, | |
| #case-inputs, | |
| #review-output { | |
| padding: clamp(1rem, 2.3vw, 1.5rem); | |
| border: 1px solid var(--cfo-border) ; | |
| border-radius: var(--cfo-radius) ; | |
| background: var(--cfo-panel) ; | |
| box-shadow: var(--cfo-shadow); | |
| } | |
| .app-card > .form, | |
| #case-inputs > .form { | |
| border: 0 ; | |
| background: transparent ; | |
| } | |
| #cfo-app .block { | |
| color: var(--cfo-text); | |
| } | |
| #cfo-app label, | |
| #cfo-app .label-wrap { | |
| color: var(--cfo-text); | |
| font-size: 0.86rem; | |
| font-weight: 600; | |
| } | |
| #cfo-app .info { | |
| color: var(--cfo-muted); | |
| font-size: 0.8rem; | |
| } | |
| #cfo-app input, | |
| #cfo-app textarea, | |
| #cfo-app select { | |
| border-color: var(--cfo-border-strong) ; | |
| color: var(--cfo-text) ; | |
| background: var(--cfo-panel) ; | |
| } | |
| #cfo-app input::placeholder, | |
| #cfo-app textarea::placeholder { | |
| color: var(--cfo-muted); | |
| opacity: 0.85; | |
| } | |
| #cfo-app input[type="range"] { | |
| accent-color: var(--cfo-rust); | |
| } | |
| #cfo-app button { | |
| min-height: 2.7rem; | |
| border: 1px solid var(--cfo-border-strong); | |
| border-radius: 7px; | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel); | |
| font-weight: 620; | |
| box-shadow: none; | |
| transition: | |
| border-color 120ms ease, | |
| background-color 120ms ease, | |
| color 120ms ease; | |
| } | |
| #cfo-app button:hover { | |
| border-color: var(--cfo-navy); | |
| background: var(--cfo-panel-soft); | |
| } | |
| #run-review, | |
| #cfo-app button.primary { | |
| border-color: var(--cfo-navy) ; | |
| color: var(--cfo-panel) ; | |
| background: var(--cfo-navy) ; | |
| } | |
| #run-review:hover, | |
| #cfo-app button.primary:hover { | |
| border-color: var(--cfo-navy-hover) ; | |
| background: var(--cfo-navy-hover) ; | |
| } | |
| html.dark #run-review, | |
| .dark #run-review, | |
| html.dark #cfo-app button.primary, | |
| .dark #cfo-app button.primary { | |
| color: var(--cfo-page) ; | |
| } | |
| #cfo-app button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.55; | |
| } | |
| #cfo-app .tabs { | |
| overflow: hidden; | |
| border: 1px solid var(--cfo-border); | |
| border-radius: var(--cfo-radius); | |
| background: var(--cfo-panel); | |
| } | |
| #cfo-app .tab-nav { | |
| padding: 0.35rem 0.4rem 0; | |
| gap: 0.25rem; | |
| overflow-x: auto; | |
| border-bottom: 1px solid var(--cfo-border); | |
| background: var(--cfo-panel-soft); | |
| scrollbar-width: thin; | |
| } | |
| #cfo-app .tab-nav button { | |
| flex: 0 0 auto; | |
| min-height: 2.45rem; | |
| border: 0; | |
| border-radius: 6px 6px 0 0; | |
| color: var(--cfo-muted); | |
| background: transparent; | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| #cfo-app .tab-nav button:hover { | |
| color: var(--cfo-text); | |
| } | |
| #cfo-app .tab-nav button.selected, | |
| #cfo-app .tab-nav button[aria-selected="true"] { | |
| color: var(--cfo-navy); | |
| background: var(--cfo-panel); | |
| } | |
| .metric-row { | |
| display: grid ; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 0.75rem ; | |
| } | |
| .metric-card { | |
| min-width: 0; | |
| padding: 0.9rem 1rem; | |
| border: 1px solid var(--cfo-border) ; | |
| border-radius: 8px ; | |
| background: var(--cfo-panel) ; | |
| } | |
| .metric-card strong, | |
| .metric-card .metric-value { | |
| display: block; | |
| color: var(--cfo-text); | |
| font-size: 1.35rem; | |
| font-variant-numeric: tabular-nums; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 1.2; | |
| } | |
| .metric-card span, | |
| .metric-card .metric-label { | |
| display: block; | |
| margin-top: 0.2rem; | |
| color: var(--cfo-muted); | |
| font-size: 0.78rem; | |
| line-height: 1.35; | |
| } | |
| .review-alert { | |
| padding: 0.85rem 1rem; | |
| border: 1px solid color-mix(in srgb, var(--cfo-warning) 45%, var(--cfo-border)); | |
| border-left: 4px solid var(--cfo-warning); | |
| border-radius: 8px; | |
| color: var(--cfo-text); | |
| background: var(--cfo-warning-soft); | |
| } | |
| .review-alert.is-clear { | |
| border-color: color-mix(in srgb, var(--cfo-success) 45%, var(--cfo-border)); | |
| border-left-color: var(--cfo-success); | |
| background: var(--cfo-success-soft); | |
| } | |
| .review-alert.is-error { | |
| border-color: color-mix(in srgb, var(--cfo-danger) 45%, var(--cfo-border)); | |
| border-left-color: var(--cfo-danger); | |
| background: var(--cfo-danger-soft); | |
| } | |
| .review-alert p { | |
| margin: 0; | |
| } | |
| .review-alert + .metric-row, | |
| .metric-row + .quiet-note { | |
| margin-top: 0.9rem; | |
| } | |
| p.quiet-note { | |
| margin-bottom: 0; | |
| } | |
| #guide-content, | |
| .guide-markdown { | |
| padding: clamp(1.25rem, 3vw, 2.25rem); | |
| border: 1px solid var(--cfo-border) ; | |
| border-radius: var(--cfo-radius) ; | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel) ; | |
| box-shadow: var(--cfo-shadow); | |
| } | |
| #guide-content .prose, | |
| #guide-content.prose, | |
| .guide-markdown .prose, | |
| .guide-markdown.prose { | |
| max-width: none; | |
| color: var(--cfo-text); | |
| line-height: 1.65; | |
| } | |
| #guide-content .prose > *, | |
| #guide-content.prose > *, | |
| .guide-markdown .prose > *, | |
| .guide-markdown.prose > * { | |
| width: 100%; | |
| max-width: 76ch; | |
| margin-right: auto; | |
| margin-left: 0; | |
| } | |
| #guide-content .prose > pre, | |
| #guide-content .prose > table, | |
| #guide-content.prose > pre, | |
| #guide-content.prose > table, | |
| .guide-markdown .prose > pre, | |
| .guide-markdown .prose > table, | |
| .guide-markdown.prose > pre, | |
| .guide-markdown.prose > table { | |
| max-width: 100%; | |
| } | |
| #guide-content h1, | |
| .guide-markdown h1 { | |
| margin-top: 0; | |
| margin-bottom: 1.25rem; | |
| color: var(--cfo-text); | |
| font-size: clamp(1.65rem, 3vw, 2.15rem); | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| line-height: 1.18; | |
| } | |
| #guide-content h2, | |
| .guide-markdown h2 { | |
| margin-top: 2.75rem; | |
| margin-bottom: 0.75rem; | |
| padding-top: 1.2rem; | |
| border-top: 1px solid var(--cfo-border); | |
| color: var(--cfo-text); | |
| font-size: clamp(1.3rem, 2.2vw, 1.6rem); | |
| font-weight: 680; | |
| letter-spacing: -0.02em; | |
| line-height: 1.25; | |
| } | |
| #guide-content h3, | |
| .guide-markdown h3 { | |
| margin-top: 1.9rem; | |
| margin-bottom: 0.55rem; | |
| color: var(--cfo-text); | |
| font-size: 1.12rem; | |
| font-weight: 680; | |
| line-height: 1.3; | |
| } | |
| #guide-content h4, | |
| .guide-markdown h4 { | |
| margin-top: 1.5rem; | |
| margin-bottom: 0.45rem; | |
| color: var(--cfo-text); | |
| font-size: 1rem; | |
| font-weight: 650; | |
| } | |
| #guide-content p, | |
| #guide-content li, | |
| .guide-markdown p, | |
| .guide-markdown li { | |
| color: var(--cfo-text); | |
| } | |
| #guide-content p, | |
| .guide-markdown p { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| } | |
| #guide-content ul, | |
| #guide-content ol, | |
| .guide-markdown ul, | |
| .guide-markdown ol { | |
| margin-top: 0.45rem; | |
| margin-bottom: 1.15rem; | |
| padding-left: 1.45rem; | |
| } | |
| #guide-content li, | |
| .guide-markdown li { | |
| margin-bottom: 0.3rem; | |
| padding-left: 0.1rem; | |
| } | |
| #guide-content li > ul, | |
| #guide-content li > ol, | |
| .guide-markdown li > ul, | |
| .guide-markdown li > ol { | |
| margin-top: 0.35rem; | |
| margin-bottom: 0.4rem; | |
| padding-left: 1.15rem; | |
| } | |
| #guide-content blockquote, | |
| .guide-markdown blockquote { | |
| margin: 1.35rem 0; | |
| padding: 0.8rem 1rem; | |
| border-left: 3px solid var(--cfo-rust); | |
| color: var(--cfo-muted); | |
| background: var(--cfo-panel-soft); | |
| } | |
| #guide-content blockquote p, | |
| .guide-markdown blockquote p { | |
| margin: 0; | |
| color: inherit; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| } | |
| #guide-content code, | |
| .guide-markdown code { | |
| padding: 0.08em 0.28em; | |
| border: 1px solid var(--cfo-border); | |
| border-radius: 4px; | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel-soft); | |
| font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; | |
| font-size: 0.88em; | |
| overflow-wrap: anywhere; | |
| } | |
| #guide-content pre, | |
| .guide-markdown pre { | |
| margin: 1.15rem 0 1.5rem; | |
| padding: 1rem 1.1rem; | |
| overflow-x: auto; | |
| border: 1px solid var(--cfo-border); | |
| border-radius: 7px; | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel-soft); | |
| font-size: 0.85rem; | |
| line-height: 1.55; | |
| tab-size: 2; | |
| } | |
| #guide-content pre code, | |
| .guide-markdown pre code { | |
| padding: 0; | |
| border: 0; | |
| color: inherit; | |
| background: transparent; | |
| font-size: inherit; | |
| overflow-wrap: normal; | |
| } | |
| .accounting-table h3 { | |
| margin: 0; | |
| padding: 0.8rem 0.9rem; | |
| border-bottom: 1px solid var(--cfo-border); | |
| color: var(--cfo-text); | |
| font-size: 0.88rem; | |
| font-weight: 650; | |
| } | |
| .accounting-table .table-scroll { | |
| max-width: 100%; | |
| overflow-x: auto; | |
| } | |
| #guide-content table, | |
| .guide-markdown table, | |
| #results-table table, | |
| .accounting-table table { | |
| width: 100%; | |
| margin: 1.15rem 0 1.5rem; | |
| border-collapse: collapse; | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel); | |
| font-size: 0.88rem; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| #guide-content th, | |
| #guide-content td, | |
| .guide-markdown th, | |
| .guide-markdown td, | |
| #results-table th, | |
| #results-table td, | |
| .accounting-table th, | |
| .accounting-table td { | |
| padding: 0.65rem 0.75rem; | |
| border: 1px solid var(--cfo-border); | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| #guide-content th, | |
| .guide-markdown th, | |
| #results-table th, | |
| .accounting-table th { | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel-soft); | |
| font-size: 0.8rem; | |
| font-weight: 650; | |
| } | |
| #guide-content tbody tr:nth-child(even), | |
| .guide-markdown tbody tr:nth-child(even), | |
| #results-table tbody tr:nth-child(even), | |
| .accounting-table tbody tr:nth-child(even) { | |
| background: color-mix(in srgb, var(--cfo-panel-soft) 55%, transparent); | |
| } | |
| #results-table, | |
| .accounting-table { | |
| max-width: 100%; | |
| border: 1px solid var(--cfo-border) ; | |
| border-radius: var(--cfo-radius) ; | |
| background: var(--cfo-panel) ; | |
| } | |
| #results-table table, | |
| .accounting-table table { | |
| min-width: 680px; | |
| margin: 0; | |
| } | |
| #cfo-app details, | |
| #cfo-app .accordion { | |
| overflow: hidden; | |
| border: 1px solid var(--cfo-border); | |
| border-radius: 8px; | |
| color: var(--cfo-text); | |
| background: var(--cfo-panel); | |
| } | |
| #cfo-app summary { | |
| padding: 0.8rem 1rem; | |
| cursor: pointer; | |
| color: var(--cfo-text); | |
| font-weight: 620; | |
| } | |
| #cfo-app details[open] summary { | |
| border-bottom: 1px solid var(--cfo-border); | |
| background: var(--cfo-panel-soft); | |
| } | |
| .quiet-note { | |
| padding: 0.85rem 1rem; | |
| border: 1px solid var(--cfo-border); | |
| border-radius: 8px; | |
| color: var(--cfo-muted); | |
| background: var(--cfo-panel-soft); | |
| font-size: 0.86rem; | |
| } | |
| .quiet-note p { | |
| margin: 0; | |
| } | |
| #controls-note { | |
| color: var(--cfo-text); | |
| font-size: 1rem; | |
| line-height: 1.65; | |
| } | |
| #controls-note .prose, | |
| #controls-note.prose { | |
| max-width: 76ch; | |
| } | |
| #controls-note h2 { | |
| margin-top: 0; | |
| font-size: clamp(1.35rem, 2.3vw, 1.75rem); | |
| } | |
| #controls-note p, | |
| #controls-note ul { | |
| margin-bottom: 1rem; | |
| } | |
| #case-examples { | |
| color: var(--cfo-text); | |
| } | |
| #case-examples .gallery { | |
| gap: 0.55rem; | |
| } | |
| #app-footer { | |
| padding: 1rem 0.25rem 0.25rem; | |
| border-top: 1px solid var(--cfo-border); | |
| color: var(--cfo-muted); | |
| font-size: 0.8rem; | |
| } | |
| #app-footer p { | |
| margin: 0.2rem 0; | |
| } | |
| @media (max-width: 800px) { | |
| .gradio-container { | |
| padding: 0.75rem ; | |
| } | |
| #cfo-app { | |
| gap: 1rem; | |
| } | |
| .header-row { | |
| flex-direction: column; | |
| gap: 0.9rem; | |
| } | |
| .metric-row { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| #guide-content, | |
| .guide-markdown, | |
| .app-card, | |
| #demo-panel, | |
| #case-inputs, | |
| #review-output { | |
| padding: 1rem; | |
| } | |
| #guide-content table, | |
| .guide-markdown table { | |
| display: block; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| } | |
| } | |
| @media (max-width: 520px) { | |
| #app-header { | |
| padding: 1.1rem; | |
| } | |
| #app-header h1 { | |
| font-size: 1.65rem; | |
| } | |
| .metric-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .metric-card { | |
| padding: 0.8rem 0.9rem; | |
| } | |
| #guide-content, | |
| .guide-markdown { | |
| padding: 0.9rem; | |
| } | |
| #guide-content ul, | |
| #guide-content ol, | |
| .guide-markdown ul, | |
| .guide-markdown ol { | |
| padding-left: 1.2rem; | |
| } | |
| #guide-content li > ul, | |
| #guide-content li > ol, | |
| .guide-markdown li > ul, | |
| .guide-markdown li > ol { | |
| padding-left: 0.95rem; | |
| } | |
| #cfo-app .row { | |
| gap: 0.75rem; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| #cfo-app *, | |
| #cfo-app *::before, | |
| #cfo-app *::after { | |
| scroll-behavior: auto ; | |
| transition-duration: 0.01ms ; | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| } | |
| } | |
| @media (forced-colors: active) { | |
| #cfo-app :focus-visible { | |
| outline-color: Highlight ; | |
| } | |
| } | |