:root { --tblr-font-sans-serif: "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { font-family: var(--tblr-font-sans-serif); }
.brand-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.chart-box { min-height: 220px; }
.narrow-card { max-width: 720px; }
.unit-depth-0 { padding-left: 12px; }
.unit-depth-1 { padding-left: 32px; }
.unit-depth-2 { padding-left: 52px; }
.unit-depth-3 { padding-left: 72px; }
.unit-depth-4 { padding-left: 92px; }
.unit-depth-5 { padding-left: 112px; }
.form-label.required::after { content: " *"; color: var(--tblr-danger); }
.qr-box svg { width: 220px; height: 220px; }
.font-monospace { font-family: ui-monospace, Consolas, monospace; }
.offline-banner { display: none; }
body.is-offline .offline-banner { display: block; }
:focus-visible { outline: 3px solid #1f5fa8; outline-offset: 2px; }
.offline-page { max-width: 560px; margin: 20vh auto; padding: 0 16px; text-align: center; }
.pre-line { white-space: pre-line; }
.hs-progress { width: 100%; height: .75rem; }
.risk-grid td, .risk-grid th { min-width: 3rem; }
.risk-critical { background: #fbd5d5; }
.risk-high { background: #fde3c4; }
.risk-medium { background: #fff3bf; }
.risk-low { background: #d3f1db; }
.gantt { max-width: 100%; font-family: Kanit, sans-serif; }
.gantt-frame { fill: none; stroke: #ccd; }
.gantt-label { font-size: 12px; fill: #333; }
.gantt-axis { font-size: 11px; fill: #667; }
.gantt-bar { fill: #4299e1; }
.gantt-done { fill: #2fb344; }
.gantt-today { stroke: #d63939; stroke-width: 2; }
.nav-group-title { padding: .5rem 1rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }