.mail{padding:48px 0 30px}.mail-hero{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:36px 0 40px}.mail-hero h1{font-size:clamp(32px,5vw,58px);margin:12px 0}.mail-hero p,.mail-help p{color:var(--muted,#bcb0be);line-height:1.9;max-width:720px}.mail-stamp{width:160px;height:140px;border:1px dashed #78516b;border-radius:22px;display:grid;place-content:center;text-align:center;color:#ff99cc;font-size:65px;transform:rotate(6deg);flex-shrink:0}.mail-stamp small{font-size:9px;letter-spacing:2px}.mail-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.mail-toolbar [role=tablist]{display:flex;gap:5px;flex-wrap:wrap}.mail-toolbar [role=tab]{background:transparent;border:0;padding:12px 17px;border-radius:12px;color:#bcb0be;cursor:pointer}.mail-toolbar [aria-selected=true]{background:#382633;color:#ff99cc}.mail-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);border:1px solid #3b303d;border-radius:20px;overflow:hidden;min-height:620px;background:#211b24}.mail-list-panel{border-right:1px solid #3b303d;min-width:0}.mail-search{display:grid;gap:10px;padding:20px;font-size:12px;color:#c6b8c9}.mail-search input,.mail-reading select{width:100%;padding:12px;background:#17131a;color:#f4eaf1;border:1px solid #4b3949;border-radius:10px;min-height:46px;box-sizing:border-box}.mail-row{display:block;text-align:left;width:100%;padding:20px;border:0;border-top:1px solid #342b37;background:transparent;color:inherit;cursor:pointer;border-left:3px solid transparent}.mail-row:hover,.mail-row.selected{background:#30222e;border-left-color:#ff99cc}.mail-row b{display:block;line-height:1.6;overflow-wrap:anywhere}.mail-row.unread b:before{content:'●';font-size:8px;vertical-align:middle;margin-right:8px;color:#ff99cc}.mail-row small{display:block;color:#bcb0be;line-height:1.8;margin-top:6px}.mail-row .mail-label{display:inline-block;font-size:11px;color:#ffb6d8;margin-top:9px}.mail-pagination{padding:18px;display:flex;justify-content:space-between;align-items:center}.mail-reading{padding:32px;min-width:0}.mail-reading h2{font-size:26px;line-height:1.5;overflow-wrap:anywhere;margin:0 0 12px}.mail-meta{font-size:12px;color:#bcb0be;line-height:2}.mail-body{padding:28px 0;line-height:1.9;overflow-wrap:anywhere}.mail-body img,.mail-cover{max-width:100%;height:auto;border-radius:12px}.mail-body pre{overflow:auto}.mail-body table{display:block;overflow:auto}.mail-body a{color:#ff99cc}.mail-attachments{border-top:1px solid #463341;padding-top:22px}.mail-gifts{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.mail-gift{border:1px solid #50374b;border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;max-width:100%;box-sizing:border-box}.mail-gift img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}.mail-gift small{display:block;color:#bcb0be}.mail-xp{color:#ff99cc;font-size:23px}.mail-claim-controls{display:grid;gap:12px}.mail-banner{display:flex;align-items:center;gap:20px;justify-content:space-between;background:#30222d;padding:22px;border:1px solid #54354a;border-radius:16px;margin-bottom:24px}.mail-empty{text-align:center;padding:55px 16px;color:#bcb0be;line-height:1.8}.mail-empty>span{font-size:64px;color:#a86f91;display:block;margin-bottom:18px}.mail-help{margin-top:35px;padding:28px;border-radius:18px;border:1px solid #3b303d;background:#211b24}.mail-help h2{font-size:22px}.mail-reading footer{margin-top:24px;padding-top:18px;border-top:1px solid #3b303d}.mail #mail-notice{color:#ffb6d8;line-height:1.8;min-height:24px}.mail dialog{background:#211b24;color:#f4eaf1;border:1px solid #80546e;border-radius:20px;max-width:480px;padding:28px}.mail dialog::backdrop{background:#09060bba}.mail-dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.mail button:disabled{opacity:.5;cursor:default}@media(max-width:760px){.mail{padding-top:20px}.mail-hero{padding:18px 0 25px}.mail-stamp{display:none}.mail-layout{grid-template-columns:1fr;min-height:0}.mail-list-panel{border-right:0;border-bottom:1px solid #3b303d}.mail-reading{padding:23px}.mail-toolbar [role=tab]{padding:10px 12px}.mail-banner{align-items:flex-start;flex-direction:column}.mail-list-panel #mail-list{max-height:370px;overflow:auto}.mail-hero h1{font-size:36px}.mail-gift{width:100%}}
