*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{color:#f0f0f0;-webkit-font-smoothing:antialiased;background:#0f0f0f;height:100%;font-family:system-ui,-apple-system,sans-serif}body{min-height:100%}#root{min-height:100dvh}:root{--bg:#0f0f0f;--surface:#1a1a1a;--surface-2:#242424;--accent:#e8ff00;--accent-dim:#b8cc00;--text:#f0f0f0;--text-muted:#888;--radius:12px;--input-h:72px;--font-size-input:2rem;--font-size-result:2.8rem}.app{flex-direction:column;width:100%;max-width:480px;min-height:100dvh;margin:0 auto;display:flex;overflow-x:hidden}.tab-bar{background:var(--surface);border-bottom:1px solid #2a2a2a;display:flex}.tab-btn{height:56px;color:var(--text-muted);letter-spacing:.03em;cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;font-size:1rem;font-weight:600;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.calculator{flex-direction:column;flex:1;gap:16px;padding:24px 16px;display:flex}.calc-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-size:.85rem}.input-row{align-items:center;gap:8px;display:flex}.input-unit{color:var(--text-muted);white-space:nowrap;font-size:1.2rem}.num-input{width:0;min-width:0;height:var(--input-h);background:var(--surface);border-radius:var(--radius);color:var(--text);font-size:var(--font-size-input);-moz-appearance:textfield;border:1px solid #2a2a2a;outline:none;flex:1;padding:0 12px;font-weight:600}.num-input::-webkit-outer-spin-button{-webkit-appearance:none}.num-input::-webkit-inner-spin-button{-webkit-appearance:none}.num-input:focus{border-color:var(--accent)}.mode-toggle{gap:8px;display:flex}.mode-btn{width:var(--input-h);height:var(--input-h);border-radius:var(--radius);background:var(--surface);color:var(--text-muted);cursor:pointer;border:1px solid #2a2a2a;flex-shrink:0;font-size:1.8rem;font-weight:700;transition:background .15s,color .15s,border-color .15s}.mode-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}.result-block{background:var(--surface);border-radius:var(--radius);border-left:3px solid var(--accent);margin-top:8px;padding:20px 16px}.result-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-size:.8rem}.result-value{font-size:var(--font-size-result);color:var(--accent);font-weight:700;line-height:1}.result-subtitle{color:var(--text-muted);margin-top:8px;font-size:.9rem}.divider{background:#2a2a2a;height:1px}
