:root{--bg:#f7f7fb;--panel:#fff;--ink:#15151b;--muted:#777887;--line:#e9e9f0;--accent:#7c62ee;--accent2:#b59cff;--danger:#cf4c55;--shadow:0 12px 34px rgba(28,25,46,.07)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100vh}.app-shell{max-width:720px;margin:auto;min-height:100vh;background:linear-gradient(180deg,#fbfbfe 0,#f7f7fb 55%,#f2f2f8 100%);position:relative;padding-bottom:100px}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;background:rgba(250,250,253,.88);backdrop-filter:blur(18px);z-index:20;border-bottom:1px solid rgba(0,0,0,.025)}.brand{font-weight:800;font-size:22px;letter-spacing:-.8px;color:var(--ink);text-decoration:none}.brand-lg{font-size:34px;text-align:center;margin-bottom:4px}.menu,.edit{font-size:22px;color:var(--ink);text-decoration:none;width:30px;text-align:center}.edit{font-size:20px}main{padding:20px 18px 30px}.hero{padding:10px 4px 20px}.hero h1{font-size:35px;line-height:1.05;letter-spacing:-1.4px;margin:5px 0 8px}.hero p,.lead{color:var(--muted);margin:0;line-height:1.5}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.7px;color:var(--accent)}.title-row{display:flex;align-items:center;gap:10px}.count{background:#ebe5ff;color:#6047ca;border-radius:99px;font-weight:800;padding:4px 9px}.mail-list{display:flex;flex-direction:column;gap:11px}.mail-card{display:flex;gap:12px;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)}.avatar,.provider{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:#eee9ff;color:#654bd1;font-weight:800;flex:0 0 auto}.mail-main{min-width:0;flex:1}.mail-top{display:flex;justify-content:space-between;gap:10px}.mail-top time{font-size:12px;color:var(--muted)}.subject{font-weight:700;margin-top:5px}.snippet{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.4}.overview{margin-top:28px}.overview h2{font-size:16px;margin:0 0 10px}.stat{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:15px;padding:15px 16px;margin:8px 0;text-decoration:none;color:var(--ink)}.quick{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:18px;border-radius:20px;text-decoration:none;color:#20173b;background:linear-gradient(135deg,#eee8ff,#e3d6ff);border:1px solid #dacdff}.quick span{display:flex;flex-direction:column}.quick small{margin-top:3px;color:#665d80}.empty{padding:28px;text-align:center;background:rgba(255,255,255,.72);border:1px dashed #d9d8e5;border-radius:20px;display:flex;flex-direction:column;gap:7px;color:var(--muted)}.empty strong{color:var(--ink)}.empty-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e8f8ec;color:#2a8a47;margin:0 auto 6px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:720px;width:100%;height:80px;padding:10px max(18px,env(safe-area-inset-left));background:rgba(255,255,255,.91);backdrop-filter:blur(24px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 72px 1fr 1fr;align-items:center;z-index:30}.bottom-nav a{text-decoration:none;color:#8a8996;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:20px}.bottom-nav small{font-size:10px}.bottom-nav .active{color:var(--accent)}.bottom-nav .compose{width:56px;height:56px;border-radius:50%;justify-self:center;background:linear-gradient(145deg,var(--accent),#927cff);color:white;justify-content:center;box-shadow:0 8px 22px rgba(124,98,238,.34)}.bottom-nav .compose span{font-size:30px;line-height:1}.setup-card,.login-card{max-width:520px;margin:7vh auto;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:26px;padding:28px}.login-card{max-width:420px;margin-top:15vh}.muted{color:var(--muted);text-align:center}.setup-card h3{margin:26px 0 10px}label{font-size:12px;font-weight:700;color:#60606c;display:block;margin:12px 0}input,select{display:block;width:100%;margin-top:6px;border:1px solid #dedee8;border-radius:13px;padding:13px 14px;font:inherit;background:#fbfbfd;color:var(--ink);outline:none}input:focus,select:focus{border-color:#a999ef;box-shadow:0 0 0 3px #eeeaff}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary,.button{border:0;background:var(--ink);color:#fff;border-radius:14px;padding:14px 17px;font-weight:800;text-decoration:none;display:inline-block;cursor:pointer}.wide{width:100%;margin-top:15px}.error{padding:12px;background:#fff0f1;color:#a7353e;border-radius:12px}.account-list{display:flex;flex-direction:column;gap:9px}.account-row,.connect-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;text-decoration:none;color:var(--ink);width:100%;text-align:left;font:inherit}.account-row small,.connect-card small{display:block;color:var(--muted);margin-top:3px}.connect-grid{display:grid;gap:10px;margin-top:20px}.connect-card>b:last-child{margin-left:auto;font-size:22px}.provider.big{width:46px;height:46px}.sheet{position:fixed;inset:0;background:rgba(15,15,22,.32);backdrop-filter:blur(4px);z-index:50;display:none;align-items:flex-end}.sheet.open{display:flex}.sheet-panel{background:#fff;width:100%;max-width:720px;margin:auto;border-radius:28px 28px 0 0;padding:26px 20px 34px;max-height:92vh;overflow:auto;position:relative}.sheet-x{position:absolute;right:20px;top:18px;border:0;background:#f0f0f4;border-radius:50%;width:34px;height:34px;font-size:22px}.rule-review{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px 20px;text-align:center;box-shadow:var(--shadow)}.rule-orbit{font-size:32px;color:var(--accent);margin-bottom:10px}.rule-review p{color:var(--muted);line-height:1.5}.fake-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}.fake-actions button{border:1px solid var(--line);background:#fafafe;border-radius:13px;padding:12px;font-weight:700}.diag{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.diag>div{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.diag>div:last-child{border-bottom:0}.ok{color:#278547}.bad{color:#c1454f}.danger{color:var(--danger)}code{font-size:.9em;background:#eeeeF5;padding:2px 5px;border-radius:6px;word-break:break-all}
@media(min-width:800px){.app-shell{margin-top:24px;margin-bottom:24px;min-height:calc(100vh - 48px);border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:0 30px 70px rgba(30,28,55,.09)}.bottom-nav{bottom:24px;border-radius:0 0 30px 30px}}
@media(max-width:460px){.grid2{grid-template-columns:1fr}.hero h1{font-size:32px}.topbar{height:66px}main{padding-left:14px;padding-right:14px}}

.row-arrow{margin-left:auto;font-size:24px;color:var(--muted)}
.account-detail-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.detail-row{display:flex;justify-content:space-between;gap:20px;padding:15px 16px;border-bottom:1px solid var(--line)}
.detail-row:last-child{border-bottom:0}.detail-row span{color:var(--muted)}.detail-row b{text-align:right;font-size:13px}
.pending{color:#a47218}.action-stack{margin-top:16px}.secondary{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;padding:14px 17px;font-weight:800;cursor:pointer}
.flash{margin:4px 4px 14px;padding:13px 15px;border-radius:14px;font-weight:700;font-size:14px}.flash.success{background:#eaf7ee;color:#287345}.flash.error{background:#fff0f1;color:#a7353e}

.mail-card{color:var(--ink);text-decoration:none}
.message-head{padding:4px 4px 18px}.backlink{display:inline-block;margin-bottom:18px;color:var(--muted);text-decoration:none;font-weight:700}
.message-head h1{font-size:30px;line-height:1.15;letter-spacing:-1px;margin:7px 0 18px}
.senderline{display:flex;align-items:center;gap:12px}.senderline>div:nth-child(2){display:flex;flex-direction:column;min-width:0}.senderline small{color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis}.senderline time{margin-left:auto;color:var(--muted);font-size:12px}
.insight-card{margin:8px 0 16px;padding:18px;background:linear-gradient(135deg,#f3efff,#f8f6ff);border:1px solid #e6defe;border-radius:18px}.insight-card p{margin:7px 0 0;color:#665e7b;line-height:1.5}
.message-body,.attachments{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:12px}.section-label{font-size:11px;letter-spacing:1.1px;font-weight:800;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.message-text{white-space:normal;line-height:1.62;font-size:15px;overflow-wrap:anywhere}.attachment{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}.attachment:first-of-type{border-top:0}.attachment-icon{width:38px;height:38px;border-radius:12px;background:#f0edff;color:var(--accent);display:grid;place-items:center;font-weight:900}.attachment small{display:block;color:var(--muted);margin-top:3px}.muted-inline{color:var(--muted)}
.message-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:14px}

/* v0.1.4: Attention is a scanner, not a reader */
.mail-card .snippet{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.42;
  max-height:2.84em;
  margin-top:6px;
}
.mail-card .subject{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* v0.2 desktop workspace */
.sync-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}
.sync-number{font-size:30px;margin-bottom:16px}.progress{height:12px;background:#eceaf4;border-radius:999px;overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);transition:width .2s ease}.sync-panel p{color:var(--muted)}
@media (min-width:1100px){
  .app-shell{max-width:1440px}
  main{padding-left:46px;padding-right:46px}
  .mail-card{padding:20px 24px}
  .hero h1{font-size:48px}
  .mail-top time{font-size:13px}
}
@media (min-width:1350px){
  .mail-card{grid-template-columns:56px 1fr}
  .mail-card .snippet{max-width:900px}
}

/* v0.2.1 Gmail */
.sync-mini{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0}
.sync-mini>div:first-child{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}
.sync-mini span{color:var(--muted);font-size:13px}
.sync-mini small{display:block;margin-top:10px}
.cron-note{margin-top:14px;padding:15px;border:1px dashed #d7d5e2;border-radius:16px;background:rgba(255,255,255,.7)}
.cron-note code{display:block;margin:8px 0;padding:10px;background:#f1f0f6;border-radius:10px;overflow-wrap:anywhere}
.cron-note small{color:var(--muted)}

/* =========================================================
   MMMail v0.2.2 — Beige + Navy brand refresh
   ========================================================= */
:root{
  --bg:#F8F6F1;
  --panel:#FFFFFF;
  --panel-soft:#FCFAF6;
  --ink:#10243D;
  --ink-strong:#0B1D31;
  --muted:#728096;
  --line:#E8E3D9;
  --accent:#0E2A47;
  --accent2:#173F67;
  --beige:#F4EBDD;
  --beige-2:#E8D9C3;
  --beige-3:#D9C5A8;
  --success:#2D7A55;
  --danger:#B54D56;
  --shadow:0 14px 38px rgba(15,42,71,.075);
}
html,body{background:#F3F0EA;color:var(--ink)}
body{letter-spacing:-.01em}
.app-shell{
  background:
    radial-gradient(circle at 8% 0%,rgba(244,235,221,.9),transparent 24rem),
    linear-gradient(180deg,#FFFFFF 0%,#FBFAF7 52%,#F6F3ED 100%);
}
.topbar{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(14,42,71,.07);
  box-shadow:0 8px 26px rgba(14,42,71,.035);
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:-1px;
  color:var(--accent);
}
.brand-lockup img{width:34px;height:34px;display:block}
.brand-lockup span{font-weight:850}
.menu,.edit{color:var(--accent)}
.hero .eyebrow,.eyebrow{color:var(--accent2)}
.hero h1{color:var(--ink-strong)}
.count{
  background:var(--beige);
  color:var(--accent);
  border:1px solid #E7D8C2;
}
.mail-card{
  background:rgba(255,255,255,.94);
  border-color:rgba(14,42,71,.09);
  box-shadow:0 10px 28px rgba(14,42,71,.055);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.mail-card:hover{
  transform:translateY(-1px);
  border-color:rgba(14,42,71,.18);
  box-shadow:0 16px 34px rgba(14,42,71,.085);
}
.avatar,.provider{
  background:var(--beige);
  color:var(--accent);
  border:1px solid #E8DBC7;
}
.subject,.mail-top strong{color:var(--ink-strong)}
.stat,.account-row,.connect-card,.account-detail-card,.message-body,.attachments,.diag,.form-card,.sync-panel,.sync-mini{
  border-color:rgba(14,42,71,.085);
  box-shadow:0 8px 24px rgba(14,42,71,.035);
}
.stat:hover,.connect-card:hover,.account-row:hover{
  border-color:rgba(14,42,71,.16);
  background:var(--panel-soft);
}
.quick{
  background:linear-gradient(135deg,#F7F1E7 0%,#EFE2D0 100%);
  border:1px solid #E4D4BE;
  color:var(--accent);
}
.quick small{color:#7F705D}
.primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 20px rgba(14,42,71,.16);
}
.primary:hover{background:var(--accent2)}
.secondary{
  border-color:#D8D3CA;
  background:#fff;
  color:var(--accent);
}
input,select{
  background:#FFFEFC;
  border-color:#DED8CE;
  color:var(--ink);
}
input:focus,select:focus{
  border-color:#8AA0B8;
  box-shadow:0 0 0 3px rgba(23,63,103,.1);
}
.insight-card{
  background:linear-gradient(135deg,#FBF6ED,#F3E7D7);
  border-color:#E8D7BE;
}
.insight-card p{color:#6F6558}
.attachment-icon{
  background:var(--beige);
  color:var(--accent);
}
.progress{background:#EAE5DC}
.progress i{background:var(--accent)}
.flash.success{background:#EAF3EC;color:var(--success)}
.flash.error{background:#F9ECEE;color:var(--danger)}
.bottom-nav{
  background:rgba(255,255,255,.94);
  border-top:1px solid rgba(14,42,71,.08);
}
.bottom-nav a{color:#8792A1}
.bottom-nav .active{color:var(--accent)}
.bottom-nav .compose{
  background:linear-gradient(145deg,#0E2A47,#173F67);
  box-shadow:0 10px 26px rgba(14,42,71,.28);
}

/* Desktop gets more air and a stronger product feel without changing UX. */
@media (min-width:1100px){
  .app-shell{
    max-width:1440px;
    border-radius:26px;
    border:1px solid rgba(14,42,71,.08);
    box-shadow:0 30px 80px rgba(14,42,71,.10);
  }
  .topbar{height:82px;padding:0 34px}
  .brand-lockup img{width:38px;height:38px}
  .brand-lockup span{font-size:25px}
  main{padding-left:54px;padding-right:54px}
}

/* v0.2.3 Universal Attachment Viewer */
.attachment-link{text-decoration:none;color:inherit}.attachment-link:hover{background:#FCFAF6}.attachment-chevron{margin-left:auto;color:var(--accent);font-size:28px}
.attachment-viewer-shell{margin:-10px -10px 20px;min-height:calc(100vh - 170px);display:flex;flex-direction:column}
.attachment-toolbar{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:18px 18px 0 0}
.viewer-back{font-size:28px;color:var(--accent);text-decoration:none;text-align:center}.viewer-file{min-width:0}.viewer-file strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-file span{display:block;color:var(--muted);font-size:12px}.viewer-download{color:var(--accent);font-weight:750;text-decoration:none}
.viewer-stage{flex:1;min-height:70vh;background:#E9E5DE;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;overflow:auto}.attachment-frame{width:100%;height:76vh;border:0;background:#fff}
.image-stage{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:24px}.image-stage img{max-width:100%;max-height:72vh;object-fit:contain;box-shadow:0 14px 40px rgba(14,42,71,.16);background:#fff}
.text-preview{margin:0;padding:26px;background:#fff;min-height:72vh;white-space:pre-wrap;overflow-wrap:anywhere;color:#20354d;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.office-preview{margin:28px auto;padding:50px;max-width:820px;min-height:900px;background:#fff;box-shadow:0 14px 42px rgba(14,42,71,.12);line-height:1.65}.sheet-wrap{padding:20px;overflow:auto}.sheet-preview{border-collapse:collapse;background:#fff;min-width:100%}.sheet-preview td{border:1px solid #E2DED6;padding:8px 10px;white-space:nowrap;font-size:13px}
.zip-list{max-width:900px;margin:24px auto;background:#fff;border-radius:18px;padding:24px}.zip-list>div{display:flex;justify-content:space-between;gap:18px;padding:12px 4px;border-bottom:1px solid var(--line)}.zip-list small{color:var(--muted)}
.unsupported-preview{min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.unsupported-preview img{width:72px}.attachment-download{display:inline-block;text-decoration:none;margin-top:16px;padding:13px 22px;border-radius:12px}
@media(min-width:1100px){.attachment-viewer-shell{margin:-12px -20px 20px}.attachment-toolbar{padding:16px 22px}.attachment-frame{height:78vh}}

/* v0.2.3a */
.message-text{max-width:980px;color:#26394f}
.message-body{background:#fffdf9}
.attachment-link small{color:var(--muted)}

/* v0.2.4 */
.mail-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:18px 0 8px;padding:10px 4px;color:var(--muted);font-size:13px}
.mail-pagination a{text-decoration:none;color:var(--accent);font-weight:750}
.mail-pagination a:last-child{text-align:right}
.attachment-frame{display:block}

/* v0.2.5 HTML mail renderer */
.email-html{
  color:#1f3148;
  line-height:1.55;
  font-size:15px;
  overflow-wrap:anywhere;
}
.email-html table{max-width:100%!important;width:auto!important;border-collapse:collapse}
.email-html img{max-width:100%!important;height:auto!important}
.email-html p{margin:.7em 0}
.email-html a{color:var(--accent2);text-decoration:underline}
.email-html blockquote{margin:1em 0;padding-left:14px;border-left:3px solid var(--beige-3);color:var(--muted)}
.email-html h1,.email-html h2,.email-html h3,.email-html h4{color:var(--ink-strong);line-height:1.25}
.remote-image-blocked,.cid-image-placeholder{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:120px;min-height:54px;margin:4px 2px;padding:8px 12px;
  border:1px dashed #d6c9b5;border-radius:10px;background:#faf6ef;color:#8b7a64;
  font-size:12px;font-weight:700;
}

/* v0.2.6 full HTML images */
.email-html img{
  max-width:100%!important;
  height:auto!important;
  object-fit:contain;
}

/* v0.2.7 cleaner inbox previews */
.mail-card .snippet{
  color:#708096;
  font-size:14px;
  letter-spacing:0;
}

/* v0.2.8 attachment-aware inbox previews */
.mail-card-with-actions{align-items:flex-start}
.mail-card-main{
  display:block;
  color:inherit;
  text-decoration:none;
}
.preview-attachments{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  flex-wrap:wrap;
}
.preview-attachment{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:280px;
  padding:7px 10px;
  border:1px solid #e5dccf;
  background:#fbf7f0;
  border-radius:10px;
  color:var(--accent);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.preview-attachment:hover{
  background:#f4ebdd;
  border-color:#d7c7b0;
  transform:translateY(-1px);
}
.preview-attachment span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.preview-attachment .paperclip{
  flex:0 0 auto;
  font-size:14px;
  line-height:1;
}
.preview-attachment-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:30px;
  padding:0 8px;
  border-radius:10px;
  background:#eef2f6;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
@media(max-width:640px){
  .preview-attachment{
    max-width:210px;
  }
}

/* v0.2.9 navigation + message header polish */
.message-head{padding-top:10px}
.message-navrow{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:36px;
  margin-bottom:26px;
}
.message-navrow .backlink{
  margin:0;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  color:#68788c;
  font-weight:750;
}
.mailbox-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:min(420px,55vw);
  padding:6px 10px;
  border:1px solid #e5ded3;
  border-radius:999px;
  background:#fbf8f2;
  color:#6d7887;
  font-size:12px;
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mailbox-chip-label{
  color:#a09484;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.message-head h1{margin-top:0}
@media(max-width:640px){
  .message-navrow{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
  }
  .mailbox-chip{max-width:100%}
}

/* v0.2.10 manual mailbox refresh */
.sync-now-btn{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  font:inherit;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.sync-now-btn:hover{
  background:var(--beige);
  border-color:#e5d8c5;
}
.sync-now-btn:disabled{cursor:default;opacity:.72}
.sync-icon{
  display:block;
  font-size:24px;
  line-height:1;
  transform-origin:50% 50%;
}
.sync-now-btn.is-syncing .sync-icon{
  animation:mmmail-spin .85s linear infinite;
}
@keyframes mmmail-spin{to{transform:rotate(360deg)}}
.sync-toast{
  position:fixed;
  z-index:100;
  right:24px;
  top:92px;
  max-width:min(420px,calc(100vw - 32px));
  padding:11px 15px;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  box-shadow:0 14px 36px rgba(14,42,71,.2);
  font-size:13px;
  font-weight:750;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.sync-toast.show{opacity:1;transform:translateY(0)}
.sync-toast.error{background:var(--danger)}
@media(max-width:640px){
  .sync-toast{right:16px;top:78px}
}

/* v0.2.11 Reminder + Done */
.mail-card.reminder-on{
  border-left:6px solid var(--beige-3);
  padding-left:12px;
}
.swipe-shell{position:relative;border-radius:20px;overflow:hidden}
.swipe-action{
  position:absolute;inset:0;
  display:flex;align-items:center;
  opacity:0;
  transition:opacity .12s ease;
  font-size:14px;
  font-weight:800;
}
.swipe-action-reminder{
  justify-content:flex-start;gap:8px;
  padding-left:20px;
  background:#eadbc5;
  color:#5d4a31;
}
.swipe-action-done{
  justify-content:flex-end;gap:8px;
  padding-right:20px;
  background:#173f67;
  color:#fff;
}
.swiping-reminder .swipe-action-reminder,
.swiping-done .swipe-action-done{opacity:1}
.swipe-shell.done-hidden{display:none}
.action-undo{
  position:fixed;z-index:120;
  left:50%;bottom:94px;
  transform:translate(-50%,18px);
  display:flex;align-items:center;gap:18px;
  padding:11px 14px 11px 16px;
  border-radius:14px;
  background:#102a45;color:#fff;
  box-shadow:0 16px 40px rgba(14,42,71,.22);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  font-size:13px;font-weight:750;
}
.action-undo.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.action-undo button{
  border:0;background:transparent;color:#eadbc5;
  padding:2px 0;font:inherit;font-weight:850;cursor:pointer;
}
.message-reminder-btn.is-on{
  border-left:5px solid var(--beige-3);
  background:#fbf6ee;
}
@media(min-width:761px){
  .swipe-action{display:none}
  .swipe-shell{overflow:visible}
}
@media(max-width:760px){
  .swipe-shell .mail-card{
    position:relative;z-index:2;
    margin:0;
    touch-action:pan-y;
    will-change:transform;
    background:#fff;
  }
  .mail-list{gap:11px}
  .mail-card.reminder-on{border-left-width:6px}
}