html{background:#0d0f12}body{margin:0}*{box-sizing:border-box}:root{color:#f5f5f5;font-synthesis:none;text-rendering:optimizelegibility;background:#0d0f12;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{background:radial-gradient(circle at top,#24282e 0%,#121417 38%,#090a0c 100%);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{touch-action:manipulation}.app-shell{justify-content:center;min-height:100vh;padding:18px 14px 36px;display:flex}.calculator-card{width:100%;max-width:480px}.app-header{margin-bottom:26px}.eyebrow{color:#ff5a1f;letter-spacing:.18em;margin:0 0 6px;font-size:.82rem;font-weight:800}h1{letter-spacing:-.04em;margin:0;font-size:clamp(2rem,8vw,2.7rem);line-height:1}.subtitle{color:#aeb4bd;margin:12px 0 0;font-size:1rem;line-height:1.45}.input-group{margin-bottom:18px}.input-group label{color:#d5d9de;margin-bottom:8px;font-size:.95rem;font-weight:700;display:block}.input-with-unit{background:#181b1f;border:2px solid #343940;border-radius:12px;align-items:stretch;min-height:62px;display:flex;overflow:hidden}.input-with-unit:focus-within{border-color:#ff5a1f;box-shadow:0 0 0 3px #ff5a1f2e}.input-with-unit input{color:#fff;background:0 0;border:0;outline:0;width:100%;min-width:0;padding:14px 16px;font-size:1.4rem;font-weight:700}.input-with-unit input::placeholder{color:#626973}.input-with-unit span{color:#aeb4bd;background:#20242a;border-left:1px solid #343940;justify-content:center;align-items:center;min-width:58px;font-weight:800;display:flex}.calculate-button,.clear-button{cursor:pointer;border-radius:12px;width:100%;min-height:60px;font-size:1.05rem;font-weight:900}.calculate-button{color:#111;background:#ff5a1f;border:0;margin-top:6px}.calculate-button:hover{filter:brightness(1.08)}.calculate-button:active{transform:translateY(1px)}.clear-button{color:#d5d9de;background:0 0;border:2px solid #343940;margin-top:16px}.clear-button:hover{background:#171a1e;border-color:#666d77}.error-message{color:#ffc6c6;background:#351717;border:1px solid #9f3636;border-radius:10px;margin:14px 0 0;padding:12px 14px;font-weight:700}.results-card{background:#171a1e;border:1px solid #343940;border-radius:16px;margin-top:20px;padding:22px 18px;box-shadow:0 14px 40px #00000047}.result-direction{color:#ff5a1f;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:1rem;font-weight:900}.primary-result{border-bottom:1px solid #343940;align-items:baseline;gap:10px;margin-top:8px;padding-bottom:20px;display:flex}.primary-result span{letter-spacing:-.06em;font-size:clamp(3rem,15vw,4.5rem);font-weight:900;line-height:1}.primary-result small{color:#aeb4bd;font-size:1rem;font-weight:800}.result-grid{grid-template-columns:1fr;gap:12px;margin-top:18px;display:grid}.result-grid div{background:#20242a;border-radius:10px;flex-direction:column;justify-content:center;min-height:76px;padding:12px 14px;display:flex}.result-grid span{color:#fff;font-size:1.25rem;font-weight:850}.result-grid small{color:#8f969f;margin-top:4px;font-size:.82rem;font-weight:700}@media (width>=440px){.app-shell{padding-top:32px}.result-grid{grid-template-columns:1fr 1fr}.result-grid div:last-child{grid-column:1/-1}}.mode-tabs{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;display:grid}.mode-button,.direction-button{color:#c9ced5;cursor:pointer;background:#181b1f;border:2px solid #343940;border-radius:12px;min-height:54px;font-weight:850}.mode-button.active,.direction-button.active{color:#fff;background:#2a1a14;border-color:#ff5a1f;box-shadow:0 0 0 3px #ff5a1f1f}.mode-button:hover,.direction-button:hover{border-color:#666d77}.direction-toggle{grid-template-columns:1fr 1fr;gap:10px;display:grid}.direction-button{min-height:58px;font-size:1rem}.mode-tabs.three-tabs{grid-template-columns:1fr}@media (width>=520px){.mode-tabs.three-tabs{grid-template-columns:1fr 1fr 1fr}}.app-container{width:100%;max-width:480px}.main-navigation{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;display:grid}.main-nav-button{color:#c9ced5;cursor:pointer;background:#181b1f;border:2px solid #343940;border-radius:12px;min-height:58px;font-size:1rem;font-weight:900}.main-nav-button.active{color:#fff;background:#2a1a14;border-color:#ff5a1f;box-shadow:0 0 0 3px #ff5a1f1f}.main-nav-button:hover{border-color:#666d77}.main-navigation{grid-template-columns:repeat(3,1fr)}.main-nav-button{padding:8px 6px}.mode-tabs.concrete-tabs{grid-template-columns:repeat(2,1fr)}@media (width>=520px){.mode-tabs.concrete-tabs{grid-template-columns:repeat(4,1fr)}}.mode-tabs.conversion-tabs{grid-template-columns:repeat(2,1fr)}.conversion-direction{margin-bottom:22px}.conversion-direction .direction-button{padding:8px;line-height:1.2}.field-help{color:#9ca3af;margin:-4px 0 8px;font-size:.82rem;line-height:1.35;display:block}.history-item-top{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 18px;display:flex}.history-item-top strong{flex:180px;min-width:0}.history-item-top time,.history-item-top>span{white-space:nowrap;color:#9ca3af;flex:none;margin-left:auto;font-size:.82rem;font-weight:700}@media (width<=380px){.history-item-top{align-items:flex-start}.history-item-top time,.history-item-top>span{margin-left:0}}