*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:linear-gradient(135deg,#f8fbff,#eef4ff 55%,#fff);color:#172033;min-height:100vh}.app{max-width:720px;margin:auto;min-height:100vh;padding:14px 14px 100px}.glass{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 40px rgba(41,72,120,.10),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:26px}.topbar{display:flex;align-items:center;gap:12px;padding:12px 14px;position:sticky;top:10px;z-index:5}.brand{font-size:22px;font-weight:800}.brand span{color:#4d8cff}.sub{font-size:12px;color:#7c8799}.icon{border:0;background:rgba(255,255,255,.65);width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer}.topbar .icon:last-child{margin-left:auto}main{padding-top:18px}.search{display:flex;align-items:center;padding:8px 10px;gap:8px}.search span{font-size:26px;color:#7d8aa0}.search input{border:0;outline:0;background:transparent;flex:1;font-size:16px}.search button{border:0;background:#ebf1fc;border-radius:16px;width:40px;height:40px;font-size:21px}.chips{display:flex;gap:8px;overflow:auto;padding:12px 2px}.chip{border:1px solid #e4eaf4;background:#fff9;border-radius:999px;padding:9px 14px;white-space:nowrap}.chip.active{background:#eaf2ff;color:#2875ed;border-color:#cfe0ff}.mail-list{display:grid;gap:10px}.mail{padding:14px;display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;cursor:pointer}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#7aa9ff,#a77cff);color:#fff;font-weight:800}.sender{font-weight:750}.subject{font-weight:650;margin-top:3px}.preview{color:#7c8799;font-size:13px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{font-size:12px;color:#7c8799;text-align:right;align-self:start}.unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3182ff;margin-right:5px}.star{font-size:18px;margin-top:10px}.bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(680px,calc(100% - 28px));display:flex;justify-content:space-around;padding:8px;z-index:10}.nav{border:0;background:transparent;padding:7px 18px;border-radius:18px;font-size:19px;color:#69768b}.nav.active{background:#eaf2ff;color:#2875ed}.nav small{display:block;font-size:11px;margin-top:3px}.compose{position:fixed;right:max(24px,calc((100vw - 720px)/2 + 24px));bottom:84px;border:0;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#5c9cff,#7a72ff);color:#fff;font-size:30px;box-shadow:0 12px 30px #486edc4d;z-index:11}.setup{padding:28px;margin-top:30px}.setup h1{margin-bottom:8px}.setup p{color:#718097}.setup-icon{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#7aa9ff,#a77cff);color:white;font-size:26px;font-weight:800}.setup label{display:block;font-size:13px;color:#657289;margin:14px 0 6px}.setup input,.compose-card input,.compose-card textarea{width:100%;border:1px solid #e1e7f1;background:#fff9;border-radius:16px;padding:13px 14px;outline:0;font:inherit}.primary{border:0;border-radius:16px;background:#287cff;color:#fff;padding:13px 18px;font-weight:700;cursor:pointer;width:100%;margin-top:18px}.primary.small{width:auto;margin:0;padding:10px 14px}.status{font-size:13px;margin-top:10px;color:#647188}.hidden{display:none!important}.drawer,.modal{position:fixed;inset:0;background:#1e2d461f;backdrop-filter:blur(10px);z-index:30;padding:18px}.drawer-card{max-width:430px;height:100%;padding:24px;overflow:auto}.drawer-card .close{float:right}.drawer-card h2{margin-top:35px}.drawer-card button:not(.icon){display:block;width:100%;text-align:left;border:0;background:#fff8;padding:14px;border-radius:16px;margin:7px 0;font-size:15px}.modal{display:grid;place-items:center}.reader,.compose-card{width:min(680px,100%);max-height:90vh;overflow:auto;padding:20px}.reader h1{font-size:25px}.reader-body{white-space:pre-wrap;line-height:1.6;color:#46536a}.compose-card{display:grid;gap:12px}.compose-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.compose-card textarea{min-height:330px;resize:vertical}@media(max-width:500px){.app{padding-left:10px;padding-right:10px}.bottom{width:calc(100% - 20px)}.compose{right:20px}.nav{padding:7px 10px}.mail{grid-template-columns:42px 1fr auto}.avatar{width:42px;height:42px}.subject{font-size:14px}}
/* MailGlass V7 — reader polish */
.mail-main{min-width:0}
.sender,.subject,.preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time{white-space:nowrap}
.reader-back{
  display:flex!important;
  align-items:center;
  justify-content:center;
  font-size:28px!important;
  line-height:1;
}
.reader-meta{margin-top:8px;color:#728097}
.reader-from{font-weight:700;color:#18243a;font-size:16px}
.reader-email{font-size:13px;margin-top:2px}
.reader-date{font-size:12px;margin-top:4px}
.reader-html{
  overflow:auto;
  overflow-wrap:anywhere;
}
.reader-html img{max-width:100%;height:auto}
.reader-html table{max-width:100%;display:block;overflow:auto;border-collapse:collapse}
.reader-html pre{white-space:pre-wrap;overflow:auto}
.reader-html a{color:#247cff}
.attachment-card{padding:14px;margin-top:16px}

/* MailGlass V9 — visible red Liquid Glass close button */
.modal-close,
#closeCompose,
#closeDrawer {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255, 59, 48, .72);
  color: #fff;
  box-shadow:
    0 8px 24px rgba(255, 59, 48, .20),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
}
.modal-close:hover,
#closeCompose:hover,
#closeDrawer:hover {
  background: rgba(255, 59, 48, .84);
  transform: scale(1.03);
}

.folder-btn{width:100%;text-align:left;margin:4px 0;padding:11px 12px;border:0;border-radius:14px;background:rgba(255,255,255,.42);color:#18243a;cursor:pointer}.folder-btn:hover{background:rgba(255,255,255,.7)}

/* V11 — FORCE RED LIQUID GLASS CLOSE BUTTONS */
#closeCompose,
#closeDrawer,
button#closeCompose,
button#closeDrawer,
.modal-close {
  background: rgba(255, 59, 48, 0.82) !important;
  background-color: rgba(255, 59, 48, 0.82) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 24px rgba(255, 59, 48, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
#closeCompose:hover,
#closeDrawer:hover {
  background: rgba(255, 59, 48, 0.96) !important;
  background-color: rgba(255, 59, 48, 0.96) !important;
  color: #fff !important;
}

/* V13 — reader close button: red Liquid Glass */
.reader { position: relative; }
.reader-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 20 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  background: rgba(255, 70, 70, .78) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(255,60,60,.28), inset 0 1px 0 rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}