:root{--bg:#f0f2f5;--surface:#fff;--surface-selected:#e3f2fd;--text-primary:#1a1a2e;--text-secondary:#5a5a7a;--accent:#2563eb;--accent-light:#dbeafe;--lock-color:#9ca3af;--unlock-color:#2563eb;--border:#e2e5ea;--numpad-bg:#e8eaed;--numpad-hover:#d1d5db;--numpad-active:#bec4cc;--danger:#ef4444;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace}@media (prefers-color-scheme:dark){:root{--bg:#0f1117;--surface:#1e2030;--surface-selected:#1e3a5f;--text-primary:#e4e4ef;--text-secondary:#8b8ba3;--accent:#60a5fa;--accent-light:#1e3a5f;--lock-color:#6b7280;--unlock-color:#60a5fa;--border:#2e3044;--numpad-bg:#2a2d3e;--numpad-hover:#363950;--numpad-active:#434660;--danger:#f87171}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{justify-content:center;align-items:flex-start;min-height:100svh;padding:clamp(4px,2.5svh - 12px,16px);display:flex}.app{width:100%;max-width:420px;margin-top:clamp(0px,3svh - 18px,24px)}.calculator{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 4px 12px #0000000a}.calculator-header{border-bottom:1px solid var(--border);padding:clamp(12px,4svh - 8px,20px) 20px clamp(8px,2svh - 2px,12px)}.calculator-header h1{color:var(--text-primary);margin:0;font-size:clamp(16px,5px + 2svh,20px);font-weight:600}.calculator-header-row{justify-content:space-between;align-items:center;margin-top:2px;display:flex}.calculator-subtitle{color:var(--text-secondary);font-size:clamp(11px,4px + 1.2svh,13px)}.format-toggle{font-family:var(--mono);color:var(--text-secondary);background:var(--numpad-bg);cursor:pointer;white-space:nowrap;border:none;border-radius:4px;padding:2px 8px;font-size:12px;transition:background-color .15s}.format-toggle:hover{background:var(--numpad-hover)}.fields-container{padding:clamp(4px,1svh - 2px,8px) 0}.field-row{cursor:default;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:clamp(5px,2.5svh - 8.75px,10px) 16px clamp(5px,2.5svh - 8.75px,10px) 20px;transition:background-color .15s;display:grid}.field-row.field-selected{background:var(--surface-selected)}.field-label{color:var(--text-secondary);white-space:nowrap;font-size:clamp(12px,5px + 1.2svh,14px)}.field-open .field-label{color:var(--text-primary);font-weight:500}.field-value{font-family:var(--mono);color:var(--text-primary);text-align:right;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:6px;justify-content:flex-end;align-items:center;gap:4px;min-width:90px;padding:clamp(2px,.5svh - 1px,4px) 8px;font-size:clamp(15px,6.5px + 1.5svh,18px);font-weight:500;transition:background-color .15s;display:flex}.field-value:hover{background:var(--accent-light)}.field-selected .field-value{background:var(--accent-light);outline:2px solid var(--accent);outline-offset:-2px}.field-suffix{color:var(--text-secondary);font-size:clamp(11px,4px + 1.2svh,13px);font-weight:400}.field-value-shake{animation:.3s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.field-derived{border-top:1px solid var(--border);margin-top:clamp(2px,.5svh - 1px,4px);padding-top:clamp(5px,2.5svh - 3.75px,10px)}.field-derived .field-label{font-style:italic}.field-value-readonly{font-family:var(--mono);color:var(--text-secondary);cursor:default;justify-content:flex-end;align-items:center;min-width:90px;padding:clamp(2px,.5svh - 1px,4px) 8px;font-size:clamp(15px,6.5px + 1.5svh,18px);font-weight:500;display:flex}.padlock-spacer{flex-shrink:0;width:clamp(28px,6px + 4svh,36px)}.padlock{cursor:pointer;width:clamp(28px,6px + 4svh,36px);height:clamp(28px,6px + 4svh,36px);color:var(--lock-color);background:0 0;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex}.padlock:hover{background:var(--numpad-bg)}.padlock-open{color:var(--unlock-color)}.numpad{border-top:1px solid var(--border);flex-direction:column;gap:clamp(4px,2svh - 7px,8px);padding:clamp(6px,2.4svh - 7.5px,12px) 16px clamp(8px,3.2svh - 10px,16px);display:flex}.numpad-row{grid-template-columns:repeat(3,1fr);gap:clamp(4px,2svh - 7px,8px);display:grid}.numpad-key{font-family:var(--sans);background:var(--numpad-bg);height:clamp(36px,3px + 6svh,48px);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;border-radius:10px;font-size:clamp(16px,1px + 2.5svh,20px);font-weight:500;transition:background-color .1s}.numpad-key:hover:not(:disabled){background:var(--numpad-hover)}.numpad-key:active:not(:disabled){background:var(--numpad-active)}.numpad-key:disabled{opacity:.35;cursor:default}.numpad-key-backspace{font-size:22px}.calculator-logo{opacity:.25;justify-content:center;padding:clamp(2px,1svh - 4px,6px) 0 clamp(4px,2svh - 6px,10px);transition:opacity .2s;display:flex}.calculator-logo:hover{opacity:.5}.calculator-logo img{width:clamp(16px,4px + 2.5svh,24px);height:clamp(16px,4px + 2.5svh,24px)}