| :root { |
| --background: #faf8ff; |
| --surface: #ffffff; |
| --surface-low: #f3f3fe; |
| --surface-container: #ededf9; |
| --surface-high: #e7e7f3; |
| --text: #191b23; |
| --muted: #434655; |
| --outline: #c3c6d7; |
| --primary: #004ac6; |
| --primary-strong: #2563eb; |
| --secondary: #505f76; |
| --good: #0f766e; |
| --warning: #d97706; |
| --danger: #ba1a1a; |
| --shadow: 0 1px 2px rgba(15, 23, 42, 0.06); |
| --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| background: var(--background); |
| color: var(--text); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| button, |
| input, |
| select, |
| textarea { |
| font: inherit; |
| } |
|
|
| button { |
| cursor: pointer; |
| } |
|
|
| .material-symbols-outlined { |
| font-size: 22px; |
| line-height: 1; |
| vertical-align: middle; |
| } |
|
|
| .enterprise-shell { |
| min-height: 100vh; |
| display: grid; |
| grid-template-columns: 240px minmax(0, 1fr); |
| } |
|
|
| .side-nav { |
| position: fixed; |
| inset: 0 auto 0 0; |
| z-index: 1200; |
| width: 240px; |
| display: flex; |
| flex-direction: column; |
| gap: 18px; |
| padding: 24px 8px; |
| background: var(--surface); |
| border-right: 1px solid var(--outline); |
| box-shadow: var(--shadow); |
| } |
|
|
| .brand-block { |
| display: flex; |
| gap: 10px; |
| align-items: center; |
| padding: 0 16px 10px; |
| } |
|
|
| .brand-mark { |
| width: 36px; |
| height: 36px; |
| display: grid; |
| place-items: center; |
| background: var(--primary-strong); |
| color: #fff; |
| border-radius: 6px; |
| font-weight: 800; |
| } |
|
|
| .brand-block h1 { |
| margin: 0; |
| color: var(--primary); |
| font-size: 21px; |
| line-height: 1; |
| } |
|
|
| .brand-block p { |
| margin: 4px 0 0; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .main-nav { |
| flex: 1; |
| display: grid; |
| align-content: start; |
| gap: 4px; |
| overflow: auto; |
| } |
|
|
| .main-nav button { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| border: 0; |
| border-left: 4px solid transparent; |
| background: transparent; |
| color: var(--muted); |
| padding: 10px 14px; |
| text-align: left; |
| border-radius: 0 999px 999px 0; |
| transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; |
| } |
|
|
| .nav-label { |
| display: inline-flex; |
| align-items: center; |
| } |
|
|
| .main-nav button:hover { |
| background: var(--surface-low); |
| color: var(--text); |
| } |
|
|
| .main-nav button.active { |
| background: rgba(37, 99, 235, 0.1); |
| color: var(--primary); |
| border-left-color: var(--primary); |
| font-weight: 800; |
| } |
|
|
| .nav-tooltip { |
| position: fixed; |
| left: 252px; |
| transform: translateY(-50%); |
| max-width: 240px; |
| padding: 10px 12px; |
| border: 1px solid #dbe4f0; |
| border-radius: 12px; |
| background: rgba(17, 24, 39, 0.96); |
| color: #f8fafc; |
| box-shadow: var(--shadow-md); |
| pointer-events: none; |
| z-index: 2100; |
| } |
|
|
| .nav-tooltip strong { |
| display: block; |
| margin-bottom: 4px; |
| font-size: 12px; |
| letter-spacing: 0.02em; |
| } |
|
|
| .nav-tooltip span { |
| display: block; |
| font-size: 11px; |
| line-height: 1.45; |
| color: rgba(248, 250, 252, 0.82); |
| } |
|
|
| .nav-tooltip::before { |
| content: ""; |
| position: absolute; |
| left: -6px; |
| top: 50%; |
| width: 8px; |
| height: 8px; |
| background: rgba(17, 24, 39, 0.96); |
| border-left: 1px solid #dbe4f0; |
| border-bottom: 1px solid #dbe4f0; |
| transform: translateY(-50%) rotate(45deg); |
| } |
|
|
| .global-filters { |
| display: grid; |
| gap: 12px; |
| padding: 12px 16px 0; |
| border-top: 1px solid var(--outline); |
| } |
|
|
| .drawer-panel { |
| position: fixed; |
| top: 70px; |
| right: 18px; |
| z-index: 1300; |
| width: min(360px, calc(100vw - 24px)); |
| max-height: calc(100vh - 86px); |
| padding: 14px; |
| overflow: auto; |
| border: 1px solid var(--outline); |
| border-radius: 18px; |
| background: rgba(255, 255, 255, 0.98); |
| box-shadow: var(--shadow-md); |
| backdrop-filter: blur(18px); |
| transform: translateY(-12px); |
| opacity: 0; |
| pointer-events: none; |
| transition: transform 0.18s ease, opacity 0.18s ease; |
| } |
|
|
| .drawer-panel.open { |
| transform: translateY(0); |
| opacity: 1; |
| pointer-events: auto; |
| } |
|
|
| .drawer-backdrop { |
| position: fixed; |
| inset: 64px 0 0 240px; |
| z-index: 1250; |
| border: 0; |
| background: rgba(15, 23, 42, 0.18); |
| } |
|
|
| .detail-backdrop { |
| position: fixed; |
| inset: 64px 0 0 240px; |
| z-index: 1340; |
| border: 0; |
| background: rgba(15, 23, 42, 0.14); |
| } |
|
|
| .record-detail-modal { |
| position: fixed; |
| top: 88px; |
| right: 24px; |
| z-index: 1350; |
| width: min(560px, calc(100vw - 288px)); |
| max-height: calc(100vh - 118px); |
| padding: 18px; |
| overflow: auto; |
| border: 1px solid var(--outline); |
| border-radius: 20px; |
| background: rgba(255, 255, 255, 0.98); |
| box-shadow: var(--shadow-md); |
| backdrop-filter: blur(18px); |
| } |
|
|
| .record-detail-head { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 16px; |
| padding-bottom: 12px; |
| border-bottom: 1px solid var(--outline); |
| } |
|
|
| .record-detail-head p { |
| margin: 0 0 4px; |
| color: var(--primary); |
| font-size: 11px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| } |
|
|
| .record-detail-head h4 { |
| margin: 0; |
| font-size: 18px; |
| line-height: 1.3; |
| } |
|
|
| .detail-close-button { |
| border: 1px solid var(--outline); |
| background: var(--surface-low); |
| color: var(--text); |
| border-radius: 999px; |
| padding: 8px 12px; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .record-detail-actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| } |
|
|
| .detail-copy-button { |
| border: 1px solid rgba(37, 99, 235, 0.18); |
| background: rgba(37, 99, 235, 0.08); |
| color: var(--primary); |
| border-radius: 999px; |
| padding: 8px 12px; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .detail-copy-button:disabled { |
| opacity: 0.55; |
| cursor: not-allowed; |
| } |
|
|
| .detail-copy-secondary { |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| color: var(--text); |
| border-radius: 999px; |
| padding: 8px 12px; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .detail-copy-secondary:disabled { |
| opacity: 0.55; |
| cursor: not-allowed; |
| } |
|
|
| .detail-download-button { |
| border: 1px solid rgba(15, 118, 110, 0.18); |
| background: rgba(15, 118, 110, 0.08); |
| color: var(--good); |
| border-radius: 999px; |
| padding: 8px 12px; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .detail-download-button:disabled { |
| opacity: 0.55; |
| cursor: not-allowed; |
| } |
|
|
| .record-detail-searchbar { |
| display: grid; |
| gap: 8px; |
| padding: 10px 0 6px; |
| } |
|
|
| .record-detail-search-row { |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| } |
|
|
| .record-detail-searchbar small { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.01em; |
| } |
|
|
| .record-detail-note { |
| margin-top: 2px; |
| padding-left: 10px; |
| border-left: 3px solid rgba(37, 99, 235, 0.22); |
| color: var(--text); |
| font-size: 12px; |
| font-weight: 700; |
| line-height: 1.4; |
| } |
|
|
| .record-detail-search { |
| width: 100%; |
| border: 1px solid var(--outline); |
| border-radius: 12px; |
| padding: 10px 12px; |
| background: var(--surface); |
| color: var(--text); |
| font-size: 13px; |
| } |
|
|
| .record-detail-search:focus { |
| outline: 2px solid rgba(37, 99, 235, 0.28); |
| outline-offset: 0; |
| } |
|
|
| .detail-clear-button { |
| border: 1px solid var(--outline); |
| background: var(--surface-low); |
| color: var(--muted); |
| border-radius: 999px; |
| padding: 10px 12px; |
| font-size: 12px; |
| font-weight: 800; |
| white-space: nowrap; |
| } |
|
|
| .detail-clear-button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| .record-detail-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin: 14px 0 12px; |
| } |
|
|
| .record-detail-meta span { |
| display: inline-flex; |
| align-items: center; |
| min-height: 30px; |
| padding: 6px 10px; |
| border: 1px solid var(--outline); |
| border-radius: 999px; |
| background: var(--surface-low); |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .record-detail-body { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .record-detail-list { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .record-detail-list li { |
| padding: 10px 12px; |
| border: 1px solid var(--outline); |
| border-radius: 14px; |
| background: var(--surface-low); |
| color: var(--text); |
| font-size: 13px; |
| line-height: 1.5; |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .record-address-head { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 10px; |
| } |
|
|
| .record-address-head strong { |
| font-size: 13px; |
| line-height: 1.5; |
| font-weight: 800; |
| } |
|
|
| .record-address-index { |
| display: inline-grid; |
| place-items: center; |
| min-width: 22px; |
| height: 22px; |
| margin-right: 8px; |
| border-radius: 999px; |
| background: rgba(37, 99, 235, 0.12); |
| color: var(--primary); |
| font-size: 11px; |
| font-weight: 900; |
| vertical-align: middle; |
| } |
|
|
| .record-address-pill { |
| flex: none; |
| padding: 4px 8px; |
| border-radius: 999px; |
| background: rgba(37, 99, 235, 0.08); |
| color: var(--primary); |
| font-size: 11px; |
| font-weight: 800; |
| white-space: nowrap; |
| } |
|
|
| .record-address-foot { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| color: var(--muted); |
| font-size: 11px; |
| } |
|
|
| .record-address-foot span { |
| padding: 3px 8px; |
| border-radius: 999px; |
| background: rgba(15, 118, 110, 0.08); |
| color: var(--good); |
| font-weight: 700; |
| } |
|
|
| .record-address-foot small { |
| flex-basis: 100%; |
| color: var(--muted); |
| font-size: 11px; |
| line-height: 1.4; |
| } |
|
|
| .report-grid { |
| align-items: start; |
| } |
|
|
| @media print { |
| @page { |
| size: A4; |
| margin: 12mm; |
| } |
|
|
| html, |
| body { |
| background: #fff !important; |
| } |
|
|
| .side-nav, |
| .top-appbar, |
| .app-footer, |
| .drawer-panel, |
| .drawer-backdrop, |
| .detail-backdrop, |
| .nav-tooltip, |
| .panel-hint-tooltip, |
| .no-print { |
| display: none !important; |
| } |
|
|
| .enterprise-shell { |
| display: block; |
| min-height: auto; |
| } |
|
|
| .page-canvas { |
| grid-column: auto; |
| padding: 0 !important; |
| max-width: none; |
| width: 100%; |
| } |
|
|
| .page-content { |
| gap: 12px; |
| } |
|
|
| .page-header { |
| margin-bottom: 14px; |
| break-after: avoid; |
| } |
|
|
| .page-header h2 { |
| font-size: 24px; |
| line-height: 1.2; |
| } |
|
|
| .report-cover, |
| .panel { |
| break-inside: avoid; |
| box-shadow: none !important; |
| } |
|
|
| .report-cover-main, |
| .report-cover-stats, |
| .panel { |
| background: #fff !important; |
| } |
|
|
| .grid-12 { |
| gap: 12px; |
| } |
|
|
| .span-6, |
| .span-12 { |
| grid-column: span 12; |
| } |
|
|
| .report-toolbar { |
| margin-bottom: 12px; |
| box-shadow: none; |
| } |
|
|
| .report-cover { |
| grid-template-columns: 1.25fr 0.75fr; |
| } |
|
|
| .report-cover-main h3 { |
| font-size: 24px; |
| } |
|
|
| .report-cover-stats strong { |
| font-size: 15px; |
| } |
| } |
|
|
| .record-detail-empty { |
| margin: 0; |
| color: var(--muted); |
| font-size: 14px; |
| line-height: 1.6; |
| } |
|
|
| .record-link { |
| border: 0; |
| padding: 0; |
| background: transparent; |
| color: var(--primary-strong); |
| font-weight: 800; |
| text-decoration: underline dotted; |
| text-underline-offset: 3px; |
| } |
|
|
| .record-link:hover { |
| color: var(--primary); |
| } |
|
|
| .record-link:focus-visible { |
| outline: 2px solid rgba(37, 99, 235, 0.35); |
| outline-offset: 2px; |
| border-radius: 6px; |
| } |
|
|
| .filter-controls { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .filter-caption { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .filter-caption-actions { |
| display: flex; |
| gap: 6px; |
| } |
|
|
| .filter-caption button { |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| color: var(--primary); |
| border-radius: 6px; |
| padding: 4px 8px; |
| font-size: 12px; |
| font-weight: 700; |
| text-transform: none; |
| letter-spacing: 0; |
| } |
|
|
| .filter-summary { |
| display: grid; |
| gap: 7px; |
| padding: 9px; |
| border: 1px solid var(--outline); |
| border-radius: 8px; |
| background: var(--surface-low); |
| } |
|
|
| .filter-summary strong { |
| color: var(--text); |
| font-size: 13px; |
| } |
|
|
| .filter-chip-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| } |
|
|
| .filter-chip { |
| border: 1px solid rgba(37, 99, 235, 0.14); |
| background: rgba(37, 99, 235, 0.08); |
| color: var(--primary); |
| border-radius: 999px; |
| padding: 4px 8px; |
| font-size: 10px; |
| font-weight: 700; |
| } |
|
|
| .filter-chip.more, |
| .filter-chip.muted { |
| border-color: var(--outline); |
| background: var(--surface); |
| color: var(--muted); |
| } |
|
|
| .global-filters label, |
| .control-stack label { |
| display: grid; |
| gap: 7px; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .global-filters select, |
| .global-filters input { |
| width: 100%; |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| border-radius: 6px; |
| padding: 10px 11px; |
| color: var(--text); |
| } |
|
|
| .global-filters select:focus, |
| .global-filters input:focus { |
| outline: 2px solid var(--primary-strong); |
| outline-offset: 0; |
| } |
|
|
| .global-filters select[multiple] { |
| min-height: 132px; |
| padding: 6px; |
| } |
|
|
| .global-filters small { |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .district-picker-actions { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .district-picker-actions button { |
| flex: 1; |
| border: 1px solid var(--outline); |
| background: var(--surface-low); |
| color: var(--primary); |
| border-radius: 6px; |
| padding: 7px 8px; |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .district-checklist { |
| max-height: 104px; |
| overflow: auto; |
| display: grid; |
| gap: 6px; |
| padding: 8px; |
| border: 1px solid var(--outline); |
| border-radius: 8px; |
| background: var(--surface-low); |
| } |
|
|
| .district-option { |
| display: flex !important; |
| align-items: center; |
| gap: 8px !important; |
| padding: 4px 2px; |
| color: var(--text) !important; |
| font-size: 12px !important; |
| } |
|
|
| .district-option input { |
| width: 16px; |
| height: 16px; |
| margin: 0; |
| } |
|
|
| .district-empty { |
| margin: 0; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .top-appbar { |
| position: fixed; |
| left: 240px; |
| right: 0; |
| top: 0; |
| z-index: 1400; |
| height: 64px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| padding: 0 28px; |
| background: var(--surface); |
| border-bottom: 1px solid var(--outline); |
| box-shadow: var(--shadow); |
| } |
|
|
| .crumb, |
| .top-actions { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--muted); |
| } |
|
|
| .top-appbar-left { |
| display: grid; |
| gap: 2px; |
| min-width: 0; |
| } |
|
|
| .crumb span:last-child { |
| font-size: 12px; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| font-weight: 800; |
| } |
|
|
| .filter-status-line { |
| color: var(--muted); |
| font-size: 11px; |
| line-height: 1.4; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .filter-status-row { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| min-width: 0; |
| } |
|
|
| .clear-filters-btn { |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| color: var(--primary); |
| border-radius: 999px; |
| padding: 4px 10px; |
| font-size: 12px; |
| font-weight: 700; |
| white-space: nowrap; |
| } |
|
|
| .filter-drawer-trigger { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| color: var(--primary); |
| border-radius: 999px; |
| padding: 5px 11px; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .top-appbar > strong { |
| position: absolute; |
| left: 50%; |
| transform: translateX(-50%); |
| font-size: 18px; |
| } |
|
|
| .live-pill, |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| border-radius: 999px; |
| padding: 4px 8px; |
| background: #eef2ff; |
| color: var(--primary); |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .live-pill.online, |
| .badge.good, |
| .badge.low { |
| background: #dcfce7; |
| color: #166534; |
| } |
|
|
| .badge.medium { |
| background: #fef3c7; |
| color: #92400e; |
| } |
|
|
| .badge.loading { |
| background: #e0f2fe; |
| color: #075985; |
| } |
|
|
| .badge.high { |
| background: #fee2e2; |
| color: #991b1b; |
| } |
|
|
| .page-canvas { |
| grid-column: 2; |
| min-width: 0; |
| padding: 96px 32px 40px; |
| max-width: 1440px; |
| width: 100%; |
| position: relative; |
| z-index: 0; |
| } |
|
|
| .page-content { |
| display: grid; |
| gap: 16px; |
| } |
|
|
| .page-header { |
| display: grid; |
| gap: 5px; |
| margin-bottom: 24px; |
| } |
|
|
| .page-header p { |
| margin: 0; |
| color: var(--primary); |
| font-size: 12px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .page-header h2 { |
| margin: 0; |
| font-size: 32px; |
| line-height: 40px; |
| letter-spacing: 0; |
| } |
|
|
| .page-header span, |
| .muted, |
| .model-note { |
| color: var(--muted); |
| } |
|
|
| .report-toolbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| margin: 0 0 18px; |
| padding: 16px 18px; |
| border: 1px solid var(--outline); |
| border-radius: 18px; |
| background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); |
| box-shadow: var(--shadow); |
| } |
|
|
| .report-toolbar strong { |
| display: block; |
| color: var(--primary); |
| font-size: 14px; |
| font-weight: 900; |
| letter-spacing: 0.02em; |
| } |
|
|
| .report-toolbar span { |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .report-cover { |
| display: grid; |
| grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr); |
| gap: 16px; |
| margin-bottom: 18px; |
| } |
|
|
| .report-cover-main, |
| .report-cover-stats { |
| border: 1px solid var(--outline); |
| border-radius: 20px; |
| background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); |
| box-shadow: var(--shadow); |
| } |
|
|
| .report-cover-main { |
| padding: 22px; |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .report-cover-main span { |
| color: var(--primary); |
| font-size: 11px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.09em; |
| } |
|
|
| .report-cover-main h3 { |
| margin: 0; |
| font-size: 28px; |
| line-height: 1.1; |
| } |
|
|
| .report-cover-main p { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.6; |
| } |
|
|
| .report-cover-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .report-cover-meta span { |
| display: inline-flex; |
| align-items: center; |
| min-height: 30px; |
| padding: 6px 10px; |
| border-radius: 999px; |
| background: rgba(37, 99, 235, 0.08); |
| color: var(--primary); |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .report-cover-stats { |
| padding: 18px; |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .report-cover-stats article { |
| display: grid; |
| gap: 4px; |
| padding: 12px 14px; |
| border: 1px solid var(--outline); |
| border-radius: 16px; |
| background: var(--surface); |
| } |
|
|
| .report-cover-stats span { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .report-cover-stats strong { |
| font-size: 17px; |
| color: var(--text); |
| } |
|
|
| .section-tabs { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin: 0 0 16px; |
| } |
|
|
| .section-tabs button { |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| color: var(--muted); |
| border-radius: 999px; |
| padding: 8px 12px; |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .section-tabs button.active { |
| background: rgba(37, 99, 235, 0.1); |
| color: var(--primary); |
| border-color: rgba(37, 99, 235, 0.25); |
| } |
|
|
| .insight-hero { |
| display: grid; |
| gap: 10px; |
| margin-bottom: 16px; |
| padding: 18px 20px; |
| border: 1px solid #dbeafe; |
| border-left: 4px solid var(--primary-strong); |
| border-radius: 8px; |
| background: #eff6ff; |
| } |
|
|
| .insight-hero strong { |
| display: block; |
| margin-bottom: 6px; |
| font-size: 18px; |
| } |
|
|
| .insight-hero p, |
| .insight-hero small { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.6; |
| } |
|
|
| .insight-hero.tone-good { |
| background: #ecfeff; |
| border-color: #bae6fd; |
| } |
|
|
| .grid-12 { |
| display: grid; |
| grid-template-columns: repeat(12, minmax(0, 1fr)); |
| gap: 16px; |
| } |
|
|
| .span-3 { grid-column: span 3; } |
| .span-4 { grid-column: span 4; } |
| .span-5 { grid-column: span 5; } |
| .span-6 { grid-column: span 6; } |
| .span-7 { grid-column: span 7; } |
| .span-8 { grid-column: span 8; } |
| .span-12 { grid-column: span 12; } |
|
|
| .panel, |
| .kpi-card { |
| background: var(--surface); |
| border: 1px solid var(--outline); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .panel { |
| min-width: 0; |
| padding: 18px; |
| position: relative; |
| z-index: 0; |
| } |
|
|
| .panel-head { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| margin-bottom: 14px; |
| } |
|
|
| .panel-title-wrap { |
| position: relative; |
| min-width: 0; |
| display: grid; |
| gap: 3px; |
| } |
|
|
| .panel h3 { |
| margin: 0; |
| font-size: 18px; |
| line-height: 24px; |
| } |
|
|
| .panel-title-wrap h3 { |
| outline: none; |
| } |
|
|
| .panel-title-wrap:hover .panel-hint-tooltip, |
| .panel-title-wrap:focus-within .panel-hint-tooltip { |
| opacity: 1; |
| transform: translateY(0); |
| } |
|
|
| .panel-hint-tooltip { |
| display: block; |
| max-width: 360px; |
| padding-left: 10px; |
| border-left: 3px solid var(--primary-strong); |
| color: #0f172a; |
| font-size: 12px; |
| line-height: 1.45; |
| font-weight: 600; |
| opacity: 0; |
| transform: translateY(-1px); |
| transition: opacity 0.14s ease, transform 0.14s ease; |
| pointer-events: none; |
| white-space: normal; |
| text-wrap: pretty; |
| } |
|
|
| .panel-note { |
| margin: 12px 0 0; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .panel-note.prominent { |
| margin-top: 14px; |
| color: var(--text); |
| font-size: 15px; |
| font-weight: 600; |
| line-height: 1.7; |
| } |
|
|
| .kpi-grid { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 16px; |
| margin-bottom: 16px; |
| } |
|
|
| .kpi-grid.compact { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| margin: 0; |
| } |
|
|
| .kpi-card { |
| padding: 16px; |
| transition: box-shadow 0.16s ease, transform 0.16s ease; |
| } |
|
|
| .kpi-card:hover { |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .kpi-head { |
| display: flex; |
| justify-content: space-between; |
| gap: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| margin-bottom: 10px; |
| } |
|
|
| .kpi-card strong { |
| display: block; |
| font-family: "JetBrains Mono", monospace; |
| font-size: 26px; |
| line-height: 32px; |
| } |
|
|
| .kpi-card small { |
| display: flex; |
| margin-top: 8px; |
| color: var(--good); |
| font-family: "JetBrains Mono", monospace; |
| font-size: 12px; |
| } |
|
|
| .recommendation-panel > :last-child { |
| display: flex; |
| gap: 14px; |
| align-items: flex-start; |
| border-left: 4px solid var(--primary-strong); |
| background: #eff6ff; |
| } |
|
|
| .recommendation-panel .material-symbols-outlined { |
| color: var(--primary-strong); |
| } |
|
|
| .recommendation-panel p { |
| margin: 6px 0 0; |
| color: var(--muted); |
| } |
|
|
| .table-wrap { |
| overflow: auto; |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| min-width: 760px; |
| } |
|
|
| th, |
| td { |
| padding: 10px 12px; |
| border-bottom: 1px solid #edf1f6; |
| text-align: left; |
| font-size: 13px; |
| } |
|
|
| th { |
| position: sticky; |
| top: 0; |
| z-index: 1; |
| background: #f8fafc; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| font-size: 11px; |
| } |
|
|
| tr:hover td { |
| background: #f8fafc; |
| } |
|
|
| .score-cell { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| min-width: 120px; |
| } |
|
|
| .score-cell span { |
| width: 76px; |
| height: 8px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: #e2e8f0; |
| } |
|
|
| .score-cell i { |
| display: block; |
| height: 100%; |
| background: var(--good); |
| } |
|
|
| .control-stack { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .control-stack input, |
| .control-stack select, |
| .chat-box textarea { |
| width: 100%; |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| border-radius: 6px; |
| padding: 10px 11px; |
| color: var(--text); |
| } |
|
|
| .control-stack input:focus, |
| .control-stack select:focus, |
| .chat-box textarea:focus { |
| outline: 2px solid var(--primary-strong); |
| outline-offset: 0; |
| } |
|
|
| .primary-btn { |
| border: 0; |
| background: var(--primary); |
| color: #fff; |
| border-radius: 6px; |
| padding: 11px 14px; |
| font-weight: 800; |
| } |
|
|
| .primary-btn.small { |
| padding: 8px 11px; |
| } |
|
|
| .result-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .model-note { |
| margin: 14px 0 0; |
| padding-top: 12px; |
| border-top: 1px solid var(--outline); |
| font-size: 13px; |
| } |
|
|
| .map-panel-host .panel-head { |
| margin-bottom: 8px; |
| } |
|
|
| .map-panel-host { |
| display: flex; |
| flex-direction: column; |
| min-height: 100%; |
| } |
|
|
| .map-filter-bar { |
| display: grid; |
| grid-template-columns: 1.1fr 1fr 1fr auto; |
| gap: 10px; |
| align-items: end; |
| margin-bottom: 12px; |
| } |
|
|
| .map-filter-bar label { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .map-filter-bar span { |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .map-filter-bar select { |
| min-height: 38px; |
| border-radius: 8px; |
| border: 1px solid var(--outline); |
| background: #fff; |
| color: var(--text); |
| padding: 0 10px; |
| } |
|
|
| .map-filter-bar input[type="range"] { |
| width: 100%; |
| } |
|
|
| .map-filter-reset { |
| align-self: stretch; |
| white-space: nowrap; |
| } |
|
|
| .leaflet-panel { |
| position: relative; |
| z-index: 0; |
| height: 640px; |
| width: 100%; |
| border-radius: 8px; |
| overflow: hidden; |
| } |
|
|
| .map-panel-host .leaflet-panel { |
| height: 820px; |
| } |
|
|
| .map-list, |
| .source-list, |
| .method-list, |
| .system-grid { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .risk-card, |
| .source-card, |
| .system-grid article { |
| display: grid; |
| gap: 6px; |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| padding: 12px; |
| color: inherit; |
| text-decoration: none; |
| background: #fff; |
| } |
|
|
| .risk-card div { |
| display: flex; |
| justify-content: space-between; |
| gap: 10px; |
| } |
|
|
| .risk-card p, |
| .source-card span, |
| .system-grid p, |
| .panel p { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.5; |
| } |
|
|
| .app-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| margin-top: 28px; |
| padding: 16px 18px; |
| border-top: 1px solid #dbe4f0; |
| background: #fff; |
| box-shadow: none; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .app-footer::before { |
| content: ""; |
| position: absolute; |
| inset: 0 auto auto 0; |
| width: 100%; |
| height: 3px; |
| background: linear-gradient(90deg, var(--primary-strong), var(--good), #d97706); |
| } |
|
|
| .app-footer-brand { |
| display: grid; |
| gap: 2px; |
| align-content: start; |
| } |
|
|
| .app-footer-brand strong { |
| font-size: 14px; |
| color: var(--primary); |
| } |
|
|
| .app-footer-brand span { |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .app-footer-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| align-items: center; |
| color: var(--muted); |
| font-size: 11px; |
| justify-content: flex-end; |
| } |
|
|
| .app-footer-meta span { |
| padding: 0 8px; |
| position: relative; |
| white-space: nowrap; |
| } |
|
|
| .app-footer-meta span:not(:last-child)::after { |
| content: ""; |
| position: absolute; |
| right: -1px; |
| top: 50%; |
| width: 1px; |
| height: 11px; |
| transform: translateY(-50%); |
| background: #dbe4f0; |
| } |
|
|
| .source-card small, |
| .risk-card small { |
| color: #64748b; |
| } |
|
|
| .chat-box { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .chat-box textarea { |
| min-height: 150px; |
| resize: vertical; |
| } |
|
|
| .prompt-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .prompt-row button { |
| border: 1px solid var(--outline); |
| background: var(--surface-low); |
| color: var(--muted); |
| border-radius: 999px; |
| padding: 7px 10px; |
| font-size: 12px; |
| } |
|
|
| .assistant-action-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
|
|
| .secondary-btn { |
| border: 1px solid var(--outline); |
| background: var(--surface); |
| color: var(--muted); |
| border-radius: 6px; |
| padding: 11px 14px; |
| font-weight: 800; |
| } |
|
|
| .secondary-btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| .answer-panel { |
| margin-top: 16px; |
| border-left: 4px solid var(--good); |
| background: #f0fdfa; |
| border-radius: 8px; |
| padding: 14px; |
| } |
|
|
| .assistant-streaming { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 12px; |
| align-items: center; |
| margin-top: 8px; |
| padding: 12px 14px; |
| border: 1px solid #bae6fd; |
| border-radius: 8px; |
| background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%); |
| } |
|
|
| .assistant-streaming strong { |
| display: block; |
| color: var(--text); |
| font-size: 14px; |
| } |
|
|
| .assistant-streaming p { |
| margin: 4px 0 0; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .generation-badge { |
| display: inline-flex; |
| width: fit-content; |
| align-items: center; |
| gap: 6px; |
| margin: 8px 0 10px; |
| padding: 5px 10px; |
| border-radius: 999px; |
| background: rgba(37, 99, 235, 0.1); |
| color: var(--primary); |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .generation-badge::before { |
| content: ""; |
| width: 7px; |
| height: 7px; |
| border-radius: 999px; |
| background: currentColor; |
| animation: dot-bounce 1.2s infinite ease-in-out; |
| } |
|
|
| .streaming-dots { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| min-width: 42px; |
| } |
|
|
| .streaming-dots i { |
| width: 8px; |
| height: 8px; |
| border-radius: 999px; |
| background: var(--primary-strong); |
| animation: dot-bounce 1.2s infinite ease-in-out; |
| } |
|
|
| .streaming-dots i:nth-child(2) { |
| animation-delay: 0.16s; |
| } |
|
|
| .streaming-dots i:nth-child(3) { |
| animation-delay: 0.32s; |
| } |
|
|
| .disclosure { |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| background: #fff; |
| } |
|
|
| .disclosure.compact { |
| margin-top: 8px; |
| } |
|
|
| .disclosure summary { |
| list-style: none; |
| cursor: pointer; |
| padding: 12px 14px; |
| font-weight: 800; |
| color: var(--text); |
| } |
|
|
| .disclosure summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .disclosure summary::after { |
| content: "+"; |
| float: right; |
| color: var(--primary); |
| } |
|
|
| .disclosure[open] summary::after { |
| content: "-"; |
| } |
|
|
| .disclosure-body { |
| padding: 0 14px 14px; |
| } |
|
|
| .markdown-body p { |
| margin: 0 0 10px; |
| line-height: 1.65; |
| } |
|
|
| .markdown-body h1, |
| .markdown-body h2, |
| .markdown-body h3 { |
| margin: 0 0 8px; |
| line-height: 1.3; |
| color: var(--text); |
| } |
|
|
| .markdown-body h1 { |
| font-size: 18px; |
| } |
|
|
| .markdown-body h2 { |
| font-size: 16px; |
| } |
|
|
| .markdown-body h3 { |
| font-size: 15px; |
| } |
|
|
| .markdown-body strong { |
| font-weight: 900; |
| color: var(--text); |
| } |
|
|
| .markdown-body ul { |
| margin: 8px 0 10px; |
| padding-left: 20px; |
| } |
|
|
| .markdown-body ol { |
| margin: 8px 0 10px; |
| padding-left: 20px; |
| } |
|
|
| .markdown-body li { |
| margin: 4px 0; |
| color: var(--muted); |
| } |
|
|
| .markdown-body li::marker { |
| color: var(--primary); |
| font-weight: 700; |
| } |
|
|
| .structured-response { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .structured-response-card { |
| display: grid; |
| gap: 8px; |
| padding: 12px 14px; |
| border-radius: 12px; |
| border: 1px solid rgba(37, 99, 235, 0.14); |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.72)); |
| } |
|
|
| .structured-response-card > strong { |
| color: #0f172a; |
| font-size: 15px; |
| line-height: 1.25; |
| } |
|
|
| .structured-response-card .markdown-body { |
| color: var(--muted); |
| } |
|
|
| .structured-response-card .markdown-body p:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .chart-caption-block { |
| display: grid; |
| gap: 4px; |
| margin-top: 10px; |
| padding: 10px 12px; |
| border-radius: 10px; |
| background: #f8fafc; |
| border: 1px solid rgba(148, 163, 184, 0.18); |
| } |
|
|
| .chart-caption-block strong { |
| font-size: 14px; |
| color: var(--text); |
| } |
|
|
| .chart-caption-block p { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.55; |
| } |
|
|
| .chart-caption-block small { |
| color: #64748b; |
| } |
|
|
| .simulation-status { |
| display: grid; |
| gap: 8px; |
| margin-top: 4px; |
| } |
|
|
| .simulation-status.ready .simulation-progress i { |
| width: 100%; |
| } |
|
|
| .simulation-progress { |
| position: relative; |
| height: 6px; |
| border-radius: 999px; |
| background: #e2e8f0; |
| overflow: hidden; |
| } |
|
|
| .simulation-progress i { |
| position: relative; |
| display: block; |
| height: 100%; |
| width: 28%; |
| border-radius: inherit; |
| background: linear-gradient(90deg, #2563eb, #0f766e); |
| transition: width 220ms ease; |
| } |
|
|
| .simulation-status.loading .simulation-progress { |
| background: linear-gradient(90deg, #dbeafe, #e2e8f0, #dbeafe); |
| background-size: 200% 100%; |
| animation: progress-track 1.8s linear infinite; |
| } |
|
|
| .simulation-status.loading .simulation-progress i { |
| width: 62%; |
| background-size: 220% 100%; |
| background-image: linear-gradient(90deg, #2563eb 0%, #0f766e 46%, #38bdf8 72%, #2563eb 100%); |
| animation: simulation-shimmer 1.1s linear infinite; |
| } |
|
|
| .simulation-status.loading .simulation-progress i::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%); |
| transform: translateX(-70%) skewX(-18deg); |
| animation: simulation-sweep 1.15s ease-in-out infinite; |
| mix-blend-mode: screen; |
| } |
|
|
| @keyframes simulation-shimmer { |
| 0% { background-position: 0% 0; opacity: 0.82; } |
| 50% { opacity: 1; } |
| 100% { background-position: 200% 0; opacity: 0.86; } |
| } |
|
|
| @keyframes progress-track { |
| 0% { background-position: 0% 0; } |
| 100% { background-position: 200% 0; } |
| } |
|
|
| @keyframes simulation-sweep { |
| 0% { transform: translateX(-90%) skewX(-18deg); opacity: 0; } |
| 15% { opacity: 0.9; } |
| 60% { opacity: 0.55; } |
| 100% { transform: translateX(220%) skewX(-18deg); opacity: 0; } |
| } |
|
|
| .simulation-streaming { |
| margin-top: 12px; |
| } |
|
|
| .result-skeleton { |
| display: grid; |
| gap: 12px; |
| margin-top: 10px; |
| } |
|
|
| .skeleton-line, |
| .skeleton-card { |
| position: relative; |
| overflow: hidden; |
| border-radius: 10px; |
| background: #e2e8f0; |
| } |
|
|
| .skeleton-line { |
| height: 16px; |
| } |
|
|
| .skeleton-line.skeleton-lg { |
| height: 24px; |
| width: 72%; |
| } |
|
|
| .skeleton-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .skeleton-card { |
| height: 68px; |
| } |
|
|
| .skeleton-line::after, |
| .skeleton-card::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent); |
| transform: translateX(-100%); |
| animation: skeleton-shimmer 1.2s infinite; |
| } |
|
|
| @keyframes skeleton-shimmer { |
| 100% { transform: translateX(100%); } |
| } |
|
|
| .map-legend { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 8px; |
| margin-bottom: 14px; |
| padding: 12px; |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| background: #f8fafc; |
| } |
|
|
| .map-legend span { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .map-legend small { |
| color: #64748b; |
| } |
|
|
| .dot { |
| width: 11px; |
| height: 11px; |
| border-radius: 999px; |
| display: inline-block; |
| } |
|
|
| .dot.low { |
| background: var(--good); |
| } |
|
|
| .dot.medium { |
| background: var(--warning); |
| } |
|
|
| .dot.high { |
| background: var(--danger); |
| } |
|
|
| .meta-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| margin-bottom: 10px; |
| } |
|
|
| .meta-row span { |
| border: 1px solid #99f6e4; |
| border-radius: 999px; |
| background: #fff; |
| color: #115e59; |
| padding: 4px 8px; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .memo-list { |
| margin: 0; |
| padding-left: 18px; |
| color: var(--muted); |
| line-height: 1.8; |
| } |
|
|
| .insight-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .insight-grid.single { |
| grid-template-columns: 1fr; |
| margin-top: 16px; |
| } |
|
|
| .insight-grid div { |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| padding: 12px; |
| background: #fff; |
| } |
|
|
| .insight-grid strong { |
| display: block; |
| margin-bottom: 6px; |
| } |
|
|
| .insight-grid p { |
| margin: 0; |
| color: var(--muted); |
| } |
|
|
| .trend-snapshot-grid { |
| display: grid; |
| grid-template-columns: repeat(6, minmax(0, 1fr)); |
| gap: 10px; |
| margin-top: 14px; |
| } |
|
|
| .trend-snapshot { |
| display: grid; |
| gap: 4px; |
| padding: 10px 12px; |
| border-radius: 12px; |
| border: 1px solid rgba(148, 163, 184, 0.22); |
| background: linear-gradient(180deg, #ffffff, #f8fafc); |
| } |
|
|
| .trend-snapshot.current { |
| border-color: rgba(37, 99, 235, 0.28); |
| background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), #ffffff); |
| } |
|
|
| .trend-snapshot.target { |
| border-color: rgba(15, 118, 110, 0.22); |
| } |
|
|
| .trend-snapshot span { |
| color: #64748b; |
| font-size: 11px; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .trend-snapshot strong { |
| color: var(--text); |
| font-size: 17px; |
| line-height: 1.15; |
| } |
|
|
| .trend-snapshot small { |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .scenario-recommendation { |
| display: grid; |
| gap: 8px; |
| padding: 14px; |
| border-radius: 8px; |
| border: 1px solid var(--outline); |
| background: #f8fafc; |
| } |
|
|
| .recommendation-section { |
| display: grid; |
| gap: 6px; |
| padding: 10px 12px; |
| border-radius: 10px; |
| background: rgba(255, 255, 255, 0.72); |
| border: 1px solid rgba(195, 198, 215, 0.8); |
| } |
|
|
| .recommendation-section > span { |
| font-size: 12px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| color: var(--primary); |
| } |
|
|
| .recommendation-section .markdown-body p { |
| margin: 0; |
| line-height: 1.6; |
| } |
|
|
| .scenario-bullet-list { |
| margin: 0; |
| padding-left: 18px; |
| color: var(--muted); |
| } |
|
|
| .scenario-recommendation strong { |
| color: var(--text); |
| } |
|
|
| .scenario-recommendation-head { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .scenario-badge { |
| margin: 0; |
| padding: 6px 10px; |
| } |
|
|
| .scenario-processing { |
| display: grid; |
| gap: 10px; |
| padding: 12px; |
| border-radius: 12px; |
| background: rgba(37, 99, 235, 0.06); |
| border: 1px dashed rgba(37, 99, 235, 0.18); |
| } |
|
|
| .scenario-processing p { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.5; |
| } |
|
|
| .scenario-recommendation small { |
| color: #64748b; |
| } |
|
|
| .scenario-recommendation.tone-good { |
| background: #ecfeff; |
| border-color: #bae6fd; |
| } |
|
|
| .scenario-recommendation.tone-warn { |
| background: #fff7ed; |
| border-color: #fdba74; |
| } |
|
|
| .scenario-recommendation.tone-neutral { |
| background: #f8fafc; |
| } |
|
|
| .brief-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .brief-grid.compact { |
| grid-template-columns: 1fr; |
| } |
|
|
| .brief-card { |
| display: grid; |
| gap: 8px; |
| padding: 14px; |
| border: 1px solid #e2e8f0; |
| border-radius: 10px; |
| background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); |
| } |
|
|
| .brief-head { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .brief-tag { |
| width: fit-content; |
| border-radius: 999px; |
| background: rgba(37, 99, 235, 0.1); |
| color: var(--primary); |
| padding: 4px 8px; |
| font-size: 11px; |
| font-weight: 800; |
| } |
|
|
| .brief-card strong { |
| font-size: 15px; |
| line-height: 1.4; |
| } |
|
|
| .brief-card p, |
| .brief-card small { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.6; |
| } |
|
|
| .brief-card small b { |
| color: var(--text); |
| } |
|
|
| .panel-hint { |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .status-strip { |
| display: grid; |
| gap: 4px; |
| margin: 0 0 16px; |
| padding: 12px 14px; |
| border: 1px solid #dbeafe; |
| border-radius: 10px; |
| background: #eff6ff; |
| } |
|
|
| .status-strip-label { |
| color: var(--primary); |
| font-size: 11px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .status-strip strong { |
| font-size: 16px; |
| } |
|
|
| .status-strip small { |
| color: var(--muted); |
| } |
|
|
| .report-meta-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| margin-top: 12px; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .report-meta-row span { |
| padding: 6px 10px; |
| border: 1px solid var(--outline); |
| border-radius: 999px; |
| background: var(--surface-low); |
| } |
|
|
| .map-footer-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); |
| gap: 10px; |
| margin-top: 12px; |
| } |
|
|
| .map-fact-card { |
| display: grid; |
| gap: 4px; |
| padding: 10px 12px; |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| background: #f8fafc; |
| } |
|
|
| .map-fact-card span { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .map-fact-card strong { |
| font-size: 14px; |
| } |
|
|
| .map-fact-card small { |
| color: var(--muted); |
| line-height: 1.4; |
| } |
|
|
| .map-panel-host > .leaflet-panel { |
| flex: 1 1 auto; |
| min-height: 720px; |
| height: auto; |
| } |
|
|
| .map-side-stack { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .map-executive-card { |
| display: grid; |
| gap: 4px; |
| padding: 12px 14px; |
| border: 1px solid #dbe4f0; |
| border-radius: 12px; |
| background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); |
| } |
|
|
| .map-executive-card span { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .map-executive-card strong { |
| font-size: 17px; |
| } |
|
|
| .map-executive-card small { |
| color: var(--muted); |
| line-height: 1.45; |
| } |
|
|
| .map-legend { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .map-legend span { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .map-legend small { |
| color: var(--muted); |
| } |
|
|
| .map-metrics-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .map-metric-card { |
| display: grid; |
| gap: 4px; |
| padding: 10px 12px; |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); |
| } |
|
|
| .map-metric-card span, |
| .map-subsection-title { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .map-metric-card strong { |
| font-size: 15px; |
| } |
|
|
| .map-subsection { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .map-list.compact { |
| gap: 8px; |
| } |
|
|
| .risk-card.compact { |
| padding: 10px; |
| } |
|
|
| .risk-card.compact p { |
| font-size: 13px; |
| } |
|
|
| .map-empty-state { |
| margin: 0; |
| padding: 10px 12px; |
| border: 1px dashed var(--outline); |
| border-radius: 8px; |
| color: var(--muted); |
| background: #fff; |
| } |
|
|
| .ai-source-panel { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .boot, |
| .boot-error { |
| min-height: 100vh; |
| display: grid; |
| place-items: center; |
| padding: 24px; |
| font-size: 18px; |
| } |
|
|
| .boot-error { |
| color: var(--danger); |
| } |
|
|
| @keyframes dot-bounce { |
| 0%, 80%, 100% { |
| transform: translateY(0); |
| opacity: 0.35; |
| } |
| 40% { |
| transform: translateY(-4px); |
| opacity: 1; |
| } |
| } |
|
|
| @media (max-width: 1180px) { |
| .enterprise-shell { |
| display: block; |
| } |
|
|
| .side-nav { |
| position: relative; |
| width: 100%; |
| height: auto; |
| inset: auto; |
| } |
|
|
| .top-appbar { |
| position: sticky; |
| left: 0; |
| width: 100%; |
| } |
|
|
| .drawer-backdrop { |
| inset: 64px 0 0; |
| } |
|
|
| .detail-backdrop { |
| inset: 64px 0 0; |
| } |
|
|
| .record-detail-modal { |
| top: 76px; |
| right: 12px; |
| width: calc(100vw - 24px); |
| max-height: calc(100vh - 92px); |
| } |
|
|
| .page-canvas { |
| padding: 24px; |
| } |
|
|
| .span-3, |
| .span-4, |
| .span-5, |
| .span-6, |
| .span-7, |
| .span-8, |
| .span-12 { |
| grid-column: span 12; |
| } |
|
|
| .kpi-grid, |
| .kpi-grid.compact, |
| .result-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .section-tabs { |
| overflow: auto; |
| padding-bottom: 2px; |
| } |
| } |
|
|
| @media (max-width: 680px) { |
| .top-appbar > strong, |
| .crumb { |
| display: none; |
| } |
|
|
| .top-appbar { |
| justify-content: flex-end; |
| padding: 0 16px; |
| } |
|
|
| .drawer-panel { |
| top: 72px; |
| right: 12px; |
| width: calc(100vw - 24px); |
| max-height: calc(100vh - 84px); |
| } |
|
|
| .record-detail-modal { |
| top: 68px; |
| right: 12px; |
| width: calc(100vw - 24px); |
| max-height: calc(100vh - 84px); |
| padding: 14px; |
| border-radius: 16px; |
| } |
|
|
| .record-detail-head { |
| gap: 12px; |
| } |
|
|
| .record-detail-head h4 { |
| font-size: 16px; |
| } |
|
|
| .page-canvas { |
| padding: 20px 14px; |
| } |
|
|
| .app-footer { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 10px; |
| padding: 14px 0 0; |
| } |
|
|
| .app-footer-meta { |
| justify-content: flex-start; |
| } |
|
|
| .app-footer-meta span { |
| padding: 0 8px 0 0; |
| } |
|
|
| .app-footer-meta span:not(:last-child)::after { |
| display: none; |
| } |
|
|
| .kpi-grid, |
| .kpi-grid.compact, |
| .result-grid, |
| .insight-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .insight-hero { |
| padding: 16px; |
| } |
|
|
| .page-header h2 { |
| font-size: 26px; |
| line-height: 32px; |
| } |
|
|
| .nav-tooltip { |
| display: none; |
| } |
| } |
|
|
