/* ─────────────────────────────────────────────────────────────────────────── Kinly — member app · "Letter" design system Auth + onboarding + "finding your Listener" + Home. Scoped to `body.letter` so it only restyles member pages. Loaded *after* app.css (via member_base.html) and only on member pages, so the still-purple pages (chat, admin, creator dashboard) are untouched. Recreated from design_handoff_member_app/member.css. Light + Night (dark); theme persists in localStorage["kinly-theme"] and is set as data-theme on . ─────────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap'); /* ── Tokens — Light ("Letter") ── */ body.letter{ --terra:#C0623F; --terra-deep:#9E4D30; --terra-soft:#E4B59C; --bg:#FBF5EE; --sand:#F3E8DB; --card:#FFFFFF; --ink:#2C2521; --ink-soft:#6B5F57; --ink-faint:#A99A8A; --line:#ECDDCD; --line-soft:#F0E7DA; --av-bg:linear-gradient(140deg,#C0623F,#9E4D30); --sage:#5F7A5C; --sage-ink:#4E6A4B; --sage-wash:#E9EFE4; --sage-halo:rgba(95,122,92,.16); --you-bg:linear-gradient(150deg,#C0623F,#9E4D30); --you-ink:#FBF5EE; --you-shadow:0 10px 26px rgba(158,77,48,.26); --input-bg:#FFFFFF; --input-line:#E7D8C7; --input-ph:#A99A8A; --field-bg:#FFFFFF; --m-shadow-sm:0 1px 2px rgba(44,37,33,.05),0 4px 14px rgba(44,37,33,.06); --m-shadow:0 12px 34px rgba(44,37,33,.11),0 24px 60px rgba(44,37,33,.07); --danger:#C0392B; --serif:'Newsreader',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif; font-family:var(--sans); background:var(--bg); color:var(--ink); min-height:100dvh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; line-height:1.5; transition:background .35s ease, color .35s ease; } /* ── Tokens — Night (dark) ── */ html[data-theme="dark"] body.letter{ --terra:#D2754F; --terra-deep:#A0512F; --terra-soft:#7a4d3a; --bg:#1E1813; --sand:#271F19; --card:#2E2620; --ink:#ECE3D8; --ink-soft:#B5A797; --ink-faint:#82756A; --line:#372C24; --line-soft:#2A221C; --av-bg:linear-gradient(140deg,#C0623F,#9E4D30); --sage:#8DA888; --sage-ink:#A6BFA1; --sage-wash:#263023; --sage-halo:rgba(141,168,136,.18); --you-bg:linear-gradient(150deg,#C0623F,#A0512F); --you-ink:#FBF5EE; --you-shadow:0 10px 26px rgba(0,0,0,.4); --input-bg:#2E2620; --input-line:#3C2F26; --input-ph:#8a7c6f; --field-bg:#2E2620; --m-shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.3); --m-shadow:0 14px 38px rgba(0,0,0,.45); --danger:#E8836F; } body.letter *, body.letter *::before, body.letter *::after{ box-sizing:border-box; } /* page entrance */ @media (prefers-reduced-motion: no-preference){ body.letter .screen-in{ animation:screen-in .4s cubic-bezier(.2,.75,.3,1); } } @keyframes screen-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } /* shared theme toggle (floats top-right within a screen header) */ body.letter .theme-btn{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--ink-soft); background:none; border:none; cursor:pointer; transition:background .2s; } body.letter .theme-btn:active{ background:var(--sand); } body.letter .theme-btn svg{ width:21px; height:21px; } /* ════════════════ AUTH SCREENS ════════════════ */ body.letter .auth{ flex:1; padding:8px 26px 30px; display:flex; flex-direction:column; width:100%; max-width:480px; margin:0 auto; } body.letter .auth-bar{ display:flex; align-items:center; justify-content:space-between; min-height:44px; margin:0 -6px 0; } body.letter .auth-back{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; color:var(--ink-soft); font-family:var(--sans); font-size:15px; font-weight:600; padding:8px 6px; border-radius:10px; text-decoration:none; } body.letter .auth-back svg{ width:18px; height:18px; } body.letter .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; } body.letter .brand .mark{ width:40px; height:40px; border-radius:12px; background:var(--terra); color:#fff; font-family:var(--serif); font-weight:600; font-size:23px; display:grid; place-items:center; box-shadow:0 6px 16px rgba(192,98,63,.36); } body.letter .brand .name{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); } body.letter .auth-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:14px 0; } body.letter .auth-head{ margin-bottom:22px; } body.letter .auth-head h1{ font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.08; letter-spacing:-.015em; color:var(--ink); } body.letter .auth-head h1 em{ font-style:italic; color:var(--terra); } body.letter .auth-head .sub{ margin-top:8px; font-size:16px; color:var(--ink-soft); max-width:34ch; text-wrap:pretty; } body.letter .method-label{ font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink-soft); display:flex; align-items:center; gap:8px; margin-bottom:11px; } body.letter .method-label svg{ width:16px; height:16px; color:var(--terra); } body.letter .auth-form{ display:flex; flex-direction:column; gap:13px; } body.letter .field{ display:flex; flex-direction:column; gap:7px; } body.letter .field label{ font-size:14px; font-weight:700; color:var(--ink); display:flex; align-items:baseline; gap:8px; } body.letter .field label .hint{ font-size:12.5px; font-weight:500; color:var(--ink-faint); } body.letter .input{ width:100%; height:56px; border-radius:15px; background:var(--input-bg); border:1.5px solid var(--input-line); padding:0 17px; font-family:var(--sans); font-size:16px; font-weight:500; color:var(--ink); outline:none; transition:border-color .18s, box-shadow .18s; } body.letter .input::placeholder{ color:var(--input-ph); font-weight:500; } body.letter .input:focus{ border-color:var(--terra); box-shadow:0 0 0 4px rgba(192,98,63,.13); } body.letter .input.error{ border-color:var(--danger); } body.letter .input-wrap{ position:relative; } body.letter .input-wrap .input{ padding-right:50px; } body.letter .pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:42px; height:42px; display:grid; place-items:center; background:none; border:none; cursor:pointer; color:var(--ink-faint); border-radius:10px; } body.letter .pw-toggle svg{ width:21px; height:21px; } body.letter .pw-toggle:active{ background:var(--sand); } body.letter .field-link{ font-size:13.5px; font-weight:700; color:var(--terra); text-decoration:none; align-self:flex-end; } body.letter .field-error{ font-size:13px; font-weight:600; color:var(--danger); min-height:0; } body.letter .field-error:empty{ display:none; } body.letter #form-error{ font-size:13.5px; font-weight:600; color:var(--danger); display:none; } body.letter #form-error.visible{ display:block; } body.letter .btn{ width:100%; height:56px; border-radius:100px; border:none; cursor:pointer; font-family:var(--sans); font-weight:700; font-size:17px; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .12s ease, filter .18s ease, background .18s; text-decoration:none; } body.letter .btn:active{ transform:scale(.985); } body.letter .btn svg{ width:19px; height:19px; } /* color uses !important to beat app.css's `.btn-* { color: ... !important }` on member pages */ body.letter .btn-primary{ background:var(--you-bg); color:var(--you-ink) !important; box-shadow:var(--you-shadow); } body.letter .btn-primary:active{ filter:brightness(.97); } body.letter .btn-outline{ background:var(--field-bg); color:var(--ink) !important; border:1.5px solid var(--input-line); } body.letter .btn-ghost{ background:none; color:var(--terra) !important; height:50px; font-weight:700; border:none; } body.letter .btn.loading{ pointer-events:none; opacity:.75; } body.letter .btn.loading::after{ content:''; width:18px; height:18px; border-radius:50%; border:2.4px solid currentColor; border-top-color:transparent; animation:btn-spin .7s linear infinite; } @keyframes btn-spin{ to{ transform:rotate(360deg); } } body.letter .helper{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--sage-ink); margin-top:2px; } body.letter .helper svg{ width:16px; height:16px; color:var(--sage); flex:none; } body.letter .divider{ display:flex; align-items:center; gap:13px; margin:20px 0 16px; color:var(--ink-faint); font-size:13px; font-weight:600; } body.letter .divider::before, body.letter .divider::after{ content:''; height:1px; flex:1; background:var(--line); } /* join / signup perks */ body.letter .perks{ display:flex; flex-direction:column; gap:11px; margin:4px 0 20px; } body.letter .perks li{ display:flex; gap:11px; align-items:flex-start; list-style:none; font-size:14.5px; color:var(--ink-soft); line-height:1.4; text-wrap:pretty; } body.letter .perks li .pk{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--sage-wash); color:var(--sage); display:grid; place-items:center; margin-top:1px; } body.letter .perks li .pk svg{ width:14px; height:14px; } body.letter .join-pill{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--terra); background:rgba(192,98,63,.10); padding:6px 12px; border-radius:100px; margin-bottom:14px; } body.letter .auth-foot{ margin-top:22px; text-align:center; font-size:14.5px; color:var(--ink-soft); } body.letter .auth-foot a{ color:var(--terra); font-weight:700; text-decoration:none; } body.letter .trust-line{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; font-size:13px; font-weight:600; color:var(--ink-faint); text-align:center; } body.letter .trust-line svg{ width:15px; height:15px; color:var(--sage); flex:none; } /* ── confirmation screens (magic sent / expired / no membership) ── */ body.letter .confirm{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 30px 40px; } body.letter .confirm .icon{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; background:var(--sage-wash); color:var(--sage); margin-bottom:24px; position:relative; } body.letter .confirm .icon.terra{ background:rgba(192,98,63,.12); color:var(--terra); } body.letter .confirm .icon svg{ width:44px; height:44px; } body.letter .confirm .icon .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:0; } @media (prefers-reduced-motion: no-preference){ body.letter .confirm .icon .ring{ animation:halo 2.6s ease-out infinite; } } @keyframes halo{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.7); opacity:0; } } body.letter .confirm h1{ font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.1; letter-spacing:-.015em; color:var(--ink); margin-bottom:10px; } body.letter .confirm p{ font-size:16px; color:var(--ink-soft); max-width:32ch; text-wrap:pretty; } body.letter .confirm p b{ color:var(--ink); font-weight:700; word-break:break-word; } body.letter .confirm .small{ font-size:13.5px; color:var(--ink-faint); margin-top:12px; } body.letter .confirm .actions{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:300px; margin-top:30px; } /* ════════════════ WAITING — "finding your Listener" ════════════════ */ body.letter .waiting{ flex:1; padding:18px 26px 32px; display:flex; flex-direction:column; width:100%; max-width:480px; margin:0 auto; } body.letter .waiting .top{ display:flex; justify-content:space-between; align-items:center; } body.letter .waiting .core{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 0 22px; } body.letter .pulse{ width:150px; height:150px; position:relative; display:grid; place-items:center; margin-bottom:30px; } body.letter .pulse .ring{ position:absolute; inset:0; margin:auto; border-radius:50%; border:1.5px solid var(--terra); opacity:0; } @media (prefers-reduced-motion: no-preference){ body.letter .pulse .ring{ animation:ripple 3.4s ease-out infinite; } body.letter .pulse .ring:nth-child(2){ animation-delay:1.13s; } body.letter .pulse .ring:nth-child(3){ animation-delay:2.26s; } } @keyframes ripple{ 0%{ transform:scale(.34); opacity:.55; } 100%{ transform:scale(1); opacity:0; } } body.letter .pulse .heart{ width:84px; height:84px; border-radius:50%; background:var(--av-bg); display:grid; place-items:center; color:#fff; box-shadow:0 14px 30px rgba(158,77,48,.32); position:relative; z-index:2; } body.letter .pulse .heart svg{ width:38px; height:38px; } @media (prefers-reduced-motion: no-preference){ body.letter .pulse .heart{ animation:beat 3.4s ease-in-out infinite; } } @keyframes beat{ 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.07); } 28%{ transform:scale(1); } } body.letter .waiting .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-ink); margin-bottom:14px; } body.letter .waiting .eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 4px var(--sage-halo); } body.letter .waiting h1{ font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.12; letter-spacing:-.015em; color:var(--ink); } body.letter .waiting h1 em{ font-style:italic; color:var(--terra); } body.letter .waiting .lede{ margin-top:12px; font-size:16px; color:var(--ink-soft); max-width:32ch; text-wrap:pretty; } body.letter .steps{ width:100%; max-width:330px; margin:28px auto 0; display:flex; flex-direction:column; gap:0; text-align:left; } body.letter .step{ display:flex; gap:14px; align-items:flex-start; padding:2px 0; } body.letter .step .rail{ display:flex; flex-direction:column; align-items:center; flex:none; } body.letter .step .node{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--sand); color:var(--ink-faint); border:1.5px solid var(--line); } body.letter .step .node svg{ width:14px; height:14px; } body.letter .step .line{ width:2px; flex:1; min-height:26px; background:var(--line); margin:2px 0; } body.letter .step:last-child .line{ display:none; } body.letter .step .txt{ padding-bottom:18px; } body.letter .step .txt .t{ font-size:15.5px; font-weight:700; color:var(--ink); } body.letter .step .txt .d{ font-size:13.5px; color:var(--ink-faint); margin-top:1px; } body.letter .step.done .node{ background:var(--sage); border-color:var(--sage); color:#fff; } body.letter .step.done .line{ background:var(--sage); } body.letter .step.active .node{ background:var(--terra); border-color:var(--terra); color:#fff; box-shadow:0 0 0 5px rgba(192,98,63,.16); } body.letter .step.active .txt .t{ color:var(--terra); } body.letter .step.todo .txt .t{ color:var(--ink-faint); font-weight:600; } body.letter .notify{ display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:var(--m-shadow-sm); text-align:left; } body.letter .notify .ni{ width:38px; height:38px; border-radius:11px; background:var(--sage-wash); color:var(--sage); display:grid; place-items:center; flex:none; } body.letter .notify .ni svg{ width:19px; height:19px; } body.letter .notify .nt{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; } body.letter .notify .nd{ font-size:13px; color:var(--ink-soft); margin-top:1px; } /* ════════════════ HOME ════════════════ */ body.letter .home{ flex:1; width:100%; max-width:480px; margin:0 auto; } body.letter .home-top{ display:flex; align-items:center; justify-content:space-between; padding:8px 20px 4px; } body.letter .home-top .greet .hi{ font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink-faint); } body.letter .home-top .greet .nm{ font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink); line-height:1.1; } body.letter .home-top .actions{ display:flex; align-items:center; gap:2px; } body.letter .me-avatar{ width:40px; height:40px; border-radius:50%; background:var(--sand); color:var(--ink-soft); display:grid; place-items:center; font-family:var(--serif), 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight:600; font-size:18px; border:1.5px solid var(--line); cursor:pointer; text-decoration:none; } body.letter .home-scroll{ padding:8px 20px 26px; display:flex; flex-direction:column; gap:16px; } /* hero — your Listener */ body.letter .person{ position:relative; border-radius:26px; overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--m-shadow); } body.letter .person .cover{ height:120px; background: radial-gradient(120% 140% at 80% -20%, rgba(192,98,63,.5), transparent 60%), linear-gradient(160deg,#C0623F,#9E4D30 70%); position:relative; } body.letter .person .cover .label{ position:absolute; top:14px; left:18px; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,245,238,.86); } body.letter .person .body{ padding:0 18px 18px; margin-top:-44px; position:relative; z-index:1; } body.letter .person .pa{ width:88px; height:88px; border-radius:50%; background:var(--av-bg); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:38px; border:4px solid var(--card); box-shadow:0 10px 24px rgba(0,0,0,.18); } body.letter .person .nm{ font-family:var(--serif); font-weight:500; font-size:27px; color:var(--ink); margin-top:10px; line-height:1.1; } body.letter .person .status{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--sage-ink); margin-top:4px; } body.letter .person .status.offline{ color:var(--ink-faint); } body.letter .person .status .d{ width:8px; height:8px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 4px var(--sage-halo); } body.letter .person .status.offline .d{ background:var(--ink-faint); box-shadow:none; } body.letter .person .bio{ font-size:14.5px; color:var(--ink-soft); margin-top:11px; text-wrap:pretty; line-height:1.5; } /* latest message preview */ body.letter .preview{ display:flex; gap:11px; align-items:flex-start; margin-top:15px; padding:13px 14px; background:var(--bg); border:1px solid var(--line); border-radius:16px; cursor:pointer; transition:background .15s; text-decoration:none; } html[data-theme="dark"] body.letter .preview{ background:var(--sand); } body.letter .preview:active{ background:var(--sand); } body.letter .preview .q{ width:30px; height:30px; border-radius:50%; background:var(--av-bg); color:#fff; flex:none; display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:14px; } body.letter .preview .pc{ flex:1; min-width:0; } body.letter .preview .pc .msg{ font-size:14.5px; color:var(--ink); line-height:1.4; text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body.letter .preview .pc .when{ font-size:12px; font-weight:600; color:var(--ink-faint); margin-top:3px; } body.letter .preview .chev{ color:var(--ink-faint); flex:none; align-self:center; } body.letter .preview .chev svg{ width:18px; height:18px; } body.letter .person .btn{ margin-top:16px; } /* secondary conversations list (when a member has more than one Listener) */ body.letter .more-people{ display:flex; flex-direction:column; gap:0; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--m-shadow-sm); } body.letter .more-head{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:14px 16px 6px; } body.letter .more-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; text-decoration:none; color:var(--ink); transition:background .15s; } body.letter .more-row + .more-row{ border-top:1px solid var(--line); } body.letter .more-row:active{ background:var(--sand); } body.letter .more-row .ra{ width:42px; height:42px; border-radius:50%; background:var(--av-bg); color:#fff; flex:none; display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:18px; } body.letter .more-row .rb{ flex:1; min-width:0; display:flex; flex-direction:column; } body.letter .more-row .rb .rn{ font-size:15.5px; font-weight:700; } body.letter .more-row .rb .rs{ font-size:13px; color:var(--ink-faint); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.letter .more-row .chev{ color:var(--ink-faint); flex:none; } body.letter .more-row .chev svg{ width:18px; height:18px; } /* simple rows */ body.letter .rows{ background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--m-shadow-sm); } body.letter .row-link{ display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; text-decoration:none; color:var(--ink); transition:background .15s; width:100%; border:none; background:none; font-family:var(--sans); text-align:left; } body.letter .row-link + .row-link{ border-top:1px solid var(--line); } body.letter .row-link:active{ background:var(--sand); } body.letter .row-link .ri{ width:34px; height:34px; border-radius:10px; background:var(--sand); color:var(--ink-soft); display:grid; place-items:center; flex:none; } body.letter .row-link .ri svg{ width:18px; height:18px; } body.letter .row-link .rl{ flex:1; display:flex; flex-direction:column; } body.letter .row-link .rl .rt{ font-size:15.5px; font-weight:700; } body.letter .row-link .rl .rd{ font-size:13px; color:var(--ink-faint); margin-top:1px; } body.letter .row-link .chev{ color:var(--ink-faint); } body.letter .row-link .chev svg{ width:18px; height:18px; } /* empty state (member not yet matched — fallback when waiting screen is skipped) */ body.letter .home-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 30px; } body.letter .home-trust{ display:flex; align-items:center; justify-content:center; gap:8px; padding:4px 0 8px; font-size:12.5px; font-weight:600; color:var(--ink-faint); text-align:center; } body.letter .home-trust svg{ width:14px; height:14px; color:var(--sage); flex:none; } /* ── creator profile-emoji picker ── */ body.letter .emoji-pop{ position:absolute; right:20px; top:64px; z-index:30; width:min(300px, calc(100% - 40px)); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--m-shadow); padding:14px; } body.letter .emoji-pop[hidden]{ display:none; } body.letter .emoji-pop-label{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; } body.letter .emoji-grid{ display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; margin-bottom:8px; } body.letter .emoji-option{ aspect-ratio:1; border:none; background:none; cursor:pointer; border-radius:10px; font-size:20px; display:grid; place-items:center; transition:background .12s; } body.letter .emoji-option:hover, body.letter .emoji-option:active{ background:var(--sand); } /* ── keyboard shortcuts page ── */ body.letter .sc-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--m-shadow-sm); margin-bottom:14px; } body.letter .sc-head{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:14px 16px 8px; } body.letter .sc-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; } body.letter .sc-row + .sc-row{ border-top:1px solid var(--line); } body.letter .sc-label{ flex:1; font-size:15px; font-weight:600; color:var(--ink); } body.letter .sc-key{ min-width:42px; height:34px; padding:0 11px; border-radius:9px; cursor:pointer; background:var(--sand); border:1.5px solid var(--input-line); color:var(--ink); font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:14px; font-weight:700; display:inline-grid; place-items:center; transition:border-color .15s, background .15s; } body.letter .sc-key:hover{ border-color:var(--terra); } body.letter .sc-key.custom{ border-color:var(--terra); color:var(--terra); background:rgba(192,98,63,.08); } body.letter .sc-key.capturing{ border-color:var(--terra); color:var(--terra); background:var(--card); font-family:var(--sans); font-weight:600; min-width:120px; } body.letter .sc-note{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-faint); margin:4px 2px 16px; } /* ── toast (override app.css purple toast on member pages) ── */ body.letter #toast-container{ position:fixed; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 0 28px; pointer-events:none; z-index:70; } body.letter #toast-container .toast{ background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:600; font-family:var(--sans); padding:10px 16px; border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:90%; text-align:center; animation:toast-in .25s ease; } body.letter #toast-container .toast.toast-out{ animation:toast-out .25s ease forwards; } @keyframes toast-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @keyframes toast-out{ to{ opacity:0; transform:translateY(12px); } } @media (prefers-reduced-motion: reduce){ body.letter .screen-in{ animation:none; } }