*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;background:#0f1217;color:#e8ecf1}#root{min-height:100dvh}.app{max-width:520px;margin:0 auto;padding:12px 12px 28px;padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}.header{text-align:center;margin-bottom:12px}.title{margin:0;font-size:1.25rem;font-weight:650;letter-spacing:.02em}.subtitle{margin:6px 0 0;font-size:.85rem;color:#9aa7b8}.app-footer{margin-top:10px;padding-top:10px;border-top:1px solid #252d3a}.keyboard-hints{margin:0;padding:0 4px;font-size:.72rem;line-height:1.45;color:#7a8799;text-align:center}.keyboard-hints kbd{display:inline-block;padding:.12em .38em;margin:0 1px;font-size:.68rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;color:#dce4ee;background:#252d3a;border:1px solid #3d4758;border-radius:5px;box-shadow:0 1px #141920}.display-card{background:linear-gradient(165deg,#242b36,#1a2029);border:1px solid #2f3847;border-radius:14px;padding:14px 16px;margin-bottom:14px;box-shadow:inset 0 1px #ffffff0a}.display-secondary{min-height:1.25rem;font-size:.95rem;color:#8fa0b6;text-align:right;word-break:break-word}.display-primary{margin-top:8px;font-size:clamp(1.35rem,4.5vw,1.75rem);font-weight:650;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums;letter-spacing:.02em}.display-dual{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:left}.display-arch{flex:1 1 auto;min-width:0;word-break:break-word}.display-dec{flex:0 0 auto;font-size:clamp(.92rem,3vw,1.1rem);font-weight:550;color:#8fa0b6;white-space:nowrap}.layout{display:flex;flex-direction:column;gap:12px}.panel{background:#171c24;border:1px solid #252d3a;border-radius:14px;padding:12px}.panel-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#7e8c9f;margin-bottom:10px}.ops-panel .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.ops-panel .btn-row:last-child{margin-bottom:0}.numpad-panel{border-color:#2a3340}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.keypad-spacer{min-height:48px}.unit-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.unit-key{display:inline-block;margin-left:4px;padding:1px 6px;font-size:.82rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#ffffff1a;border-radius:4px;vertical-align:1px}.btn{border:none;border-radius:10px;min-height:48px;font-size:1.05rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background .12s ease,transform .06s ease}.btn:active{transform:scale(.97)}.btn-num{background:linear-gradient(180deg,#2e3644,#262e3a);color:#e0e8f2;border:1px solid #3d4758;box-shadow:0 2px #181e28,inset 0 1px #ffffff0f}.btn-num:active{background:#222a34}.btn-unit-ft{min-height:52px;font-size:1rem;font-weight:650;background:linear-gradient(180deg,#2b5265,#244758);color:#d5eff8;border:1px solid #3a6e80;box-shadow:0 2px #182e38,inset 0 1px #ffffff14}.btn-unit-ft:active{background:#1e3e4c}.btn-unit-in{min-height:52px;font-size:1rem;font-weight:650;background:linear-gradient(180deg,#4c4260,#413856);color:#ede6f5;border:1px solid #685a82;box-shadow:0 2px #28223e,inset 0 1px #ffffff14}.btn-unit-in:active{background:#362f4a}.btn-frac{min-height:42px;padding:6px 4px;font-size:.78rem;font-weight:650;background:linear-gradient(180deg,#2f6b4f,#265f45);color:#ecfdf5;border:1px solid #3d8c68;box-shadow:0 2px #1a3026,inset 0 1px #ffffff1a}.btn-frac:active{background:#23563f}.btn-op{font-size:1.35rem;background:linear-gradient(180deg,#c2783a,#a86530);color:#fff8ef;border:1px solid #d49256;box-shadow:0 2px #5c3b1c,inset 0 1px #ffffff26}.btn-op:active{background:#955f2c}.btn-fn{background:linear-gradient(180deg,#3d6dad,#345f96);color:#eef5ff;border:1px solid #5c87bd;box-shadow:0 2px #243854,inset 0 1px #ffffff1f}.btn-fn:active{background:#2f568a}.btn-clear{background:linear-gradient(180deg,#9b3a3a,#832f2f);color:#fff5f5;border:1px solid #c25555;box-shadow:0 2px #461818,inset 0 1px #ffffff1f}.btn-clear:active{background:#702929}.fractions-panel{padding-bottom:10px}.frac-row{display:flex;justify-content:center;gap:6px;margin-bottom:6px}.frac-row:last-child{margin-bottom:0}.frac-row .btn-frac{flex:1 1 0;max-width:25%}.history-panel{padding:10px 12px 12px}.history-scroll{max-height:min(280px,42vh);overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;scroll-padding-top:8px;scroll-padding-bottom:14px;border-radius:12px;background:#12161d;border:1px solid #232c38;outline:none;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.history-scroll:focus-visible{box-shadow:0 0 0 2px #3d6dad73}.history-live{position:sticky;top:0;z-index:1;display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;margin:0;background:linear-gradient(180deg,#1c232e,#171c24);border-bottom:1px solid #2a3442;box-shadow:0 10px 14px #00000047}.history-live-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7e8c9f}.history-live-value{font-size:.98rem;font-weight:650;line-height:1.45;word-break:break-word;font-variant-numeric:tabular-nums;color:#f2f6fb}.history-list{list-style:none;margin:0;padding:6px 0 14px}.history-item{padding:12px 14px;margin:0 8px 8px;font-size:.9rem;line-height:1.5;word-break:break-word;font-variant-numeric:tabular-nums;border-radius:10px;background:#161b23;border:1px solid #242d3a}.history-item:last-child{margin-bottom:10px}.history-item-result{color:#dfe7f2}.history-item-note{color:#b8c5d6;border-style:dashed;border-color:#343f50;background:#141920}.history-hint{margin:0;padding:0 14px 14px;font-size:.82rem;line-height:1.45;color:#667991;text-align:center}.history-hint kbd{display:inline-block;padding:.1em .35em;font-size:.76rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;color:#dce4ee;background:#252d3a;border:1px solid #3d4758;border-radius:5px}@media(max-width:520px),(max-height:700px){.app{padding:10px 10px max(16px,env(safe-area-inset-bottom,0px))}.header{margin-bottom:6px}.title{font-size:1.1rem}.subtitle{margin-top:4px;font-size:.8rem}.display-card{padding:10px 12px;margin-bottom:8px}.display-primary{margin-top:6px}.layout{gap:8px}.panel{padding:8px 10px}.panel-label{margin-bottom:6px}.ops-panel .btn-row{gap:6px;margin-bottom:6px}.keypad{gap:6px}.unit-row{margin-top:6px;gap:6px}.btn{min-height:42px;font-size:1rem}.keypad-spacer{min-height:42px}.btn-unit-ft,.btn-unit-in{min-height:44px;font-size:.95rem}.btn-frac{min-height:36px;padding:4px 2px;font-size:.74rem}.frac-row{gap:5px;margin-bottom:5px}.history-scroll{max-height:min(200px,28vh)}.app-footer{margin-top:8px;padding-top:8px}.keyboard-hints{font-size:.65rem;line-height:1.4}}