.garda-web { display: grid; gap: var(--p-space-5); color: var(--p-on-surface); }
.garda-page-header, .garda-toolbar, .garda-panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-4); }
.garda-page-header h1, .garda-toolbar h2, .garda-panel h2 { margin: 2px 0 0; }
.garda-page-header p, .garda-toolbar p, .garda-panel p { margin: 4px 0 0; color: var(--p-on-surface-variant); }
.garda-kicker { color: var(--p-primary); font-size: var(--p-fs-meta); font-weight: 750; letter-spacing: .08em; }
.garda-mobile-link, .garda-primary { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-radius: var(--p-radius-pill); background: var(--p-primary); color: var(--p-on-primary); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.garda-tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-sm); background: var(--p-surface-container-lowest); }
.garda-tabs button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 9px; background: transparent; color: var(--p-on-surface-variant); font: inherit; font-weight: 650; white-space: nowrap; cursor: pointer; }
.garda-tabs button.active { background: var(--p-primary-container); color: var(--p-on-primary-container); }
.garda-kpis { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: var(--p-space-3); }
.garda-kpi, .garda-panel, .garda-report-card { border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-sm); background: var(--p-surface-container-lowest); box-shadow: var(--p-elev-1); }
.garda-kpi { display: grid; grid-template-columns: 24px 1fr; gap: 5px 10px; padding: 14px; }
.garda-kpi svg { grid-row: 1 / 3; width: 21px; color: var(--p-primary); }
.garda-kpi span { color: var(--p-on-surface-variant); font-size: var(--p-fs-label); }
.garda-kpi strong { font-size: 22px; line-height: 1; }
.garda-panel { padding: var(--p-space-4); min-width: 0; }
.garda-panel > header { margin-bottom: var(--p-space-3); }
.garda-panel > header > strong { color: var(--p-primary); font-size: 28px; }
.garda-dashboard-grid, .garda-evaluation-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--p-space-4); align-items: start; }
.garda-count { min-width: 30px; padding: 5px 8px; border-radius: var(--p-radius-pill); background: var(--p-surface-container); text-align: center; font-weight: 750; }
.garda-attention-list { display: grid; }
.garda-attention-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--p-outline-variant); }
.garda-attention-list article:first-child { border-top: 0; }
.garda-attention-list p { font-size: var(--p-fs-meta); }
.garda-link-button, .garda-panel header button, .garda-filter button { min-height: 38px; padding: 0 12px; border: 1px solid var(--p-outline-variant); border-radius: 9px; background: var(--p-surface-container-lowest); color: var(--p-primary); font: inherit; font-weight: 700; cursor: pointer; }
.garda-status { display: inline-flex; width: max-content; padding: 4px 8px; border-radius: var(--p-radius-pill); background: var(--p-info-container); color: var(--p-on-info-container); font-size: 11px; font-weight: 750; }
.garda-status-needs_revision, .garda-status-warning, .garda-status-unmapped { background: var(--p-warning-container); color: var(--p-on-warning-container); }
.garda-status-verified, .garda-status-completed, .garda-status-active { background: var(--p-success-container); color: var(--p-on-success-container); }
.garda-status-cancelled, .garda-status-inactive { background: var(--p-error-container); color: var(--p-on-error-container); }
.garda-table-wrap { width: 100%; overflow-x: auto; }
.garda-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.garda-table th { color: var(--p-on-surface-variant); font-size: 11px; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.garda-table th, .garda-table td { padding: 10px 9px; border-bottom: 1px solid var(--p-outline-variant); white-space: nowrap; }
.garda-empty { padding: 24px; color: var(--p-on-surface-variant); text-align: center; }
.garda-health { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.garda-health div { padding: 12px; border-radius: 10px; background: var(--p-surface-container-low); }
.garda-health span { display: block; color: var(--p-on-surface-variant); font-size: 12px; }
.garda-health strong { display: block; margin-top: 3px; font-size: 17px; }
.garda-filter { display: flex; align-items: end; gap: 10px; padding: 12px; border-radius: var(--p-radius-sm); background: var(--p-surface-container-low); }
.garda-filter label { display: grid; gap: 4px; min-width: 180px; }
.garda-filter label span, .garda-form-grid label span { font-size: 12px; font-weight: 700; }
.garda-filter input, .garda-filter select, .garda-form-grid input, .garda-form-grid select { min-height: 42px; padding: 0 11px; border: 1px solid var(--p-outline); border-radius: 9px; background: var(--p-surface-container-lowest); color: var(--p-on-surface); font: inherit; }
.garda-bars { display: grid; gap: 12px; }
.garda-bars > div { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr 52px; align-items: center; gap: 10px; }
.garda-bar { height: 8px; overflow: hidden; border-radius: 8px; background: var(--p-surface-container-high); }
.garda-bar i { display: block; height: 100%; border-radius: inherit; background: var(--p-secondary); }
.garda-nps > div { display: flex; gap: 8px; flex-wrap: wrap; }
.garda-nps > div span { padding: 8px 10px; border-radius: 8px; background: var(--p-surface-container-low); }
.garda-report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p-space-3); }
.garda-report-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 16px; }
.garda-report-card > svg { color: var(--p-primary); }
.garda-report-card h3, .garda-report-card p { margin: 0; }
.garda-report-card p { margin-top: 4px; color: var(--p-on-surface-variant); font-size: 12px; }
.garda-report-card a { color: var(--p-primary); font-weight: 750; }
.garda-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p-space-4); align-items: start; }
.garda-wide { grid-column: 1 / -1; }
.garda-setting-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.garda-setting-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 9px; background: var(--p-surface-container-low); }
.garda-setting-list li span { display: block; margin-top: 2px; color: var(--p-on-surface-variant); font-size: 12px; }
.garda-parameters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0; }
.garda-parameters > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--p-outline-variant); }
.garda-parameters dd { margin: 0; font-weight: 700; }
.garda-unset { color: var(--p-warning); font-weight: 700; }
.garda-error { padding: 12px; border: 1px solid var(--p-error); border-radius: 10px; background: var(--p-error-container); color: var(--p-on-error-container); }
.garda-dialog { width: min(680px, calc(100vw - 30px)); padding: 0; border: 0; border-radius: var(--p-radius-md); color: var(--p-on-surface); }
.garda-dialog::backdrop { background: rgba(7, 25, 35, .5); }
.garda-dialog form > header, .garda-dialog form > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.garda-dialog form > header { border-bottom: 1px solid var(--p-outline-variant); }
.garda-dialog form > footer { justify-content: flex-end; border-top: 1px solid var(--p-outline-variant); }
.garda-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
.garda-form-grid label { display: grid; gap: 5px; }
.garda-form-grid .wide { grid-column: 1 / -1; }
.garda-form-grid textarea, .garda-panel textarea { min-height: 92px; padding: 10px 11px; border: 1px solid var(--p-outline); border-radius: 9px; background: var(--p-surface-container-lowest); color: var(--p-on-surface); font: inherit; resize: vertical; }
.garda-form-grid label:has(input[type="checkbox"]) { grid-template-columns: 20px 1fr; align-items: center; min-height: 44px; }
.garda-form-grid input[type="checkbox"] { width: 20px; min-height: 20px; }
.garda-warning { padding: 12px; border: 1px solid var(--p-warning); border-radius: 9px; background: var(--p-warning-container); color: var(--p-on-warning-container); }
.garda-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.garda-actions button { min-height: 44px; padding: 0 14px; border: 1px solid var(--p-outline); border-radius: 9px; background: var(--p-surface-container-lowest); color: var(--p-primary); font: inherit; font-weight: 700; }
.garda-dimensions { display: grid; gap: 10px; }
.garda-dimensions article { padding: 11px; border-radius: 9px; background: var(--p-surface-container-low); }
.garda-dimensions article > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.garda-dimensions span { padding: 5px 8px; border-radius: var(--p-radius-pill); background: var(--p-surface-container-lowest); font-size: 12px; }
.garda-footnote { font-size: 12px; }
.garda-note { margin: 0; color: var(--p-on-surface-variant); font-size: 13px; line-height: 1.45; }
@media (max-width: 1050px) { .garda-kpis { grid-template-columns: repeat(3, 1fr); } .garda-report-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .garda-page-header, .garda-toolbar { align-items: flex-start; flex-direction: column; } .garda-kpis { grid-template-columns: repeat(2, 1fr); } .garda-dashboard-grid, .garda-evaluation-grid, .garda-settings-grid, .garda-report-grid { grid-template-columns: 1fr; } .garda-wide { grid-column: auto; } .garda-health, .garda-form-grid { grid-template-columns: 1fr; } .garda-form-grid .wide { grid-column: auto; } .garda-filter { align-items: stretch; flex-direction: column; } .garda-filter label { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .garda-web *, .garda-dialog { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }