*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #ffffff;--bg-secondary: #fafafa;--text: #0a0a0a;--text-secondary: #525252;--text-tertiary: #737373;--border: #e5e5e5;--border-hover: #d4d4d4;--input-bg: #ffffff;--card-bg: #ffffff;--toggle-bg: #f5f5f5;--toggle-active-bg: #0a0a0a;--toggle-active-text: #ffffff;--positive: #16a34a;--negative: #dc2626;--radius: 10px;--radius-lg: 12px;--transition: .15s ease;--max-width: 560px}@media(prefers-color-scheme:dark){:root{--bg: #0a0a0a;--bg-secondary: #111111;--text: #fafafa;--text-secondary: #a3a3a3;--text-tertiary: #737373;--border: #262626;--border-hover: #404040;--input-bg: #141414;--card-bg: #141414;--toggle-bg: #1a1a1a;--toggle-active-bg: #fafafa;--toggle-active-text: #0a0a0a;--positive: #22c55e;--negative: #ef4444}}html{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;display:flex;flex-direction:column;align-items:center}#root{width:100%;max-width:var(--max-width);padding:0 20px}h1{font-size:1.75rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}.tagline{font-size:.9375rem;color:var(--text-secondary);margin-top:6px}.section-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);display:flex;align-items:center;gap:6px;margin-bottom:12px}.section-label svg{width:14px;height:14px;stroke:var(--text-tertiary);stroke-width:2;fill:none}.app{padding-top:60px;padding-bottom:60px;display:flex;flex-direction:column;gap:32px}.header{text-align:center}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:border-color var(--transition)}.card:hover{border-color:var(--border-hover)}.input-group{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}.input-wrapper{position:relative;display:flex;align-items:center}.input-prefix{position:absolute;left:12px;font-size:.875rem;font-weight:500;color:var(--text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.input-suffix{position:absolute;right:12px;font-size:.875rem;font-weight:500;color:var(--text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.input-wrapper input{width:100%;height:44px;padding:0 12px 0 28px;font-family:inherit;font-size:.9375rem;font-weight:500;color:var(--text);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:border-color var(--transition)}.input-wrapper input:focus{border-color:var(--text)}.input-wrapper input.has-suffix{padding-right:36px}.input-wrapper input.no-prefix{padding-left:12px}.toggle-wrapper{display:flex;justify-content:center}.toggle{display:inline-flex;background:var(--toggle-bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.toggle button{padding:8px 16px;font-family:inherit;font-size:.8125rem;font-weight:500;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:6px}.toggle button svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}.toggle button.active{background:var(--toggle-active-bg);color:var(--toggle-active-text)}.toggle button:hover:not(.active){color:var(--text)}.results{display:flex;flex-direction:column;gap:12px}.result-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;display:flex;justify-content:space-between;align-items:baseline;transition:border-color var(--transition)}.result-card:hover{border-color:var(--border-hover)}.result-label{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}.result-value{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--text)}.result-unit{font-size:.875rem;font-weight:500;color:var(--text-tertiary);margin-left:4px}.message{text-align:center;padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg)}.message.positive{border-color:var(--positive)}.message.positive .message-text{color:var(--positive)}.message.error{border-color:var(--negative)}.message.error .message-text{color:var(--negative)}.message-icon{margin-bottom:8px}.message-icon svg{width:24px;height:24px;stroke-width:2;fill:none}.message.positive .message-icon svg{stroke:var(--positive)}.message.error .message-icon svg{stroke:var(--negative)}.message-text{font-size:.9375rem;font-weight:600}.message-sub{font-size:.8125rem;color:var(--text-tertiary);margin-top:4px}.footer{text-align:center;padding-top:16px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-tertiary)}.footer a{color:var(--text-secondary);text-decoration:none;transition:all var(--transition)}.footer a.glow-link{font-weight:500}.footer a:hover{color:var(--text);text-shadow:0 0 10px rgba(255,255,255,.5)}@media(prefers-color-scheme:light){.footer a:hover{text-shadow:0 0 10px rgba(0,0,0,.2)}}@media(max-width:480px){#root{padding:0 16px}.app{padding-top:40px;padding-bottom:40px;gap:24px}h1{font-size:1.5rem}.card{padding:20px}.result-card{padding:16px 20px}.result-value{font-size:1.25rem}}
