.pi-page { min-height: 100%; overflow: auto; padding: 30px 34px 56px; background: var(--bg-primary, #f5f7fa); color: var(--text-primary, #07194f); }
.pi-shell { max-width: 1240px; margin: 0 auto; }
.pi-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 12px 0 24px; }
.pi-header h1 { margin: 0 0 5px; font-size: 32px; letter-spacing: -.04em; }
.pi-header p, .pi-section-heading p, .pi-scope, .pi-note { margin: 0; color: var(--text-secondary, #365284); font-size: 13px; line-height: 1.55; }
.pi-trust { border: 1px solid var(--border, #d7e0eb); border-radius: 9px; padding: 10px 13px; background: #fff; color: var(--text-secondary, #365284); font-size: 11px; font-weight: 700; }
.pi-search, .pi-result-head, .pi-section { border: 1px solid var(--border, #d7e0eb); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.pi-search { margin-bottom: 18px; padding: 20px; }.pi-search label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; }.pi-search-row { display: flex; gap: 10px; }
.pi-search input { flex: 1; min-width: 0; border: 1px solid var(--border-strong, #b8c7d9); border-radius: 8px; padding: 13px 14px; color: var(--text-primary, #07194f); font: 500 14px Inter, sans-serif; }
.pi-search input:focus-visible, .pi-search button:focus-visible, .pi-secondary:focus-visible, .pi-program-button:focus-visible { outline: 3px solid rgba(255, 90, 20, .32); outline-offset: 2px; }
.pi-search button, .pi-secondary { border: 0; border-radius: 8px; padding: 11px 16px; background: var(--accent, #ff5a14); color: #fff; font: 800 12px Inter, sans-serif; cursor: pointer; }.pi-search button:disabled, .pi-secondary:disabled { opacity: .6; cursor: wait; }.pi-secondary { border: 1px solid var(--border, #d7e0eb); background: #fff; color: var(--text-primary, #07194f); }
.pi-error { margin: 0 0 18px; border: 1px solid #f6c2bd; border-radius: 10px; padding: 13px 15px; background: #fff5f3; color: #a12c20; font-size: 13px; }
.pi-result-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 20px 22px; }.pi-result-head h2 { margin: 0 0 6px; font-size: 18px; }.pi-result-head p { margin: 0; color: var(--text-secondary, #365284); font-size: 12px; }
.pi-section { margin-top: 18px; padding: 24px; }.pi-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.pi-section-heading h2 { margin: 0 0 5px; font-size: 19px; letter-spacing: -.025em; }
.pi-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.pi-program { overflow: hidden; border: 1px solid var(--border, #d7e0eb); border-radius: 10px; background: #fff; }.pi-program-button { display: grid; grid-template-columns: 28px 1fr auto 26px; align-items: center; width: 100%; gap: 8px; border: 0; padding: 16px; background: transparent; color: var(--text-primary, #07194f); text-align: left; cursor: pointer; }
.pi-status-mark { font-size: 20px; font-weight: 800; }.pi-good .pi-status-mark { color: #079455; }.pi-bad .pi-status-mark { color: #e42313; }.pi-warn .pi-status-mark { color: #b54708; }.pi-neutral .pi-status-mark { color: #365284; }.pi-program-name { color: var(--text-secondary, #365284); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.pi-program strong { font-size: 13px; }.pi-chevron { color: var(--text-secondary, #365284); font-size: 21px; text-align: right; }
.pi-reason { margin-left: 0; border-top: 1px solid var(--border, #d7e0eb); padding: 0 16px 16px; }.pi-reason p { margin: 14px 0 8px; font-size: 13px; line-height: 1.55; }.pi-source { color: #1c579e; font-size: 12px; font-weight: 700; text-decoration: none; }.pi-source:hover { text-decoration: underline; }.pi-note { margin-top: 16px; }
.pi-flood-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); align-items: stretch; gap: 16px; }.pi-flood-grid img { width: 100%; min-height: 280px; border: 1px solid var(--border, #d7e0eb); border-radius: 10px; background: #edf3f8; object-fit: cover; }.pi-flood-summary { border: 1px solid var(--border, #d7e0eb); border-radius: 10px; padding: 22px; background: #f8fbfd; }.pi-flood-summary h3 { margin: 0 0 9px; font-size: 26px; }.pi-flood-summary > p:not(.pi-scope) { font-size: 13px; line-height: 1.6; }
.pi-toast { position: fixed; right: 24px; bottom: 24px; border-radius: 9px; padding: 12px 16px; background: #07194f; color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); font-size: 12px; font-weight: 700; }
@media (max-width: 760px) { .pi-page { padding: 18px 14px 92px; }.pi-header, .pi-result-head, .pi-section-heading { flex-direction: column; align-items: flex-start; }.pi-program-grid, .pi-flood-grid { grid-template-columns: 1fr; }.pi-search-row { flex-direction: column; }.pi-search button { width: 100%; }.pi-program-button { grid-template-columns: 24px 1fr 24px; }.pi-program-button strong { grid-column: 2 / 3; }.pi-program-button .pi-chevron { grid-row: 1 / 3; grid-column: 3; }.pi-trust { display: none; } }