.elec-shell { width: min(980px, 94vw); }
.elec-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, .95fr); gap: 1rem; align-items: start; }
.elec-card { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(160deg, #fff 0%, #fefcf8 100%); box-shadow: var(--shadow); padding: 1rem; }
.elec-card h2 { margin: 0 0 .8rem; font-size: 1.08rem; }
.elec-field { margin-bottom: .85rem; }
.elec-field label { display: block; margin-bottom: .34rem; font-weight: 600; font-size: .9rem; }
.elec-field input { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: #fdfcf8; color: #1f1f1f; font-family: "IBM Plex Mono", monospace; font-size: .9rem; padding: .58rem .62rem; }
.elec-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.prefix-wrap { position: relative; }
.prefix-wrap span { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #5f574e; pointer-events: none; }
.prefix-wrap input { padding-left: 1.4rem; }
.result-grid { display: grid; gap: .62rem; }
.result-line { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .6rem .65rem; border: 1px solid #e5ddd1; border-radius: 12px; background: #fff; }
.result-line span { color: #5f574e; font-size: .92rem; }
.result-line strong { font-family: "IBM Plex Mono", monospace; font-size: 1rem; }
.note { margin: .9rem 0 0; border: 1px solid #e5ddd1; border-radius: 12px; background: #fff; padding: .62rem .72rem; color: #4f483f; font-size: .85rem; }
@media (max-width: 860px) { .elec-layout, .elec-grid-2 { grid-template-columns: 1fr; } }