:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background:#0d1117; color:#e8edf3; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 50% 0,#1c2732,#0d1117 55%); }
main { width:min(620px,calc(100vw - 32px)); }
header span, small { color:#93a0ad; font-size:11px; letter-spacing:.16em; }
h1 { margin:4px 0 24px; font-size:34px; letter-spacing:.04em; }
.receiver,.facts { border:1px solid #293541; background:#171e27; border-radius:10px; padding:24px; }
.session { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
.session strong { color:#46d6b1; font-size:20px; }
button { width:100%; height:46px; border:0; border-radius:6px; background:#24a986; color:#061511; font-weight:800; letter-spacing:.08em; cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
.meter { height:7px; margin-top:22px; border-radius:4px; overflow:hidden; background:#303b47; }
.meter i { display:block; width:0; height:100%; background:#46d6b1; transition:width 70ms linear; }
#status { min-height:24px; color:#bac4ce; margin:14px 0 0; }
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:14px; }
.facts div { min-width:0; }
.facts strong { display:block; margin-top:6px; font-size:14px; overflow-wrap:anywhere; }
@media(max-width:520px){ .facts{grid-template-columns:repeat(2,1fr)} }