/* MFT FastType FT2 — Glass / Premium UI
   Desktop-first, mobile-friendly. Theme via data-theme. Reduced motion respected.
*/
:root, [data-theme="dark"] {
  --ft-bg0: #070b14;
  --ft-bg1: #0d1424;
  --ft-glass: rgba(16, 24, 40, 0.55);
  --ft-glass2: rgba(255, 255, 255, 0.06);
  --ft-border: rgba(255, 255, 255, 0.10);
  --ft-text: #e8eefc;
  --ft-muted: #94a3b8;
  --ft-accent: #5b8cff;
  --ft-accent2: #22d3ee;
  --ft-ok: #34d399;
  --ft-bad: #f87171;
  --ft-warn: #fbbf24;
  --ft-home: #a78bfa;
  --ft-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --ft-radius: 18px;
  --ft-font: "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --ft-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
}

[data-theme="light"] {
  --ft-bg0: #f4f7fb;
  --ft-bg1: #e8eef8;
  --ft-glass: rgba(255, 255, 255, 0.72);
  --ft-glass2: rgba(15, 23, 42, 0.04);
  --ft-border: rgba(15, 23, 42, 0.08);
  --ft-text: #0f172a;
  --ft-muted: #64748b;
  --ft-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.ft-body {
  font-family: var(--ft-font);
  color: var(--ft-text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(91, 140, 255, 0.25), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(34, 211, 238, 0.18), transparent 50%),
    linear-gradient(160deg, var(--ft-bg0), var(--ft-bg1));
  background-attachment: fixed;
}
body.ft-body.ft-reduced * {
  animation: none !important;
  transition: none !important;
}

.ft-skip {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
  left: 0; top: 0;
}
.ft-skip:focus {
  width: auto; height: auto; margin: 0; clip: auto;
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--ft-accent); color: #fff; padding: .5rem 1rem; border-radius: 8px;
}

.ft-top {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.25rem;
  backdrop-filter: blur(16px);
  background: var(--ft-glass);
  border-bottom: 1px solid var(--ft-border);
  position: sticky; top: 0; z-index: 40;
}
.ft-brand { display: flex; align-items: center; gap: .75rem; min-width: 12rem; }
.ft-logo {
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ft-accent), var(--ft-accent2));
  box-shadow: var(--ft-shadow); font-size: 1.2rem;
}
.ft-brand strong { display: block; font-size: 1rem; }
.ft-brand small { color: var(--ft-muted); font-size: .75rem; }

.ft-nav { display: flex; gap: .35rem; flex: 1; flex-wrap: wrap; }
.ft-nav button, .ft-course-switch button, .ft-chip, .ft-icon-btn {
  border: 1px solid var(--ft-border);
  background: var(--ft-glass2);
  color: var(--ft-text);
  border-radius: 999px;
  padding: .45rem .9rem;
  cursor: pointer;
  font: inherit;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.ft-nav button.is-active, .ft-course-switch button.is-active, .ft-chip.is-active {
  background: linear-gradient(135deg, rgba(91,140,255,.35), rgba(34,211,238,.25));
  border-color: rgba(91,140,255,.5);
}
.ft-nav button:hover, .ft-course-switch button:hover { transform: translateY(-1px); }
.ft-top-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ft-course-switch { display: inline-flex; gap: .25rem; }
.ft-link { color: var(--ft-accent2); text-decoration: none; font-size: .9rem; }

.ft-main {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 1rem;
  padding: 1rem 1.25rem 2rem;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  .ft-main { grid-template-columns: 1fr; }
}

.ft-card, .ft-glass {
  background: var(--ft-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  box-shadow: var(--ft-shadow);
  padding: 1rem 1.1rem;
}
.ft-side { display: flex; flex-direction: column; gap: .85rem; }
.ft-side h2, .ft-panel h2, .ft-hero h1 {
  margin: 0 0 .65rem;
  font-size: 0.95rem;
  letter-spacing: .02em;
  font-weight: 700;
}
.ft-name { font-size: 1.15rem; margin: 0 0 .5rem; font-weight: 700; }
.ft-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center;
}
.ft-stat-row span { display: block; color: var(--ft-muted); font-size: .7rem; }
.ft-stat-row strong { font-size: 1rem; }
.ft-hint { color: var(--ft-muted); font-size: .8rem; margin: .5rem 0 0; line-height: 1.45; }

.ft-stage-list, .ft-lesson-list, .ft-cat-grid, .ft-exam-list {
  display: flex; flex-direction: column; gap: .4rem; max-height: 280px; overflow: auto;
}
.ft-lesson, .ft-exam, .ft-cat {
  text-align: start;
  border: 1px solid var(--ft-border);
  background: var(--ft-glass2);
  color: var(--ft-text);
  border-radius: 12px;
  padding: .55rem .7rem;
  cursor: pointer;
  font: inherit;
}
.ft-lesson strong, .ft-exam strong { display: block; font-size: .88rem; }
.ft-lesson small, .ft-exam small { color: var(--ft-muted); font-size: .72rem; }
.ft-lesson.is-active, .ft-exam.is-active { border-color: var(--ft-accent); box-shadow: inset 0 0 0 1px var(--ft-accent); }
.ft-lesson:disabled { opacity: .45; cursor: not-allowed; }

.ft-check { display: flex; align-items: center; gap: .45rem; font-size: .85rem; margin: .35rem 0; color: var(--ft-muted); }

.ft-center { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }

.ft-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}
@media (max-width: 800px) { .ft-hero { grid-template-columns: 1fr; } }
.ft-hero h1 { font-size: 1.55rem; line-height: 1.25; }
.ft-hero p { color: var(--ft-muted); margin: 0 0 1rem; }
.ft-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.ft-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
}
@media (max-width: 900px) {
  .ft-metrics { grid-template-columns: repeat(3, 1fr); }
}
.ft-gauge {
  display: flex; align-items: center; gap: .55rem;
  background: var(--ft-glass);
  border: 1px solid var(--ft-border);
  border-radius: 16px;
  padding: .55rem .7rem;
  backdrop-filter: blur(14px);
}
.ft-ring { width: 42px; height: 42px; transform: rotate(-90deg); flex-shrink: 0; }
.ft-ring .bg { fill: none; stroke: rgba(148,163,184,.25); stroke-width: 3.2; }
.ft-ring .fg { fill: none; stroke: var(--ft-accent); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dasharray .2s ease; }
.ft-ring .fg.acc { stroke: var(--ft-ok); }
.ft-ring .fg.skill { stroke: var(--ft-accent2); }
.ft-gauge strong { display: block; font-size: 1.05rem; line-height: 1.1; }
.ft-gauge span, .ft-metric-mini span { color: var(--ft-muted); font-size: .68rem; }
.ft-metric-mini {
  background: var(--ft-glass); border: 1px solid var(--ft-border); border-radius: 16px;
  padding: .55rem .7rem; text-align: center;
}
.ft-metric-mini strong { display: block; font-size: 1.05rem; }

.ft-prompt-card { padding: 1rem 1.15rem; }
.ft-lesson-meta { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .65rem; color: var(--ft-muted); font-size: .82rem; }
.ft-prompt {
  font-family: var(--ft-mono);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.85;
  min-height: 4.5rem;
  white-space: pre-wrap;
  word-break: break-word;
  letter-spacing: .01em;
  padding: .5rem;
  border-radius: 12px;
  background: var(--ft-glass2);
}
.ft-prompt .ok, .ft-prompt .ft-ch.ok { color: var(--ft-ok); }
.ft-prompt .bad, .ft-prompt .ft-ch.bad {
  color: var(--ft-bad);
  background: rgba(248,113,113,.14);
  border-radius: 3px;
  text-decoration: underline wavy rgba(248,113,113,.55);
}
.ft-prompt .cur, .ft-prompt .ft-ch.cur {
  color: var(--ft-text);
  background: rgba(91,140,255,.28);
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 0 var(--ft-accent2), 0 0 0 1px rgba(91,140,255,.45);
  animation: ft-caret 1s steps(1) infinite;
}
.ft-prompt .dim, .ft-prompt .ft-ch.dim { color: var(--ft-muted); opacity: .88; }
.ft-prompt .ft-ch.word { background: rgba(167, 139, 250, 0.08); }
.ft-prompt .ft-ch.extra {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-radius: 3px;
  text-decoration: line-through;
}
.ft-prompt .ft-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-inline-start: 1px;
  vertical-align: text-bottom;
  background: var(--ft-accent2);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
  animation: ft-caret-block .9s steps(1) infinite;
}
.ft-prompt .ft-caret.end { margin-inline-start: 2px; }
@keyframes ft-caret { 50% { box-shadow: inset 0 -3px 0 0 transparent, 0 0 0 1px rgba(91,140,255,.25); } }
@keyframes ft-caret-block { 50% { opacity: 0; } }
.ft-body.ft-focus-mode .ft-side,
.ft-body.ft-focus-mode .ft-top-actions a:not(.ft-link-keep),
.ft-body.ft-zen-mode .ft-metrics,
.ft-body.ft-zen-mode .ft-keyboard-wrap,
.ft-body.ft-zen-mode .ft-side { opacity: .15; pointer-events: none; filter: blur(1px); }
.ft-body.ft-zen-mode .ft-prompt-card { max-width: 48rem; margin-inline: auto; }
.ft-body.ft-blind-mode .ft-prompt .ft-ch.dim { opacity: 0; }
.ft-body.ft-high-contrast {
  --ft-ok: #4ade80;
  --ft-bad: #fb7185;
  --ft-text: #ffffff;
  --ft-muted: #cbd5e1;
}
.ft-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .65rem;
  margin-top: .75rem;
}
.ft-hub-card {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .9rem .85rem;
  border-radius: 14px;
  border: 1px solid var(--ft-border);
  background: var(--ft-glass);
  backdrop-filter: blur(12px);
  color: inherit; text-decoration: none;
  min-height: 5.2rem;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ft-hub-card:hover, .ft-hub-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(91,140,255,.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  outline: none;
}
.ft-hub-card strong { font-size: .92rem; }
.ft-hub-card span { color: var(--ft-muted); font-size: .72rem; line-height: 1.35; }
.ft-hub-card .ico { font-size: 1.25rem; opacity: .9; }
.ft-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
}
.ft-settings-grid label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .78rem; color: var(--ft-muted);
}
.ft-settings-grid input, .ft-settings-grid select {
  border: 1px solid var(--ft-border);
  background: var(--ft-glass2);
  color: var(--ft-text);
  border-radius: 10px;
  padding: .45rem .55rem;
  font: inherit;
}
.ft-heatmap {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.ft-heatmap .hk {
  min-width: 1.8rem; padding: .25rem .35rem;
  border-radius: 8px; text-align: center;
  font-family: var(--ft-mono); font-size: .75rem;
  border: 1px solid var(--ft-border);
}
.ft-hand span.active {
  box-shadow: 0 0 0 2px var(--ft-accent2);
  transform: scale(1.08);
}
.ft-metric-mini.extra strong { color: var(--ft-accent2); }

.ft-input {
  margin-top: .75rem;
  min-height: 3.2rem;
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--ft-border);
  background: rgba(0,0,0,.18);
  color: var(--ft-text);
  font-family: var(--ft-mono);
  font-size: 1.05rem;
  line-height: 1.7;
  outline: none;
  white-space: pre-wrap;
}
[data-theme="light"] .ft-input { background: rgba(255,255,255,.7); }
.ft-input:focus { border-color: var(--ft-accent); box-shadow: 0 0 0 3px rgba(91,140,255,.2); }
.ft-input:empty::before {
  content: attr(data-placeholder);
  color: var(--ft-muted);
}

.ft-run-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .85rem; }
.mft-btn, .ft-btn {
  border: 0; border-radius: 12px; padding: .55rem 1rem; font: inherit; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.mft-btn:hover, .ft-btn:hover { transform: translateY(-1px); }
.mft-btn-primary, .ft-btn-primary {
  background: linear-gradient(135deg, var(--ft-accent), #7c5cff);
  color: #fff;
}
.mft-btn-secondary, .ft-btn-secondary {
  background: var(--ft-glass2); color: var(--ft-text); border: 1px solid var(--ft-border);
}
.mft-btn-ghost, .ft-btn-ghost {
  background: transparent; color: var(--ft-muted); border: 1px solid transparent;
}

/* Keyboard */
.ft-keyboard-wrap { padding: .75rem; }
.ft-keyboard { display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.ft-kb-row { display: flex; gap: .28rem; justify-content: center; flex-wrap: wrap; }
.ft-key {
  min-width: 2.1rem; height: 2.35rem; padding: 0 .4rem;
  border-radius: 8px;
  border: 1px solid var(--ft-border);
  background: rgba(255,255,255,.05);
  display: grid; place-items: center;
  font-size: .78rem;
  color: var(--ft-text);
  user-select: none;
  transition: transform .08s ease, background .08s ease, box-shadow .12s ease;
}
.ft-key.wide { min-width: 5.5rem; }
.ft-key.home { box-shadow: inset 0 -2px 0 var(--ft-home); }
.ft-key.next, .ft-key.glow {
  background: rgba(91,140,255,.4);
  border-color: var(--ft-accent);
  box-shadow: 0 0 12px rgba(91,140,255,.55), 0 0 0 2px rgba(91,140,255,.35);
}
.ft-key.ok-flash {
  box-shadow: 0 0 10px rgba(52,211,153,.55);
}
.ft-key.hint {
  animation: ft-pulse 1.2s ease-in-out infinite;
}
.ft-key.pressed { transform: scale(.94); background: rgba(34,211,238,.25); }
.ft-key.wrong { background: rgba(248,113,113,.35); border-color: var(--ft-bad); }
.ft-key.ghost { opacity: .35; }
@keyframes ft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.45); }
  50% { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}
.ft-key.zone-L_pinky { border-top: 2px solid #f472b6; }
.ft-key.zone-L_ring { border-top: 2px solid #fb923c; }
.ft-key.zone-L_middle { border-top: 2px solid #facc15; }
.ft-key.zone-L_index { border-top: 2px solid #4ade80; }
.ft-key.zone-R_index { border-top: 2px solid #2dd4bf; }
.ft-key.zone-R_middle { border-top: 2px solid #38bdf8; }
.ft-key.zone-R_ring { border-top: 2px solid #818cf8; }
.ft-key.zone-R_pinky { border-top: 2px solid #c084fc; }
.ft-key.zone-thumb { border-top: 2px solid #e2e8f0; }
.ft-kb-caption { text-align: center; color: var(--ft-muted); font-size: .75rem; margin: .5rem 0 0; }

/* Home hub widgets */
.ft-home-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .85rem;
}
.ft-home-grid > * { grid-column: span 4; min-width: 0; }
.ft-home-grid .span-6 { grid-column: span 6; }
.ft-home-grid .span-8 { grid-column: span 8; }
.ft-home-grid .span-12 { grid-column: span 12; }
@media (max-width: 1000px) {
  .ft-home-grid > *, .ft-home-grid .span-6, .ft-home-grid .span-8 { grid-column: span 12; }
}

.ft-radar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
}
.ft-radar-item {
  background: var(--ft-glass2);
  border-radius: 10px;
  padding: .45rem .55rem;
  font-size: .78rem;
}
.ft-radar-item b { display: block; font-size: .95rem; }
.ft-radar-bar {
  height: 6px; border-radius: 99px; background: rgba(148,163,184,.2); margin-top: .3rem; overflow: hidden;
}
.ft-radar-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--ft-accent), var(--ft-accent2));
}

.ft-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ft-cal-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--ft-glass2);
  border: 1px solid transparent;
  font-size: .65rem;
  display: grid; place-items: center;
  color: var(--ft-muted);
}
.ft-cal-cell.on { background: rgba(91,140,255,.35); color: var(--ft-text); border-color: rgba(91,140,255,.4); }
.ft-cal-cell.hot { background: rgba(34,211,238,.4); }

.ft-report-badge {
  display: inline-block; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  margin-bottom: .5rem;
}
.ft-report-badge.practice { background: rgba(91,140,255,.2); color: var(--ft-accent); }
.ft-report-badge.official { background: rgba(251,191,36,.2); color: var(--ft-warn); }
.ft-report-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .55rem; margin-bottom: .75rem;
}
.ft-report-grid div {
  background: var(--ft-glass2); border-radius: 12px; padding: .55rem .65rem;
}
.ft-report-grid span { display: block; color: var(--ft-muted); font-size: .7rem; }
.ft-report-grid strong { font-size: 1rem; }

.ft-panel.hidden, .hidden { display: none !important; }

.ft-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  max-height: none;
}
.ft-cat { text-align: center; font-size: .82rem; }

.ft-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.ft-table th, .ft-table td {
  text-align: start; padding: .45rem .5rem; border-bottom: 1px solid var(--ft-border);
}
.ft-table th { color: var(--ft-muted); font-weight: 600; }

/* Builder */
.ft-builder-layout {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  gap: 1rem;
  padding: 1rem;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .ft-builder-layout { grid-template-columns: 1fr; }
}
.ft-builder-layout input, .ft-builder-layout select, .ft-builder-layout textarea {
  width: 100%;
  margin: .25rem 0 .65rem;
  padding: .5rem .65rem;
  border-radius: 10px;
  border: 1px solid var(--ft-border);
  background: var(--ft-glass2);
  color: var(--ft-text);
  font: inherit;
}
.ft-builder-layout label { font-size: .8rem; color: var(--ft-muted); display: block; }
.ft-drag-list { min-height: 120px; border: 1px dashed var(--ft-border); border-radius: 12px; padding: .5rem; }
.ft-drag-item {
  padding: .45rem .55rem; margin: .3rem 0; border-radius: 8px;
  background: var(--ft-glass2); border: 1px solid var(--ft-border); cursor: grab; font-size: .82rem;
}

/* FT3 integrity badges + hand guide */
.ft-integrity-row {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: .35rem 0 .5rem;
}
.ft-badge {
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--ft-border);
  background: rgba(251, 191, 36, .15);
  color: var(--ft-warn);
}
.ft-badge.danger {
  background: rgba(248, 113, 113, .15);
  color: var(--ft-bad);
}
.ft-hand-guide, #ft-ghost-hands {
  display: flex; justify-content: center; gap: 1.5rem; margin-top: .65rem; flex-wrap: wrap;
}
#ft-ghost-hands.disabled { opacity: .25; filter: grayscale(.6); }
.ft-hand {
  display: flex; gap: .28rem; align-items: flex-end;
  padding: .35rem .5rem;
  border-radius: 14px;
  background: var(--ft-glass2);
  border: 1px solid var(--ft-border);
}
.ft-hand span {
  width: 16px; border-radius: 7px 7px 5px 5px;
  opacity: .55;
  transform: translateZ(0) translateY(0);
  will-change: transform, opacity, box-shadow;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.ft-hand span.active {
  opacity: 1;
  transform: translateZ(0) translateY(-6px) scale(1.08);
  box-shadow: 0 0 14px currentColor;
}
.ft-hand .f1 { height: 30px; background: #f472b6; color: #f472b6; }
.ft-hand .f2 { height: 38px; background: #fb923c; color: #fb923c; }
.ft-hand .f3 { height: 42px; background: #facc15; color: #facc15; }
.ft-hand .f4 { height: 36px; background: #4ade80; color: #4ade80; }
.ft-hand .f5 { height: 24px; background: #e2e8f0; color: #e2e8f0; width: 20px; border-radius: 50%; }
.ft-hand.right .f1 { background: #c084fc; color: #c084fc; }
.ft-hand.right .f2 { background: #818cf8; color: #818cf8; }
.ft-hand.right .f3 { background: #38bdf8; color: #38bdf8; }
.ft-hand.right .f4 { background: #2dd4bf; color: #2dd4bf; }

.ft-roadmap {
  display: flex; flex-direction: column; gap: .4rem; max-height: 420px; overflow: auto;
}
.ft-roadmap-item {
  display: grid; grid-template-columns: 8px 1fr auto; gap: .55rem; align-items: center;
  padding: .45rem .55rem; border-radius: 10px; background: var(--ft-glass2); border: 1px solid var(--ft-border);
  font-size: .82rem;
}
.ft-roadmap-item .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ft-muted);
}
.ft-roadmap-item.available .dot { background: var(--ft-accent); box-shadow: 0 0 8px var(--ft-accent); }
.ft-roadmap-item.completed .dot { background: var(--ft-ok); }
.ft-roadmap-item.locked { opacity: .45; }
.ft-modes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem;
}

.ft-key {
  transform: translateZ(0);
  will-change: transform, background;
  backface-visibility: hidden;
}

.ft-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .85rem;
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

@media print {
  .ft-top, .ft-side, .ft-nav, .ft-keyboard-wrap, .ft-run-actions { display: none !important; }
  .ft-main { grid-template-columns: 1fr; }
  body.ft-body { background: #fff; color: #000; }
  .ft-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root, [data-theme="dark"], [data-theme="light"] {
    --ft-border: currentColor;
    --ft-text: CanvasText;
    --ft-bg0: Canvas;
  }
  .ft-key, .ft-card, .ft-gauge { border-width: 2px; }
}