.pgv-main { max-width: 1500px; }
.pgv-guide { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; background: #f0f9f7; border-color: #cde9e2; }
.pgv-guide-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #147d69; color: #fff; font-weight: 900; }
.pgv-guide strong { display: block; margin: 1px 0 5px; }
.pgv-guide p, .pgv-run-panel p { margin: 0; color: #667085; font-size: 13px; line-height: 1.55; }
.pgv-case-controls { display: flex; overflow: hidden; border: 1px solid #b8d9d1; border-radius: 10px; background: #fff; }
.pgv-case-controls button { width: 46px; height: 44px; border: 0; background: #e6f4f1; color: #116856; font-size: 25px; font-weight: 800; cursor: pointer; }
.pgv-case-controls button + button { border-left: 1px solid #b8d9d1; }
.pgv-case-controls button:hover { background: #d5eee8; }
.pgv-case-controls button:disabled { color: #98a2b3; background: #f2f4f6; cursor: not-allowed; }
.pgv-cases { display: grid; gap: 20px; }
.pgv-case { padding: 0; overflow: hidden; }
.pgv-case-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid #e8ecef; background: #fafbfc; }
.pgv-case-header > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pgv-case-number { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: #dff4ed; color: #147d69; font-size: 12px; font-weight: 900; }
.pgv-case-name { width: min(360px, 50vw); border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: #182230; font-size: 18px; font-weight: 800; padding: 5px 2px; }
.pgv-case-name:focus { border-bottom-color: #147d69; }
.pgv-remove-case { border: 0; background: transparent; color: #b42318; font-weight: 800; cursor: pointer; }
.pgv-date-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 20px 22px; }
.pgv-date-grid label, .pgv-region-grid label, .pgv-target-grid label { display: grid; gap: 7px; color: #344054; font-size: 12px; font-weight: 800; }
.pgv-date-grid input, .pgv-region-grid select, .pgv-target-grid input { box-sizing: border-box; width: 100%; min-height: 42px; border: 1px solid #cfd6df; border-radius: 9px; background: #fff; color: #182230; padding: 8px 10px; }
.pgv-region-grid select:disabled { background: #eef1f4; color: #98a2b3; }
.pgv-period-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 22px 22px; }
.pgv-period-card { padding: 17px; border: 1px solid #dfe5ea; border-radius: 13px; background: #f9fafb; }
.pgv-period-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid #e7ebef; }
.pgv-period-title span { color: #147d69; font-size: 12px; font-weight: 800; }
.pgv-region-grid { display: grid; grid-template-columns: .75fr 1fr 1.4fr; gap: 10px; }
.pgv-target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pgv-end-selection { padding: 12px; border: 1px solid #dfe5ea; border-radius: 10px; background: #fff; }
.pgv-end-selection + .pgv-end-selection { margin-top: 12px; }
.pgv-end-selection-optional { border-style: dashed; }
.pgv-subtitle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #344054; font-size: 13px; font-weight: 900; }
.pgv-subtitle span { color: #147d69; font-size: 11px; }
.pgv-end-selection-optional .pgv-subtitle span { color: #175cd3; }
.pgv-index-target, .pgv-deposit-target { display: grid; gap: 7px; color: #344054; font-size: 12px; font-weight: 800; }
.pgv-index-target { margin-top: 10px; }
.pgv-deposit-target { margin-top: 14px; }
.pgv-index-target input, .pgv-deposit-target input { box-sizing: border-box; width: 100%; min-height: 42px; border: 1px solid #cfd6df; border-radius: 9px; background: #fff; color: #182230; padding: 8px 10px; }
.pgv-run-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.pgv-run-panel strong { display: block; margin-bottom: 5px; }
.pgv-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pgv-preview-table th, .pgv-preview-table td { padding: 10px 11px; border: 1px solid #e5e9ee; text-align: left; }
.pgv-preview-table th { background: #f7f8fa; color: #475467; }
.pgv-progress-track { height: 13px; overflow: hidden; border-radius: 999px; background: #e8eeec; }
.pgv-progress-track > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #147d69, #39a88f); transition: width .25s ease; }
.pgv-progress-info { display: flex; justify-content: space-between; gap: 20px; margin-top: 12px; color: #475467; font-size: 13px; }
.pgv-ranking-section + .pgv-ranking-section { margin-top: 36px; padding-top: 32px; border-top: 1px solid #e4e7ec; }
.pgv-ranking-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pgv-ranking-header h3 { margin: 0; font-size: 19px; }
.pgv-ranking-header p { margin: 4px 0 0; color: #667085; font-size: 12px; }
.pgv-ranking-header > span { padding: 6px 10px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 12px; font-weight: 800; }
.pgv-ranking-header > span.is-perfect { background: #dcfae6; color: #067647; }
.pgv-best-card { margin-bottom: 16px; padding: 18px; border: 1px solid #a9ddcf; border-radius: 14px; background: linear-gradient(135deg, #f0fdf9, #fff); box-shadow: 0 6px 18px rgba(20, 125, 105, .07); }
.pgv-best-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pgv-best-title > span { padding: 7px 9px; border-radius: 8px; background: #147d69; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.pgv-best-title strong { display: block; color: #12372f; font-size: 16px; }
.pgv-best-title p { margin: 3px 0 0; color: #667085; font-size: 12px; }
.pgv-best-rule { margin-top: 14px; border-top: 1px solid #d6ebe5; padding-top: 12px; }
.pgv-best-rule summary, .pgv-profile-details summary { color: #147d69; font-size: 12px; font-weight: 800; cursor: pointer; }
.pgv-table-wrap { overflow-x: auto; border: 1px solid #e2e7eb; border-radius: 12px; }
.pgv-ranking-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pgv-ranking-table th, .pgv-ranking-table td { padding: 11px 13px; border-bottom: 1px solid #eaecf0; text-align: right; vertical-align: middle; white-space: nowrap; }
.pgv-ranking-table th { background: #f7f8fa; color: #475467; }
.pgv-ranking-table th:first-child, .pgv-ranking-table td:first-child, .pgv-ranking-table td:last-child { text-align: left; }
.pgv-ranking-table tr:last-child td { border-bottom: 0; }
.pgv-rank-best { background: #f0f9f7; }
.pgv-rank-number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #f2f4f7; font-weight: 900; }
.pgv-rank-best .pgv-rank-number { background: #147d69; color: #fff; }
.pgv-detail-body { min-width: 660px; padding: 14px 0 4px; white-space: normal; }
.pgv-comparison-list { display: grid; gap: 7px; }
.pgv-comparison-list > div { display: grid; grid-template-columns: minmax(190px, 1fr) 110px 110px 88px; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #e5e9ee; border-radius: 8px; background: #fff; color: #475467; font-size: 12px; }
.pgv-comparison-list strong { color: #1d2939; }
.pgv-comparison-list em { justify-self: end; padding: 4px 7px; border-radius: 999px; font-style: normal; font-weight: 800; text-align: center; }
.is-exact { background: #dcfae6; color: #067647; }
.is-different { background: #fee4e2; color: #b42318; }
.pgv-rule-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.pgv-rule-grid > div { padding: 9px 10px; border-radius: 8px; background: #f2f4f7; }
.pgv-rule-grid span, .pgv-rule-grid strong { display: block; }
.pgv-rule-grid span { color: #667085; font-size: 10px; }
.pgv-rule-grid strong { margin-top: 3px; color: #344054; font-size: 12px; }
.pgv-fixed-checks { margin-bottom: 30px; padding: 16px; border: 1px solid #e4e8ec; border-radius: 12px; background: #fafbfc; }
.pgv-result-subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pgv-result-subhead h3 { margin: 0; font-size: 15px; }
.pgv-result-subhead span { color: #667085; font-size: 12px; }
.pgv-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pgv-check-item { padding: 10px 11px; border: 1px solid #e5e9ee; border-radius: 8px; background: #fff; }
.pgv-check-item > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pgv-check-item > div span { padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.pgv-check-item strong { font-size: 12px; }
.pgv-check-item p { margin: 6px 0 0; color: #667085; font-size: 11px; }
.pgv-apply-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 18px; border: 1px solid #b7dcd3; border-radius: 12px; background: #f0f9f7; }
.pgv-apply-panel strong { display: block; color: #12372f; }
.pgv-apply-panel p { margin: 5px 0 0; color: #667085; font-size: 12px; }
.pgv-apply-panel .pg-button { flex: 0 0 auto; }
.pgv-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; }
.pgv-modal[hidden] { display: none; }
.pgv-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .58); backdrop-filter: blur(2px); }
.pgv-modal-dialog { position: relative; display: flex; flex-direction: column; width: min(1040px, 96vw); height: min(820px, 88vh); max-height: 88vh; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(16, 24, 40, .28); }
.pgv-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid #e4e7ec; }
.pgv-modal-header span { color: #147d69; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.pgv-modal-header h2 { margin: 3px 0 0; font-size: 20px; }
.pgv-modal-header button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: #f2f4f7; color: #475467; font-size: 25px; cursor: pointer; }
.pgv-modal-content { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; box-sizing: border-box; padding: 22px; }
.pgv-modal-content::-webkit-scrollbar { width: 10px; }
.pgv-modal-content::-webkit-scrollbar-track { background: #f2f4f7; }
.pgv-modal-content::-webkit-scrollbar-thumb { border: 2px solid #f2f4f7; border-radius: 999px; background: #98a2b3; }
.pgv-profile-meta { margin-bottom: 20px; padding: 12px 14px; border-radius: 10px; background: #f2f4f7; color: #475467; font-size: 12px; line-height: 1.65; }
.pgv-profile-block + .pgv-profile-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid #e4e7ec; }
.pgv-profile-block h3 { margin: 0; font-size: 16px; }
.pgv-profile-block > p { margin: 4px 0 0; color: #667085; font-size: 12px; }
.pgv-version-list { display: grid; gap: 10px; }
.pgv-version-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid #e4e7ec; border-radius: 11px; background: #fff; }
.pgv-version-badge { padding: 7px 8px; border-radius: 8px; background: #e7f5f1; color: #147d69; font-size: 11px; font-weight: 900; text-align: center; }
.pgv-version-info strong, .pgv-version-info span { display: block; }
.pgv-version-info strong { color: #1d2939; font-size: 13px; }
.pgv-version-info span { margin-top: 4px; color: #667085; font-size: 11px; }
.pgv-version-item button { min-width: 72px; }
.pgv-version-empty { padding: 32px; border: 1px dashed #d0d5dd; border-radius: 12px; color: #667085; text-align: center; }
.pgv-version-notice { margin: 0 0 14px; color: #667085; font-size: 12px; }
@media (max-width: 1100px) { .pgv-date-grid, .pgv-period-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgv-period-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .pgv-date-grid, .pgv-region-grid, .pgv-target-grid, .pgv-check-grid { grid-template-columns: 1fr; } .pgv-run-panel, .pgv-apply-panel { align-items: stretch; flex-direction: column; } .pgv-rule-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .pgv-comparison-list > div { grid-template-columns: 1fr 1fr; } .pgv-version-item { grid-template-columns: 54px 1fr; } .pgv-version-item button { grid-column: 1 / -1; } }