| :root { |
| color-scheme: light; |
| --ink: #111614; |
| --ink-soft: #26312e; |
| --muted: #64706c; |
| --faint: #8a9691; |
| --canvas: #e9eef0; |
| --paper: #fbfbf6; |
| --paper-2: #f1f3ee; |
| --panel: #ffffff; |
| --panel-ink: #141918; |
| --line: #b7c1bd; |
| --line-strong: #71807b; |
| --rule: #1f2a27; |
| --cad-blue: #1f5f7d; |
| --cad-blue-dark: #123b51; |
| --survey-green: #0f766e; |
| --survey-green-dark: #09443f; |
| --amber: #c88920; |
| --clay: #a94d34; |
| --danger: #8f2f24; |
| --positive: #11624f; |
| --shadow-flat: 0 1px 0 rgba(17, 22, 20, 0.18); |
| --shadow-strong: 0 24px 70px rgba(24, 31, 28, 0.16); |
| --radius: 6px; |
| --font-display: "Bahnschrift", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif; |
| --font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", Tahoma, sans-serif; |
| --font-mono: "Cascadia Code", "IBM Plex Mono", Consolas, monospace; |
| } |
|
|
| html, |
| body, |
| .gradio-container { |
| min-height: 100%; |
| background: |
| linear-gradient(135deg, rgba(31, 95, 125, 0.16), transparent 32%), |
| radial-gradient(circle at 88% 9%, rgba(200, 137, 32, 0.18), transparent 25%), |
| linear-gradient(90deg, rgba(17, 22, 20, 0.055) 1px, transparent 1px), |
| linear-gradient(rgba(17, 22, 20, 0.045) 1px, transparent 1px), |
| var(--canvas) !important; |
| background-size: auto, auto, 38px 38px, 38px 38px, auto !important; |
| color: var(--ink) !important; |
| font-family: var(--font-body) !important; |
| letter-spacing: 0 !important; |
| } |
|
|
| html, |
| body { |
| overflow-x: hidden !important; |
| } |
|
|
| .gradio-container { |
| width: 100% !important; |
| max-width: 1840px !important; |
| margin: 0 auto !important; |
| padding: 24px 28px 40px !important; |
| } |
|
|
| .gradio-container * { |
| box-sizing: border-box; |
| } |
|
|
| .gradio-container > .main, |
| .gradio-container .contain { |
| max-width: none !important; |
| } |
|
|
| #app-header { |
| position: relative; |
| overflow: hidden; |
| border: 1px solid rgba(17, 22, 20, 0.78); |
| background: |
| linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), |
| linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), |
| linear-gradient(126deg, #111614 0%, #17211e 58%, #20312c 100%); |
| background-size: 34px 34px, 34px 34px, auto; |
| border-radius: var(--radius); |
| padding: 28px 30px 26px; |
| margin: 0 0 14px; |
| box-shadow: var(--shadow-strong); |
| } |
|
|
| #app-header::before { |
| content: ""; |
| position: absolute; |
| left: 0; |
| top: 0; |
| bottom: 0; |
| width: 8px; |
| background: linear-gradient(180deg, var(--cad-blue), var(--survey-green), var(--amber)); |
| } |
|
|
| #app-header::after { |
| content: "WGS84 / OSM / OPEN-METEO / FIELD VERIFY"; |
| position: absolute; |
| right: 18px; |
| bottom: 12px; |
| color: rgba(255, 255, 255, 0.22); |
| font-family: var(--font-mono); |
| font-size: 11px; |
| letter-spacing: 0.08em; |
| } |
|
|
| .app-kicker { |
| position: relative; |
| z-index: 1; |
| margin: 0 0 12px 12px; |
| color: #87d7ce; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| font-weight: 800; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
|
|
| .header-grid { |
| position: relative; |
| z-index: 1; |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(360px, 540px); |
| gap: 32px; |
| align-items: end; |
| padding-left: 12px; |
| } |
|
|
| #app-header h1 { |
| margin: 0; |
| color: #ffffff !important; |
| font-family: var(--font-display) !important; |
| font-size: clamp(44px, 5.8vw, 86px); |
| font-weight: 900; |
| line-height: 0.88; |
| letter-spacing: 0 !important; |
| max-width: 940px; |
| overflow-wrap: anywhere; |
| } |
|
|
| .app-subtitle { |
| margin: 18px 0 0; |
| max-width: 980px; |
| color: #dbe6e2 !important; |
| font-size: 17px; |
| line-height: 1.56; |
| } |
|
|
| .status-stack { |
| display: grid; |
| gap: 9px; |
| } |
|
|
| .status-stack div { |
| display: grid; |
| grid-template-columns: 128px 1fr; |
| gap: 14px; |
| align-items: baseline; |
| min-height: 58px; |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| background: rgba(255, 255, 255, 0.065); |
| border-radius: var(--radius); |
| padding: 12px 14px; |
| backdrop-filter: blur(10px); |
| min-width: 0; |
| } |
|
|
| .status-stack b { |
| color: #ffffff; |
| font-family: var(--font-display); |
| font-size: 14px; |
| font-weight: 850; |
| line-height: 1.2; |
| } |
|
|
| .status-stack span { |
| color: #c4d1cc !important; |
| font-size: 13px; |
| line-height: 1.35; |
| overflow-wrap: anywhere; |
| } |
|
|
| .workflow-strip { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 0; |
| border: 1px solid var(--rule); |
| background: var(--paper); |
| border-radius: var(--radius); |
| overflow: hidden; |
| margin: 0 0 18px; |
| box-shadow: var(--shadow-flat); |
| } |
|
|
| .workflow-strip div { |
| position: relative; |
| min-height: 74px; |
| padding: 15px 18px 14px 64px; |
| border-right: 1px solid var(--line); |
| background: |
| linear-gradient(180deg, rgba(31, 95, 125, 0.07), transparent 58%), |
| var(--paper); |
| } |
|
|
| .workflow-strip div:last-child { |
| border-right: 0; |
| } |
|
|
| .workflow-strip b { |
| position: absolute; |
| left: 16px; |
| top: 16px; |
| display: grid; |
| width: 34px; |
| height: 34px; |
| place-items: center; |
| border: 1px solid var(--rule); |
| background: var(--ink); |
| color: #ffffff; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| line-height: 1; |
| } |
|
|
| .workflow-strip span { |
| display: block; |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-size: 16px; |
| font-weight: 850; |
| } |
|
|
| .workflow-strip small { |
| display: block; |
| margin-top: 5px; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .main-workspace { |
| gap: 18px !important; |
| align-items: stretch !important; |
| } |
|
|
| .studio-shell { |
| border: 1px solid var(--rule); |
| border-radius: var(--radius); |
| overflow: hidden; |
| background: #101716; |
| box-shadow: var(--shadow-strong); |
| margin-bottom: 16px; |
| } |
|
|
| .studio-topbar { |
| display: flex; |
| justify-content: space-between; |
| gap: 24px; |
| align-items: center; |
| min-height: 118px; |
| padding: 24px 28px; |
| background: |
| linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px), |
| linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), |
| linear-gradient(120deg, #0e1614 0%, #13211f 58%, #1d2e2a 100%); |
| background-size: 34px 34px, 34px 34px, auto; |
| } |
|
|
| .studio-kicker { |
| display: block; |
| color: #8ce6dc !important; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| font-weight: 850; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .gradio-container .studio-shell .studio-topbar h1, |
| .gradio-container .studio-shell .studio-topbar .prose h1, |
| .gradio-container .studio-shell .studio-topbar .markdown h1 { |
| margin: 10px 0 0; |
| color: #ffffff !important; |
| -webkit-text-fill-color: #ffffff !important; |
| font-family: var(--font-display) !important; |
| font-size: clamp(34px, 4.4vw, 64px); |
| font-weight: 900; |
| line-height: 0.92; |
| text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42); |
| } |
|
|
| .studio-meta { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| gap: 8px; |
| } |
|
|
| .studio-meta span { |
| display: inline-flex; |
| min-height: 36px; |
| align-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.26); |
| background: rgba(255, 255, 255, 0.08); |
| color: #ffffff !important; |
| border-radius: 4px; |
| padding: 8px 11px; |
| font-family: var(--font-display); |
| font-size: 12px; |
| font-weight: 850; |
| text-transform: uppercase; |
| } |
|
|
| .studio-briefing { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| border-top: 1px solid rgba(255, 255, 255, 0.14); |
| background: #ffffff; |
| } |
|
|
| .studio-briefing div { |
| min-height: 98px; |
| border-right: 1px solid var(--line); |
| padding: 16px 18px; |
| } |
|
|
| .studio-briefing div:last-child { |
| border-right: 0; |
| } |
|
|
| .studio-briefing b { |
| display: block; |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-size: 16px; |
| font-weight: 900; |
| } |
|
|
| .studio-briefing span { |
| display: block; |
| margin-top: 6px; |
| color: var(--ink-soft) !important; |
| font-size: 13px; |
| line-height: 1.42; |
| } |
|
|
| .studio-proof-row { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| border-top: 1px solid var(--rule); |
| background: #f3f8f6; |
| } |
|
|
| .studio-proof-row div { |
| min-height: 68px; |
| padding: 13px 18px; |
| border-right: 1px solid var(--line); |
| } |
|
|
| .studio-proof-row div:last-child { |
| border-right: 0; |
| } |
|
|
| .studio-proof-row b { |
| display: block; |
| color: var(--survey-green-dark); |
| font-family: var(--font-display); |
| font-size: 13px; |
| font-weight: 900; |
| text-transform: uppercase; |
| } |
|
|
| .studio-proof-row span { |
| display: block; |
| margin-top: 4px; |
| color: var(--ink-soft) !important; |
| font-size: 13px; |
| } |
|
|
| .studio-workbench { |
| display: grid !important; |
| grid-template-columns: minmax(230px, 0.68fr) minmax(660px, 1.9fr) minmax(270px, 0.78fr); |
| gap: 16px !important; |
| align-items: start !important; |
| margin-top: 16px; |
| } |
|
|
| .studio-workbench > div { |
| min-width: 0 !important; |
| width: 100% !important; |
| } |
|
|
| .brief-pane, |
| .source-pane, |
| .canvas-pane { |
| min-width: 0 !important; |
| } |
|
|
| .brief-pane, |
| .source-pane { |
| border: 1px solid var(--rule) !important; |
| border-radius: var(--radius) !important; |
| background: |
| linear-gradient(90deg, rgba(17, 22, 20, 0.035) 1px, transparent 1px), |
| linear-gradient(rgba(17, 22, 20, 0.026) 1px, transparent 1px), |
| #ffffff !important; |
| background-size: 26px 26px, 26px 26px, auto !important; |
| padding: 14px !important; |
| box-shadow: var(--shadow-strong); |
| } |
|
|
| .canvas-pane { |
| padding: 0 !important; |
| } |
|
|
| .pane-heading, |
| .review-header { |
| display: grid; |
| grid-template-columns: 42px minmax(0, 1fr); |
| gap: 12px; |
| align-items: center; |
| margin-bottom: 12px; |
| } |
|
|
| .pane-heading > span, |
| .review-header > span { |
| display: grid; |
| width: 38px; |
| height: 38px; |
| place-items: center; |
| border: 1px solid var(--rule); |
| background: var(--ink); |
| color: #ffffff !important; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| font-weight: 850; |
| } |
|
|
| .pane-heading b, |
| .review-header b { |
| display: block; |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-size: 20px; |
| font-weight: 900; |
| line-height: 1.05; |
| } |
|
|
| .pane-heading small, |
| .review-header small { |
| display: block; |
| margin-top: 4px; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .canvas-heading { |
| margin: 0 0 10px; |
| } |
|
|
| .source-pane .upload-panel { |
| margin: 12px 0 !important; |
| padding: 0 !important; |
| border: 1px solid var(--line-strong) !important; |
| background: #ffffff !important; |
| box-shadow: none !important; |
| } |
|
|
| .source-pane .upload-panel > div { |
| background: transparent !important; |
| } |
|
|
| .minimum-card, |
| .source-card { |
| border: 1px solid var(--rule); |
| border-left: 7px solid var(--survey-green); |
| border-radius: var(--radius); |
| padding: 13px 14px; |
| margin: 12px 0; |
| background: #eef8f6; |
| color: var(--ink); |
| box-shadow: 3px 3px 0 rgba(17, 22, 20, 0.08); |
| } |
|
|
| .source-card { |
| border-left-color: var(--cad-blue); |
| background: #eef5f8; |
| } |
|
|
| .minimum-card b, |
| .source-card b { |
| display: block; |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-size: 16px; |
| font-weight: 900; |
| } |
|
|
| .minimum-card span, |
| .source-card span { |
| display: block; |
| margin-top: 6px; |
| color: var(--ink-soft) !important; |
| font-size: 13px; |
| line-height: 1.42; |
| } |
|
|
| .brief-accordion, |
| .upload-panel { |
| border-radius: var(--radius) !important; |
| overflow: hidden !important; |
| } |
|
|
| .brief-accordion > div:first-child, |
| .upload-panel > div:first-child { |
| min-height: 44px !important; |
| border-bottom: 1px solid var(--line) !important; |
| background: #ffffff !important; |
| color: var(--ink) !important; |
| font-family: var(--font-display) !important; |
| font-weight: 900 !important; |
| } |
|
|
| .brief-accordion label, |
| .upload-panel label { |
| color: var(--ink) !important; |
| font-family: var(--font-display) !important; |
| font-weight: 850 !important; |
| } |
|
|
| .run-card { |
| border: 1px solid var(--rule); |
| border-left: 6px solid var(--amber); |
| border-radius: var(--radius); |
| padding: 13px 14px; |
| margin: 12px 0; |
| background: #fff8e9; |
| } |
|
|
| .run-card b { |
| display: block; |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-weight: 900; |
| } |
|
|
| .run-card span { |
| display: block; |
| margin-top: 6px; |
| color: #47361c !important; |
| font-size: 13px; |
| line-height: 1.4; |
| } |
|
|
| .deliverables-strip { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 0; |
| margin: 12px 0; |
| border: 1px solid var(--rule); |
| border-radius: var(--radius); |
| overflow: hidden; |
| background: #ffffff; |
| box-shadow: var(--shadow-flat); |
| } |
|
|
| .deliverables-strip div { |
| min-height: 72px; |
| padding: 13px 14px; |
| border-right: 1px solid var(--line); |
| background: |
| linear-gradient(180deg, rgba(15, 118, 110, 0.07), transparent 65%), |
| #ffffff; |
| } |
|
|
| .deliverables-strip div:last-child { |
| border-right: 0; |
| } |
|
|
| .deliverables-strip b { |
| display: block; |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-size: 15px; |
| font-weight: 900; |
| } |
|
|
| .deliverables-strip span { |
| display: block; |
| margin-top: 5px; |
| color: var(--ink-soft) !important; |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .review-header { |
| margin: 22px 0 12px; |
| border: 1px solid var(--rule); |
| border-left: 8px solid var(--survey-green); |
| border-radius: var(--radius); |
| padding: 14px 16px; |
| background: #ffffff; |
| box-shadow: var(--shadow-flat); |
| } |
|
|
| .review-tabs { |
| border: 1px solid var(--rule) !important; |
| border-radius: var(--radius) !important; |
| background: #ffffff !important; |
| box-shadow: var(--shadow-strong); |
| overflow: hidden; |
| } |
|
|
| .map-workspace, |
| .control-panel { |
| min-width: 0 !important; |
| } |
|
|
| #sis-map-shell { |
| border: 1px solid var(--rule); |
| border-radius: var(--radius); |
| overflow: hidden; |
| background: var(--panel); |
| box-shadow: var(--shadow-strong); |
| } |
|
|
| .map-topbar { |
| display: flex; |
| justify-content: space-between; |
| gap: 16px; |
| align-items: center; |
| padding: 14px 16px; |
| border-bottom: 1px solid var(--rule); |
| background: |
| linear-gradient(90deg, rgba(15, 118, 110, 0.22), transparent 44%), |
| #111614; |
| } |
|
|
| .map-topbar strong { |
| display: block; |
| color: #ffffff; |
| font-family: var(--font-display); |
| font-size: 19px; |
| font-weight: 900; |
| line-height: 1.1; |
| overflow-wrap: anywhere; |
| } |
|
|
| .map-topbar span { |
| display: block; |
| margin-top: 4px; |
| color: #ccd9d5 !important; |
| font-size: 13px; |
| line-height: 1.35; |
| overflow-wrap: anywhere; |
| } |
|
|
| .map-confidence { |
| border: 1px solid rgba(255, 255, 255, 0.32); |
| background: #ffffff; |
| color: var(--ink); |
| border-radius: 4px; |
| padding: 8px 10px; |
| font-family: var(--font-mono); |
| font-size: 11px; |
| font-weight: 850; |
| letter-spacing: 0.03em; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
|
|
| .map-controls { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| align-items: center; |
| padding: 10px; |
| border-bottom: 1px solid var(--line-strong); |
| background: |
| linear-gradient(90deg, rgba(17, 22, 20, 0.065) 1px, transparent 1px), |
| linear-gradient(rgba(17, 22, 20, 0.05) 1px, transparent 1px), |
| #f6f7f3; |
| background-size: 22px 22px, 22px 22px, auto; |
| } |
|
|
| .map-controls button, |
| .map-controls select { |
| min-height: 42px; |
| border: 1px solid var(--rule); |
| background: #ffffff; |
| color: var(--ink); |
| border-radius: 4px; |
| padding: 8px 12px; |
| font-family: var(--font-display); |
| font-size: 14px; |
| font-weight: 800; |
| cursor: pointer; |
| box-shadow: 2px 2px 0 rgba(17, 22, 20, 0.16); |
| transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; |
| } |
|
|
| .map-controls button:hover, |
| .map-controls select:hover { |
| background: #f1fbf9; |
| transform: translate(-1px, -1px); |
| box-shadow: 3px 3px 0 rgba(17, 22, 20, 0.22); |
| } |
|
|
| .map-controls button.active { |
| background: var(--survey-green); |
| color: #ffffff; |
| border-color: var(--survey-green-dark); |
| } |
|
|
| .map-controls label { |
| display: inline-flex; |
| gap: 8px; |
| align-items: center; |
| color: var(--ink) !important; |
| font-family: var(--font-display); |
| font-size: 13px; |
| font-weight: 850; |
| } |
|
|
| #site-map { |
| width: 100%; |
| height: 650px; |
| min-height: 520px; |
| background: #cfd9d6; |
| } |
|
|
| .leaflet-container { |
| font-family: var(--font-body) !important; |
| } |
|
|
| .leaflet-control-attribution, |
| .leaflet-control-scale-line { |
| color: #16211e !important; |
| font-family: var(--font-mono) !important; |
| font-size: 10px !important; |
| } |
|
|
| .leaflet-popup-content-wrapper, |
| .leaflet-popup-tip { |
| border-radius: 4px !important; |
| } |
|
|
| #map-status { |
| min-height: 44px; |
| padding: 11px 14px; |
| border-top: 1px solid var(--line-strong); |
| font-family: var(--font-mono); |
| font-size: 12px; |
| color: var(--ink-soft); |
| background: #ffffff; |
| } |
|
|
| #map_state { |
| position: absolute !important; |
| left: -10000px !important; |
| top: auto !important; |
| width: 1px !important; |
| height: 1px !important; |
| overflow: hidden !important; |
| } |
|
|
| .warning-note { |
| margin: 14px 0 0; |
| border: 1px solid #8a6121; |
| border-left: 8px solid var(--amber); |
| padding: 13px 15px; |
| background: #fff8e9; |
| color: #332717 !important; |
| border-radius: var(--radius); |
| line-height: 1.48; |
| } |
|
|
| .control-panel, |
| .upload-panel { |
| border: 1px solid var(--rule) !important; |
| background: |
| linear-gradient(90deg, rgba(17, 22, 20, 0.035) 1px, transparent 1px), |
| linear-gradient(rgba(17, 22, 20, 0.026) 1px, transparent 1px), |
| var(--panel) !important; |
| background-size: 28px 28px, 28px 28px, auto !important; |
| border-radius: var(--radius) !important; |
| padding: 18px !important; |
| box-shadow: var(--shadow-strong); |
| } |
|
|
| .control-panel { |
| position: relative; |
| } |
|
|
| .control-panel::before { |
| content: "INPUTS"; |
| position: absolute; |
| top: 12px; |
| right: 14px; |
| color: rgba(17, 22, 20, 0.34); |
| font-family: var(--font-mono); |
| font-size: 11px; |
| letter-spacing: 0.12em; |
| } |
|
|
| .control-panel h3 { |
| margin: 0 0 12px !important; |
| color: var(--ink) !important; |
| font-family: var(--font-display) !important; |
| font-size: 22px !important; |
| font-weight: 900 !important; |
| } |
|
|
| .control-panel label, |
| .upload-panel label, |
| .gradio-container label, |
| .gradio-container span, |
| .gradio-container p, |
| .gradio-container li { |
| color: var(--ink-soft) !important; |
| } |
|
|
| .gradio-container label { |
| font-weight: 780 !important; |
| } |
|
|
| .gradio-container textarea, |
| .gradio-container input, |
| .gradio-container select { |
| color: var(--ink) !important; |
| background: #ffffff !important; |
| border: 1px solid var(--line-strong) !important; |
| border-radius: 4px !important; |
| font-family: var(--font-body) !important; |
| font-size: 15px !important; |
| box-shadow: none !important; |
| } |
|
|
| .gradio-container textarea::placeholder, |
| .gradio-container input::placeholder { |
| color: #737f7b !important; |
| opacity: 1 !important; |
| } |
|
|
| .gradio-container textarea:focus, |
| .gradio-container input:focus, |
| .gradio-container select:focus { |
| outline: 3px solid rgba(31, 95, 125, 0.24) !important; |
| border-color: var(--cad-blue) !important; |
| } |
|
|
| .gradio-container .form, |
| .gradio-container .block, |
| .gradio-container .block-background, |
| .gradio-container .input-container, |
| .gradio-container .wrap, |
| .gradio-container .output-markdown, |
| .gradio-container .markdown, |
| .gradio-container .image-container { |
| border-color: var(--line) !important; |
| background: #ffffff !important; |
| color: var(--ink) !important; |
| } |
|
|
| .coverage-card { |
| margin-top: 14px; |
| border: 1px solid var(--line-strong); |
| border-top: 5px solid var(--cad-blue); |
| background: rgba(255, 255, 255, 0.82); |
| color: var(--ink); |
| border-radius: var(--radius); |
| padding: 15px 16px; |
| } |
|
|
| .coverage-card strong { |
| display: block; |
| margin-bottom: 10px; |
| color: var(--cad-blue-dark); |
| font-family: var(--font-display); |
| font-weight: 900; |
| } |
|
|
| .coverage-card ul { |
| margin: 0; |
| padding-left: 18px; |
| } |
|
|
| .coverage-card li { |
| margin: 7px 0; |
| line-height: 1.4; |
| } |
|
|
| .control-panel button.secondary, |
| .control-panel button[variant="secondary"], |
| .upload-panel button.secondary, |
| .upload-panel button[variant="secondary"] { |
| min-height: 44px !important; |
| border: 1px solid var(--rule) !important; |
| background: #ffffff !important; |
| color: var(--cad-blue-dark) !important; |
| border-radius: 4px !important; |
| font-family: var(--font-display) !important; |
| font-weight: 850 !important; |
| box-shadow: 2px 2px 0 rgba(17, 22, 20, 0.14) !important; |
| } |
|
|
| .control-panel button.secondary:hover, |
| .control-panel button[variant="secondary"]:hover, |
| .upload-panel button.secondary:hover, |
| .upload-panel button[variant="secondary"]:hover { |
| background: #eef8f6 !important; |
| } |
|
|
| .upload-panel { |
| margin-top: 18px !important; |
| } |
|
|
| .upload-panel > div:first-child { |
| color: var(--ink) !important; |
| font-family: var(--font-display) !important; |
| font-weight: 900 !important; |
| } |
|
|
| .generate-button button, |
| .map-generate-button button, |
| button.primary { |
| min-height: 54px !important; |
| background: linear-gradient(90deg, var(--survey-green), #0b5f57) !important; |
| color: #ffffff !important; |
| border: 1px solid var(--survey-green-dark) !important; |
| border-radius: 4px !important; |
| font-family: var(--font-display) !important; |
| font-size: 16px !important; |
| font-weight: 900 !important; |
| letter-spacing: 0 !important; |
| box-shadow: 4px 4px 0 rgba(17, 22, 20, 0.24) !important; |
| } |
|
|
| .generate-button button:hover, |
| .map-generate-button button:hover, |
| button.primary:hover { |
| background: linear-gradient(90deg, var(--cad-blue), var(--survey-green-dark)) !important; |
| transform: translate(-1px, -1px); |
| } |
|
|
| .map-generate-button button { |
| width: 100% !important; |
| min-height: 58px !important; |
| font-size: 17px !important; |
| } |
|
|
| .tabs { |
| margin-top: 20px !important; |
| } |
|
|
| .tab-nav { |
| border-bottom: 1px solid var(--rule) !important; |
| } |
|
|
| .tab-nav button { |
| color: var(--ink-soft) !important; |
| font-family: var(--font-display) !important; |
| font-weight: 850 !important; |
| } |
|
|
| .tab-nav button[aria-selected="true"] { |
| color: var(--ink) !important; |
| border-bottom-color: var(--amber) !important; |
| background: #ffffff !important; |
| } |
|
|
| .output-intro { |
| display: flex; |
| justify-content: space-between; |
| gap: 14px; |
| align-items: center; |
| margin: 0 0 14px; |
| padding: 13px 15px; |
| border: 1px solid var(--rule); |
| border-left: 8px solid var(--cad-blue); |
| border-radius: var(--radius); |
| background: #ffffff; |
| box-shadow: var(--shadow-flat); |
| } |
|
|
| .output-intro strong { |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-weight: 900; |
| } |
|
|
| .output-intro span { |
| color: var(--ink-soft) !important; |
| overflow-wrap: anywhere; |
| } |
|
|
| .board-preview-frame, |
| .board-preview-empty { |
| border: 1px solid var(--rule); |
| border-radius: var(--radius); |
| background: #ffffff; |
| color: var(--ink-soft); |
| overflow: hidden; |
| box-shadow: var(--shadow-strong); |
| } |
|
|
| .board-preview-empty { |
| min-height: 320px; |
| display: grid; |
| place-items: center; |
| color: var(--muted); |
| background: |
| linear-gradient(90deg, rgba(17, 22, 20, 0.05) 1px, transparent 1px), |
| linear-gradient(rgba(17, 22, 20, 0.05) 1px, transparent 1px), |
| #ffffff; |
| background-size: 32px 32px, 32px 32px, auto; |
| } |
|
|
| .board-preview-waiting { |
| min-height: 560px; |
| padding: 28px; |
| place-items: stretch; |
| } |
|
|
| .empty-board-grid { |
| display: grid; |
| height: 100%; |
| min-height: 500px; |
| grid-template-columns: 1.55fr repeat(2, minmax(0, 1fr)); |
| grid-auto-rows: minmax(130px, auto); |
| gap: 14px; |
| } |
|
|
| .empty-board-title { |
| grid-row: span 2; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| border: 1px solid var(--rule); |
| border-radius: var(--radius); |
| padding: 24px; |
| background: |
| linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), |
| linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), |
| #101716; |
| background-size: 32px 32px, 32px 32px, auto; |
| color: #ffffff; |
| } |
|
|
| .empty-board-title span { |
| color: #8ce6dc !important; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| font-weight: 850; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .empty-board-title b { |
| display: block; |
| max-width: 540px; |
| margin-top: 12px; |
| color: #ffffff; |
| font-family: var(--font-display); |
| font-size: clamp(31px, 3vw, 54px); |
| font-weight: 900; |
| line-height: 0.98; |
| } |
|
|
| .empty-board-title small { |
| display: block; |
| max-width: 560px; |
| margin-top: 14px; |
| color: #d5e0dd !important; |
| font-size: 15px; |
| line-height: 1.45; |
| } |
|
|
| .empty-board-card { |
| border: 1px solid var(--line-strong); |
| border-radius: var(--radius); |
| padding: 18px; |
| background: #ffffff; |
| color: var(--ink); |
| box-shadow: 4px 4px 0 rgba(17, 22, 20, 0.08); |
| } |
|
|
| .empty-board-card b { |
| display: grid; |
| width: 36px; |
| height: 36px; |
| place-items: center; |
| margin-bottom: 20px; |
| background: var(--ink); |
| color: #ffffff; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| } |
|
|
| .empty-board-card span { |
| display: block; |
| color: var(--ink); |
| font-family: var(--font-display); |
| font-size: 19px; |
| font-weight: 900; |
| line-height: 1.12; |
| } |
|
|
| .board-preview-frame img { |
| display: block; |
| width: 100%; |
| height: auto; |
| } |
|
|
| .prose, |
| .markdown, |
| .output-markdown { |
| color: var(--ink) !important; |
| font-size: 15px !important; |
| line-height: 1.58 !important; |
| } |
|
|
| .prose h1, |
| .prose h2, |
| .prose h3, |
| .markdown h1, |
| .markdown h2, |
| .markdown h3 { |
| color: var(--ink) !important; |
| font-family: var(--font-display) !important; |
| letter-spacing: 0 !important; |
| } |
|
|
| .prose h1, |
| .markdown h1 { |
| font-size: 31px !important; |
| } |
|
|
| .prose h2, |
| .markdown h2 { |
| margin-top: 26px !important; |
| font-size: 22px !important; |
| border-bottom: 1px solid var(--line); |
| padding-bottom: 6px; |
| } |
|
|
| .prose h3, |
| .markdown h3 { |
| font-size: 17px !important; |
| } |
|
|
| .prose code, |
| .markdown code { |
| background: #e7f0ee !important; |
| color: #092b28 !important; |
| border: 1px solid #c8d8d4; |
| border-radius: 3px; |
| padding: 1px 5px; |
| } |
|
|
| .prose table, |
| .markdown table { |
| width: 100%; |
| background: #ffffff !important; |
| color: var(--ink) !important; |
| border-collapse: collapse; |
| font-size: 13px !important; |
| } |
|
|
| .prose th, |
| .markdown th { |
| background: #14201d !important; |
| color: #ffffff !important; |
| } |
|
|
| .prose td, |
| .prose th, |
| .markdown td, |
| .markdown th { |
| border: 1px solid var(--line) !important; |
| padding: 9px !important; |
| } |
|
|
| .evidence-shell { |
| background: #ffffff; |
| border: 1px solid var(--rule); |
| border-radius: var(--radius); |
| color: var(--ink); |
| overflow: hidden; |
| box-shadow: var(--shadow-strong); |
| } |
|
|
| .evidence-header { |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| align-items: center; |
| padding: 16px 18px; |
| background: |
| linear-gradient(90deg, rgba(31, 95, 125, 0.28), transparent 60%), |
| #111614; |
| color: #ffffff; |
| } |
|
|
| .evidence-header span { |
| display: block; |
| color: #89d7ce !important; |
| font-family: var(--font-mono); |
| font-size: 11px; |
| font-weight: 850; |
| letter-spacing: 0.10em; |
| text-transform: uppercase; |
| } |
|
|
| .evidence-header strong { |
| display: block; |
| margin-top: 4px; |
| color: #ffffff; |
| font-family: var(--font-display); |
| font-size: 20px; |
| font-weight: 900; |
| } |
|
|
| .evidence-header b { |
| color: #ffffff; |
| font-family: var(--font-mono); |
| white-space: nowrap; |
| } |
|
|
| .evidence-scroll { |
| overflow-x: auto; |
| background: #ffffff; |
| } |
|
|
| .evidence-html-table { |
| width: 100%; |
| min-width: 1320px; |
| border-collapse: collapse; |
| table-layout: fixed; |
| background: #ffffff; |
| color: var(--ink); |
| } |
|
|
| .evidence-html-table th { |
| position: sticky; |
| top: 0; |
| z-index: 1; |
| background: #17211e; |
| color: #ffffff; |
| border-bottom: 2px solid var(--line-strong); |
| font-family: var(--font-display); |
| font-size: 12px; |
| line-height: 1.25; |
| text-align: left; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| padding: 12px 10px; |
| } |
|
|
| .evidence-html-table td { |
| vertical-align: top; |
| border-bottom: 1px solid var(--line); |
| color: var(--ink); |
| font-size: 13px; |
| line-height: 1.44; |
| padding: 12px 10px; |
| overflow-wrap: anywhere; |
| } |
|
|
| .evidence-html-table tr:nth-child(even) td { |
| background: #f5f8f6; |
| } |
|
|
| .evidence-id { |
| font-family: var(--font-mono); |
| color: var(--cad-blue-dark) !important; |
| font-weight: 850; |
| } |
|
|
| .evidence-html-table small { |
| display: block; |
| margin-top: 5px; |
| color: var(--muted); |
| } |
|
|
| .confidence { |
| display: inline-block; |
| border-radius: 3px; |
| padding: 4px 7px; |
| font-family: var(--font-mono); |
| font-size: 11px; |
| font-weight: 850; |
| text-transform: uppercase; |
| } |
|
|
| .confidence-high { |
| background: #d7eee9; |
| color: #083e36; |
| } |
|
|
| .confidence-medium { |
| background: #fff1cf; |
| color: #60410f; |
| } |
|
|
| .confidence-low { |
| background: #f8dcd4; |
| color: #722719; |
| } |
|
|
| .gradio-container a { |
| color: var(--cad-blue) !important; |
| } |
|
|
| .gradio-container a:visited { |
| color: #5b456c !important; |
| } |
|
|
| footer { |
| color: var(--muted) !important; |
| } |
|
|
| #app-header, |
| .workflow-strip, |
| #sis-map-shell, |
| .control-panel, |
| .upload-panel, |
| .tabs { |
| opacity: 1 !important; |
| transform: none !important; |
| animation: none !important; |
| filter: none !important; |
| } |
|
|
| @media (max-width: 1120px) { |
| .studio-workbench { |
| grid-template-columns: 1fr 1fr !important; |
| } |
|
|
| .canvas-pane { |
| grid-column: 1 / -1; |
| order: -1; |
| } |
|
|
| .header-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .status-stack { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .status-stack div { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 920px) { |
| html, |
| body { |
| width: 100% !important; |
| max-width: 100vw !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| background: var(--canvas) !important; |
| } |
|
|
| gradio-app, |
| #root, |
| .app, |
| .main, |
| .contain, |
| .gradio-container > .main, |
| .gradio-container .contain { |
| width: 100vw !important; |
| max-width: 100vw !important; |
| min-width: 0 !important; |
| margin: 0 !important; |
| padding-left: 0 !important; |
| padding-right: 0 !important; |
| overflow-x: hidden !important; |
| } |
|
|
| .gradio-container { |
| padding: 10px !important; |
| overflow-x: hidden !important; |
| margin: 0 !important; |
| width: 100vw !important; |
| max-width: 100vw !important; |
| min-width: 0 !important; |
| } |
|
|
| #app-header { |
| padding: 20px 16px 34px; |
| width: 100%; |
| max-width: calc(100vw - 20px) !important; |
| } |
|
|
| #app-header h1 { |
| font-size: clamp(31px, 10vw, 39px); |
| line-height: 0.96; |
| } |
|
|
| #app-header::after { |
| left: 18px; |
| right: auto; |
| bottom: 10px; |
| } |
|
|
| .workflow-strip, |
| .status-stack { |
| grid-template-columns: 1fr; |
| } |
|
|
| .studio-topbar { |
| align-items: flex-start; |
| flex-direction: column; |
| padding: 20px 18px; |
| } |
|
|
| .gradio-container .studio-shell .studio-topbar h1, |
| .gradio-container .studio-shell .studio-topbar .prose h1, |
| .gradio-container .studio-shell .studio-topbar .markdown h1 { |
| font-size: clamp(31px, 9.5vw, 40px) !important; |
| line-height: 0.96 !important; |
| } |
|
|
| .studio-meta { |
| justify-content: flex-start; |
| } |
|
|
| .studio-briefing, |
| .studio-proof-row, |
| .studio-workbench { |
| grid-template-columns: 1fr !important; |
| } |
|
|
| .studio-shell > .deliverables-strip, |
| .studio-proof-row { |
| display: none; |
| } |
|
|
| .studio-briefing div:nth-child(n + 2) { |
| display: none; |
| } |
|
|
| .studio-briefing div, |
| .studio-proof-row div { |
| border-right: 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .studio-briefing div:last-child, |
| .studio-proof-row div:last-child { |
| border-bottom: 0; |
| } |
|
|
| .canvas-pane { |
| order: -1; |
| } |
|
|
| .workflow-strip, |
| #sis-map-shell, |
| .warning-note, |
| .control-panel, |
| .upload-panel, |
| .tabs, |
| .studio-shell, |
| .brief-pane, |
| .source-pane, |
| .canvas-pane, |
| .review-header, |
| .review-tabs { |
| width: 100% !important; |
| max-width: calc(100vw - 20px) !important; |
| } |
|
|
| .workflow-strip div { |
| border-right: 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .workflow-strip div:last-child { |
| border-bottom: 0; |
| } |
|
|
| .main-workspace, |
| .main-workspace > div, |
| .main-workspace .map-workspace, |
| .main-workspace .control-panel { |
| display: flex !important; |
| flex-direction: column !important; |
| width: 100% !important; |
| max-width: 100% !important; |
| min-width: 0 !important; |
| flex: 1 1 100% !important; |
| } |
|
|
| .map-topbar { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .map-confidence { |
| white-space: normal; |
| } |
|
|
| #site-map { |
| height: 500px; |
| min-height: 420px; |
| } |
|
|
| .map-controls button, |
| .map-controls select { |
| flex: 1 1 calc(50% - 8px); |
| min-width: 0; |
| } |
|
|
| .map-controls button { |
| min-height: 42px; |
| padding: 9px 10px; |
| } |
|
|
| .map-controls label { |
| width: 100%; |
| } |
|
|
| .map-controls label select { |
| max-width: 128px; |
| } |
|
|
| .deliverables-strip { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .deliverables-strip div:nth-child(2n) { |
| border-right: 0; |
| } |
|
|
| .deliverables-strip div { |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .deliverables-strip div:nth-last-child(-n + 2) { |
| border-bottom: 0; |
| } |
|
|
| .empty-board-grid { |
| grid-template-columns: 1fr; |
| min-height: auto; |
| } |
|
|
| .empty-board-title { |
| grid-row: auto; |
| min-height: 260px; |
| } |
|
|
| .board-preview-waiting { |
| min-height: auto; |
| padding: 14px; |
| } |
|
|
| .control-panel { |
| margin-top: 16px !important; |
| } |
|
|
| .output-intro { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
| } |
|
|
