:root { color-scheme: dark; --foreground: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--foreground); font-family: Arial, Helvetica, sans-serif; background: #0a100d; }
body:before { content: ""; position: fixed; inset: 0; z-index: -1; background: #274a31; mask: url('../pattern.svg') repeat; mask-size: 480px; opacity: .42; }
body.theme-blue { background: #060b14; } body.theme-blue:before { background: #183659; }
body.theme-dark { background: #08090b; } body.theme-dark:before { background: #242830; }
header { height: 56px; padding: 0 24px; background: #202020; border-bottom: 1px solid #303030; }
.tgme_head_brand { height: 100%; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 20px; font-weight: 600; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2199db; font-size: 20px; transform: rotate(-45deg);display: flex;justify-content: center;}
main { padding: 48px 20px 32px; }
.contact-card { max-width: 440px; margin: auto; background: #202020; border-radius: 22px; padding: 40px 28px 30px; text-align: center; box-shadow: 0 10px 35px #0003; }
.avatar { width: 128px; height: 128px; margin: 0 auto 26px; display: grid; place-items: center; border-radius: 50%; object-fit: cover; background: linear-gradient(145deg, #c8e6f5, #9cc3dc); color: #365e7e; font-size: 54px; font-weight: 600; }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; } .username { color: #a0a0a0; font-size: 19px; margin: 0; }
.send { border: 0; font-family: inherit; height: auto; min-height: 54px; width: 100%; margin-top: 30px; padding: 17px 25px; border-radius: 32px; font-size: 15px; font-weight: 700; cursor: pointer; background: #2199db; color: #fff; }
.send:hover { background: #32a9ea; } .send:focus-visible { outline: 3px solid #b7e6ff; outline-offset: 4px; } .send:disabled { opacity: .65; cursor: wait; }
.hint { font-size: 14px; line-height: 1.5; color: #aaa; margin: 22px 0 0; } .error { color: #ffc5be; font-size: 15px; margin: 20px 0 0; } .error:empty { display: none; }
.footnote { text-align: center; color: #a3ada5; font-size: 13px; margin: 22px 0 0; }
@media (max-width: 480px) { header { height: 64px; padding: 0 16px; } .tgme_head_brand { font-size: 18px; } .brand-mark { width: 32px; height: 32px; font-size: 20px; } main { padding: 28px 16px; } .contact-card { padding: 32px 20px 26px; } .avatar { width: 112px; height: 112px; } h1 { font-size: 28px; } }