:root { color-scheme: dark; --panel: rgba(11, 27, 46, .82); --line: rgba(148, 184, 216, .18); --muted: #9db0c4; --cyan: #3de1f2; --blue: #4d77ff; }
* { box-sizing: border-box; }
html { min-width: 320px; background: #050b14; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f4f8ff; background: radial-gradient(circle at 50% 0%, #112c48 0, #07111f 36%, #050b14 72%); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { position: relative; min-height: 100vh; overflow: hidden; padding: max(32px, env(safe-area-inset-top)) 18px max(30px, env(safe-area-inset-bottom)); }
.ambient { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(90px); opacity: .18; pointer-events: none; }
.ambient-one { top: -90px; right: -90px; background: #237bff; }
.ambient-two { bottom: -130px; left: -120px; background: #00d8c8; }
.app-frame { position: relative; width: min(100%, 560px); margin: 0 auto; }
.hero { padding: 8px 6px 24px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #b4c7da; font-size: .78rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #041018; background: linear-gradient(135deg, #76f2e8, #49bffa); box-shadow: 0 0 24px rgba(61, 225, 242, .28); }
.hero h1 { margin: 18px 0 7px; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.04; letter-spacing: -.05em; }
.hero h1 span { color: var(--cyan); }
.hero p { margin: 0; color: var(--muted); font-size: .96rem; }
.calculator-card { padding: 20px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(160deg, rgba(16, 37, 61, .94), rgba(7, 18, 32, .88)); box-shadow: 0 30px 80px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .04); backdrop-filter: blur(20px); }
.direction-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 15px; background: rgba(2, 9, 18, .62); }
.direction-switch button { min-height: 46px; padding: 9px 8px; border: 0; border-radius: 11px; background: transparent; color: #8094aa; cursor: pointer; font-size: .86rem; font-weight: 760; transition: .2s ease; }
.direction-switch button.active { color: #f7fbff; background: linear-gradient(135deg, rgba(62, 107, 255, .52), rgba(34, 196, 211, .28)); box-shadow: inset 0 0 0 1px rgba(118, 223, 242, .22); }
.form-grid { display: grid; gap: 17px; margin-top: 23px; }
.field-group { display: grid; gap: 8px; }
.field-label { font-size: .83rem; color: #d5e0eb; font-weight: 760; }
.input-shell { display: flex; align-items: center; min-height: 58px; padding: 0 15px; border: 1px solid rgba(154, 184, 214, .2); border-radius: 15px; background: rgba(3, 12, 22, .6); transition: border-color .2s, box-shadow .2s; }
.input-shell:focus-within { border-color: rgba(61, 225, 242, .68); box-shadow: 0 0 0 3px rgba(61, 225, 242, .1); }
.input-shell-primary { border-color: rgba(77, 119, 255, .38); }
input { width: 100%; min-width: 0; padding: 15px 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 1.28rem; font-weight: 760; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.unit { flex: 0 0 auto; color: #8fa5bb; font-size: .8rem; font-weight: 740; }
.field-hint { color: #6f859b; font-size: .72rem; }
.result-panel { margin-top: 20px; padding: 18px; border: 1px solid rgba(61, 225, 242, .2); border-radius: 20px; background: linear-gradient(145deg, rgba(18, 65, 81, .32), rgba(6, 22, 36, .72)); }
.result-topline { display: flex; justify-content: space-between; align-items: center; color: #b4c6d7; font-size: .78rem; font-weight: 720; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; color: #7fe3d4; }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: #56e1c7; box-shadow: 0 0 10px #56e1c7; }
.result-value-row { display: flex; align-items: baseline; gap: 9px; margin: 17px 0 18px; overflow-wrap: anywhere; }
.result-value-row strong { color: #fff; font-size: clamp(2.15rem, 11vw, 3.35rem); line-height: 1; letter-spacing: -.055em; text-shadow: 0 0 28px rgba(61, 225, 242, .18); }
.result-value-row span { color: var(--cyan); font-size: .86rem; font-weight: 740; }
.result-error { min-height: 52px; margin: 17px 0 18px; color: #ffb5b5; }
.reverse-button { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 45px; border: 1px solid rgba(126, 213, 226, .2); border-radius: 12px; color: #dcebf3; background: rgba(29, 85, 101, .24); cursor: pointer; font-size: .82rem; font-weight: 740; }
.reverse-button:disabled { opacity: .4; cursor: not-allowed; }
.formula-details { margin-top: 18px; border-top: 1px solid var(--line); color: #92a8bd; }
.formula-details summary { padding: 17px 2px 0; cursor: pointer; font-size: .77rem; font-weight: 730; }
.formula-copy { margin-top: 12px; padding: 13px; border-radius: 12px; background: rgba(2, 9, 18, .4); }
.formula-copy p { margin: 0; color: #c8d7e5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; line-height: 1.65; overflow-wrap: anywhere; }
.formula-copy span { display: block; margin-top: 7px; font-size: .69rem; line-height: 1.55; }
.engineering-note { display: flex; gap: 12px; margin: 15px 3px 0; padding: 15px; border: 1px solid rgba(105, 142, 176, .15); border-radius: 15px; background: rgba(9, 23, 39, .52); color: #869bb0; }
.engineering-note > span { display: grid; flex: 0 0 auto; place-items: center; width: 21px; height: 21px; border: 1px solid rgba(116, 199, 218, .34); border-radius: 50%; color: #79cedd; font: 700 .75rem Georgia, serif; }
.engineering-note p { margin: 0; font-size: .71rem; line-height: 1.58; }
footer { padding: 20px 0 4px; color: #52677c; text-align: center; font-size: .68rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 620px) { .app-shell { padding-top: 52px; } .calculator-card { padding: 25px; } .form-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }