:root { --tool-ink: #33282a; --tool-muted: #74696b; --tool-line: #efdfe0; --tool-soft: #fff7f7; }
.tools-page [hidden] { display: none !important; }
.tools-page { min-height: 100vh; background: #fff; color: var(--tool-ink); }
.tools-header { position: sticky; top: 0; z-index: 10; padding: 12px 0; background: #b5121b; box-shadow: 0 2px 14px rgba(73, 9, 13, .16); }
.tools-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font: 600 .95rem var(--nav-font); text-transform: uppercase; letter-spacing: .04em; }
.tools-brand:hover { color: #fff; }.tools-brand img { width: 32px; height: 32px; object-fit: contain; }
.tools-nav { display: flex; gap: 22px; }.tools-nav a { color: rgba(255,255,255,.72); font: 500 .84rem var(--nav-font); }.tools-nav a:hover,.tools-nav a.active { color: #fff; }
.tools-hero { padding: 72px 0 56px; background: linear-gradient(120deg, #fff 0%, #fff4f4 100%); border-bottom: 1px solid var(--tool-line); }
.tools-eyebrow { display: block; margin-bottom: 10px; color: var(--accent-color); font: 700 .74rem var(--nav-font); letter-spacing: .13em; text-transform: uppercase; }
.tools-hero h1 { max-width: 700px; margin: 0; color: var(--tool-ink); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; line-height: 1.08; }.tools-hero h1 span { color: var(--accent-color); }
.tools-hero p { max-width: 590px; margin: 18px 0 0; color: var(--tool-muted); font-size: 1.05rem; line-height: 1.7; }
.tools-workspace { padding: 48px 0 72px; }.tools-catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-bottom: 32px; border-bottom: 1px solid var(--tool-line); }
.tools-back { padding: 0 0 22px; border-bottom: 1px solid var(--tool-line); }.tools-back a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-color); font: 600 .86rem var(--nav-font); }.tools-back a:hover i { transform: translateX(-3px); }.tools-back i { transition: transform .2s ease; }
.tool-card { display: flex; min-height: 82px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 15px 18px; border: 1px solid #ded4d5; border-radius: 4px; background: #fff; color: #3d3335; font: 600 .82rem var(--nav-font); line-height: 1.35; text-align: center; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }.tool-card small { color: var(--accent-color); font-size: .7rem; font-weight: 600; opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease; }.tool-card-active:hover,.tool-card-active:focus-visible { border-color: var(--accent-color); background: #fff7f7; color: var(--accent-color); box-shadow: 0 8px 18px rgba(97,17,22,.1); outline: none; transform: translateY(-2px); }.tool-card-active:hover small,.tool-card-active:focus-visible small { opacity: 1; transform: translateY(0); }.tool-card-soon { color: #857a7c; cursor: default; }
.tool-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 38px 0 28px; }.tool-heading h2 { margin: 0 0 8px; color: var(--heading-color); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }.tool-heading p { max-width: 680px; margin: 0; color: var(--tool-muted); line-height: 1.6; }.tool-contact-link { flex: 0 0 auto; color: var(--accent-color); font: 600 .88rem var(--nav-font); }
.resistor-calculator { display: grid; grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr); overflow: hidden; border: 1px solid var(--tool-line); border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(97,17,22,.08); }
.calculator-panel { padding: clamp(24px, 4vw, 42px); background: #fffafa; }.band-count { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; font: 600 .95rem var(--nav-font); }.band-count-buttons { display: flex; gap: 7px; }.band-count-buttons button { padding: 8px 11px; border: 1px solid #e5cdcf; border-radius: 7px; background: #fff; color: #6d5658; font: 600 .76rem var(--nav-font); }.band-count-buttons button.active { border-color: var(--accent-color); background: var(--accent-color); color: #fff; }
.band-selects { display: grid; gap: 15px; }.band-field { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 14px; }.band-field label { color: #5d4d4f; font-size: .88rem; font-weight: 600; }.band-field select { width: 100%; padding: 11px 13px; border: 1px solid #e5ced0; border-radius: 8px; background: #fff; color: #33282a; font: 500 .9rem var(--default-font); }
.result-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 46px); }.resistor-visual-wrap { margin-bottom: 30px; }.resistor-visual { display: flex; align-items: center; justify-content: center; }.resistor-lead { width: 17%; height: 4px; background: linear-gradient(#9a9a9a, #d0d0d0 45%, #898989); box-shadow: 0 1px 1px rgba(0,0,0,.16); }.resistor-body { position: relative; display: flex; gap: 10px; width: 66%; min-height: 112px; align-items: stretch; justify-content: flex-start; overflow: hidden; padding: 17px 12%; border: 1px solid #c6a675; border-radius: 55px 48px; background: radial-gradient(ellipse at 42% 16%, rgba(255,255,255,.56), transparent 34%), linear-gradient(105deg, #c69d65 0%, #f1d39a 28%, #dfba7e 55%, #c69b61 100%); box-shadow: inset 0 10px 16px rgba(255,255,255,.25), inset 0 -10px 14px rgba(73,40,16,.2), 0 9px 13px rgba(45,28,16,.16); }.resistor-body::before,.resistor-body::after { position: absolute; top: 19%; bottom: 19%; width: 10px; border-radius: 50%; background: rgba(103,62,24,.12); content: ""; }.resistor-body::before { left: 7px; }.resistor-body::after { right: 7px; }.resistor-band { position: relative; z-index: 1; width: 13px; min-height: 100%; border-right: 1px solid rgba(0,0,0,.17); border-left: 2px solid rgba(255,255,255,.2); border-radius: 2px; box-shadow: inset 3px 0 rgba(255,255,255,.18), 1px 0 2px rgba(0,0,0,.2); }.resistor-band.tolerance { margin-left: auto; }.color-sequence { margin: 14px 0 0; color: var(--tool-muted); font-size: .82rem; text-align: center; }
.result-value { padding-bottom: 24px; border-bottom: 1px solid var(--tool-line); }.result-value span { display: block; color: var(--tool-muted); font-size: .8rem; }.result-value output { display: block; margin: 5px 0; color: var(--heading-color); font: 700 clamp(2rem, 4vw, 3.2rem) var(--heading-font); }.result-value strong { color: var(--accent-color); font-size: 1rem; }.result-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 0; }.result-details div:last-child { grid-column: 1 / -1; }.result-details dt { margin-bottom: 4px; color: var(--tool-muted); font-size: .74rem; }.result-details dd { margin: 0; color: #423638; font-size: .9rem; font-weight: 600; }
.tool-note { display: flex; gap: 10px; max-width: 900px; margin: 24px auto 0; padding: 14px 17px; border-left: 3px solid var(--accent-color); background: var(--tool-soft); color: #685456; }.tool-note i { color: var(--accent-color); }.tool-note p { margin: 0; font-size: .84rem; line-height: 1.55; }.tools-footer { padding: 25px 0; background: #8f1117; color: rgba(255,255,255,.8); font-size: .82rem; text-align: center; }
.divider-heading { padding-top: 68px; }.divider-calculator { display: grid; grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr); overflow: hidden; border: 1px solid var(--tool-line); border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(97,17,22,.08); }.divider-inputs { padding: clamp(25px,4vw,44px); background: #fffafa; }.divider-field { margin-bottom: 17px; }.divider-field label { display: block; margin-bottom: 7px; color: #5d4d4f; font-size: .86rem; font-weight: 600; }.divider-field > div { display: flex; overflow: hidden; border: 1px solid #e5ced0; border-radius: 8px; background: #fff; }.divider-field input { width: 100%; padding: 11px 13px; border: 0; outline: 0; background: transparent; color: var(--tool-ink); }.divider-field span { display: inline-flex; width: 56px; flex: 0 0 56px; align-items: center; justify-content: center; border-left: 1px solid #e5ced0; color: #655557; font-size: .86rem; }.load-toggle { display: flex; align-items: center; gap: 9px; margin: 22px 0 16px; color: #5d4d4f; font-size: .86rem; font-weight: 600; }.load-toggle input { accent-color: var(--accent-color); }.divider-formula { margin: 25px 0 0; padding-top: 17px; border-top: 1px solid var(--tool-line); color: var(--accent-color); font: 600 .86rem var(--nav-font); }.divider-output { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 20px; padding: clamp(26px,4vw,44px); }.divider-circuit { color: #4c4143; }.divider-circuit svg { display: block; width: 100%; max-height: 250px; }.divider-circuit text { fill: #4c4143; font: 600 15px Roboto, sans-serif; }.divider-result { grid-column: 2; }.divider-result span { display: block; color: var(--tool-muted); font-size: .8rem; }.divider-result output { display: block; margin: 5px 0; color: var(--heading-color); font: 700 clamp(2rem,4vw,3.2rem) var(--heading-font); }.divider-result strong { color: var(--accent-color); font-size: .9rem; }.divider-details { grid-column: 2; display: grid; grid-template-columns: 1fr; gap: 13px; margin: 0; }.divider-details div { padding-top: 11px; border-top: 1px solid var(--tool-line); }.divider-details dt { margin-bottom: 3px; color: var(--tool-muted); font-size: .74rem; }.divider-details dd { margin: 0; color: #423638; font-size: .9rem; font-weight: 600; }
@media (max-width: 991px) { .tools-catalog { grid-template-columns: repeat(2, minmax(0,1fr)); }.resistor-calculator,.divider-calculator { grid-template-columns: 1fr; }.divider-output { grid-template-columns: 1fr; }.divider-result,.divider-details { grid-column: auto; }.tool-heading { align-items: flex-start; flex-direction: column; }.tools-hero { padding: 54px 0 42px; } }
@media (max-width: 575px) { .tools-nav { gap: 12px; }.tools-brand span { display: none; }.tools-hero h1 { font-size: 2.2rem; }.tools-catalog { grid-template-columns: 1fr; }.band-count { align-items: flex-start; flex-direction: column; }.band-field { grid-template-columns: 1fr; gap: 6px; }.resistor-body { width: 76%; gap: 7px; padding-inline: 9%; }.resistor-lead { width: 12%; }.result-details { grid-template-columns: 1fr; }.result-details div:last-child { grid-column: auto; } }

/* Explicit selectors keep the catalog intact if another stylesheet supplies generic card rules. */
#calculator-catalog { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; padding-bottom: 32px; border-bottom: 1px solid var(--tool-line); }
#calculator-catalog .tool-card { display: flex !important; min-height: 82px; box-sizing: border-box; text-decoration: none; }
@media (max-width: 991px) { #calculator-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 575px) { #calculator-catalog { grid-template-columns: 1fr !important; } }

/* A selected calculator is its own detail view, never a catalog plus calculator page. */
.calculator-detail #calculator-catalog { display: none !important; }
.calculator-detail .tools-workspace { padding-top: 34px; }

.generic-calculator { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(280px, 1.2fr); overflow: hidden; border: 1px solid var(--tool-line); border-radius: 8px; background: #fff; }.generic-inputs { display: grid; gap: 16px; padding: 34px; background: #fffafa; }.generic-inputs label { color: #4e4244; font-size: .85rem; font-weight: 600; }.generic-inputs input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #e5ced0; border-radius: 5px; }.generic-result { align-self: center; padding: 34px; }.generic-result span { display:block; color:var(--tool-muted); font-size:.8rem; }.generic-result output { display:block; margin:8px 0; color:var(--accent-color); font:700 clamp(1.7rem,3vw,2.5rem) var(--heading-font); }.generic-result p { color:var(--tool-muted); line-height:1.7; }@media (max-width: 767px) { .generic-calculator { grid-template-columns:1fr; } }

/* Compact hero and dedicated Ohm's Law layout. */
.tools-hero { padding: 42px 0 34px; }.tools-hero h1 { font-size: clamp(.9rem, 4.2vw, 3.3rem); white-space: nowrap; letter-spacing: -.025em; }.tools-hero p { margin-top: 12px; font-size: .96rem; }.ohm-calculator { grid-template-columns: minmax(270px,.82fr) minmax(360px,1.18fr); min-height: 330px; border-color:#ddd; }.ohm-calculator .generic-inputs { max-width: 340px; padding: 34px; background:#fff; }.ohm-calculator .generic-inputs label { font-weight:500; }.ohm-calculator .generic-inputs label>span { display:flex; margin-top:6px; border:1px solid #ddd; border-radius:3px; }.ohm-calculator .generic-inputs input { margin:0; border:0; }.ohm-calculator .generic-inputs b { width:50px; display:grid; place-items:center; border-left:1px solid #ddd; font-weight:500; }.ohm-actions { display:flex; justify-content:space-between; gap:12px; }.ohm-actions button { min-width:100px; padding:9px 14px; border:0; border-radius:3px; background:#1769d1; color:#fff; font-weight:600; }.ohm-actions button+button { background:#f2f2f2; color:#444; }.ohm-calculator .generic-result { display:grid; place-items:center; align-content:center; gap:12px; border-left:1px solid #eee; }.ohm-calculator .generic-result>strong { font-size:.9rem; }.ohm-wheel { width:230px; height:230px; color:#1769d1; }.ohm-wheel circle,.ohm-wheel path { fill:none; stroke:#9facba; stroke-width:1; }.ohm-wheel text { fill:#1769d1; text-anchor:middle; }.ohm-wheel-main { font:700 18px Roboto,sans-serif; }.ohm-wheel-unit { font:600 8px Roboto,sans-serif; }.ohm-wheel-formula { font:700 11px Roboto,sans-serif; }.ohm-calculator #ohm-message { margin:0; font-size:.8rem; }@media(max-width:767px){.ohm-calculator{grid-template-columns:1fr}.ohm-calculator .generic-result{border-left:0;border-top:1px solid #eee}.ohm-calculator .generic-inputs{max-width:none}}

.led-calculator { grid-template-columns: minmax(270px,.75fr) minmax(440px,1.25fr); min-height:365px; border-color:#ddd; }.led-calculator .generic-inputs { align-content:start; padding:34px; background:#fff; }.led-calculator .generic-inputs label>span { display:flex; margin-top:6px; border:1px solid #ddd; border-radius:3px; }.led-calculator .generic-inputs input { margin:0; border:0; }.led-calculator .generic-inputs b { width:52px; display:grid; place-items:center; border-left:1px solid #ddd; font-weight:500; }.led-result-label { margin-top:3px; color:#282224; font-size:.78rem; font-weight:700; }.led-calculator .generic-inputs output { display:block; padding:9px 14px; border-radius:18px; background:#202428; color:#fff; font-weight:700; }.led-calculator .generic-result { align-self:stretch; padding:34px; border-left:1px solid #eee; }.led-formula { min-height:80px; padding:10px 14px; border:1px solid #ddd; border-radius:3px; background:#fafafa; }.led-formula strong { display:block; padding-bottom:6px; border-bottom:1px solid #ddd; font-size:.78rem; }.led-formula span { display:block; margin:10px 0 0 60px; font:italic 1.05rem Georgia,serif; }.led-visual { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:18px; }.led-visual svg { width:180px; color:#222; }.led-visual table { border-collapse:collapse; font-size:.75rem; }.led-visual th,.led-visual td { padding:6px 10px; border:1px solid #ddd; }.led-visual .red{background:#e74c3c;color:#fff}.led-visual .amber{background:#e88e42}.led-visual .orange{background:#f1b549}.led-visual .yellow{background:#f3ea54}.led-visual .green{background:#67b85d;color:#fff}.led-visual .blue{background:#65abe4;color:#fff}@media(max-width:767px){.led-calculator{grid-template-columns:1fr}.led-calculator .generic-result{border-left:0;border-top:1px solid #eee}.led-visual{flex-direction:column;align-items:flex-start}}

.network-calculator { grid-template-columns:minmax(310px,.85fr) minmax(430px,1.15fr); min-height:380px; border-color:#ddd; }.network-calculator .generic-inputs { padding:28px 36px; background:#fff; }.network-tabs { display:flex; grid-column:1/-1; margin:-28px -36px 28px; border-bottom:1px solid #ddd; }.network-tabs button { padding:15px 12px 11px; border:0; border-bottom:2px solid transparent; background:transparent; color:#666; font-size:.72rem; }.network-tabs button.active { border-color:#1769d1; color:#1769d1; }.network-fields { display:grid; gap:12px; }.network-fields label>span { display:flex; margin-top:5px; border:1px solid #ddd; border-radius:3px; }.network-fields input { margin:0; border:0; }.network-fields b { width:50px; display:grid; place-items:center; border-left:1px solid #ddd; font-weight:500; }.network-actions { display:flex; justify-content:space-between; margin-top:12px; }.network-actions button { padding:8px 12px; border:0; border-radius:3px; background:#f4f4f4; font-size:.76rem; font-weight:600; }.network-actions button+button { background:#1769d1; color:#fff; }.network-calculator .generic-result { align-self:stretch; padding:28px 36px; border-left:1px solid #eee; }.network-calculator .generic-result>strong { font-size:.88rem; }.network-formula,.network-diagram { margin-top:8px; padding:10px 14px; border:1px solid #ddd; border-radius:3px; background:#fafafa; }.network-formula small { display:block; padding-bottom:6px; border-bottom:1px solid #ddd; }.network-formula em { display:block; padding:9px 0 4px; text-align:center; font:italic 1rem Georgia,serif; }.network-diagram { margin-top:14px; }.network-diagram svg { display:block; width:100%; height:78px; fill:none; stroke:#333; stroke-width:2; }.network-diagram text { fill:#333; stroke:none; font:600 11px Roboto,sans-serif; }.network-total { display:grid; gap:7px; margin-top:14px; }.network-total span { color:#666; font-size:.8rem; }.network-total output { color:#1769d1; font-size:1.25rem; font-weight:700; }@media(max-width:767px){.network-calculator{grid-template-columns:1fr}.network-calculator .generic-result{border-left:0;border-top:1px solid #eee}}

.smd-calculator { grid-template-columns:minmax(270px,.7fr) minmax(430px,1.3fr); min-height:410px; border-color:#ddd; }.smd-calculator .generic-inputs { padding:28px 34px; background:#fff; }.smd-tabs { display:flex; grid-column:1/-1; margin:-28px -34px 28px; border-bottom:1px solid #ddd; }.smd-tabs button { padding:15px 12px 11px; border:0; border-bottom:2px solid transparent; background:transparent; color:#666; font-size:.72rem; }.smd-tabs button.active { border-color:#1769d1; color:#1769d1; }.smd-pad { display:flex; justify-content:center; gap:14px; padding:14px; border:1px solid #ddd; border-radius:12px; }.smd-digit-column { display:grid; gap:7px; }.smd-pad button { width:66px; height:22px; border:1px solid #ddd; border-radius:12px; background:#fff; font-size:.75rem; font-weight:600; }.smd-pad button.active,.smd-pad button:hover { background:#1769d1; border-color:#1769d1; color:#fff; }.eia96-pad { display:grid; place-items:center; }.eia96-input { display:grid; gap:7px; width:160px; font-size:.75rem; }.eia96-input input { padding:8px; border:1px solid #ddd; border-radius:3px; }.smd-code { margin:2px 30px; font-size:.72rem; }.smd-code span { display:flex; border:1px solid #ddd; }.smd-code input { margin:0; border:0; }.smd-code b { width:46px; display:grid; place-items:center; border-left:1px solid #ddd; font-weight:500; }.smd-calculator .generic-result { display:grid; align-content:center; justify-items:center; gap:22px; min-height:350px; background:#fafafa; border-left:1px solid #eee; }.smd-part { position:relative; width:230px; height:130px; transform:skewY(-8deg) rotate(-6deg); border:12px solid #c8dce7; background:#050505; box-shadow:-16px 16px 0 #e9e9e9, 0 14px 0 #aec6d4; }.smd-mark { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:italic 52px Arial,sans-serif; transform:skewY(8deg) rotate(6deg); }.smd-result { color:#555; }.smd-result strong { color:#1769d1; }@media(max-width:767px){.smd-calculator{grid-template-columns:1fr}.smd-calculator .generic-result{border-left:0;border-top:1px solid #eee}.smd-pad{gap:7px}.smd-pad button{width:52px}}

/* Perspective body model for the SMD chip marking. */
.smd-part { width:285px; height:165px; border:0; background:transparent; box-shadow:none; transform:skewY(-7deg) rotate(-8deg); }.smd-part::before { position:absolute; inset:20px 28px 24px 24px; border:10px solid #c8dce7; background:#050505; box-shadow:-15px 17px 0 #f0f0f0, 14px 15px 0 #b1cbd9; content:""; }.smd-part::after { position:absolute; top:20px; right:15px; bottom:24px; width:26px; border:1px solid #8c9ca4; background:#c8dce7; content:""; }.smd-mark { z-index:1; inset:auto; top:43px; left:100px; display:block; color:#fff; font:italic 40px Arial,sans-serif; letter-spacing:-.06em; transform:skewY(7deg) rotate(8deg); }.smd-result { margin-top:-12px; }
.smd-part { display:none; }.smd-chip-svg { width:min(100%,420px); height:270px; overflow:visible; }.smd-chip-svg polygon { stroke:#8e9ba1; stroke-width:1.5; }.smd-chip-svg .chip-shadow { fill:#e9e9e9; stroke:none; }.smd-chip-svg .chip-left { fill:#f5f5f5; }.smd-chip-svg .chip-end-left,.smd-chip-svg .chip-right,.smd-chip-svg .chip-end-right { fill:#c9dfe9; }.smd-chip-svg .chip-face { fill:#050505; }.smd-chip-svg .chip-bottom { fill:#fff; }.smd-chip-svg .smd-mark { position:static; inset:auto; display:initial; transform:none; fill:#fff; stroke:none; font:italic 700 48px Arial,sans-serif; text-anchor:middle; letter-spacing:-.08em; }.smd-calculator .generic-result { gap:4px; }.smd-calculator .smd-result { margin:0; }
.smd-chip-svg { display:none; }.smd-simple { display:grid; width:180px; height:70px; grid-template-columns:30px 1fr 30px; align-items:center; border-radius:7px; background:linear-gradient(90deg,#a7aab6 0 17%,#303244 17% 83%,#a7aab6 83%); overflow:hidden; box-shadow:0 3px 8px rgba(36,39,54,.12); }.smd-simple .smd-mark { grid-column:2; position:static; inset:auto; display:block; transform:none; color:#fff; font:700 36px/1 Arial,sans-serif; letter-spacing:.03em; text-align:center; }.smd-calculator .generic-result { gap:18px; }

/* Keep calculator interaction colors aligned with Indo Mekanika's red identity. */
.ohm-actions button,.network-actions button+button,.smd-pad button.active,.smd-pad button:hover { background:var(--accent-color); border-color:var(--accent-color); }.ohm-wheel { color:var(--accent-color); }.ohm-wheel text { fill:var(--accent-color); }.network-tabs button.active,.smd-tabs button.active { border-color:var(--accent-color); color:var(--accent-color); }.network-total output,.smd-result strong,.load-toggle b { color:var(--accent-color); }

/* Compact vertical rhythm for calculator detail pages. */
.calculator-detail .tools-hero { padding:24px 0 20px; }.calculator-detail .tools-hero p { margin-top:8px; }.calculator-detail .tools-workspace { padding:20px 0 48px; }.calculator-detail .tools-back { padding-bottom:12px; }.calculator-detail .tool-heading { padding:24px 0 16px; }.calculator-detail .divider-heading { padding-top:24px; }

.divider-circuit .divider-wire { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:3; }.divider-circuit .divider-label { fill:currentColor; font:600 14px Roboto,sans-serif; }.divider-circuit .divider-svg-formula { fill:var(--accent-color); font:italic 700 17px Roboto,sans-serif; }

/* Voltage divider: input on the left, circuit reference on the right. */
.divider-heading { padding-top: 38px; }
.divider-calculator { grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr); border-radius: 4px; box-shadow: none; }
.divider-inputs { padding: 40px 34px; background: #fff; }
.divider-field { margin-bottom: 12px; }
.divider-field label { margin-bottom: 5px; color: #352f30; font-size: .76rem; }
.divider-field > div { border-color: #d9d4d4; border-radius: 3px; }
.divider-field input { padding: 10px 12px; font-size: .84rem; }
.divider-field span { width: 72px; flex-basis: 72px; border-color: #d9d4d4; color: #312b2c; }
.load-toggle { margin: 22px 0 12px; padding: 10px 0 2px; border-top: 1px solid #d9d4d4; border-bottom: 1px solid #d9d4d4; font-size: .78rem; }
.load-toggle input { display: none; }.load-toggle b { margin-left: auto; color: #1769d1; font-size: .75rem; cursor: pointer; }
.divider-formula { margin-top: 24px; color: #d91d28; font-size: .82rem; }
.divider-output { display: grid; grid-template-columns: 1fr; padding: 32px; background: #fff; }
.divider-circuit { position: relative; display: flex; min-height: 280px; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 3px; color: #403839; }.circuit-load-state { position: absolute; top: 28px; color: #d91d28; font: italic 700 .85rem var(--nav-font); }
.divider-circuit svg { width: min(100%, 360px); max-height: 250px; }
.divider-result,.divider-details { grid-column: auto; }
.divider-result { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ddd; }
.divider-result output { font-size: 2rem; }.divider-details { grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 991px) { .divider-calculator { grid-template-columns: 1fr; }.divider-output { padding-top: 0; }.divider-details { grid-template-columns: 1fr; } }