/* Component-only layout. Colors, type, panels, buttons and themes come from base.html. */
.cfg { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.cfg [hidden] { display: none !important; }
.cfg-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cfg-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; }
.cfg-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.cfg .panel { min-width: 0; }
.cfg .panel-header { flex-wrap: wrap; gap: .7rem; }
.cfg .panel-body { padding: 1.35rem; }
.cfg label { display: block; font-size: .85rem; margin-bottom: .4rem; }
.cfg label small { color: var(--text-muted); margin-left: .3rem; }
.cfg input:not([type=checkbox]), .cfg select { display: block; width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: .65rem .75rem; font: inherit; font-size: .87rem; margin-bottom: 1rem; }
.cfg input:focus, .cfg select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg button:focus-visible, .cfg summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cfg button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cfg a { color: var(--blue); }
.cfg-muted { color: var(--text-muted); font-size: .83rem; line-height: 1.7; }
.cfg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.cfg label.cfg-check { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 1rem; }
.cfg-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.cfg-pinout { display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; padding: 1rem 0; min-height: 465px; }
.cfg-pinout img { width: 130px; height: 460px; object-fit: fill; }
.cfg-pins { display: flex; flex-direction: column; height: 440px; justify-content: space-between; min-width: 0; }
.cfg-pin { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; width: 100%; font: .72rem monospace; padding: .12rem .3rem; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 4px; white-space: nowrap; }
.cfg-right .cfg-pin { flex-direction: row-reverse; }
.cfg-pin .cfg-pin-role { font-size: .57rem; overflow: hidden; text-overflow: ellipsis; }
.cfg-pin b { min-width: 2.5em; font-weight: 500; }
.cfg-pin small { font-size: .55rem; opacity: .65; }
.cfg-pin.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cfg-pin:not(:disabled):hover { background: var(--surface2); }
.cfg-color-step, .cfg-color-dir { color: var(--accent); }
.cfg-color-input { color: var(--blue); }
.cfg-color-output { color: var(--yellow); }
.cfg-color-pwm { color: var(--green); }
.cfg-color-encoder_a, .cfg-color-encoder_b, .cfg-color-encoder_index { color: var(--accent2); }
.cfg-legend { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; font-size: .7rem; margin-bottom: 1rem; }
.cfg-stats { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.cfg-stats strong { font: 1.7rem monospace; display: block; }
.cfg-stats span { font-size: .75rem; color: var(--text-muted); }
.cfg #cfg-reset { margin-top: 1rem; }
.cfg-settings, .cfg-download { margin-top: 1.25rem; }
.cfg-download > .cfg-grid { gap: 0; }
.cfg-download h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.cfg-code { background: var(--bg); padding: 1.25rem; border-right: 1px solid var(--border); min-width: 0; }
.cfg pre { height: 390px; font: .77rem/1.7 'SF Mono','Fira Code',monospace; white-space: pre; overflow: auto; margin-bottom: .7rem; color: var(--text); }
.cfg-tabs { display: flex; gap: .3rem; }
.cfg-tabs button { padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); background: var(--surface); cursor: pointer; }
.cfg-tabs button[aria-selected=true] { color: var(--accent); border-color: var(--accent); }
.cfg-steps { padding-left: 1.3rem; margin: 1.2rem 0; font-size: .88rem; }
.cfg-steps li { margin-bottom: .8rem; }
.cfg-steps code { display: block; margin-top: .35rem; padding: .5rem .7rem; color: var(--accent2); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
.cfg-private { margin-top: 1rem; }
.cfg details { margin-top: 1rem; font-size: .85rem; }
.cfg details p { margin-top: .75rem; overflow-wrap: anywhere; }
.cfg summary { cursor: pointer; color: var(--accent); }
.cfg #cfg-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--surface2); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius); padding: .8rem 1.2rem; z-index: 110; box-shadow: 0 8px 30px #0005; max-width: 90vw; }
.cfg dialog { margin: auto; max-width: 440px; padding: 1.5rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.cfg dialog::backdrop { background: #0009; }
.cfg dialog h2 { font-size: 1.2rem; }.cfg dialog p { margin: 1rem 0; }
@media (max-width: 950px) { .cfg { padding: 1.5rem 1rem; }.cfg-grid { grid-template-columns: 1fr; }.cfg-code { border-right: none; border-bottom: 1px solid var(--border); }.cfg-pinout { max-width: 550px; margin: auto; } }
@media (max-width: 450px) { .cfg-fields { grid-template-columns: 1fr; }.cfg .panel-body { padding: 1rem; }.cfg .panel-header { padding: 1rem; }.cfg-pinout { grid-template-columns: 1fr 110px 1fr; }.cfg-pinout img { width: 110px; }.cfg-pin { font-size: .64rem; gap: .2rem; }.cfg-pin-role { display: none; }.cfg .panel-actions { flex-wrap: wrap; } }

.cfg label.cfg-unavailable { opacity: .5; cursor: not-allowed; }
.cfg-unavailable input { cursor: not-allowed; }