@media (max-width: 960px) {
  .lnav-right [data-nav="mail"] { display: none; }
}
body[data-page="mail"] .lnav [data-nav="mail"] { background: var(--f-nav-sel); }
body[data-page="mail"] .lnav [data-nav="mail"] svg { stroke: var(--f-ink); }
.lico .badge[hidden] { display: none; }

.ml-page { font-family: var(--f-font); }
.ml-page .f-page-head .f-title { flex: 0 1 auto; }
.ml-tabs { flex: 1 1 auto; min-width: 0; }
.ml-tabs .f-tab { display: inline-flex; align-items: center; gap: 6px; }
.ml-n { font-style: normal; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--f-red); color: #fff; font-size: 13px; line-height: 1; }
.ml-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: calc(8 * var(--u)); }

.ml-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px, 36%) 1fr; gap: calc(12 * var(--u)); }
.ml-list { min-height: 0; overflow: auto; scrollbar-width: none; touch-action: pan-y; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.ml-list::-webkit-scrollbar { display: none; }
.ml-item { flex: none; display: flex; align-items: center; gap: 10px; min-height: max(calc(60 * var(--u)), 56px); padding: 6px 12px 6px 8px; border: 0; border-radius: 10px; background: var(--f-panel); box-shadow: inset 0 0 0 1px var(--f-line); color: #fff; text-align: left; cursor: pointer; font-family: var(--f-font); }
.ml-item.sel { background: var(--f-nav-sel); color: var(--f-ink); box-shadow: none; }
.ml-item.new .tx b { color: var(--f-yellow); }
.ml-item.new.sel .tx b { color: var(--f-ink); }
.ml-page .ic { flex: none; width: max(calc(40 * var(--u)), 38px); height: max(calc(40 * var(--u)), 38px); border-radius: 8px; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; }
.ml-item.sel .ic { background: rgba(11, 18, 48, 0.12); color: var(--f-ink); }
.ml-page .ic.gift { background: var(--f-yellow); color: var(--f-ink); }
.ml-page .ic svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ml-page .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-item .tx b { font-weight: 700; text-transform: uppercase; font-size: max(calc(16 * var(--u)), 15px); line-height: 1.05; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.ml-page .tx small { font-weight: 600; font-size: max(calc(12 * var(--u)), 12px); opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-tag { flex: none; padding: 3px 6px; border-radius: 4px; background: var(--f-green); color: var(--f-ink); font-weight: 700; font-size: 12px; text-transform: uppercase; }
.ml-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--f-yellow); }

.ml-view { min-height: 0; display: flex; flex-direction: column; padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.ml-vhead { flex: none; display: flex; align-items: center; gap: 12px; }
.ml-vhead .ic { width: max(calc(48 * var(--u)), 44px); height: max(calc(48 * var(--u)), 44px); }
.ml-vhead .f-title { font-size: max(calc(26 * var(--u)), 19px); line-height: 1.05; overflow-wrap: anywhere; }
.ml-exp { color: var(--f-yellow); }
.ml-vbody { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; touch-action: pan-y; padding: 6px 2px; }
.ml-vbody::-webkit-scrollbar { display: none; }
.ml-vbody .f-section { margin: calc(8 * var(--u)) 0 calc(6 * var(--u)); font-size: max(calc(17 * var(--u)), 15px); }
.ml-text { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--f-font); font-weight: 500; font-size: max(calc(16 * var(--u)), 15px); line-height: 1.3; color: rgba(255, 255, 255, 0.92); }
.ml-vfoot { flex: none; display: flex; align-items: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid var(--f-line); }
.ml-vfoot .grow { flex: 1; }
.ml-vfoot .f-btn { flex: none; font-size: max(calc(16 * var(--u)), 15px); }
.ml-act { flex: none; display: flex; align-items: center; gap: 12px; }
.ml-claim { min-width: max(calc(150 * var(--u)), 130px); min-height: max(calc(64 * var(--u)), 56px); }
.ml-text.dim { color: var(--f-dim); }

.ml-rws { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; padding: 2px; }
.ml-rws::-webkit-scrollbar { display: none; }
.ml-got { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 0; }
.ml-rw { flex: none; width: max(calc(76 * var(--u)), 72px); padding: 6px 4px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; color: #fff; background: var(--r-free); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); font-family: var(--f-font); }
.ml-got .ml-rw { width: max(calc(96 * var(--u)), 88px); }
.ml-rw.common { background: var(--r-common); } .ml-rw.rare { background: var(--r-rare); } .ml-rw.epic { background: var(--r-epic); }
.ml-rw.legendary { background: var(--r-legendary); } .ml-rw.special { background: var(--r-special); }
.ml-rw .art { width: 100%; height: max(calc(38 * var(--u)), 36px); display: grid; place-items: center; overflow: hidden; }
.ml-got .ml-rw .art { height: max(calc(52 * var(--u)), 46px); }
.ml-rw .art > svg, .ml-rw .art > img { max-width: 80%; max-height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }
.ml-rw .art .sh-bag { margin-top: 10px; transform: scale(0.42); }
.ml-got .ml-rw .art .sh-bag { transform: scale(0.55); }
.ml-rw .coin, .ml-rw .crystal { width: max(calc(30 * var(--u)), 28px); height: max(calc(30 * var(--u)), 28px); min-width: 0; min-height: 0; }
.ml-rw .nm { font-weight: 700; text-transform: uppercase; font-size: max(calc(13 * var(--u)), 12px); line-height: 1.05; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.ml-rw small { font-weight: 600; font-size: max(calc(11 * var(--u)), 11px); opacity: 0.85; white-space: nowrap; }
.ml-rws.done .ml-rw { filter: saturate(0.45) brightness(0.8); }
.ml-xp { font-weight: 700; font-style: italic; font-size: max(calc(24 * var(--u)), 22px); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.ml-emo { font-size: max(calc(28 * var(--u)), 26px); line-height: 1; }
.ml-av { width: max(calc(36 * var(--u)), 34px); height: max(calc(36 * var(--u)), 34px); min-width: 0; min-height: 0; font-size: 16px; cursor: default; }
.ml-ring { width: max(calc(34 * var(--u)), 32px); height: max(calc(34 * var(--u)), 32px); border-radius: 50%; background: var(--ring); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
.ml-bn { width: 84%; height: max(calc(28 * var(--u)), 26px); border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.ml-ti { font-weight: 700; text-transform: uppercase; font-size: 11px; line-height: 1.1; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.4); }
.ml-lvl { text-align: center; font-family: var(--f-font); font-weight: 700; color: var(--f-yellow); text-transform: uppercase; margin: 4px 0 0; }

.ml-chat { flex: 1; min-height: 0; width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ml-msgs { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; touch-action: pan-y; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.ml-msgs::-webkit-scrollbar { display: none; }
.ml-m { flex: none; align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--f-panel); box-shadow: inset 0 0 0 1px var(--f-line); display: flex; flex-direction: column; gap: 2px; color: #fff; }
.ml-m.me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--f-blue); box-shadow: none; }
.ml-m b { color: var(--f-yellow); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
.ml-m span { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 500; font-size: max(calc(16 * var(--u)), 15px); line-height: 1.25; }
.ml-m small { align-self: flex-end; font-weight: 600; font-size: 11px; opacity: 0.7; }
.ml-msgs .cr-empty { padding: 8px; }
.ml-send { flex: none; display: flex; gap: 8px; align-items: stretch; }
.ml-in { resize: none; height: var(--f-tap); padding: 12px; line-height: 1.2; font-family: var(--f-font); }
.ml-send .f-btn { font-size: max(calc(16 * var(--u)), 15px); }

.ml-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; }
.ml-none .ic { width: 64px; height: 64px; border-radius: 16px; }
.ml-none b { font-weight: 700; text-transform: uppercase; font-size: max(calc(20 * var(--u)), 17px); }
.ml-none small { font-weight: 600; color: var(--f-dim); font-size: max(calc(14 * var(--u)), 13px); }
.ml-replays { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; touch-action: pan-y; display: flex; flex-direction: column; }
.ml-replays::-webkit-scrollbar { display: none; }

@media (max-width: 960px) {
  .ml-page .f-page-head .f-title { display: none; }
  .ml-split { grid-template-columns: minmax(200px, 38%) 1fr; }
}
@media (max-height: 460px) {
  .ml-view { padding: 8px 10px; }
  .ml-vhead .f-title { font-size: 19px; }
  .ml-got .ml-rw { width: 80px; }
  .ml-got .ml-rw .art { height: 40px; }
  .ml-got .ml-rw .nm { font-size: 12px; }
}