.page-header { margin-bottom: 22px; }.page-header p { margin: 0 0 7px; color: #2e9a71; font-size: 11px; font-weight: 800; letter-spacing: .18em; }.page-header h1 { margin: 0; font-size: 28px; }.page-header span { display: block; margin-top: 7px; color: #7e8999; font-size: 12px; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.summary article { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; padding: 19px; border: 1px solid #e4e9f0; border-radius: 14px; background: white; }.icon { grid-row: 1 / 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }.icon.green { color: #258a65; background: #eaf8f2; }.icon.blue { color: #3379ce; background: #edf5ff; }.icon.amber { color: #ad761a; background: #fff6df; }.summary span { color: #6e7a8c; font-size: 12px; }.summary strong { margin: 2px 0; font-size: 24px; }.summary small { color: #98a3b2; font-size: 11px; }
.notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 15px; border: 1px solid #d8e8f4; border-radius: 10px; color: #476278; background: #f1f8fd; font-size: 12px; line-height: 1.7; }.notice.error { border-color: #f1d6d8; color: #a43b43; background: #fff3f4; }
.matrix { overflow: hidden; margin-top: 17px; border: 1px solid #e4e9f0; border-radius: 14px; background: white; }.matrix > header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #e9edf2; }.matrix h2 { margin: 0; font-size: 17px; }.matrix p { margin: 5px 0 0; color: #8b96a5; font-size: 11px; }.matrix > header > span { padding: 4px 9px; border-radius: 14px; color: #43705f; background: #eaf6f1; font-size: 11px; }
table { width: 100%; border-collapse: collapse; }th, td { padding: 12px 20px; border-bottom: 1px solid #edf0f4; font-size: 12px; text-align: left; }th { color: #758194; background: #fafbfd; font-size: 11px; }code { padding: 3px 6px; border-radius: 5px; color: #4e6578; background: #f1f4f7; }.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 14px; font-size: 11px; }.badge.ok { color: #217756; background: #eaf7f1; }.badge.blocked { color: #9e6912; background: #fff4d9; }
.blocked-matrix td:first-child { width: 230px; }.blocked-matrix td:last-child { color: #596677; line-height: 1.65; }.matrix-state { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 100px; color: #7f8b9b; font-size: 12px; }.spin { animation: spin .9s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .summary { grid-template-columns: 1fr; }.matrix { overflow-x: auto; }.matrix > header, th, td { padding-left: 14px; padding-right: 14px; }table { min-width: 680px; } }