.afl-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .afl-layout { grid-template-columns: minmax(0, 1fr); } }


.afl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.afl-step {
    position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px;
    padding: 16px 18px 18px; border-radius: var(--radius-lg);
    background: var(--bg-section); border: 1px solid var(--border); box-shadow: var(--shadow-premium);
    transition: border-color 250ms var(--transition);
}
.afl-step + .afl-step::before {
    content: ""; position: absolute; left: 41px; top: -14px; width: 1px; height: 14px; background: var(--border);
}
.afl-step.is-active { border-color: var(--border-hover); }

.afl-step-no {
    position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-md);
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-dim); background: var(--bg-panel); border: 1px solid var(--border);
}
.afl-step.is-active .afl-step-no { background: transparent; border-color: transparent; color: var(--text-main); }
.afl-step.is-done .afl-step-no {
    background: transparent; border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success);
}
.afl-step-body { min-width: 0; }
.afl-step-head h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--text-main); letter-spacing: -0.01em; }
.afl-step-head p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.afl-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }


.afl-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
@media (max-width: 760px) { .afl-boards { grid-template-columns: minmax(0, 1fr); } }
.afl-board, .afl-size {
    position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 14px !important; border-radius: var(--radius-md) !important; cursor: pointer; text-align: left;
    background: var(--bg-panel) !important; border: 1px solid var(--border) !important; color: var(--text-dim);
    transition: border-color 200ms, background-color 200ms, transform 220ms var(--transition);
}
.afl-board:hover, .afl-size:hover { transform: translateY(-2px); border-color: var(--border-hover) !important; }
.afl-board.active, .afl-size.active { border-color: transparent !important; }

.afl-board-art { display: grid; place-items: center; width: 100%; height: 112px; margin: -18px 0 -14px; }
.afl-board-art .art-svg, .afl-size-art .art-svg {
    height: 100%; width: 100%; filter: grayscale(1) brightness(0.8); opacity: 0.55;
    transition: filter 300ms, opacity 300ms, transform 300ms var(--transition);
}
.afl-board.active .art-svg, .afl-size.active .art-svg { filter: none; opacity: 1; }
.afl-board-text, .afl-size-text { display: flex; flex-direction: column; gap: 2px; }
.afl-board-text b { font-size: 15px; font-weight: 650; color: var(--text-main); letter-spacing: -0.01em; }
.afl-board-text small, .afl-size-text small { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }


.afl-wiring { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; }
.afl-wiring-label {
    flex: none; padding-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.afl-pins { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.afl-pins li {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 9px; border-radius: 999px;
    background: var(--bg-panel); border: 1px solid var(--border);
    font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-main);
}
.afl-pins b { font-weight: 600; font-size: 10px; color: var(--text-muted); }
.afl-builtin { display: none; }
.afl-layout[data-family="cyd"] .afl-wiring { display: none; }
.afl-layout[data-family="cyd"] .afl-builtin { display: block; }


.afl-layout[data-family="cyd"] .afl-choice[data-for="devkit"],
.afl-layout[data-family="devkit"] .afl-choice[data-for="cyd"] { display: none; }
.afl-choice { animation: afl-in 280ms var(--transition) both; }
@keyframes afl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }


.afl-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
@media (max-width: 760px) { .afl-sizes { grid-template-columns: minmax(0, 1fr); } }
.afl-size-art { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 108px; margin: -8px 0 -12px; }
.afl-size--24 .afl-size-art .art-svg { height: 69%; }
.afl-size--28 .afl-size-art .art-svg { height: 80%; }
.afl-size-text .afl-size-keys { margin-top: 4px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.afl-size-text b { font-size: 22px; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 2px; }


.afl-drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
@media (min-width: 1400px) { .afl-drivers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.afl-driver {
    position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 14px !important; border-radius: var(--radius-md) !important; cursor: pointer; text-align: left;
    background: var(--bg-panel) !important; border: 1px solid var(--border) !important; color: var(--text-dim);
    transition: border-color 200ms, background-color 200ms, transform 220ms var(--transition);
}
.afl-driver:hover { transform: translateY(-2px); border-color: var(--border-hover) !important; }
.afl-driver.active { border-color: transparent !important; }
.afl-driver-art { display: block; height: 52px; }
.afl-driver-art .art-svg { height: 100%; width: auto; filter: grayscale(1) brightness(0.8); opacity: 0.6; transition: filter 300ms, opacity 300ms; }
.afl-driver--small .afl-driver-art .art-svg { height: 78%; margin-top: 11%; }
.afl-driver.active .afl-driver-art .art-svg { filter: none; opacity: 1; }
.afl-driver-text { display: flex; flex-direction: column; gap: 2px; }
.afl-driver-text b { font-size: 15px; font-weight: 650; color: var(--text-main); letter-spacing: -0.01em; }
.afl-driver-text small { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }
.afl-badge {
    position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-contrast); background: var(--accent-gradient);
}

.afl-badge--soft { color: var(--text-main); background: color-mix(in srgb, #f0c02c 26%, var(--bg-panel)); }

.afl-panel-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 16px; }
.afl-panel-row .afl-hint { margin: 0; flex: 1; min-width: 200px; }
.afl-port { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.afl-port .st-select { flex: 1; }


.afl-panel {
    position: sticky; top: 0; padding: 20px 20px 16px; border-radius: var(--radius-lg);
    background: var(--bg-section); border: 1px solid var(--border); box-shadow: var(--shadow-premium);
}
.afl-stage { position: relative; width: min(230px, 72%); aspect-ratio: 1; margin: 4px auto 16px; display: grid; place-items: center; }
.afl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.afl-ring circle { fill: none; stroke-width: 5; }
.afl-ring-dash { stroke: var(--border-hover); stroke-dasharray: 2 9; }
.afl-ring-track { stroke: var(--border); opacity: 0; transition: opacity 300ms; }
.afl-ring-fill {
    stroke: url(#afl-grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset 300ms var(--transition), stroke 300ms;
}
.afl-stage-chip { position: relative; width: 62%; }
.afl-stage-chip .art-svg { width: 100%; height: auto; }
.afl-stage-chip .art-cyd, .afl-layout[data-family="cyd"] .afl-stage-chip .art-esp32 { display: none; }
.afl-layout[data-family="cyd"] .afl-stage-chip .art-cyd { display: block; }
.afl-stage-pct {
    position: absolute; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-main);
    font-variant-numeric: tabular-nums; opacity: 0; transform: scale(0.85); transition: opacity 300ms, transform 400ms var(--transition);
}
.afl-stage-done, .afl-stage-err { position: absolute; width: 38%; height: 38%; fill: none; stroke: var(--accent-contrast); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.afl-stage-done { stroke-dasharray: 48; stroke-dashoffset: 48; }

.afl-stage[data-state="busy"] .afl-ring-track { opacity: 1; }
.afl-stage[data-state="busy"] .afl-ring-fill { stroke-dasharray: 22 78; animation: afl-orbit 1.1s linear infinite; transition: none; }
.afl-stage[data-state="writing"] .afl-ring-track { opacity: 1; }
.afl-stage[data-state="writing"] .afl-ring-dash { opacity: 0; }
.afl-stage[data-state="writing"] .afl-stage-chip { opacity: 0; transform: scale(0.6); transition: opacity 300ms, transform 400ms; }
.afl-stage[data-state="writing"] .afl-stage-pct { opacity: 1; transform: none; }
.afl-stage[data-state="done"] .afl-ring-dash { opacity: 0; }
.afl-stage[data-state="done"] .afl-ring-fill { stroke: var(--success); stroke-dashoffset: 0; }
.afl-stage[data-state="done"] .afl-stage-chip, .afl-stage[data-state="error"] .afl-stage-chip { opacity: 0; }
.afl-stage[data-state="done"] .afl-stage-pct, .afl-stage[data-state="error"] .afl-stage-pct { opacity: 0; }
.afl-stage[data-state="done"]::before, .afl-stage[data-state="error"]::before {
    content: ""; position: absolute; width: 52%; height: 52%; border-radius: 50%; animation: afl-pop 450ms var(--transition) both;
}
.afl-stage[data-state="done"]::before { background: var(--success); }
.afl-stage[data-state="done"] .afl-stage-done { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 500ms 220ms var(--transition); }
.afl-stage[data-state="error"] .afl-ring-dash { opacity: 0; }
.afl-stage[data-state="error"] .afl-ring-fill { stroke: var(--danger); stroke-dashoffset: 0; }
.afl-stage[data-state="error"]::before { background: var(--danger); }
.afl-stage[data-state="error"] .afl-stage-err { opacity: 1; }

@keyframes afl-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes afl-pop { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

.afl-status { text-align: center; }
.afl-status b { display: block; font-size: 17px; font-weight: 650; color: var(--text-main); }
.afl-status span { display: block; margin: 5px auto 0; max-width: 40ch; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.afl-kv { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--border); }
.afl-kv li {
    display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-dim);
}
.afl-kv b {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.afl-kv span { overflow-wrap: anywhere; }
.afl-hidden { display: none; }

.afl-log { margin-top: 14px; border-top: 1px solid var(--border); }
.afl-log summary {
    display: flex; align-items: center; gap: 8px; padding: 12px 0 8px; cursor: pointer; list-style: none;
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.afl-log summary::-webkit-details-marker { display: none; }
.afl-log summary::before { content: "+"; color: var(--accent-text); }
.afl-log[open] summary::before { content: "−"; }
.afl-copy {
    margin-left: auto; padding: 4px 10px; border-radius: var(--radius-xs); cursor: pointer;
    background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; letter-spacing: 0.06em;
}
.afl-copy:hover { color: var(--text-strong); border-color: var(--border-hover); }
.afl-log .st-console { max-height: 240px; }

@media (prefers-reduced-motion: reduce) {
    .afl-ring-fill, .afl-stage::before, .afl-choice { animation: none !important; }
}