:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #d7dde8;
  --accent: #1d4ed8;
  --accent-soft: #dbeafe;
  --success: #ecfdf3;
  --warning: #fffbeb;
  --error: #fef2f2;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 1rem; }
.wrapless { padding: 0; }
.site-header { background: #0f172a; color: white; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { color: white; font-size: 1.4rem; font-weight: 700; }
.nav-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.nav-links a { color: #e5e7eb; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 8px 20px rgba(15, 23, 42, .04); }
.narrow { max-width: 460px; margin: 2rem auto; }
.hero { margin-top: 1rem; }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0; }
.stat .label { color: var(--muted); font-size: .9rem; }
.stat .value { font-size: 2rem; font-weight: 700; margin-top: .4rem; }
.form-grid { display: grid; gap: .9rem; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.four-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.one-col { grid-template-columns: 1fr; }
.full { grid-column: 1 / -1; }
label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: white; }
textarea { min-height: 96px; resize: vertical; }
button, .button-link { display: inline-block; border: 0; border-radius: 10px; background: var(--accent); color: white; padding: .7rem 1rem; cursor: pointer; text-decoration: none; }
.button-link:hover { text-decoration: none; opacity: .95; }
.button-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.section-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.hint-box { background: var(--accent-soft); border: 1px solid #bfdbfe; border-radius: 12px; padding: .8rem; }
.flash-stack { display: grid; gap: .5rem; margin: 1rem 0; }
.flash { padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line); }
.flash.success { background: var(--success); }
.flash.warning { background: var(--warning); }
.flash.error { background: var(--error); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .65rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .9rem; color: var(--muted); }
.plain-list { margin: 0; padding-left: 1.2rem; }
.mini { width: 84px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.check-card, .checkbox { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.check-card { padding: .6rem; border: 1px solid var(--line); border-radius: 12px; }
.report-card { border: 1px solid var(--line); border-radius: 14px; padding: .9rem; margin-bottom: .9rem; background: #fbfdff; }
.top-gap { margin-top: 1rem; }
@media (max-width: 900px) {
  .grid.two, .stats-grid, .two-col, .four-col { grid-template-columns: 1fr; }
  .nav { align-items: flex-start; flex-direction: column; }
}

.four-stats { grid-template-columns: repeat(4, 1fr); }
.compact-grid { gap: .5rem; }

html, body { min-height: 100%; }
body { display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; width: 100%; }
.site-footer { margin-top: 1.5rem; background: #0f172a; color: #cbd5e1; border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .92rem; }
@media (max-width: 900px) { .footer-inner { flex-direction: column; align-items: flex-start; } }

.scorecard-list { display: grid; gap: 1rem; }
.scorecard-header h3 { margin: 0 0 .2rem 0; }
.scorecard-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: .75rem 0 1rem; }
.scorecard-view-grid { display: grid; grid-template-columns: 1.45fr .9fr; gap: 1rem; align-items: start; }
.scorecard-thumb { width: 100%; max-width: 260px; max-height: 220px; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 18px rgba(15,23,42,.08); background: white; }
.thumb-link { display: inline-block; }
.thumb-placeholder { min-height: 180px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: #fafcff; padding: 1rem; text-align: center; }
@media (max-width: 900px) { .scorecard-meta-grid, .scorecard-view-grid { grid-template-columns: 1fr; } }


.module-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1rem; }
.module-card { text-decoration:none; color: inherit; min-height: 180px; }
.module-card:hover { text-decoration:none; }
.module-icon { font-size: 2rem; margin-bottom: .75rem; }
.module-card.live { border-color:#bfdbfe; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.module-card.soon { opacity:.92; }
@media (max-width: 900px) { .module-grid { grid-template-columns:1fr; } }

.brand-group { display:flex; align-items:center; gap:.8rem; }
.brand-mark img { height:52px; width:auto; display:block; border-radius:8px; background:white; padding:2px; }
.header-subtitle { color:#cbd5e1; }
.landing-hero { text-align:center; }
.landing-logo { max-width:340px; width:100%; height:auto; margin:0 auto 1rem; display:block; }
.button-link.secondary { background:#334155; }
.public-branding { display:flex; justify-content:center; margin-bottom:1rem; }
.public-logo { max-width:220px; width:100%; height:auto; }
.matrix-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; }
.matrix-table { min-width:900px; }
.matrix-table th, .matrix-table td { text-align:center; }
.matrix-table tbody th { text-align:left; background:#fafcff; position:sticky; left:0; z-index:1; }
.matrix-diag, .matrix-mirror { color:var(--muted); background:#f8fafc; }
.matrix-check { display:flex; align-items:center; justify-content:center; gap:.35rem; font-weight:500; }
.matrix-check span { font-size:.8rem; color:var(--muted); }
@media (max-width: 900px) { .brand-mark img { height:42px; } }