:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#061722; color:#f4f8fb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(160deg,#071b27 0%,#06141e 58%,#04111a 100%); }
button,input { font:inherit; }
button { touch-action:manipulation; }
.app { width:min(100%,520px); min-height:100vh; margin:auto; padding:18px 16px 32px; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.brand .brand-logo { display:block; width:min(230px,68vw); height:auto; object-fit:contain; object-position:left center; }
.product-name { margin:0 0 0 3px; color:#8dc9ea; font-size:.86rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.icon-button { border:1px solid #1d536b; background:#0d2a38; color:#edf8ff; border-radius:50%; width:44px; height:44px; box-shadow:0 3px 14px #0005; font-size:1.25rem; }
.result-card { background:#0d2a38; color:#fff; border:1px solid #1d536b; border-radius:24px; padding:20px; box-shadow:0 14px 34px #0006; }
.label { margin:0; color:#8dc9ea; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.amount-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.clear-button { margin:-7px -7px 0 0; border:1px solid #824250; border-radius:10px; padding:7px 10px; color:#ff9aa5; background:#351c25; font-size:.78rem; font-weight:800; letter-spacing:.02em; }
.amount { display:flex; align-items:baseline; gap:8px; margin:5px 0 16px; }
#amount { font-size:2.15rem; font-weight:750; overflow-wrap:anywhere; }
.currency { font-weight:700; color:#86c8ec; }
.divider { height:1px; background:#ffffff2c; margin-bottom:15px; }
#result { display:block; margin-top:5px; font-size:2.35rem; line-height:1.1; letter-spacing:-.04em; overflow-wrap:anywhere; }
.swap { width:100%; margin:14px 0; border:1px solid #0acb99; border-radius:14px; background:#092431; padding:12px; color:#34e6b5; font-weight:800; }
.presets { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.preset { min-height:46px; border:1px solid #1d536b; border-radius:12px; background:#0c2634; font-weight:750; color:#d9f2ff; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.keypad button { min-height:61px; border:1px solid #16465d; border-radius:16px; background:#0d2a38; box-shadow:0 2px 9px #0004; font-size:1.45rem; font-weight:720; color:#f4f9fc; }
.keypad button:active,.preset:active { background:#12394a; border-color:#28bfe8; }
.keypad .action { background:#113446; color:#83d7fa; font-size:1rem; }
.keypad .danger { background:#3b2029; border-color:#6d3542; color:#ff8794; }
.rate-card { margin-top:14px; padding:15px; background:#0c2634; border:1px solid #1d536b; border-radius:18px; }
.rate-row { display:flex; justify-content:space-between; gap:10px; align-items:center; }
#rateSummary { font-weight:800; }
#rateMeta,#notice,.disclaimer { color:#80b9d6; font-size:.8rem; margin:5px 0 0; }
#notice { color:#34e6b5; }
.small-button { border:1px solid #0acb99; border-radius:11px; padding:10px; background:#0a2e34; color:#34e6b5; font-weight:750; }
.footer { text-align:center; margin-top:18px; font-size:.76rem; color:#77a8c1; }
.footer a { color:#52c9f3; }
.footer button { border:0; background:none; color:#52c9f3; text-decoration:underline; }
dialog { width:min(calc(100% - 32px),440px); color:#f4f8fb; background:#0d2a38; border:1px solid #1d536b; border-radius:22px; padding:22px; box-shadow:0 20px 70px #0009; }
dialog::backdrop { background:#10251a99; backdrop-filter:blur(3px); }
dialog h2 { margin-top:0; }
dialog input { width:100%; padding:13px; color:#f4f8fb; background:#061722; border:1px solid #28647d; border-radius:12px; margin:8px 0 14px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.dialog-actions button { border:1px solid #28647d; color:#d9f2ff; background:#113446; border-radius:10px; padding:11px 14px; }
.primary { background:#00a97f !important; border-color:#16d7a6 !important; color:#031a15 !important; font-weight:800; }
@media (max-width:420px) { .presets.vnd { grid-template-columns:repeat(3,1fr); } .preset { font-size:.86rem; } }
@media (display-mode:standalone) { .app { padding-top:max(18px,env(safe-area-inset-top)); padding-bottom:max(30px,env(safe-area-inset-bottom)); } }