:root {
  color-scheme: dark;
  --bg: #080809;
  --surface: #141416;
  --surface-raised: #1b1b1e;
  --line: #303034;
  --text: #f6f5f4;
  --muted: #a5a3a5;
  --red: #e50914;
  --red-bright: #ff2430;
  --pink: #ff777d;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background: radial-gradient(ellipse 48rem 25rem at 50% -17rem, rgba(229,9,20,.25), transparent 70%),
    radial-gradient(ellipse 30rem 24rem at 100% 62%, rgba(96,8,13,.11), transparent 75%), var(--bg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
body:before { position: fixed; inset: 0; pointer-events: none; content: ""; opacity: .1; background-image: linear-gradient(transparent 97%, rgba(255,255,255,.06) 100%); background-size: 100% 5px; mask-image: linear-gradient(to bottom,#000,transparent 38%); }
h1,h2,strong { font-family: system-ui,-apple-system,"Segoe UI",sans-serif; }
h1 { font-size: clamp(1.85rem,4vw,2.65rem); line-height: 1.12; letter-spacing: -.045em; margin: .2rem 0 .65rem; }
h2 { font-size: 1.35rem; margin: .2rem 0 .5rem; }
.site-header { width: min(1120px,calc(100% - 40px)); height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
.wordmark { display: inline-flex; align-items: center; }
.wordmark img { display: block; width: clamp(160px,24vw,220px); height: auto; filter: drop-shadow(0 3px 15px rgba(229,9,20,.2)); }
.header-caption { font-size: .68rem; letter-spacing: .18em; font-weight: 700; color: #777479; }
.shell { width: min(920px,calc(100% - 36px)); margin: 0 auto; padding: 58px 0 34px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.eyebrow { color: var(--pink); letter-spacing: .17em; font-size: .7rem; font-weight: 800; margin: 0 0 10px; }
.eyebrow span { color: #57555a; padding: 0 .4em; }
.muted { color: var(--muted); margin: .25rem 0; }
.button { border: 1px solid transparent; border-radius: 7px; padding: 12px 18px; font-family: inherit; font-size: .94rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .16s ease,background .16s ease,border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .65; cursor: wait; transform: none; }
.primary { background: var(--red); color: #fff; box-shadow: 0 8px 25px rgba(229,9,20,.16); }
.primary:hover { background: var(--red-bright); }
.secondary { background: rgba(255,255,255,.045); border-color: #3a393d; color: var(--text); }
.secondary:hover { background: rgba(255,255,255,.09); border-color: #5a585e; }
.mail-list { display: grid; gap: 10px; }
.mail-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 19px 20px; background: linear-gradient(112deg,rgba(28,28,31,.96),rgba(17,17,19,.98)); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .16s ease,transform .16s ease,background .16s ease; }
.mail-card:before { content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 2px; background: var(--red); opacity: 0; border-radius: 2px; transition: opacity .16s ease; }
.mail-card:hover { border-color: #555359; transform: translateY(-1px); background: linear-gradient(112deg,#202023,#171719); }
.mail-card:hover:before { opacity: 1; }
.sender-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; background: linear-gradient(145deg,#f21824,#b80710); border-radius: 7px; font-weight: 900; font-size: 1.2rem; color: #fff; box-shadow: 0 5px 16px rgba(229,9,20,.2); }
.mail-copy { min-width: 0; flex: 1; }
.mail-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.mail-heading strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-heading time { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.from { font-size: .87rem; color: #bdbbc0; margin: 4px 0 7px; overflow: hidden; text-overflow: ellipsis; }
.domain-badge { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: #ff9ca1; background: rgba(229,9,20,.13); border: 1px solid rgba(229,9,20,.22); padding: 3px 8px; border-radius: 3px; }
.chevron { font-size: 1.65rem; color: #77757a; }
.empty { padding: 62px 20px; text-align: center; border: 1px solid #303034; border-radius: 10px; background: linear-gradient(145deg,#171719,#101012); }
.empty-mark { margin: 0 auto 20px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--red); border-radius: 8px; font-size: 1.35rem; font-weight: 900; }
.empty p { color: var(--muted); }
.pagination { display: flex; justify-content: space-between; margin: 20px 0; }
.pagination:empty { display: none; }
.footer { display: flex; gap: 20px; justify-content: space-between; align-items: center; margin-top: 34px; padding-top: 20px; border-top: 1px solid #29292d; color: var(--muted); font-size: .88rem; }
.footer a,.back-link { color: #e9e8e8; text-decoration: none; }
.footer a:hover,.back-link:hover,.link-button:hover { color: #ff858a; }
.footer form { margin: 0; }
.link-button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; }
.login-wrap { min-height: calc(100vh - 82px); display: grid; place-items: center; padding: 32px 24px; }
.login-card { position: relative; width: min(440px,100%); padding: 38px; background: linear-gradient(150deg,rgba(28,28,31,.98),rgba(16,16,18,.98)); border: 1px solid #343337; border-radius: 11px; box-shadow: 0 24px 100px #0009; overflow: hidden; }
.login-card:before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg,transparent,var(--red),transparent); }
.login-card h1 { font-size: 2rem; }
.login-form { display: grid; gap: 12px; margin-top: 26px; }
.login-form label { font-weight: 650; font-size: .9rem; display: grid; gap: 8px; }
.login-form input { width: 100%; padding: 13px 14px; border-radius: 6px; background: #0d0d0f; border: 1px solid #414045; color: white; font: inherit; outline: none; }
.login-form input:focus { border-color: #f24d55; box-shadow: 0 0 0 3px rgba(229,9,20,.15); }
.full { width: 100%; margin-top: 6px; }
.small { font-size: .8rem; margin-top: 20px; }
.notice { border-radius: 7px; padding: 12px 14px; margin: 18px 0; font-size: .9rem; }
.error { color: #ffdfe0; background: #411a1d; border: 1px solid #72282e; }
.success { color: #d5f6e0; background: #123523; border: 1px solid #285c3d; }
.detail-shell { padding-top: 42px; }
.back-link { display: inline-block; margin-bottom: 22px; }
.message-card { background: linear-gradient(145deg,#18181a,#111113); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.message-top { display: flex; align-items: center; gap: 16px; padding: 26px 30px; border-bottom: 1px solid var(--line); }
.message-top h1 { font-size: 1.65rem; margin: 0; }
.message-top .eyebrow { margin: 0 0 4px; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 30px; margin: 0; border-bottom: 1px solid var(--line); }
.meta div { min-width: 0; }
.meta dt { font-size: .75rem; color: var(--muted); margin-bottom: 3px; }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.message-body { padding: 32px; white-space: normal; overflow-wrap: anywhere; line-height: 1.75; }
.settings-card .back-link { margin-bottom: 26px; }
.settings-card h1 { margin-bottom: 10px; }
@media(max-width:600px) {
  .site-header { height: 68px; width: calc(100% - 32px); }
  .wordmark img { width: 165px; }
  .header-caption { font-size: .58rem; letter-spacing: .1em; }
  .shell { padding-top: 34px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar form,.topbar .button { width: 100%; }
  .mail-card { padding: 15px 13px; gap: 12px; }
  .sender-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .mail-heading { display: block; }
  .mail-heading time { display: block; margin-top: 4px; }
  .mail-heading strong { white-space: normal; display: block; }
  .chevron { font-size: 1.4rem; }
  .login-card { padding: 29px 23px; }
  .login-wrap { min-height: calc(100vh - 68px); }
  .meta { grid-template-columns: 1fr; padding: 16px 22px; gap: 12px; }
  .message-top { padding: 22px; }
  .message-top h1 { font-size: 1.4rem; }
  .message-body { padding: 23px; }
  .footer { font-size: .83rem; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior: auto!important; transition: none!important; } }

.message-body a { color: #ff858a; text-decoration: underline; text-underline-offset: 2px; }
.message-body img { display: inline-block; max-width: 100%; height: auto; border-radius: 4px; }
.message-body table { max-width: 100%; border-collapse: collapse; }
.message-body td, .message-body th { padding: 5px; border: 1px solid #454449; }
.message-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Mobile-first comfort and cinematic motion */
html { scroll-behavior: smooth; }
body:after { content:""; position:fixed; z-index:-1; inset:-25%; pointer-events:none; background:radial-gradient(ellipse at 20% 45%,rgba(229,9,20,.08),transparent 38%),radial-gradient(ellipse at 85% 75%,rgba(117,8,24,.1),transparent 34%); animation:ambient-drift 18s ease-in-out infinite alternate; }
.site-header { animation:rise-in .65s cubic-bezier(.2,.75,.25,1) both; }
.wordmark img { animation:logo-arrive .8s cubic-bezier(.16,1,.3,1) both; }
.login-card { animation:card-arrive .75s cubic-bezier(.16,1,.3,1) both; }
.shell > .topbar,.detail-shell > .back-link,.message-card,.empty { animation:rise-in .65s cubic-bezier(.2,.75,.25,1) both; }
.mail-card { animation:card-arrive .55s cubic-bezier(.16,1,.3,1) both; }
.mail-card:nth-child(2) { animation-delay:55ms; }
.mail-card:nth-child(3) { animation-delay:100ms; }
.mail-card:nth-child(4) { animation-delay:145ms; }
.mail-card:nth-child(5) { animation-delay:190ms; }
@keyframes rise-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes card-arrive { from { opacity:0; transform:translateY(22px) scale(.985); filter:blur(5px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes logo-arrive { from { opacity:0; transform:translateX(-14px); filter:drop-shadow(0 0 0 rgba(229,9,20,0)); } to { opacity:1; transform:translateX(0); filter:drop-shadow(0 3px 18px rgba(229,9,20,.28)); } }
@keyframes ambient-drift { from { transform:translate3d(-1%,0,0) scale(.98); } to { transform:translate3d(1%,1%,0) scale(1.03); } }
.remember-option { min-height:52px; display:flex!important; align-items:center; gap:12px!important; padding:10px 12px; border:1px solid #343337; border-radius:9px; background:rgba(255,255,255,.025); cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.remember-option:hover { border-color:#654044; background:rgba(229,9,20,.055); }
.remember-option input { appearance:none; -webkit-appearance:none; flex:0 0 22px; width:22px; height:22px; margin:0; padding:0; border:1px solid #6b676b; border-radius:6px; background:#101012; cursor:pointer; }
.remember-option input:checked { border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 4px #171719; }
.remember-option input:focus-visible { outline:3px solid rgba(255,88,96,.55); outline-offset:2px; }
.remember-option span { display:grid; gap:1px; }
.remember-option strong { font-size:.9rem; }
.remember-option small { color:var(--muted); font-size:.78rem; font-weight:400; }
.login-form .remember-option { margin-top:3px; }
.button { min-height:48px; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.button.primary:after { content:""; position:absolute; inset:0 auto 0 -70%; width:45%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transition:left .55s ease; }
@media (hover:hover) and (pointer:fine) { .button.primary:hover:after { left:130%; } .mail-card:hover { box-shadow:0 12px 34px rgba(0,0,0,.28); } }
.button:active { transform:scale(.98); }
:focus-visible { outline:2px solid #ff6c73; outline-offset:3px; }
@media(max-width:600px) {
  .site-header { width:calc(100% - max(32px, env(safe-area-inset-left) + env(safe-area-inset-right))); height:72px; }
  .wordmark img { width:clamp(148px,46vw,178px); }
  .header-caption { font-size:.54rem; letter-spacing:.08em; text-align:right; }
  .shell { width:calc(100% - max(32px, env(safe-area-inset-left) + env(safe-area-inset-right))); padding-top:30px; padding-bottom:max(28px,env(safe-area-inset-bottom)); }
  .topbar { gap:16px; margin-bottom:22px; }
  .topbar h1 { font-size:2.2rem; }
  .mail-card { min-height:82px; padding:14px 12px; border-radius:12px; }
  .mail-heading { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
  .mail-heading time { display:block; margin:0; }
  .domain-badge { display:inline-block; margin-top:2px; }
  .login-wrap { min-height:calc(100vh - 72px); min-height:calc(100svh - 72px); padding:24px max(18px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
  .login-card { width:min(440px,100%); padding:clamp(24px,7vw,32px) clamp(20px,6vw,27px); border-radius:15px; }
  .login-card h1 { font-size:2rem; }
  .login-form { gap:14px; margin-top:22px; }
  .login-form input:not([type=checkbox]) { min-height:50px; padding:13px 14px; font-size:16px; }
  .remember-option { min-height:56px; }
  .button { min-height:52px; border-radius:10px; font-size:1rem; }
  .detail-shell { padding-top:22px; }
  .back-link { min-height:44px; display:inline-flex; align-items:center; margin-bottom:12px; }
  .message-card { border-radius:13px; }
  .message-top { align-items:flex-start; padding:20px 17px; gap:12px; }
  .message-top .sender-icon { flex-basis:38px; width:38px; height:38px; }
  .message-top h1 { font-size:1.22rem; overflow-wrap:anywhere; }
  .meta { padding:14px 17px; gap:10px; }
  .message-body { padding:20px 17px; font-size:15px; }
  .message-body img { max-height:none; }
  .footer { gap:12px; flex-wrap:wrap; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  .footer a,.link-button { min-height:44px; display:inline-flex; align-items:center; }
  .notice { font-size:.92rem; }
}
@media(max-width:360px) {
  .header-caption { max-width:112px; line-height:1.3; }
  .topbar h1 { font-size:1.9rem; }
  .mail-card { gap:9px; }
  .mail-heading strong { font-size:.94rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Six-hour inbox: reception time is the primary visual anchor. */
.mail-card { gap:24px; padding:24px; }
.mail-clock { flex:0 0 160px; display:grid; gap:7px; border-right:1px solid #393034; padding-right:24px; }
.mail-clock time { font-size:3.25rem; font-weight:800; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; color:#fff; }
.mail-clock span { font-size:.75rem; color:var(--muted); letter-spacing:.06em; }
.mail-heading strong { white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
.detail-time { font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; margin-right:8px; }
.message-body { color-scheme:light; color:#252529; background:#fff; padding:clamp(18px,5vw,48px); font-size:16px; line-height:1.7; }
.message-body > * { max-width:100%; }
.message-body table { width:100%; max-width:100%; border-collapse:collapse; table-layout:fixed; margin:0; background:transparent; color:inherit; }
.message-body td,.message-body th { padding:5px 0; border:0; overflow-wrap:anywhere; vertical-align:top; }
.message-body p { margin:0 0 1em; }
.message-body h1,.message-body h2,.message-body h3 { color:#171719; line-height:1.25; margin:1em 0 .5em; }
.message-body h1 { font-size:clamp(24px,5vw,32px); }
.message-body a { color:#b20710; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.message-body img { max-width:100%; height:auto; object-fit:contain; }
.message-body pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.message-body blockquote { border-left:3px solid #ddd; padding-left:16px; margin-left:0; color:#555; }
@media(max-width:600px) {
 .mail-card { display:grid; grid-template-columns:1fr auto; gap:16px 10px; padding:20px; }
 .mail-clock { grid-column:1; border:0; padding:0; gap:6px; }
 .mail-clock time { font-size:3.5rem; }
 .mail-copy { grid-row:2; grid-column:1 / -1; }
 .chevron { grid-row:1; grid-column:2; }
 .from { font-size:.75rem; }
 .meta { grid-template-columns:1fr; }
 .message-body { padding:22px 16px; }
}
/* Quiet refresh: keep content visible and rebuild into focus. */
.refresh-overlay { position:fixed; inset:0; z-index:100; overflow:hidden; pointer-events:none; opacity:0; visibility:hidden; background:rgba(8,8,9,.06); }
.refresh-sweep { position:absolute; inset:-30% -60%; background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.025) 46%,rgba(255,255,255,.12) 50%,rgba(229,9,20,.07) 53%,transparent 60%); transform:translateX(-55%); }
body.is-refreshing .shell { filter:blur(5px); opacity:.64; transition:filter .18s ease,opacity .18s ease; pointer-events:none; }
body.is-refreshing .refresh-overlay { visibility:visible; opacity:1; }
body.is-refreshing .refresh-sweep { animation:refresh-sweep 1.6s ease-in-out infinite; }
.refresh-overlay.is-active { visibility:visible; animation:refresh-veil .85s ease both; }
.refresh-overlay.is-active .refresh-sweep { animation:refresh-sweep .85s cubic-bezier(.2,.65,.25,1) both; }
.refresh-overlay.is-active ~ .shell > .topbar,
.refresh-overlay.is-active ~ .shell .mail-card,
.refresh-overlay.is-active ~ .shell > .empty,
.refresh-overlay.is-active ~ .shell > .footer { animation:refresh-resolve .6s cubic-bezier(.16,1,.3,1) both; }
.refresh-overlay.is-active ~ .shell .mail-card:nth-child(1) { animation-delay:.06s; }
.refresh-overlay.is-active ~ .shell .mail-card:nth-child(2) { animation-delay:.10s; }
.refresh-overlay.is-active ~ .shell .mail-card:nth-child(3) { animation-delay:.14s; }
.refresh-overlay.is-active ~ .shell .mail-card:nth-child(n+4) { animation-delay:.18s; }
.refresh-overlay.is-active ~ .shell > .footer { animation-delay:.2s; }
.refresh-button.is-loading { opacity:.7; cursor:wait; }
@keyframes refresh-sweep { from { transform:translateX(-55%); } to { transform:translateX(55%); } }
@keyframes refresh-veil { 0%,50% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
@keyframes refresh-resolve { from { filter:blur(5px); opacity:.35; transform:translateY(8px); } to { filter:blur(0); opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {
 body.is-refreshing .shell { filter:none; opacity:.75; transition:none; }
 body.is-refreshing .refresh-overlay,.refresh-overlay.is-active { display:none; }
 .refresh-overlay.is-active ~ .shell > .topbar,.refresh-overlay.is-active ~ .shell .mail-card,.refresh-overlay.is-active ~ .shell > .empty,.refresh-overlay.is-active ~ .shell > .footer { animation:none; }
}
/* Calm inbox, clear primary action. */
.sync-status { color:var(--muted); font-size:.78rem; margin:-12px 0 20px; }
.quick-action { border:1px solid #633036; border-radius:16px; background:linear-gradient(125deg,#291417,#161416 80%); padding:28px; margin:0 0 24px; }
.quick-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.quick-heading .eyebrow { margin-bottom:8px; }
.quick-heading h2 { font-size:1.45rem; letter-spacing:-.03em; }
.quick-heading time { color:#d6b7ba; font-variant-numeric:tabular-nums; font-size:1rem; }
.action-help,.action-status { color:#bfb4b7; font-size:.85rem; }
.action-control { gap:12px; }
.action-status { margin:12px 0 16px; }
.original-link { color:#e5d6d8; text-decoration:none; font-size:.85rem; display:inline-flex; min-height:44px; align-items:center; }
.code-row { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:20px; }
.extracted-code { font-family:inherit; font-size:clamp(2rem,8vw,3rem); font-weight:800; letter-spacing:.12em; user-select:all; }
.mail-card.is-latest { border-color:#6f3439; }
.mail-card.is-latest:before { opacity:1; width:3px; }
.mail-card.is-read .mail-heading strong { font-weight:500; color:#bcb9bd; }
.mail-badges { display:flex; align-items:center; gap:9px; }
.read-badge { color:#d9c5c8; font-size:.7rem; }
.is-read .read-badge { color:#99969b; }
.detail-shell { max-width:800px; }
.message-body > * { max-width:640px; margin-left:auto; margin-right:auto; }
.message-body { padding:32px clamp(18px,5vw,60px); }
.silent-update .mail-card,.silent-update .empty { animation:none!important; }
@media(max-width:600px) {
 .quick-action { padding:22px 18px; border-radius:13px; }
 .quick-heading h2 { font-size:1.25rem; }
 .quick-heading time { font-size:.85rem; }
 .quick-action .action-control { width:100%; }
 .code-row { gap:16px; }
 .message-body { padding:24px 16px; }
}
.refresh-complete .shell > .topbar,.refresh-complete .mail-card,.refresh-complete .empty { animation:none; }
.refresh-overlay.is-active ~ .shell #inbox-region > .quick-action,
.refresh-overlay.is-active ~ .shell #inbox-region > .empty { animation:refresh-resolve .6s cubic-bezier(.16,1,.3,1) both; }
@media(prefers-reduced-motion:reduce) {
 .refresh-overlay.is-active ~ .shell #inbox-region > .quick-action,
 .refresh-overlay.is-active ~ .shell #inbox-region > .empty { animation:none; }
}

.sharing-title span { color:var(--red-bright); }
/* iPhone home-screen invitation; stays in normal document flow. */
.install-hint[hidden] { display:none; }
.install-hint { width:min(920px,calc(100% - 36px)); margin:20px auto 0; display:grid; grid-template-columns:48px minmax(0,1fr) 44px; align-items:start; gap:14px; padding:18px; background:#1a181b; border:1px solid #413038; border-radius:14px; }
.install-icon { border-radius:11px; }
.install-copy { min-width:0; }
.install-copy strong { font-size:.95rem; }
.install-copy p { margin:3px 0 4px; font-size:.82rem; color:var(--muted); }
.install-copy summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:#ff858a; font-size:.85rem; font-weight:650; }
.install-copy ol { padding-left:19px; margin:0 0 6px; font-size:.85rem; color:#d4cdd1; }
.install-copy li { margin:0 0 10px; }
.install-close { width:44px; height:44px; padding:0; background:transparent; border:0; border-radius:8px; font-size:1.6rem; color:var(--muted); cursor:pointer; }
.install-help { min-height:44px; }
.footer { flex-wrap:wrap; }
.topbar > div { min-width:0; }
.sharing-title { text-wrap:balance; }
@media(display-mode:standalone) {
 body { padding-top:env(safe-area-inset-top); }
 .install-hint,.install-help { display:none!important; }
}
@media(max-width:600px) {
 .install-hint { grid-template-columns:40px minmax(0,1fr) 36px; gap:10px; padding:14px; }
 .install-icon { width:40px; height:40px; }
 .install-close { width:36px; min-height:44px; }
 .sharing-title { font-size:clamp(1.9rem,8.5vw,2.2rem); }
}
.push-controls { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.push-controls [hidden] { display:none; }
.push-setup { border:1px solid var(--line); border-radius:12px; padding:20px; color:var(--muted); }
.push-setup summary { min-height:44px; cursor:pointer; color:var(--text); }
.cron-path { display:block; overflow-wrap:anywhere; padding:12px; background:#151518; font-size:.8rem; }
@media(max-width:600px) { .push-controls .button { width:100%; } }
/* Swipe actions sit behind the message; the mailbox itself is never changed. */
.mail-swipe { position:relative; border-radius:12px; overflow:hidden; background:#bc1221; isolation:isolate; }
.mail-swipe[hidden],.quick-action[hidden],.hide-toast[hidden],.hidden-mail-tools[hidden] { display:none; }
.mail-swipe .mail-card { z-index:2; margin:0; padding-right:64px; touch-action:pan-y pinch-zoom; transition:transform .22s ease; animation:none; }
.mail-swipe .mail-card:hover { transform:none; }
.mail-swipe.is-open .mail-card { transform:translateX(-112px); }
.mail-swipe.is-dragging .mail-card { transition:none; user-select:none; }
.mail-hide { position:absolute; inset:0 0 0 auto; width:112px; border:0; color:white; background:#bc1221; font:700 .83rem system-ui; cursor:pointer; }
.mail-menu { position:absolute; z-index:3; right:10px; top:18px; width:44px; height:44px; border:0; border-radius:8px; background:#272429; color:#d9d5da; font-size:1.5rem; line-height:1; cursor:pointer; }
.mail-swipe.is-open .mail-menu,.mail-swipe.is-dragging .mail-menu { visibility:hidden; }
.hidden-mail-tools { display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:16px 0; color:var(--muted); font-size:.8rem; }
.hidden-mail-tools button { min-height:44px; color:#ff858a; }
.hide-toast { position:fixed; z-index:200; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); display:flex; align-items:center; gap:14px; padding:10px 14px 10px 18px; border:1px solid #5b4a51; border-radius:12px; background:#252126; color:#fff; box-shadow:0 10px 40px #0008; font-size:.85rem; }
.hide-toast button { border:0; background:transparent; color:#ff9298; font:700 .85rem system-ui; min-height:44px; cursor:pointer; white-space:nowrap; }
@media(max-width:600px) { .mail-swipe .mail-card { padding-right:20px; } .mail-swipe .chevron { visibility:hidden; } .hide-toast { width:calc(100% - 32px); justify-content:space-between; } }
@media(prefers-reduced-motion:reduce) { .mail-swipe .mail-card { transition:none; } }