﻿.config-guide{border:1px solid var(--line);border-radius:12px;background:var(--bg-panel,var(--bg));margin-bottom:22px;overflow:hidden;color:var(--fg)}
.config-guide-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:var(--accent-bg);font-size:12px;font-weight:600}
.config-guide-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;padding:18px 20px;align-items:center}
.config-guide h3{font-size:18px;line-height:1.4;margin:0 0 8px;color:var(--fg)}
.config-guide p,.config-help p{font-size:13px;line-height:1.65;margin:6px 0;color:var(--fg-2)}
.config-help{font-size:13px;line-height:1.6;margin:10px 0;color:var(--fg-2)}
.config-help summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:32px;padding:4px 0}
.config-help[open]>div{padding:8px 0}
.config-anatomy{margin:0;color:var(--accent);text-align:center;min-width:0}
.config-anatomy svg{width:100%;max-height:160px;background:var(--accent-bg);border-radius:8px}
.config-anatomy text{font:12px Inter,Arial,sans-serif;fill:var(--fg-2)}
.config-anatomy figcaption{font-size:10px;color:var(--fg-3);margin-top:4px}
.config-progress{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.config-progress button{display:flex;gap:7px;align-items:center;background:var(--bg-input);border:1px solid var(--line);color:var(--fg-2);padding:8px 12px;min-height:40px;border-radius:8px;font:inherit;font-size:12px;cursor:pointer}
.config-progress button.is-current{background:var(--accent);color:var(--accent-contrast,#fff);border-color:var(--accent)}
.config-progress button span{font-variant-numeric:tabular-nums;font-weight:700}
.config-progress button:focus-visible,.config-help summary:focus-visible,.config-guide button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.config-notice{padding:12px 16px;border:1px solid var(--accent-border);background:var(--accent-bg);border-radius:8px;margin:12px 0;font-size:13px;line-height:1.6;color:var(--fg)}
.config-recovery{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.config-recovery p{flex:1 1 240px;margin:0}
.config-track-starts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.config-track-starts button{min-height:40px}
.config-track-caption{font-size:12px;color:var(--fg-2);line-height:1.6;margin:8px 0}
.config-mode-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.config-mode-cards button{display:block;background:var(--bg-input);border:1px solid var(--line);color:var(--fg);padding:14px;text-align:left;border-radius:10px;cursor:pointer}
.config-mode-cards button.is-active{border:2px solid var(--accent);background:var(--accent-bg)}
.config-mode-cards strong,.config-mode-cards small{display:block;line-height:1.5}
.config-mode-cards small{margin-top:6px;color:var(--fg-2)}
.config-field-error{color:var(--status-rejected);font-size:12px;margin-top:5px}
@media(max-width:700px){.config-guide-body{grid-template-columns:1fr;padding:14px;gap:10px}.config-anatomy svg{max-height:130px}.config-mode-cards{grid-template-columns:1fr}.config-progress{flex-wrap:nowrap;overflow:auto;padding-bottom:5px}.config-progress button{flex-shrink:0}.config-guide-bar{padding:8px 12px}.config-progress button,.config-track-starts button{min-height:44px}}

.config-history { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0; }
.config-history span { flex:1 1 250px; font-size:.85rem; }
.config-error-link { border:0; background:none; color:var(--accent); text-decoration:underline; text-align:left; padding:6px 0; cursor:pointer; }

.wiz .config-mode-cards > button { display:block; }

.track-pan-controls { position:relative; font-size:11px; color:var(--fg-2); }
.track-pan-controls summary { cursor:pointer; padding:8px; }
.track-pan-controls[open]>div { position:absolute; top:100%; left:0; display:flex; gap:4px; z-index:3; padding:8px; background:var(--bg-panel,var(--bg)); border:1px solid var(--line); border-radius:8px; }
.track-pan-controls button { min-width:40px; min-height:40px; border:1px solid var(--line); background:var(--bg-input); color:var(--fg); border-radius:6px; cursor:pointer; }
@media(max-width:700px){.track-preview-toolbar .zoom-badge { display:none; }.track-preview-toolbar{flex-wrap:wrap;}}
