.tool-hero { max-width: 860px; margin: 0 0 34px; }
.tool-kicker { display: inline-block; margin-bottom: 12px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tool-hero h1 { margin: 0 0 14px; font-size: clamp(42px, 7vw, 72px); line-height: 1; letter-spacing: -.05em; }
.tool-hero p { max-width: 720px; margin: 0; color: #c5d3e7; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.5; }

.calculator-card { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(300px, .96fr); overflow: hidden; margin: 0 0 52px; border: 1px solid rgba(113,169,255,.23); border-radius: 22px; background: rgba(9,22,39,.78); box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.calculator-form-wrap { padding: 30px; }
.calculator-form-wrap h2 { margin: 0 0 20px; font-size: 18px; letter-spacing: -.01em; }
.calculator-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.calculator-form label { display: grid; gap: 8px; color: #c9d6e8; font-size: 14px; font-weight: 700; }
.calculator-form .wide-field { grid-column: 1 / -1; }
.input-with-unit { display: grid; grid-template-columns: minmax(0,1fr) auto; overflow: hidden; min-height: 58px; border: 1px solid rgba(193,216,255,.2); border-radius: 14px; background: #0b192c; transition: border-color .18s ease, box-shadow .18s ease; }
.input-with-unit:focus-within { border-color: rgba(113,169,255,.75); box-shadow: 0 0 0 3px rgba(54,126,232,.16); }
.input-with-unit input,.input-with-unit select { min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; }
.input-with-unit input { width: 100%; padding: 13px 15px; font-size: 22px; font-weight: 760; }
.input-with-unit select { padding: 0 32px 0 14px; border-left: 1px solid rgba(193,216,255,.14); color: #c9d8ec; cursor: pointer; }
.unit-label { display: grid; min-width: 58px; place-items: center; border-left: 1px solid rgba(193,216,255,.14); color: #aebed4; }
.calculate-button { grid-column: 1 / -1; min-height: 50px; border: 1px solid rgba(137,181,255,.34); border-radius: 14px; background: linear-gradient(180deg,#4a91f2,#2f71d2); color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(21,83,173,.2); }
.calculate-button:hover { filter: brightness(1.08); }
.calculate-button:focus-visible { outline: 3px solid rgba(126,190,255,.8); outline-offset: 3px; }

.result-panel { position: relative; display: flex; min-height: 300px; flex-direction: column; justify-content: center; padding: 34px; border-left: 1px solid rgba(193,216,255,.14); background: linear-gradient(145deg,rgba(54,126,232,.25),rgba(10,31,55,.82)); }
.result-panel::after { position: absolute; right: -35px; bottom: -70px; width: 210px; height: 210px; border: 1px solid rgba(88,213,232,.15); border-radius: 50%; content: ""; }
.weather-icon { display: block; color: #fff; }
.weather-icon::before { display: block; width: 100%; height: 100%; background: currentColor; content: ""; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.result-icon { position: absolute; top: 28px; right: 32px; width: 51px; height: 51px; }
.icon-dew-point-calculator { --icon: url("/calculators/assets/icons/droplets.svg"); color: #38d8f2; filter: drop-shadow(0 5px 12px rgba(56,216,242,.22)); }
.icon-heat-index-calculator { --icon: url("/calculators/assets/icons/thermometer-sun.svg"); color: #ffb454; filter: drop-shadow(0 5px 12px rgba(255,180,84,.2)); }
.icon-wind-chill-calculator { --icon: url("/calculators/assets/icons/snowflake.svg"); color: #82cfff; filter: drop-shadow(0 5px 12px rgba(130,207,255,.2)); }
.icon-pressure-converter { --icon: url("/calculators/assets/icons/gauge.svg"); color: #b7a0ff; filter: drop-shadow(0 5px 12px rgba(183,160,255,.2)); }
.icon-uv-index-calculator { --icon: url("/calculators/assets/icons/sun-medium.svg"); color: #ff79b5; filter: drop-shadow(0 5px 12px rgba(255,121,181,.2)); }
.result-label { color: #a9bad0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.result-value { z-index: 1; margin: 8px 0 10px; color: #fff; font-size: clamp(38px,6vw,62px); font-weight: 850; line-height: 1; letter-spacing: -.05em; }
.result-detail { z-index: 1; max-width: 38ch; margin: 0; color: #c3d3e6; font-size: 15px; line-height: 1.55; }
.result-panel[data-level="danger"] { background: linear-gradient(145deg,rgba(217,92,54,.3),rgba(56,29,39,.86)); }
.result-panel[data-level="safe"] { background: linear-gradient(145deg,rgba(49,157,114,.27),rgba(8,43,42,.84)); }
.result-panel[data-level="cold"] { background: linear-gradient(145deg,rgba(70,144,215,.3),rgba(18,38,67,.88)); }

.conversion-table { z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.conversion-item { padding: 9px 10px; border: 1px solid rgba(193,216,255,.12); border-radius: 10px; background: rgba(3,12,25,.22); }
.conversion-item strong,.conversion-item span { display: block; }
.conversion-item strong { color: #fff; font-size: 14px; }
.conversion-item span { color: #9fb3cc; font-size: 11px; }

.tool-content { display: grid; grid-template-columns: minmax(0,760px) 1fr; gap: 58px; }
.tool-content article { grid-column: 1; }
.tool-content h2 { margin: 3rem 0 1rem; font-size: clamp(27px,4vw,38px); line-height: 1.16; letter-spacing: -.025em; }
.tool-content p,.tool-content ul { color: #c3d0e2; }
.tool-content li { margin-bottom: .58rem; }
.updated { color: #8296b0!important; font-size: 13px; }

.calculator-index-hero { position: relative; }
.calculator-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.calculator-index-card { position: relative; display: flex; min-height: 260px; flex-direction: column; overflow: hidden; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: inherit; text-decoration: none; transition: transform .2s ease,border-color .2s ease,background .2s ease; }
.calculator-index-card:first-child { grid-column: span 2; min-height: 235px; padding-right: 30%; }
.calculator-index-card:hover { transform: translateY(-2px); border-color: rgba(113,169,255,.42); background: rgba(20,42,72,.9); color: inherit; }
.calculator-index-card .card-label { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.calculator-index-card h2 { max-width: 19ch; margin: 10px 0; color: #fff; font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
.calculator-index-card p { max-width: 52ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.calculator-index-card .read-more { margin-top: auto; padding-top: 24px; color: #aecdff; font-size: 14px; font-weight: 750; }
.calculator-card-icon { position: absolute; right: 25px; top: 24px; width: 55px; height: 55px; transition: transform .2s ease; }
.calculator-index-card:hover .calculator-card-icon { transform: translateY(-2px) scale(1.06); }

@media(max-width:760px){.calculator-card{grid-template-columns:1fr}.result-panel{min-height:250px;border-top:1px solid rgba(193,216,255,.14);border-left:0}.calculator-form{grid-template-columns:1fr}.calculator-form .wide-field{grid-column:auto}.calculator-grid{grid-template-columns:1fr}.calculator-index-card:first-child{grid-column:auto;min-height:260px;padding-right:26px}.tool-content{display:block}}
@media(max-width:520px){.calculator-page{padding-top:24px}.calculator-page .breadcrumbs{margin-bottom:18px}.tool-hero{margin-bottom:24px}.tool-hero h1{font-size:36px}.tool-hero p{font-size:17px;line-height:1.45}.calculator-form-wrap{padding:22px 20px}.result-panel{min-height:220px;padding:24px 20px}.result-icon{top:22px;right:22px;width:44px;height:44px}.calculator-form{gap:12px}.input-with-unit{min-height:54px}.conversion-table{grid-template-columns:repeat(2,minmax(0,1fr))}.result-value{font-size:42px}.calculator-card-icon{width:49px;height:49px;right:21px}}
@media(prefers-reduced-motion:reduce){.calculator-index-card,.input-with-unit{transition:none}}