:root { color: #17212b; background: #eef2ef; font-family: "Avenir Next", "Apple SD Gothic Neo", "Segoe UI", sans-serif; font-synthesis: none; --ink: #17212b; --teal: #23b5a5; --muted: #667478; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #eef2ef; }
button { font: inherit; }
.hidden { display: none !important; }
.mobile-shell { width: min(100%, 560px); min-height: 100svh; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.mobile-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #c7d1ce; }
.mobile-brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 550; letter-spacing: -.025em; }
.mobile-brand img { width: 31px; height: 31px; object-fit: contain; }
.connection-pill { padding: 7px 10px; border-radius: 99px; background: #dfe5e2; color: var(--muted); font-size: 11px; }
.connection-pill.online { background: #d8f3ee; color: #08675d; }
.login-view { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 54px 0 28px; }
.kicker { margin: 0 0 14px !important; color: #168f83 !important; font-size: 13px !important; }
.login-view h1 { margin: 0; font-size: clamp(42px, 13vw, 64px); line-height: 1.02; letter-spacing: -.06em; font-weight: 480; word-break: keep-all; }
.login-view p { margin: 25px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.main-button { width: 100%; min-height: 54px; margin-top: 50px; border: 0; background: var(--ink); color: white; box-shadow: 6px 6px 0 var(--teal); font-weight: 550; }
.message { min-height: 22px; margin-top: 18px !important; text-align: center; font-size: 12px !important; }
.receiver-view { flex: 1; display: flex; flex-direction: column; padding-top: 34px; }
.receiver-status { display: flex; align-items: center; gap: 13px; }
.receiver-status .pulse { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 7px rgba(35,181,165,.14); }
.receiver-status div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.receiver-status strong { font-size: 17px; font-weight: 550; }
.receiver-status small { color: var(--muted); font-size: 12px; }
.copy-card { flex: 1; width: 100%; min-height: 340px; margin: 30px 0 24px; padding: 30px 26px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 2px solid var(--teal); border-radius: 40px; background: white; color: var(--ink); box-shadow: 10px 10px 0 #bce7df; }
.copy-card:not(:disabled):active { transform: translate(4px, 4px); box-shadow: 6px 6px 0 #bce7df; }
.copy-card.empty { border-color: #b9c4c1; box-shadow: 10px 10px 0 #dce2df; }
.copy-label { color: var(--muted); font-size: 12px; }
.received-text { flex: 1; width: 100%; padding: 44px 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: clamp(22px, 7vw, 31px); line-height: 1.35; letter-spacing: -.035em; }
.copy-action { align-self: stretch; padding-top: 18px; border-top: 1px solid #d9e0de; color: #08766b; font-size: 13px; }
.copy-card.empty .copy-action { color: var(--muted); }
.mobile-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 11px; }
.mobile-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-meta button { flex: 0 0 auto; padding: 8px; border: 0; background: transparent; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(35,181,165,.4); outline-offset: 4px; }
@media (min-width: 700px) { body { padding-block: 28px; } .mobile-shell { min-height: calc(100svh - 56px); border: 1px solid #c7d1ce; background: #f4f6f3; box-shadow: 14px 14px 0 #d9e1de; } }
@media (prefers-reduced-motion: no-preference) { .pulse { animation: breathe 2.2s ease-in-out infinite; } @keyframes breathe { 50% { box-shadow: 0 0 0 11px rgba(35,181,165,.05); } } }