/* A self-contained, responsive page; theme-wide and registry styles stay untouched. */
.calculators-page {
  --calc-bg: #06111e;
  --calc-surface: #102338;
  --calc-surface-strong: #15304b;
  --calc-field: #091a2c;
  --calc-text: #f5f8fb;
  --calc-copy: #c5d3df;
  --calc-muted: #9fb2c3;
  --calc-line: #36516a;
  --calc-accent: #55e2b8;
  min-height: 70vh;
  color: var(--calc-text);
  background: var(--calc-bg);
}
.calculators-page [hidden] { display: none !important; }
.calculators-page :is(h1,h2,h3,p) { margin-top: 0; }
.calculators-page :is(h1,h2,h3) { color: var(--calc-text); }
.calculators-page p { color: var(--calc-copy); }
.calculators-article { overflow: hidden; }
.calculators-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--calc-line);
  background:
    linear-gradient(90deg, rgba(5,20,37,.97) 0%, rgba(5,20,37,.86) 36%, rgba(5,20,37,.4) 70%, rgba(5,20,37,.15) 100%),
    url('../images/calculators-hero-neon.webp') center 59% / cover no-repeat,
    #061b2d;
}
.calculators-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at 79% 55%, rgba(48,232,208,.12), transparent 38%);
  animation: calculators-glow 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes calculators-glow { from { opacity: .25; } to { opacity: 1; } }
.calculators-hero__inner { position: relative; z-index: 1; padding-block: clamp(1.55rem,3.5vw,2.7rem); }
.calculators-kicker { margin-bottom: .65rem; color: var(--calc-accent) !important; font-size: .76rem; font-weight: 850; letter-spacing: .13em; }
.calculators-hero h1 { margin-bottom: .45rem; font-size: clamp(2.4rem,4.4vw,3.8rem); line-height: 1.06; letter-spacing: -.045em; }
.calculators-hero__lead { max-width: 740px; margin-bottom: .7rem; color: var(--calc-text) !important; font-size: clamp(1rem,1.8vw,1.26rem); line-height: 1.4; }
.calculators-hero__note { max-width: 740px; margin-bottom: 0; font-size: .88rem; line-height: 1.45; }
.calculators-jump { border-bottom: 1px solid var(--calc-line); background: #0b1c2e; }
.calculators-jump__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; padding-block: .8rem; }
.calculators-jump a { display: grid; grid-template-columns: 2.4rem minmax(0,1fr); column-gap: .7rem; align-content: center; min-height: 4.75rem; padding: .7rem .9rem; border: 1px solid var(--calc-line); border-radius: .85rem; color: var(--calc-text); background: var(--calc-surface); text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.calculators-jump a:hover { border-color: var(--calc-accent); transform: translateY(-2px); }
.calculators-jump a span { grid-row: span 2; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .7rem; color: #071a2f; background: var(--calc-accent); font-weight: 850; }
.calculators-jump a strong { align-self: end; font-size: 1.05rem; }
.calculators-jump a small { color: var(--calc-muted); font-size: .88rem; }
.calculators-content { padding-block: clamp(1.3rem,2.3vw,2rem) 4rem; }
.calculator-section { margin-bottom: 3.4rem; scroll-margin-top: 6rem; }
.calculator-section__heading { display: flex; gap: 1.1rem; align-items: flex-start; max-width: 900px; margin-bottom: 1.2rem; }
.calculator-section__number { flex: 0 0 auto; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--calc-accent); border-radius: .8rem; color: var(--calc-accent); font-weight: 850; }
.calculator-section h2 { margin-bottom: .45rem; font-size: clamp(1.7rem,3vw,2.3rem); line-height: 1.15; letter-spacing: -.03em; }
.calculator-section__heading p:last-child { margin-bottom: 0; }
.calculator-panel { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); column-gap: clamp(1rem,3vw,2.25rem); row-gap: .95rem; padding: clamp(1rem,2.4vw,2rem); border: 1px solid var(--calc-line); border-radius: 1.25rem; background: var(--calc-surface); box-shadow: 0 18px 42px rgba(0,0,0,.12); }
.calculator-fields { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .95rem; align-content: start; }
.calculator-fields label { display: flex; flex-direction: column; gap: .35rem; min-width: 0; color: var(--calc-text); font-size: .92rem; font-weight: 720; }
.calculator-fields label small { color: var(--calc-muted); font-size: .82rem; font-weight: 400; line-height: 1.4; }
.calculator-fields__wide { grid-column: 1 / -1; }
.calculator-fields input:not([type="checkbox"]), .calculator-fields select { width: 100%; min-height: 3rem; padding: .6rem .8rem; border: 1px solid var(--calc-line); border-radius: .7rem; outline: none; color: var(--calc-text); background: var(--calc-field); font-size: 1.04rem; }
.calculator-fields input::placeholder { color: var(--calc-muted); }
.calculator-fields :is(input,select):focus-visible { border-color: var(--calc-accent); box-shadow: 0 0 0 3px rgba(85,226,184,.19); }
.calculator-fields select { appearance: auto; }
.calculator-combo { padding: .8rem; border: 1px solid var(--calc-line); border-radius: .75rem; background: var(--calc-field); }
.calculator-combo p { margin-bottom: .65rem; font-size: .84rem; }
.calculator-combo__rows { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.calculator-combo__row { display: flex; align-items: end; gap: .4rem; min-width: 0; }
.calculator-combo__row label { flex: 1; }
.calculator-combo__add, .calculator-combo__remove { padding: .48rem .65rem; border: 1px solid var(--calc-accent); border-radius: .55rem; color: var(--calc-accent); background: transparent; cursor: pointer; }
.calculator-combo__add { margin-top: .7rem; }
.calculator-combo__remove { min-height: 3rem; }
.calculator-combo :is(button):focus-visible { outline: 2px solid var(--calc-accent); outline-offset: 2px; }
.calculator-example { grid-column: 1; grid-row: 2; margin-bottom: 0; color: var(--calc-muted) !important; font-size: .87rem; }
.calculator-settings { grid-column: 1; grid-row: 3; align-self: start; border-top: 1px solid var(--calc-line); padding-top: .85rem; }
.calculator-advanced summary, .calculator-explanation summary { width: fit-content; color: var(--calc-accent); font-weight: 750; cursor: pointer; }
.calculator-advanced[open] summary, .calculator-explanation[open] summary { margin-bottom: 1rem; }
.calculator-advanced__summary { margin-block: .55rem 0; color: var(--calc-muted) !important; font-size: .8rem !important; }
.calculator-advanced[open] + .calculator-advanced__summary { display: none; }
.calculator-advanced .calculator-fields { margin-top: .65rem; }
.calculator-switch { grid-column: 1 / -1; flex-direction: row !important; align-items: center; padding-block: .4rem; cursor: pointer; }
.calculator-switch input { width: 1.3rem; height: 1.3rem; accent-color: #38caa0; }
.calculator-error { grid-column: 1; grid-row: 4; margin: 0; padding: .65rem .8rem; border: 1px solid #c76f76; border-radius: .6rem; color: #ffe1e3 !important; background: rgba(188,66,79,.15); }
.calculator-result { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(1.1rem,3vw,2rem); border: 1px solid rgba(85,226,184,.43); border-radius: 1rem; background: linear-gradient(145deg,#164b4a,#0d2e3e 72%); }
.calculator-result > span { color: #c8f2e5; font-size: .86rem; font-weight: 750; letter-spacing: .02em; }
.calculator-result > strong { overflow-wrap: anywhere; margin-block: .35rem .75rem; color: #70f0c7; font-size: clamp(2rem,5vw,3.5rem); line-height: 1.12; font-variant-numeric: tabular-nums; }
.calculator-result__extras { border-top: 1px solid rgba(204,240,232,.23); padding-top: .8rem; }
.calculator-result__extras p { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; color: #d1e5e6; font-size: .87rem; }
.calculator-result__extras p:last-child { margin-bottom: 0; }
.calculator-result__extras b { flex: 0 0 auto; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.calculator-meaning { grid-column: 2; grid-row: 4; margin: 0; color: var(--calc-copy) !important; font-size: .9rem; }
.calculator-explanation { grid-column: 1 / -1; grid-row: 5; border-top: 1px solid var(--calc-line); padding-top: .9rem; }
.calculator-explanation p { max-width: 900px; margin-bottom: .2rem; font-size: .9rem; }
.calculators-footer-note { max-width: 900px; margin: 0 auto; padding: 1rem 1.25rem; border: 1px solid var(--calc-line); border-radius: .8rem; color: var(--calc-muted) !important; background: var(--calc-surface); text-align: center; }

html[data-taring-theme="light"] .calculators-page { --calc-bg:#f1f5f8; --calc-surface:#fff; --calc-surface-strong:#e9f3f4; --calc-field:#f7fafc; --calc-text:#162b3e; --calc-copy:#375267; --calc-muted:#567084; --calc-line:#b8cad5; --calc-accent:#006d53; }
html[data-taring-theme="light"] .calculators-hero :is(h1,p) { color: #f5f8fb; }
html[data-taring-theme="light"] .calculators-hero .calculators-kicker { color: #70f0c7 !important; }
html[data-taring-theme="light"] .calculators-hero__lead { color: #f5f8fb !important; }
html[data-taring-theme="light"] .calculators-hero__note { color: #c5d3df !important; }
html[data-taring-theme="light"] .calculators-jump { background:#e8f0f4; }
html[data-taring-theme="light"] .calculators-jump a { color:var(--calc-text); }
html[data-taring-theme="light"] .calculators-jump a span { color:#fff; }
html[data-taring-theme="light"] .calculator-result { border-color:#7abda9; background:linear-gradient(145deg,#d6f4e9,#e8f3f4); }
html[data-taring-theme="light"] .calculator-result > span, html[data-taring-theme="light"] .calculator-result > strong, html[data-taring-theme="light"] .calculator-result__extras p, html[data-taring-theme="light"] .calculator-result__extras b { color:#0b5845; }
html[data-taring-theme="light"] .calculator-result__extras { border-color:#9dcfbd; }
html[data-taring-theme="light"] .calculator-error { color:#861c29 !important; background:#fff0f2; }

@media (max-width: 850px) {
  .calculators-jump__grid { grid-template-columns: 1fr; gap: .55rem; }
  .calculators-jump a { min-height: 3.8rem; }
  .calculator-panel { grid-template-columns: minmax(0,1fr); }
  .calculator-fields, .calculator-example, .calculator-settings, .calculator-error, .calculator-result, .calculator-meaning, .calculator-explanation { grid-column: 1; grid-row: auto; }
  .calculator-result { min-height: 12rem; }
}
@media (max-width: 530px) {
  .calculators-hero { background-position: center, 65% 54%; background-image: linear-gradient(90deg,rgba(5,20,37,.97),rgba(5,20,37,.82)),url('../images/calculators-hero-neon.webp'); }
  .calculators-hero__inner { padding-block: 1.35rem 1.55rem; }
  .calculators-hero::after { opacity: .4; }
  .calculators-jump__grid { padding-block: .65rem; gap: .4rem; }
  .calculators-jump a { min-height: 3.55rem; padding: .5rem .7rem; }
  .calculators-jump a small { font-size: .79rem; }
  .calculator-section__heading { gap: .75rem; }
  .calculator-section__number { width: 2.35rem; height: 2.35rem; }
  .calculator-fields { grid-template-columns: minmax(0,1fr); }
  .calculator-fields__wide { grid-column: 1; }
  .calculator-combo__rows { grid-template-columns: 1fr; }
  .calculator-result__extras p { display: block; }
  .calculator-result__extras b { display: block; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .calculators-hero::after { animation: none; } .calculators-jump a { transition: none; } .calculators-jump a:hover { transform: none; } }