:root { color-scheme: light; font-family: Inter, Arial, sans-serif; color: #182230; background: #f4f7fb; }
nav { flex-wrap: wrap; padding: 12px 0; }
.lesson-title { min-width: 180px; overflow-wrap: anywhere; }
details { margin: 12px 0; } summary { cursor: pointer; color: #1769aa; }
details form { margin-top: 12px; min-width: 190px; }
details button { margin-top: 10px; }
* { box-sizing: border-box; }
body { margin: 0; }
.topbar { min-height: 62px; background: #112d4e; color: #fff; display: flex; align-items: center; gap: 28px; padding: 0 6vw; }
.brand { color: #fff; font-weight: 750; text-decoration: none; white-space: nowrap; }
nav { display: flex; gap: 18px; flex: 1; } nav a, .link-button { color: #dceafb; background: none; border: 0; padding: 0; font: inherit; text-decoration: none; cursor: pointer; }
nav a:hover, .link-button:hover { color: #fff; }.topbar form { display: flex; gap: 12px; align-items: center; }.user { color: #c8d6e8; font-size: 14px; }
.page { width: min(1120px, 92vw); margin: 34px auto 64px; }.heading-row { display:flex; align-items: center; justify-content: space-between; gap: 16px; }.heading-row h1, h1 { margin: 0 0 8px; font-size: 28px; } h2 { margin-top: 0; font-size: 20px; } h3 { font-size: 16px; }
p { line-height: 1.5; color: #536275; }.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }.card, .panel, .login-card { background: #fff; border: 1px solid #dce3ec; border-radius: 12px; padding: 22px; box-shadow: 0 2px 6px #1a2a3a0a; }.card span, .summary-grid span { color:#617287; display:block; font-size:14px; }.card strong, .summary-grid strong { display:block; font-size:32px; margin-top: 8px; color:#163b66; }.card small { color:#617287; }
.panel { margin: 18px 0; overflow-x: auto; }.service-grid { display:flex; gap:16px; }.service-grid div { min-width: 200px; border: 1px solid #e2e8f0; padding: 14px; border-radius: 8px; }.service-grid span { display:block; color:#617287; }.state { display:block; margin-top:6px; }.state.active { color:#087443; }.state.failed, .state.inactive { color:#b42318; }
table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { padding: 11px 10px; text-align:left; vertical-align:top; border-bottom: 1px solid #e4e9f0; } th { color:#617287; font-weight:600; } ul { padding-left: 22px; }
button { background:#1769aa; color:#fff; border:0; border-radius:7px; padding:10px 15px; font:inherit; font-weight:650; cursor:pointer; } button:hover { background:#0e568f; }.secondary { background:#e8eef5; color:#1e3e5d; }.secondary:hover { background:#d9e4f0; }.danger { background:#b42318; }.danger:hover { background:#8e1c13; }
.form-stack { display:flex; flex-direction:column; gap:16px; }.form-stack label { display:flex; flex-direction:column; gap:7px; color:#334155; font-weight:600; } input, select, textarea { padding:10px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; background:#fff; }.wide-form { max-width:720px; }.compact-form { max-width:480px; }.login-card { width:min(430px,92vw); margin:10vh auto; }.login-card h1 { color:#112d4e; }
.form-stack .check-row, .check-row { display:flex; flex-direction:row; align-items:flex-start; gap:9px; font-weight:500; line-height:1.4; }.check-row input { margin-top:3px; }
.flash { border-radius:8px; padding:12px 14px; margin:0 0 18px; }.flash.error { background:#fce8e6; color:#8d1b12; }.flash.success { background:#e5f5ec; color:#076838; }.summary-grid { display:flex; gap:34px; flex-wrap:wrap; }.danger-zone { border:1px solid #f0c5c1; background:#fff6f5; border-radius:12px; padding:20px; margin:18px 0; }
.hint { font-size: 13px; margin: 14px 0 0; }.two-columns { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; }.compact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }.broadcast-status { text-transform: capitalize; }.broadcast-status.completed { color:#087443; }.broadcast-status.failed, .broadcast-status.interrupted { color:#b42318; }.broadcast-status.running, .broadcast-status.queued { color:#9a6700; }.message-preview { white-space:pre-wrap; min-width:220px; max-width:420px; }
.button-link { display:inline-block; border-radius:7px; padding:10px 15px; font-weight:650; text-decoration:none; }.button-link.secondary { background:#e8eef5; color:#1e3e5d; }.button-link.secondary:hover { background:#d9e4f0; }.platform-stat-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }.platform-stat-card { margin:0; overflow:hidden; }.metric-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border:1px solid #e4e9f0; border-radius:8px; overflow:hidden; margin:16px 0; }.metric-grid div { padding:12px; border-bottom:1px solid #e4e9f0; }.metric-grid div:nth-child(odd) { border-right:1px solid #e4e9f0; }.metric-grid div:nth-last-child(-n + 2) { border-bottom:0; }.metric-grid span { color:#617287; display:block; font-size:12px; line-height:1.3; }.metric-grid strong { color:#163b66; display:block; font-size:22px; margin-top:5px; }.compact-table th, .compact-table td { padding:8px 7px; }.daily-table { font-size:13px; }
.statistics-kpis { grid-template-columns:repeat(4, minmax(0, 1fr)); }.statistics-kpis .card { min-height:170px; }.section-heading { margin:28px 0 10px; }.section-heading h2 { margin-bottom:4px; }.section-heading p { margin:0; }.trend { display:inline-block; border-radius:999px; padding:3px 8px; font-size:12px; font-weight:700; white-space:nowrap; }.trend.up { color:#087443; background:#e5f5ec; }.trend.down { color:#b42318; background:#fce8e6; }.trend.neutral { color:#536275; background:#edf2f7; }.notes-list { color:#536275; line-height:1.55; }
@media (max-width: 900px) { .statistics-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .topbar { padding: 14px 4vw; align-items:flex-start; flex-wrap:wrap; }.topbar nav { order:3; flex-basis:100%; overflow-x:auto; }.cards, .two-columns, .platform-stat-grid, .statistics-kpis { grid-template-columns:1fr; }.heading-row { align-items:flex-start; flex-direction:column; }.user { display:none; } }