/* tools/power-electronics/style.css */
.tool-desc { color: var(--color-text-secondary); font-size: 1.05rem; margin: var(--space-sm) 0 var(--space-lg); }

.pe-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.pe-ctrl {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: static;
}

.pe-ctrl h2, .pe-ctrl h3 { color: var(--color-primary); font-size: 1.1rem; }

.topo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.topo-btn {
    padding: 8px 4px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    border: 2px solid var(--color-border-sketch);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s;
}

.topo-btn:hover, .topo-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

input[type="range"] {
    flex: 1;
    accent-color: var(--color-primary);
}

.duty-val {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    min-width: 44px;
}

.dc-results { margin-top: var(--space-md); }
.dc-results h3 { margin-bottom: var(--space-sm); }

.dc-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.9rem;
}

.dc-row:last-child { border-bottom: none; }
.dc-row .dc-val { font-family: var(--font-mono); font-weight: 600; color: var(--color-primary); text-align: right; overflow-wrap: anywhere; max-width: 68%; }
.dc-row { gap: 10px; }

.pe-charts { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }

.topo-desc {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    min-height: 40px;
}

.chart-container { padding: var(--space-sm); }
.chart-container canvas { width: 100%; height: auto; }

.hint { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 6px; min-height: 1.1em; }

/* 拓扑示意图（手绘 SVG，风格同 filter-design） */
.topo-fig { text-align: center; margin-bottom: var(--space-sm); }
.topo-svg { width: 100%; max-width: 1000px; height: auto; }
.topo-fig.circuit-figure-scroll > svg { width: auto; max-width: none; }
.topo-fig { overflow-x: auto; }
.topo-fig svg { min-width: 480px; }
.topo-fig[data-topo="llc"] svg { min-width: 840px; }
.topo-fig[data-topo="dsd"] svg { min-width: 720px; }
.topo-fig[data-topo="flyback"] svg { min-width: 620px; }
.pe-input-line { display: flex; align-items: center; gap: 8px; }
.pe-input-line input { width: 100%; min-width: 0; }
.pe-input-line span, .pe-input-line select { flex-shrink: 0; font-family: var(--font-mono); }
.pe-input-line select { width: auto; padding-left: 8px; padding-right: 8px; }
#parameterFields .field { margin-bottom: 14px; }
.pe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-display { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; }
.pe-display .field { flex: 1 1 150px; }
.pe-full { flex-basis: 100%; }
.pe-status { padding: 12px 16px; border-left: 4px solid var(--color-primary); background: var(--color-card-bg); }
.pe-status.error { border-color: var(--color-accent); color: var(--color-accent); }
.pe-wave-area { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pe-channel { min-width: 0; padding: 16px; }
.pe-channel h3 { color: var(--color-primary); margin-bottom: 8px; }
.pe-channel canvas { display: block; width: 100%; height: 200px; touch-action: pan-y; }
.pe-channel canvas:focus { outline: 2px solid var(--color-primary); }
.pe-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.pe-metrics dt { color: var(--color-text-muted); font-size: 0.8rem; }
.pe-metrics dd { font-family: var(--font-mono); margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.pe-cursor { min-height: 2.6em; font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-secondary); }
.is-stale { opacity: 0.48; }
#diagnostics { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; max-height: 450px; overflow-y: auto; }
#modeField[hidden] { display: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 520px) {
    .pe-ctrl { padding: 16px; }
    .pe-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pe-channel { padding: 8px; }
    .pe-display { padding: 12px; }
}

@media (max-width: 900px) {
    .pe-layout { grid-template-columns: 1fr; }
    .pe-ctrl { position: static; }
}