:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; color: #10233e; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #092d5b; color: white; padding: 1.6rem max(5vw, 1.5rem); }
header h1 { margin: 0; } header p { margin: .35rem 0 0; opacity: .85; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .header-row form { margin: 0; }.header-actions { align-items: center; display: flex; gap: .8rem; }.header-link { border: 1px solid #b8d6f6; border-radius: 5px; color: #fff; font-size: .9rem; font-weight: 700; padding: .65rem .85rem; text-decoration: none; }.header-link:hover { background: #16467b; }.logout { background: transparent; border: 1px solid #b8d6f6; } .logout:hover { background: #16467b; }
main { max-width: 1440px; margin: auto; padding: 1.5rem; }
section { background: white; border-radius: 12px; padding: 1.25rem; margin-bottom: 1.5rem; box-shadow: 0 2px 12px #17345d12; }
h2 { margin-top: 0; } .hint { color: #64748b; font-size: .9rem; }
.table-toolbar { align-items: center; display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0; }.table-toolbar h3 { margin: 0; }.view-switch { display: flex; gap: .35rem; }.view-button { background: #fff; border: 1px solid #9fb3cb; color: #173b68; padding: .45rem .7rem; }.view-button:hover, .view-button.active { background: #0f5daf; border-color: #0f5daf; color: #fff; }.table-wrap { overflow-x: auto; }.sites-table { min-width: 1080px; }.sites-table th { background: #f6f9fd; color: #173b68; font-size: .82rem; white-space: nowrap; }.sites-table td { white-space: nowrap; }.sites-table td:nth-child(5), .sites-table td:nth-child(6) { white-space: normal; min-width: 180px; }.sites-table tr.up td:first-child { border-left: 4px solid #16a34a; }.sites-table tr.warning td:first-child { border-left: 4px solid #d97706; }.sites-table tr.down td:first-child { border-left: 4px solid #dc2626; }.sites-table[data-view="basic"] .detailed-column { display: none; }.technical-state { font-weight: 700; }.technical-state.up { color: #166534; }.technical-state.warning { color: #9a3412; }.technical-state.down { color: #b91c1c; }.table-alert { background: #fff7ed; border-radius: 5px; color: #9a3412; display: inline-block; font-size: .84rem; font-weight: 700; padding: .25rem .45rem; }.row-actions { display: flex; align-items: center; gap: .7rem; }.row-actions .open-site { font-size: .82rem; padding: .45rem .6rem; }.row-actions .details-link { font-size: .84rem; }
.monitor-summary { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; margin: -.25rem 0 1rem; }.monitor-summary strong { color: #10233e; }.monitor-summary span, .monitor-summary a { background: #dcfce7; border-radius: 99px; color: #166534; font-size: .84rem; font-weight: 700; padding: .25rem .55rem; text-decoration: none; }.monitor-summary a:hover { filter: brightness(.96); }.monitor-summary .summary-warning { background: #ffedd5; color: #9a3412; }.monitor-summary .summary-problem { background: #fee2e2; color: #991b1b; }.monitor-summary .summary-neutral { background: #e8eef5; color: #475569; }
.filters { align-items: end; background: #f6f9fd; border: 1px solid #d9e2ef; border-radius: 8px; display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0 1rem; padding: .75rem; }.filters label { flex: 1 1 220px; margin: 0; }.filter-reset { background: white; border: 1px solid #9fb3cb; color: #173b68; margin-bottom: 1px; }.filter-reset:hover { background: #e9f1fa; }.no-results { color: #64748b; font-style: italic; }.lifecycle { display: inline-block; border-radius: 99px; font-size: .78rem; font-weight: 700; padding: .25rem .55rem; }.lifecycle-production { background: #dcfce7; color: #166534; }.lifecycle-development { background: #ffedd5; color: #9a3412; }.lifecycle-testing { background: #dbeafe; color: #1d4ed8; }.lifecycle-client-testing { background: #e0e7ff; color: #4338ca; }.lifecycle-ready { background: #ccfbf1; color: #0f766e; }.lifecycle-maintenance { background: #fef9c3; color: #854d0e; }.lifecycle-isolated { background: #fee2e2; color: #991b1b; }.lifecycle-archived { background: #e2e8f0; color: #475569; }
 .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1rem; }.open-site { background: #0f5daf; border-radius: 5px; color: white; display: inline-block; font-size: .9rem; font-weight: 700; padding: .55rem .75rem; text-decoration: none; }.open-site:hover { background: #0b4a8b; }.details-link { font-size: .9rem; font-weight: 700; }
dl { display: grid; grid-template-columns: 90px 1fr; margin: 0; gap: .25rem .5rem; font-size: .9rem; } dt { color: #64748b; } dd { margin: 0; } .error { color: #b91c1c; overflow-wrap: anywhere; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 2rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { border-bottom: 1px solid #e2e8f0; padding: .65rem; text-align: left; vertical-align: top; }
label { display: block; font-size: .9rem; font-weight: 600; margin: .55rem 0; } input, select, textarea { display: block; margin-top: .25rem; padding: .55rem; width: 100%; border: 1px solid #b8c5d6; border-radius: 5px; font: inherit; } textarea { min-height: 90px; }
button { border: 0; border-radius: 5px; background: #0f5daf; color: white; cursor: pointer; font-weight: 700; padding: .7rem 1rem; } button:hover { background: #0b4a8b; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; } .login-box { background: white; box-shadow: 0 4px 20px #17345d20; border-radius: 12px; max-width: 420px; padding: 2rem; width: 100%; } .login-box h1 { margin-top: 0; font-size: 1.65rem; }
.seo-ok { color: #166534; font-weight: 700; } code { background: #eef3f8; border-radius: 3px; color: #173b68; padding: .15rem .3rem; }
.seo-page { max-width: 1180px; }
.eyebrow { color: #52708f; font-size: .76rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .25rem; text-transform: uppercase; }
.section-heading { align-items: flex-start; display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 1rem; }.section-heading h2 { margin-bottom: 0; }.section-heading .hint { margin: .25rem 0 0; max-width: 480px; }
.seo-connection { align-items: center; display: flex; justify-content: space-between; gap: 1rem; }.seo-connection h2 { margin-bottom: .35rem; }.seo-connection p:not(.eyebrow) { margin: 0; }.seo-connection-action { flex: 0 0 auto; }.seo-connection-action form { margin: 0; }
.seo-stat-grid { display: grid; gap: .8rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }.seo-stat { background: #f4f8fd; border: 1px solid #dbe8f5; border-radius: 9px; display: flex; flex-direction: column; gap: .15rem; padding: 1rem; }.seo-stat strong { color: #0b5ca8; font-size: 1.8rem; line-height: 1; }.seo-stat span { color: #526b85; font-size: .83rem; }.seo-stat.attention { background: #fff7ed; border-color: #fed7aa; }.seo-stat.attention strong { color: #c2410c; }
.seo-problems { border-top: 1px solid #e5e7eb; margin-top: 1.2rem; padding-top: 1rem; }.seo-problems h3 { font-size: 1rem; margin: 0 0 .6rem; }.seo-problem-row { align-items: center; background: #fffaf4; border: 1px solid #fde4c2; border-radius: 7px; color: #18395f; display: grid; font-size: .9rem; gap: .75rem; grid-template-columns: auto minmax(150px, .45fr) minmax(0, 1fr); margin-top: .45rem; padding: .65rem .75rem; text-decoration: none; }.seo-problem-row:hover { background: #fff4e5; }.seo-problem-row span:last-child { color: #526b85; overflow-wrap: anywhere; }.seo-all-clear { background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: 7px; color: #166534; font-weight: 700; margin: 1rem 0 0; padding: .75rem; }
.status-badge { border-radius: 99px; display: inline-block; font-size: .78rem; font-weight: 800; line-height: 1.2; padding: .3rem .55rem; white-space: nowrap; }.status-badge.ok { background: #dcfce7; color: #166534; }.status-badge.warning { background: #ffedd5; color: #9a3412; }.status-badge.problem { background: #fee2e2; color: #b91c1c; }
.status-badge.unknown { background: #e8eef5; color: #475569; }.status-badge.neutral { background: #f1f5f9; color: #64748b; }.seo-dashboard-cell { min-width: 185px; }.seo-dashboard-cell small { color: #647e99; display: block; font-size: .76rem; line-height: 1.3; margin-top: .35rem; max-width: 210px; }.seo-dashboard-link { color: inherit; text-decoration: none; }.seo-dashboard-link:hover .status-badge { filter: brightness(.96); }
.sitemap-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }.sitemap-card { border: 1px solid #dce6f1; border-radius: 8px; padding: .9rem; }.sitemap-card > div { align-items: center; display: flex; gap: .5rem; justify-content: space-between; margin-bottom: .6rem; }.sitemap-card a { font-size: .88rem; font-weight: 700; }.sitemap-card p { color: #526b85; font-size: .84rem; line-height: 1.4; margin: .65rem 0; }.sitemap-card small { color: #718096; font-size: .75rem; }
.seo-sites-table { min-width: 870px; }.seo-sites-table th { background: #f6f9fd; color: #34516f; font-size: .78rem; white-space: nowrap; }.seo-sites-table td { vertical-align: middle; }.seo-sites-table td:nth-child(3) { max-width: 430px; }.seo-sites-table td:last-child { white-space: nowrap; }.subtle-link { color: #647e99; font-size: .82rem; }
.sitemap-detail { align-items: center; display: flex; gap: .65rem; margin: 0; }.seo-url-list { display: grid; gap: .8rem; }.seo-url-card { border: 1px solid #dce6f1; border-radius: 8px; padding: .9rem 1rem; }.seo-url-card-top { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }.seo-url-card-top a { font-weight: 800; overflow-wrap: anywhere; }.seo-url-card-top small { color: #647e99; display: block; font-size: .8rem; margin-top: .35rem; }.seo-url-card details { border-top: 1px solid #e3ebf3; margin-top: .8rem; padding-top: .75rem; }.seo-url-card summary { color: #0f5daf; cursor: pointer; font-weight: 800; }.issue-list { color: #9a3412; margin: .75rem 0; padding-left: 1.2rem; }.issue-list li + li { margin-top: .35rem; }
.seo-addresses-table { min-width: 860px; }.seo-addresses-table th { background: #f6f9fd; color: #34516f; font-size: .78rem; white-space: nowrap; }.seo-addresses-table td { vertical-align: middle; }.seo-addresses-table td:nth-child(1) { min-width: 310px; }.seo-addresses-table td:last-child { text-align: right; white-space: nowrap; }.details-toggle { font-size: .82rem; padding: .45rem .65rem; }.seo-address-detail td { background: #f8fbff; padding: 0; }.seo-address-detail.is-hidden { display: none; }.seo-detail-content { border-left: 4px solid #9ec5ee; padding: 1rem 1.1rem 1.1rem; text-align: left; width: 100%; }.seo-detail-content h3 { font-size: .95rem; margin: 0 0 .55rem; }.seo-detail-content .seo-details { max-width: 760px; }
.seo-checks-table { min-width: 830px; }.seo-checks-table th { background: #f6f9fd; color: #34516f; font-size: .78rem; white-space: nowrap; }.seo-checks-table td { vertical-align: middle; }.seo-checks-table[data-view="basic"] .detailed-column { display: none; }.seo-url { max-width: 270px; overflow-wrap: anywhere; }.seo-url a { font-size: .85rem; }.seo-checks-table details { font-size: .83rem; }.seo-checks-table summary { color: #0f5daf; cursor: pointer; font-weight: 700; }.seo-details { font-size: .78rem; grid-template-columns: 128px minmax(160px, 1fr); margin-top: .7rem; min-width: 330px; }.seo-details dd { overflow-wrap: anywhere; }
.site-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 2rem; }.site-summary h2 { margin-bottom: .5rem; }.back { color: white; }.site-summary dl { grid-template-columns: 160px 1fr; }.tags { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }.tags li { background: #e8f0fb; border-radius: 99px; color: #234d7c; font-size: .88rem; padding: .3rem .6rem; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } main { padding: .8rem; } section { padding: 1rem; } table { display: block; overflow-x: auto; } .section-heading, .seo-connection { align-items: stretch; flex-direction: column; gap: .65rem; }.seo-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.seo-problem-row { grid-template-columns: 1fr; gap: .35rem; } }