:root { color-scheme: dark; --bg:#07111d; --panel:rgba(12,27,45,.8); --line:rgba(156,204,247,.18); --ice:#a8dcff; --cyan:#52c9f0; --text:#eaf4ff; --muted:#8ba0b8; }
* { box-sizing:border-box; } body { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; background:radial-gradient(circle at 50% 15%,#132d47 0,#07111d 42%,#050a11 100%); color:var(--text); font-family:Manrope,Arial,sans-serif; }
.stars { position:fixed; inset:0; pointer-events:none; opacity:.45; background-image:radial-gradient(circle at 8% 20%,#b4e3ff 0 1px,transparent 2px),radial-gradient(circle at 88% 14%,#b4e3ff 0 1px,transparent 2px),radial-gradient(circle at 76% 75%,#b4e3ff 0 1px,transparent 2px),radial-gradient(circle at 20% 88%,#b4e3ff 0 1px,transparent 2px); }
.shell { width:min(940px,calc(100% - 32px)); min-height:calc(100vh - 72px); margin:auto; padding:36px 0 70px; position:relative; } .brand { display:inline-flex; gap:11px; align-items:center; color:#f2f8ff; text-decoration:none; font:700 13px/1.1 Unbounded,sans-serif; letter-spacing:.04em; } .brand b { color:var(--cyan); } .brand-mark { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); border-radius:12px; color:var(--ice); font-size:22px; background:rgba(125,192,255,.08); }
.intro,.error { max-width:660px; margin:clamp(80px,15vh,150px) 0 0; } .eyebrow { margin:0 0 18px; color:#76c8ff; font-size:11px; font-weight:800; letter-spacing:.17em; } h1 { margin:0; font:800 clamp(44px,8vw,82px)/.98 Unbounded,sans-serif; letter-spacing:-.07em; } h1 em { font-style:normal; color:var(--ice); } .lead { max-width:550px; margin:28px 0; color:#9db0c6; font-size:16px; line-height:1.7; } .primary-button { display:inline-flex; justify-content:space-between; gap:48px; min-width:min(100%,430px); padding:18px 22px; border:0; border-radius:14px; background:linear-gradient(110deg,#e2f5ff,#8fd4ff); color:#07111d; font:800 13px Manrope,Arial,sans-serif; text-align:left; } .primary-button:disabled { cursor:wait; opacity:.68; } .primary-button span { font-size:19px; line-height:.7; } .muted,.auto-refresh { color:#778ba1; font-size:12px; line-height:1.7; } code { font-family:ui-monospace,Consolas,monospace; }
.inbox { margin-top:70px; } .inbox-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; } .inbox h1 { font-size:42px; } .timer { min-width:170px; padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:rgba(5,11,19,.5); text-align:right; } .timer small,.address-card small { color:#75a8ce; font-size:9px; font-weight:800; letter-spacing:.14em; } .timer b { display:block; margin-top:5px; font:700 13px Unbounded,sans-serif; color:var(--ice); }
.address-card { padding:20px 22px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(125deg,rgba(40,76,108,.45),rgba(7,16,28,.75)); } .address-card div { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:9px; } .address-card code { overflow:hidden; text-overflow:ellipsis; color:#e9f6ff; font-size:clamp(13px,2vw,16px); } button { flex:none; padding:10px 13px; cursor:pointer; border:1px solid rgba(164,221,255,.28); border-radius:10px; background:rgba(164,221,255,.1); color:var(--ice); font:700 11px Manrope,sans-serif; }
.messages-head { display:flex; justify-content:space-between; align-items:center; margin:36px 0 14px; } h2 { margin:0; font:700 17px Unbounded,sans-serif; letter-spacing:-.04em; } .messages-head span { color:#8197af; font-size:12px; } .messages { display:grid; gap:10px; } .message,.empty { padding:18px 20px; border:1px solid var(--line); border-radius:15px; background:var(--panel); } .message-top { display:flex; justify-content:space-between; gap:18px; align-items:baseline; } .message h3 { margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; } .message time,.message .from { color:#83a0bb; font-size:11px; } .message p { margin:11px 0 0; color:#b7c9da; font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; } .empty { color:#91a8be; text-align:center; font-size:13px; }
footer { position:relative; width:min(940px,calc(100% - 32px)); margin:auto; padding:22px 0 28px; border-top:1px solid rgba(156,204,247,.1); color:#607890; font-size:9px; font-weight:800; letter-spacing:.1em; }
@media (max-width:600px) { .shell{padding-top:22px}.intro,.error{margin-top:95px}.inbox{margin-top:60px}.inbox-head{align-items:start;flex-direction:column}.timer{text-align:left}.address-card div{align-items:stretch;flex-direction:column}.address-card button{width:100%}.message-top{align-items:start;flex-direction:column;gap:5px} }