*{box-sizing:border-box}html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif}.app{min-height:100vh;padding:40px 16px;transition:background .3s}.app.light{--bg:linear-gradient(135deg, #dbeafe, #eff6ff, #e0e7ff);--card-bg:#fff;--text-main:#1e3a8a;--text-secondary:#475569;--label-color:#334155;--field-bg:#f8fafc;--field-border:#cbd5e1;--field-text:#0f172a;--result-color:#1e3a8a;--button-bg:#2563eb;--button-hover:#1d4ed8;--shadow:0 12px 30px #0000001f}.app.dark{--bg:linear-gradient(135deg, #020617, #030b2a, #020617);--card-bg:#1a1d3b;--text-main:#fff;--text-secondary:#dbe4ff;--label-color:#fff;--field-bg:#fff;--field-border:#bcd4ff;--field-text:#0f172a;--result-color:#b7e34d;--button-bg:#2c5be3;--button-hover:#1d4ed8;--shadow:0 12px 30px #00000059}.app{background:var(--bg)}.container{background-color:var(--card-bg);width:100%;max-width:520px;box-shadow:var(--shadow);text-align:center;border-radius:18px;margin:0 auto;padding:28px 24px 36px}.top-bar{justify-content:flex-end;margin-bottom:16px;display:flex}.theme-btn{background:var(--button-bg);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:700;transition:background .2s,transform .2s}.theme-btn:hover{background:var(--button-hover);transform:translateY(-1px)}h1{color:var(--text-main);margin-bottom:10px;font-size:32px}.subtitle{color:var(--text-secondary);margin-bottom:22px;font-size:16px;font-weight:600}label{text-align:center;color:var(--label-color);margin-top:16px;margin-bottom:8px;font-size:18px;font-weight:700;display:block}input,select{border:1px solid var(--field-border);width:100%;color:var(--field-text);background-color:var(--field-bg);border-radius:6px;outline:none;padding:12px 14px;font-size:16px}input:focus,select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa33}select{cursor:pointer}.swap-btn{background:var(--button-bg);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin:18px auto 10px;font-size:18px;transition:transform .25s,background .2s;display:flex}.swap-btn:hover{background:var(--button-hover);transform:rotate(180deg)}.convert{color:var(--result-color);margin-top:24px;font-size:18px;font-weight:800}.status-message{text-align:center;color:#fff;padding-top:100px;font-size:20px}.status-message.error{color:#fecaca}