/* FTMO roadmap steps */
/* FTMO roadmap */
.road { display: grid; gap: 0; position: relative; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-md); position: relative; padding-bottom: 20px; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.step.ok:not(:last-child)::after { background: var(--good); }
.marker { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--text-xs) var(--font-body); background: var(--bg); border: 2px solid var(--line); color: var(--muted); }
.step.ok .marker { background: var(--good); border-color: var(--good); color: var(--on-accent); }
.step.now .marker { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-md) var(--space-md); display: grid; gap: var(--space-sm); min-width: 0; }
.step.now .card { border-color: var(--accent); }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); align-items: center; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-xs); }
.kv div { font-size: var(--text-xs); color: var(--muted); }
.kv b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; font-size: var(--text-sm); }
.phases { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.phase { flex: 1 1 90px; text-align: center; padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-panel); font: 600 var(--text-xs) var(--font-body); border: 1px solid var(--line); color: var(--muted); }
.phase.ok { background: color-mix(in srgb, var(--good) 18%, transparent); border-color: color-mix(in srgb, var(--good) 55%, var(--line)); color: var(--good); }
.phase.cur { border-color: var(--accent); color: var(--accent); }

.banner { border: 1px solid var(--warn); color: var(--warn); border-radius: var(--radius-panel); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
footer { color: var(--muted); font-size: var(--text-xs); }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; background: var(--panel-2); border: 1px solid var(--accent); color: var(--fg); border-radius: var(--radius-panel); padding: var(--space-sm) var(--space-md); font: 600 var(--text-sm) var(--font-body); box-shadow: var(--shadow-raise); transition: opacity .25s ease, transform .25s ease; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.btn.big { padding: var(--space-sm) 20px; font-size: var(--text-md); }