/* App typography and tokens from polyalpha/src/theme; static 414pt app viewport. */
@font-face { font-family: Jakarta; font-weight: 400; src: url('fonts/PlusJakartaSans_400Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Jakarta; font-weight: 500; src: url('fonts/PlusJakartaSans_500Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Jakarta; font-weight: 600; src: url('fonts/PlusJakartaSans_600SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Jakarta; font-weight: 700; src: url('fonts/PlusJakartaSans_700Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Jakarta; font-weight: 800; src: url('fonts/PlusJakartaSans_800ExtraBold.ttf') format('truetype'); font-display: swap; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 430px; height: 850px; overflow: hidden; background: transparent; }
body { font-family: Jakarta, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }
.device { position: relative; width: 430px; height: 850px; padding: 8px; border-radius: 48px; background: linear-gradient(160deg, #535353, #282828 45%, #151515); }
.screen { width: 414px; height: 834px; overflow: hidden; border-radius: 40px; background: #121212; }
main.discover, main.leaderboard, main.strategy-detail { transform: none; padding-top: 24px; }
.preview-leaderboard .strategy-card:nth-child(n+5) { display: none; }
.app { width: 414px; min-height: 834px; padding-top: 24px; background: #121212; }
.app svg { display: block; flex: none; }
.app-header { display: flex; align-items: center; gap: 12px; padding: 12px 24px; }
.app-header h1 { flex: 1; font-size: 18px; line-height: 24px; font-weight: 600; text-align: center; }
.icon-button, .header-space { width: 44px; height: 44px; flex: none; }
.icon-button { display: flex; align-items: center; justify-content: center; border-radius: 22px; background: #1f1f1f; }
.steps { display: flex; align-items: center; padding: 4px 24px 18px; }
.step { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #b3b3b3; }
.step.current { color: white; }
.dot { width: 6px; height: 6px; border-radius: 3px; background: #363636; }
.connector { flex: 1; height: 1px; margin: 0 7px; background: #363636; }
.done { background: #1ed760; }
.chat { display: flex; flex-direction: column; gap: 24px; padding: 8px 24px 32px; }
.user-message { align-self: flex-end; max-width: 90%; padding: 15px; border-radius: 18px; background: #1f1f1f; font-size: 15px; line-height: 23px; }
.assistant-message { display: flex; flex-direction: column; gap: 9px; }
.annie { color: #1ed760; font-size: 13px; font-weight: 600; }
.app p { font-size: 15px; line-height: 23px; font-weight: 400; }
.strategy-card-app { display: flex; flex-direction: column; gap: 15px; padding: 20px; border-radius: 10px; background: #1f1f1f; }
.card-label { display: flex; align-items: center; gap: 10px; font-size: 10px; line-height: 15px; color: #b3b3b3; letter-spacing: .3px; font-weight: 500; }
.strategy-heading { font-size: 24px; line-height: 32px; letter-spacing: -.5px; font-weight: 600; }
.note { font-size: 12px; line-height: 18px; color: #b3b3b3; font-weight: 400; }
.micro, .app p.micro { font-size: 10px; line-height: 15px; color: #b3b3b3; letter-spacing: .3px; font-weight: 500; }
.rule-group { display: flex; flex-direction: column; gap: 6px; }
.condition-tree { display: flex; flex-direction: column; gap: 9px; border-left: 2px solid #363636; padding-left: 12px; }
.app-button { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 20px; border-radius: 28px; background: #1ed760; color: #07140b; font-size: 16px; line-height: 22px; font-weight: 600; }
.app-button.secondary { background: #1f1f1f; border: 1px solid #363636; color: #fff; }
.backtest-content { display: flex; flex-direction: column; gap: 24px; padding: 8px 24px 40px; }
.backtest-summary { display: flex; flex-direction: column; gap: 12px; }
.backtest-summary .spread { display: none; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.performance-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 10px; background: #1f1f1f; }
.app h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.roi-readout { font-size: 36px; line-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.backtest-chart-frame { height: 195px; }
.backtest-chart text { font-family: Jakarta, sans-serif; fill: #b3b3b3; font-size: 10px; font-weight: 500; }
.chart-dates-app { display: flex; justify-content: space-between; font-size: 10px; line-height: 15px; color: #b3b3b3; letter-spacing: .3px; }
.chart-ranges { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.chart-ranges span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border-radius: 24px; background: #2a2a2a; font-size: 14px; line-height: 20px; font-weight: 600; }
.chart-ranges .selected { background: #1ed760; color: #07140b; }
.app-metrics { display: flex; gap: 8px; padding: 8px 0; }
.app-metrics > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.app-metrics strong { font-size: 26px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-metrics.compact { padding: 0; }
.app-metrics.compact > div { gap: 4px; }
.app-metrics.compact strong { font-size: 17px; line-height: 23px; }
.positive { color: #1ed760; }
.statistics-card { display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: 16px; background: #1f1f1f; }
.statistics-card .micro { display: none; }
/* Focus screenshot 07 on its existing execution rows; keep its metrics intact. */
.preview-execution .roi-history { display: none; }
.preview-execution .detail-content { gap: 24px; }
.preview-execution .activity-row { border-bottom: 1px solid #363636; }
.preview-execution .activity-note { font-size: 11px; }