:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b1220; color: #e5edf8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top right, #1b3155 0, #0b1220 42rem); }
.shell { width: min(100% - 2rem, 1040px); margin: 0 auto; padding: max(1.5rem, env(safe-area-inset-top)) 0 max(2rem, env(safe-area-inset-bottom)); }
.hero { margin-bottom: 1.25rem; }.eyebrow { color: #72b7ff; letter-spacing: .12em; font-size: .75rem; font-weight: 700; margin: 0 0 .5rem; }.hero h1 { margin: 0; font-size: clamp(2rem, 8vw, 3.25rem); }.hero p:last-child { color: #a9b8ce; margin: .6rem 0 0; }
.layout { display: grid; gap: 1rem; }.card { background: rgba(17, 29, 50, .94); border: 1px solid #2a3d5d; border-radius: 1rem; padding: 1rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.18); }
label { display: block; color: #c9d7e9; font-size: .9rem; margin-bottom: 1rem; } input, select, button { width: 100%; min-height: 46px; font: inherit; font-size: 16px; border-radius: .65rem; } input, select { margin-top: .4rem; padding: .65rem .75rem; color: #f5f8fc; background: #0d192d; border: 1px solid #405675; } input:focus, select:focus, button:focus-visible { outline: 3px solid #72b7ff; outline-offset: 2px; }.unit { float: right; color: #83a1c7; font-size: .8rem; }
summary { min-height: 44px; padding: .7rem 0; cursor: pointer; color: #a9c8ef; }.advanced-grid { display: grid; gap: .75rem; }.advanced-grid label { margin: 0; }.link-button { min-height: 44px; border: 0; color: #9ecbff; background: transparent; text-decoration: underline; text-align: left; }.primary { margin-top: .5rem; border: 0; background: #2678d9; color: white; font-weight: 700; }.primary:active { transform: translateY(1px); }.disclaimer { color: #8fa3bd; font-size: .75rem; line-height: 1.5; margin: 1rem 0 0; }.instrument-note { color: #8fb3dd; font-size: .8rem; margin: -.5rem 0 1rem; min-height: 1.2em; }
.result-card { min-height: 280px; display: flex; flex-direction: column; justify-content: center; }.result-placeholder, .status { color: #a9b8ce; text-align: center; }.result-kicker { color: #8fb3dd; font-size: .8rem; margin: 0; }.lot-value { margin: .25rem 0 1rem; font-size: clamp(3rem, 15vw, 5rem); line-height: 1; color: #7dc0ff; }.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }.metric { background: #0d192d; border-radius: .65rem; padding: .75rem; }.metric small { display: block; color: #8fa3bd; }.metric strong { display: block; margin-top: .2rem; font-size: 1.05rem; }.warning { color: #ffd479; background: #3c2f14; border-radius: .6rem; padding: .75rem; line-height: 1.5; }.error { color: #ffb5b5; background: #451e29; border-radius: .6rem; padding: .75rem; line-height: 1.5; }
@media (min-width: 760px) { .shell { padding-top: 3rem; }.layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }.card { padding: 1.5rem; }.advanced-grid { grid-template-columns: 1fr 1fr; }.result-card { position: sticky; top: 1rem; } }