* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: var(--font);
    background: #eef1f5;
    color: var(--text-primary);
    font-size: var(--fs-body);
    line-height: 1.55;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { display: block; }

/* Typography hierarchy: display faces for headings, system UI for readable body copy. */
.preview-brand-title,
.topbar-title,
.board-title,
.page-title,
.hero-name,
.mobile-title,
.detail-hero-name,
.proto-card-title,
.section-card-title,
.section-caption,
.card-block-title {
    font-family: var(--font-display);
    text-rendering: optimizeLegibility;
}
.page-title,
.board-title {
    letter-spacing: -0.02em;
}
.kpi-value,
.m-stat-value,
.m-hero-code,
.pagination,
.pg-select {
    font-variant-numeric: tabular-nums;
}
.preview-app svg { display: block; width: 16px; height: 16px; }
.preview-nav-item .nav-ico svg,
.sidebar-item .icon svg { width: 16px; height: 16px; }
.btn svg { width: 16px; height: 16px; }
.status-note svg { width: 16px; height: 16px; }
.scan-hero .scan-icon svg,
.state-block .state-icon svg { width: 100%; height: 100%; }
.flow-step .go svg { width: 12px; height: 12px; }
.spacer { flex: 1; }
.hidden { display: none !important; }