:root { color: #14221e; background: #f5f7f4; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
.app-shell { max-width: 860px; margin: 0 auto; padding: 28px 20px 48px; }
.topbar, .section-heading, .overview { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar { padding-bottom: 22px; border-bottom: 1px solid #dce3dc; }
h1, h2, p { margin: 0; }
h1 { color: #12352f; font-size: 30px; line-height: 1.1; }
h2 { font-size: 22px; line-height: 1.2; }
.eyebrow, .card-label { color: #5c6963; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.icon-button, .add-button { width: 40px; height: 40px; border: 1px solid #b7c5bd; border-radius: 6px; background: #fff; color: #12352f; font-size: 25px; cursor: pointer; }
.icon-button:hover { background: #eaf1ed; }
.status-row { display: flex; align-items: center; gap: 8px; padding: 16px 0; color: #506059; font-size: 14px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c58a1c; }
.status-row.connected .status-dot { background: #1e8960; }
.overview { padding: 32px 0; align-items: end; }
.overview-copy { max-width: 310px; color: #506059; line-height: 1.5; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.metric-card { min-height: 178px; padding: 20px; border: 1px solid #d8e0da; border-radius: 8px; background: #fff; }
.metric { padding: 24px 0 10px; color: #12352f; font-size: 44px; font-weight: 700; line-height: 1; }
.metric span { font-size: 20px; }
.card-detail { color: #66746d; font-size: 14px; line-height: 1.35; }
.section-heading { margin-top: 38px; }
.add-button:disabled { opacity: .45; cursor: not-allowed; }
.empty-state { margin-top: 14px; padding: 28px 20px; border: 1px dashed #b9c7be; border-radius: 8px; color: #66746d; text-align: center; }
@media (max-width: 560px) { .app-shell { padding: 22px 16px 38px; } .overview { display: block; } .overview-copy { margin-top: 12px; } .grid { grid-template-columns: 1fr; } }