/* ---------- Hộp thư ---------- */
.mailbox-link{position:relative;display:grid;place-items:center;text-decoration:none}
.mailbox-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--wine);box-shadow:0 0 0 2px var(--cream)}
.mailbox-dot[hidden]{display:none}
body.mailbox-mode .layout{display:none}
body.mailbox-mode .steps{visibility:hidden}
.mailbox-page{min-height:calc(100vh - var(--topbar));padding:36px 16px 80px;background:radial-gradient(ellipse 70% 40% at 50% 0,rgba(255,236,200,.6),transparent 70%),var(--cream)}
.mailbox-page[hidden]{display:none}
.mb-wrap{width:min(760px,100%);margin:0 auto;animation:rise .45s ease both}
.mb-wrap h1{margin-bottom:14px}
.mb-loading,.mb-empty{color:var(--ink-soft);font-size:14.5px;padding:28px 0}
.mb-empty a{color:var(--wine)}
.mb-perks{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px}
.mb-perks li{padding-left:22px;position:relative;font-size:14.5px;color:var(--ink-soft)}
.mb-perks li:before{content:'✉';position:absolute;left:0;color:var(--wine)}
.mb-perks b{color:var(--ink);font-weight:500}
.mb-card{background:rgba(255,250,240,.75);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
.mb-card .label{margin-bottom:6px}
.mb-form .btn{width:100%;margin-top:6px}
.mb-restore summary{cursor:pointer;font-size:14px;color:var(--ink-soft)}
.mb-restore[open] summary{margin-bottom:8px}
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 18px}
.mb-grid .mb-card{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mb-grid .help{margin:0}
.mb-handle{font:500 22px var(--mono);margin:0;color:var(--wine);word-break:break-all}
.mb-push{margin:0;font-weight:500;display:flex;align-items:center;gap:8px}
.mb-push:before{content:'';width:9px;height:9px;border-radius:50%;background:#b6aa98}
.mb-push.on:before{background:#4f7a3a;box-shadow:0 0 0 4px rgba(79,122,58,.15)}
.mb-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto}
.mb-tabs{margin-bottom:6px}
.mb-list{display:grid;gap:8px}
.mb-item{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,250,240,.7);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.mb-item:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(60,40,20,.08)}
.mb-item.unread{border-color:rgba(158,59,51,.35);background:var(--paper)}
.mb-item.unread b{font-weight:600}
.mb-main{display:grid;gap:2px;min-width:0}
.mb-main b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-main small{color:var(--ink-soft);font-size:12.5px}
.mb-env{width:44px;height:30px;border-radius:3px;background:#e9dcc4;position:relative;box-shadow:inset 0 0 0 1.5px #3a2f2a}
.mb-env:before{content:'';position:absolute;inset:1.5px;background:linear-gradient(to bottom right,transparent 49%,#3a2f2a 49% 52%,transparent 52%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,#3a2f2a 49% 52%,transparent 52%) right/50% 100% no-repeat;clip-path:polygon(0 0,100% 0,100% 60%,0 60%)}
.mb-env:after{content:'';position:absolute;left:50%;top:58%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--wine)}
.mb-env.sent{background:#dfe6ef}
.mb-env.sent:after{background:#2c5c9c}
.mb-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tag{font:500 11px var(--mono);font-style:normal;letter-spacing:.04em;padding:4px 8px;border-radius:99px;background:var(--cream-2);color:var(--ink-soft);white-space:nowrap}
.tag.new{background:var(--wine);color:#fff}
.tag.lock{background:#efe2c4;color:#7a5a1e}
.tag.opened{background:#dfeccf;color:#3c6328}
.mb-footer{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:14px}
.mb-footer summary{cursor:pointer;font-size:14px;color:var(--ink-soft)}
.mb-footer input{font:12px var(--mono)!important;min-width:0}
.mb-footer .mb-actions{justify-content:space-between}

@media (max-width:640px){
  .mb-grid{grid-template-columns:1fr}
  .mb-item{grid-template-columns:36px 1fr;row-gap:8px}
  .mb-env{width:36px;height:25px}
  .mb-tags{grid-column:2;justify-content:flex-start}
}
.countdown .remind-btn{margin-top:14px}