:root { --module-bg: #0b1220; --module-border: rgba(148, 163, 184, 0.35); --module-panel: #131d33; --module-panel-alt: #192642; --module-text: #f8fafc; --module-text-muted: #a0acc4; --module-accent: #38bdf8; --module-accent-soft: rgba(56, 189, 248, 0.16); --module-success: #34d399; --module-warn: #fbbf24; --module-alert: #f87171; --module-radius: 16px; --module-gap: 1rem; font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 18px; line-height: 1.35; } body { margin: 0; background: radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.18), transparent 55%), radial-gradient(circle at 85% 0%, rgba(59, 130, 246, 0.12), transparent 50%), var(--module-bg); color: var(--module-text); -webkit-font-smoothing: antialiased; } .module-shell { padding: 1.5rem clamp(1rem, 5vw, 2.5rem) 3rem; display: flex; flex-direction: column; gap: 1.5rem; } .module-grid { display: grid; gap: 1.5rem; } .module-card { background: var(--module-panel); border: 1px solid var(--module-border); border-radius: var(--module-radius); box-shadow: 0 16px 48px rgba(2, 6, 23, 0.42); padding: 1.25rem 1.5rem; display: grid; gap: 1rem; } .module-card--tight { gap: 0.75rem; } .module-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .module-heading__title { font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 600; letter-spacing: 0.04em; } .module-heading__meta { color: var(--module-text-muted); font-size: 1rem; } .module-table { width: 100%; border-collapse: collapse; border-spacing: 0; color: inherit; } .module-table th, .module-table td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, 0.18); font-variant-numeric: tabular-nums; } .module-table th { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem; color: var(--module-text-muted); } .module-table td { font-size: 1.05rem; } .module-table tr:last-child td { border-bottom: 0; } .module-table--tight th, .module-table--tight td { padding: 0.5rem 0.6rem; } .module-table__number { text-align: right; } .module-subcard { background: var(--module-panel-alt); border: 1px solid var(--module-border); border-radius: 12px; padding: 1rem 1.1rem; display: grid; gap: 0.75rem; } .module-subcard__title { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.05em; } .module-subcard--compact { padding: 0.85rem 0.95rem; gap: 0.55rem; } .module-vertical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 1rem; justify-items: center; } .module-vertical { display: grid; gap: 0.5rem; justify-items: center; } .module-vertical__bar { width: 32px; height: 150px; border-radius: 10px; background: rgba(148, 163, 184, 0.16); border: 1px solid rgba(148, 163, 184, 0.25); position: relative; overflow: hidden; } .module-vertical__fill { position: absolute; inset: auto 0 0 0; background: linear-gradient(180deg, rgba(56, 189, 248, 0.8), rgba(56, 189, 248, 0.35)); transition: height 800ms cubic-bezier(0.4, 0, 0.2, 1); } .module-vertical__label { text-align: center; font-size: 0.9rem; color: var(--module-text-muted); } .module-vertical__value { font-weight: 600; font-variant-numeric: tabular-nums; } .module-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .module-metric-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .module-metric { background: var(--module-panel-alt); border: 1px solid var(--module-border); border-radius: 14px; padding: 0.85rem 1rem; display: grid; gap: 0.4rem; } .module-metric__label { color: var(--module-text-muted); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; } .module-metric__value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; } .module-metric__note { font-size: 0.95rem; color: var(--module-text-muted); } .module-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.38); } .module-pill--success { background: rgba(52, 211, 153, 0.2); border-color: rgba(52, 211, 153, 0.45); color: #c7f9de; } .module-pill--warn { background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.45); color: #fef3c7; } .module-pill--alert { background: rgba(248, 113, 113, 0.22); border-color: rgba(248, 113, 113, 0.45); color: #fecaca; } .module-bar { position: relative; height: 0.85rem; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, 0.2); } .module-bar__fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(56, 189, 248, 0.85), rgba(56, 189, 248, 0.45)); transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1); } .module-progress { display: grid; gap: 0.4rem; } .module-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .module-col { display: grid; gap: 0.6rem; } .module-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .module-row__label { color: var(--module-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; } .module-row__value { font-size: 1.15rem; font-variant-numeric: tabular-nums; font-weight: 500; } .module-grid--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .module-grid--stacked { grid-template-columns: 1fr; } .module-divider { height: 1px; background: rgba(148, 163, 184, 0.25); border: 0; } .module-tag { background: var(--module-accent-soft); color: var(--module-accent); font-weight: 600; padding: 0.4rem 0.75rem; border-radius: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; } .module-grid + .module-grid { margin-top: 0.5rem; } .module-stack { display: grid; gap: 0.65rem; } .module-stack__item { display: flex; justify-content: space-between; align-items: baseline; gap: 0.65rem; } .module-stack__item strong { font-size: 1.2rem; } .module-notes { font-size: 0.95rem; color: var(--module-text-muted); } @media (max-width: 960px) { :root { font-size: 17px; } .module-shell { padding-inline: clamp(1rem, 4vw, 1.75rem); } } @media (max-width: 640px) { :root { font-size: 16px; } }