#mail-panel, #mail-fly, .mp-host { --mp-bg:#ffffff; --mp-bg2:#f7f9fb; --mp-tx:#0f172a; --mp-sub:#64748b; --mp-ln:#e9edf2; --mp-on:#eef3f8; --mp-chip:#ffffff; --mp-chipOn:#0f172a; --mp-chipOnT:#ffffff;
  --mp-acc:#2f5f8f; --mp-dot:#3b6ea5; --mp-pri:#0f172a; --mp-priT:#ffffff; --mp-bar:#ffffff; --mp-in:#ffffff; --mp-inb:#d9e0e8; --mp-ok:#e8f6ee; --mp-okT:#1a7f37; --mp-up:#eef1f5; --mp-upT:#475569; --mp-err:#b42318; --mp-errB:#fdecea;
  --mp-rose:#F43F5E; --mp-fbT:#334155; --mp-fbP:#0f172a;
  --mp-ff: var(--tsp-ff, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
html[data-theme="dark"] #mail-panel, html[data-theme="dark"] #mail-fly, html[data-theme="dark"] .mp-host { --mp-bg:#1d222b; --mp-bg2:#232933; --mp-tx:#eef2f7; --mp-sub:#8a96a8; --mp-ln:rgba(255,255,255,.08); --mp-on:rgba(255,255,255,.07); --mp-chip:rgba(255,255,255,.04);
  --mp-chipOn:#eef2f7; --mp-chipOnT:#1d222b; --mp-acc:#9fdcf5; --mp-dot:#9fdcf5; --mp-pri:#eef2f7; --mp-priT:#1d222b; --mp-bar:rgba(255,255,255,.03); --mp-in:#161a21; --mp-inb:rgba(255,255,255,.12);
  --mp-ok:rgba(52,199,89,.14); --mp-okT:#7ee2a0; --mp-up:rgba(255,255,255,.08); --mp-upT:#c3ccd8; --mp-err:#ffb4a9; --mp-errB:rgba(255,90,70,.12); --mp-rose:#F43F5E; }
html[data-tsp-mail]:not([data-tsp-mail="default"]):not([data-theme="dark"]) #mail-panel, html[data-tsp-mail]:not([data-tsp-mail="default"]):not([data-theme="dark"]) #mail-fly {
  --mp-ln:rgba(255,255,255,.08); --mp-on:rgba(255,255,255,.07); --mp-chip:rgba(255,255,255,.04); --mp-bar:rgba(255,255,255,.03); --mp-inb:rgba(255,255,255,.12);
  --mp-ok:rgba(52,199,89,.14); --mp-okT:#7ee2a0; --mp-up:rgba(255,255,255,.08); --mp-upT:#c3ccd8; --mp-err:#ffb4a9; --mp-errB:rgba(255,90,70,.12); --mp-rose:#F43F5E; }
html[data-tsp-mail="graphite"]:not([data-theme="dark"]) #mail-panel, html[data-tsp-mail="graphite"]:not([data-theme="dark"]) #mail-fly { --mp-bg:#1d222b; --mp-bg2:#232933; --mp-tx:#eef2f7; --mp-sub:#8a96a8; --mp-chipOn:#eef2f7; --mp-chipOnT:#1d222b; --mp-acc:#9fdcf5; --mp-dot:#9fdcf5; --mp-pri:#eef2f7; --mp-priT:#1d222b; --mp-in:#161a21; }
html[data-tsp-mail="sky"]:not([data-theme="dark"]) #mail-panel, html[data-tsp-mail="sky"]:not([data-theme="dark"]) #mail-fly { --mp-bg:#1d222b; --mp-bg2:#232933; --mp-tx:#eef2f7; --mp-sub:#8a96a8; --mp-chipOn:#eef2f7; --mp-chipOnT:#1d222b; --mp-acc:#9fdcf5; --mp-dot:#9fdcf5; --mp-pri:#eef2f7; --mp-priT:#1d222b; --mp-in:#161a21; }
html[data-tsp-mail="win1"]:not([data-theme="dark"]) #mail-panel, html[data-tsp-mail="win1"]:not([data-theme="dark"]) #mail-fly { --mp-bg:#202020; --mp-bg2:#2b2b2b; --mp-tx:#ffffff; --mp-sub:#8f8f8f; --mp-chipOn:#ffffff; --mp-chipOnT:#202020; --mp-acc:#8cc4f0; --mp-dot:#8cc4f0; --mp-pri:#ffffff; --mp-priT:#202020; --mp-in:#111c2e; }
html[data-tsp-mail="win2"]:not([data-theme="dark"]) #mail-panel, html[data-tsp-mail="win2"]:not([data-theme="dark"]) #mail-fly { --mp-bg:#20242b; --mp-bg2:#2a2e35; --mp-tx:#ffffff; --mp-sub:#8f97a3; --mp-chipOn:#ffffff; --mp-chipOnT:#20242b; --mp-acc:#8cc4f0; --mp-dot:#8cc4f0; --mp-pri:#ffffff; --mp-priT:#20242b; --mp-in:#111c2e; }
#mail-panel, #mail-fly { position:fixed; z-index:9990; top:56px; bottom:0; display:none; flex-direction:column; overflow:hidden; background:var(--mp-bg); color:var(--mp-tx); font-family:var(--mp-ff); box-sizing:border-box; }
#mail-panel *, #mail-fly * { box-sizing:border-box; }
#mail-panel.on, #mail-fly.on { display:flex; }
#mail-panel.mp-anim, #mail-fly.mp-anim { animation: tspDockSlide var(--tsp-slide) ease-out; }   
#mail-panel { right:0; width:var(--mp-pw, 440px); border-left:1px solid var(--mp-ln); box-shadow:-10px 0 30px rgba(2,6,23,.10); }
#mail-fly { right:440px; width:760px; z-index:9991; border-radius:0 0 0 14px; box-shadow:-18px 12px 40px rgba(2,6,23,.22); border-right:1px solid var(--mp-ln); }
#mail-panel button, #mail-fly button { font-family:var(--mp-ff); cursor:pointer; margin:0; }
.mp-hd { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--mp-ln); flex:none; min-height:58px; }
.mp-hd b.t { font:800 16px var(--mp-ff); white-space:nowrap; }
.mp-acct.mp-gear { width:34px !important; height:34px !important; padding:0 !important; display:inline-flex !important; align-items:center; justify-content:center; border-radius:10px !important; gap:0 !important; }
.mp-acct.mp-gear svg { width:17px !important; height:17px !important; }
.mp-acct svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mp-acct { display:inline-flex; align-items:center; gap:6px; font:700 11.5px var(--mp-ff); color:var(--mp-sub); background:var(--mp-on); border:0; padding:4px 8px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
.mp-sp { flex:1; }
.mp-btn { height:32px; padding:0 12px; border-radius:9px; border:1px solid var(--mp-ln); background:var(--mp-chip); color:var(--mp-tx); display:inline-flex; align-items:center; gap:6px; font:700 12px var(--mp-ff); white-space:nowrap; }
.mp-btn:hover { background:var(--mp-on); }
.mp-btn.pri { background:var(--mp-pri); color:var(--mp-priT); border-color:var(--mp-pri); font-weight:800; }
.mp-btn.pri:hover { filter:brightness(1.08); }
.mp-btn[disabled] { opacity:.5; cursor:default; }
.mp-btn svg, .mp-fb svg, .mp-x svg, .mp-att svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mp-chips { display:flex; gap:6px; padding:14px 14px 10px; border-bottom:1px solid var(--mp-ln); flex:none; overflow-x:auto; scrollbar-width:none; }
.mp-chips::-webkit-scrollbar { display:none; }
.mp-chip { height:30px; padding:0 11px; border-radius:8px; border:1px solid var(--mp-ln); background:var(--mp-chip); color:var(--mp-tx); font:700 12px var(--mp-ff); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex:none; }
.mp-chip.on { background:var(--mp-chipOn); color:var(--mp-chipOnT); border-color:var(--mp-chipOn); }
.mp-chip .n { font-weight:800; }
.mp-srch { display:none; padding:8px 14px; border-bottom:1px solid var(--mp-ln); gap:6px; flex:none; }
.mp-srch.on { display:flex; }
.mp-in { width:100%; height:36px; border:1px solid var(--mp-inb); border-radius:9px; background:var(--mp-in); color:var(--mp-tx); padding:0 11px; font:500 13.5px var(--mp-ff); outline:none; }
.mp-in:focus { border-color:var(--mp-acc); }
textarea.mp-in { height:auto; padding:10px 11px; line-height:1.55; resize:none; }
.mp-list { flex:1; overflow-y:auto; overscroll-behavior:contain; }
.mp-row { padding:11px 14px 11px 16px; border-bottom:1px solid var(--mp-ln); cursor:pointer; position:relative; }
.mp-row:hover { background:var(--mp-bg2); }
.mp-row.sel { background:var(--mp-on); box-shadow:inset 3px 0 0 var(--mp-acc); }
.mp-r1 { display:flex; align-items:center; gap:6px; font:600 13px var(--mp-ff); min-width:0; }
.mp-r1 .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mp-row.un .mp-r1::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--mp-dot); flex:none; }
.mp-r1 .d { margin-left:auto; font:600 11px var(--mp-ff); color:var(--mp-sub); white-space:nowrap; flex:none; padding-left:8px; }
.mp-r1 .ic { color:var(--mp-sub); font-size:11px; flex:none; }
.mp-r2 { font:700 12.5px var(--mp-ff); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-r3 { font:500 12px var(--mp-ff); color:var(--mp-sub); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-more { display:block; width:calc(100% - 28px); margin:12px 14px; }
.mp-empty { padding:40px 20px; text-align:center; color:var(--mp-sub); font:600 13px/1.6 var(--mp-ff); }
.mp-ft { display:flex; border-top:1px solid var(--mp-ln); background:var(--mp-bar); flex:none; }
#mp-pft:empty { display:none; }   
.mp-btn.mp-ic { width:32px; padding:0; justify-content:center; }
.mp-btn.busy svg { animation:mpSpin .8s linear infinite; } .mp-btn.busy { pointer-events:none; opacity:.75; }
.mp-hd .mp-xr { margin-left:2px; }
.mp-fb { flex:1; height:44px; border:0; background:none; color:var(--mp-sub); font:800 12px var(--mp-ff) !important; letter-spacing:.03em; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.mp-fb:hover { color:var(--mp-tx); background:var(--mp-on); }
.mp-fb.pri { color:var(--mp-acc); }
.mp-fb[disabled] { opacity:.45; cursor:default; }
.mp-grip { position:absolute; left:0; top:50%; width:14px; height:64px; transform:translateY(-50%); cursor:ew-resize; z-index:5; }   
.mp-grip::after { content:""; position:absolute; left:3px; top:10px; bottom:10px; width:4px; border-radius:3px; background:var(--mp-ln); transition:background .15s; }
.mp-grip:hover::after, #mail-fly.drag .mp-grip::after { background:var(--mp-acc); }
#mail-fly.drag, #mail-panel.drag { user-select:none; animation:none; }
#mail-panel.drag .mp-grip::after { background:var(--mp-acc); }
.mp-fhd { display:flex; align-items:center; gap:10px; padding:14px 16px 12px 20px; border-bottom:1px solid var(--mp-ln); flex:none; min-height:58px; }
.mp-fhd .t { font:800 16px var(--mp-ff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.mp-x { width:30px; height:30px; border-radius:8px; border:0; background:none; color:var(--mp-sub); display:inline-flex; align-items:center; justify-content:center; flex:none; font:700 16px var(--mp-ff); }
.mp-x:hover { background:var(--mp-on); color:var(--mp-tx); }
.mp-back { display:none; }
.mp-fbd { flex:1; overflow-y:auto; padding:16px 20px 22px 22px; overscroll-behavior:contain; scrollbar-width:none; }
.mp-fbd::-webkit-scrollbar { display:none; }   
.mp-sar { position:absolute; left:50%; z-index:12; width:30px; height:22px; margin-left:-15px; border:1px solid var(--mp-ln); border-radius:11px; background:var(--mp-bg2); color:var(--mp-sub); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .18s, color .15s; box-shadow:0 2px 8px rgba(2,6,23,.14); padding:0; }
.mp-sar.on { opacity:.92; pointer-events:auto; }
.mp-sar:hover { color:var(--mp-tx); opacity:1; }
.mp-sar svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#mail-fly.mp-vw-on .mp-sar { display:none; }
.mp-ibsep { width:1px; height:18px; background:var(--mp-ln); margin:0 4px; flex:none; align-self:center; }
.mp-ib.ai.on { color:var(--mp-acc); background:var(--mp-on); }
.mp-aic { margin:14px 0 4px; border:1px solid var(--mp-ln); border-radius:12px; background:var(--mp-bg2); padding:12px 14px; font:500 13px/1.6 var(--mp-ff); }
.mp-aic h4 { margin:0 0 6px; font:800 11.5px var(--mp-ff); letter-spacing:.06em; color:var(--mp-sub); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.mp-aic h4 svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.mp-aic ul { margin:0; padding-left:18px; }
.mp-aic .todo { margin-top:6px; font-weight:700; }
.mp-aic .row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.mp-aic .tg { padding:2px 8px; border-radius:6px; background:var(--mp-on); font:700 11.5px var(--mp-ff); white-space:nowrap; -webkit-user-select:text; user-select:text; }
.mp-aic .tg i { font-style:normal; color:var(--mp-sub); font-weight:600; margin-right:4px; }
.mp-aic.err { color:#F43F5E; }
.mp-trb { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 0; padding:8px 12px; border-radius:10px; background:var(--mp-on); font:700 12px var(--mp-ff); white-space:nowrap; }
.mp-trb button { border:0; background:none; padding:0; color:var(--mp-acc); font:700 12px var(--mp-ff); cursor:pointer; }
.mp-trb button:hover { text-decoration:underline; }
.mp-trt { font:500 13.5px/1.65 var(--mp-ff); white-space:pre-wrap; word-wrap:break-word; -webkit-user-select:text; user-select:text; }
.mp-who { display:flex; gap:10px; align-items:center; }
.mp-av { width:36px; height:36px; border-radius:50%; background:var(--mp-on); color:var(--mp-tx); display:flex; align-items:center; justify-content:center; font:800 12.5px var(--mp-ff); flex:none; }
.mp-who .a { min-width:0; }
.mp-who .a b { font:800 14px var(--mp-ff); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-who .a span { font:500 12px var(--mp-ff); color:var(--mp-sub); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-when { font:600 12px var(--mp-ff); color:var(--mp-sub); margin:8px 0 14px; }
.mp-body { font:500 13.5px/1.65 var(--mp-ff); white-space:pre-wrap; word-wrap:break-word; }
.mp-body a { color:var(--mp-acc); }
.mp-html { width:100%; border:0; display:block; background:#fff; border-radius:10px; min-height:60px; }
html[data-theme="dark"] .mp-html { padding:0; }
.mp-atts { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mp-att { height:34px; padding:0 12px; border-radius:9px; border:1px solid var(--mp-ln); background:var(--mp-chip); color:var(--mp-tx); display:inline-flex; align-items:center; gap:7px; font:700 12px var(--mp-ff); white-space:nowrap; max-width:100%; }
.mp-att span { overflow:hidden; text-overflow:ellipsis; }
.mp-att i { font-style:normal; color:var(--mp-sub); font-weight:600; }
.mp-att .rm { border:0; background:none; color:var(--mp-sub); padding:0 0 0 4px; font:700 13px var(--mp-ff); }
.mp-lb { display:block; font:800 11px var(--mp-ff); letter-spacing:.06em; text-transform:uppercase; color:var(--mp-sub); margin:14px 0 6px; }
.mp-lb:first-child { margin-top:0; }
.mp-crow { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--mp-ln); padding:6px 0; }
.mp-crow label { width:58px; font:700 12.5px var(--mp-ff); color:var(--mp-sub); flex:none; }
.mp-crow input { flex:1; border:0; background:none; color:var(--mp-tx); font:500 13.5px var(--mp-ff); height:32px; outline:none; min-width:0; }
.mp-crow .mp-lnk { border:0; background:none; color:var(--mp-sub); font:700 12px var(--mp-ff); padding:0 4px; }
.mp-cbody { width:100%; min-height:180px; margin-top:12px; border:0 !important; padding:4px 0 !important; background:none !important; }
.mp-quote { margin-top:10px; padding:10px 12px; border-left:3px solid var(--mp-ln); color:var(--mp-sub); font:500 12.5px/1.55 var(--mp-ff); white-space:pre-wrap; max-height:220px; overflow:auto; }
.mp-msg { margin-top:14px; padding:10px 12px; border-radius:9px; font:700 12.5px/1.5 var(--mp-ff); display:none; }
.mp-msg.on { display:block; }
.mp-msg.err { background:var(--mp-errB); color:var(--mp-err); }
.mp-msg.ok { background:var(--mp-ok); color:var(--mp-okT); }
.mp-tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.mp-tile { height:104px; border-radius:14px; border:1px solid var(--mp-ln); background:var(--mp-chip); color:var(--mp-tx); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font:800 13.5px var(--mp-ff); }
.mp-tile .lg { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font:900 18px var(--mp-ff); }
.mp-tile.on { border:2px solid var(--mp-pri); box-shadow:0 0 0 2px var(--mp-on); }
.mp-sgrid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:22px; margin-top:18px; }
.mp-help { font:500 13px/1.75 var(--mp-ff); color:var(--mp-sub); padding-top:2px; }
.mp-help b { color:var(--mp-tx); font-weight:800; display:block; margin-bottom:4px; }
.mp-srv { display:grid; grid-template-columns:minmax(0, 1fr) 76px 112px; gap:8px; align-items:center; }
.mp-srv select { height:36px; border:1px solid var(--mp-inb); border-radius:9px; background:var(--mp-in); color:var(--mp-tx); font:600 12.5px var(--mp-ff); padding:0 6px; }
.mp-acts { display:flex; gap:8px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.mp-pill { height:34px; padding:0 12px; border-radius:9px; display:inline-flex; align-items:center; font:800 12.5px var(--mp-ff); white-space:nowrap; background:var(--mp-ok); color:var(--mp-okT); }
.mp-host { display:flex; flex-direction:column; height:100%; min-height:0; background:var(--mp-bg); color:var(--mp-tx); }
.mp-host > .mp-fhd { display:none; }   
.mp-ctxt { font:500 13px/1.6 var(--mp-ff); color:var(--mp-sub); margin-bottom:12px; }
.mp-ct { width:100%; border-collapse:collapse; table-layout:fixed; }
.mp-ct th { text-align:left; font:800 10.5px var(--mp-ff); letter-spacing:.07em; text-transform:uppercase; color:var(--mp-sub); padding:0 6px 8px; border-bottom:1px solid var(--mp-ln); white-space:nowrap; }
.mp-ct td { padding:6px; border-bottom:1px solid var(--mp-ln); font:600 13px var(--mp-ff); vertical-align:middle; }
.mp-ct td input[type=text] { width:100%; height:30px; border:1px solid transparent; border-radius:7px; background:none; color:var(--mp-tx); font:600 12.5px var(--mp-ff); padding:0 6px; outline:none; text-overflow:ellipsis; }
.mp-ct td input[type=text]:hover { border-color:var(--mp-ln); }
.mp-ct td input[type=text]:focus { border-color:var(--mp-acc); background:var(--mp-in); }
.mp-ct td.co input { font-weight:800; }
.mp-ct td.em input { color:var(--mp-acc); }
.mp-ct input[type=checkbox] { width:18px; height:18px; accent-color:var(--mp-pri); margin:0; }
.mp-st { display:inline-flex; height:24px; padding:0 9px; border-radius:6px; align-items:center; font:800 11px var(--mp-ff); white-space:nowrap; }
.mp-st.new { background:var(--mp-ok); color:var(--mp-okT); }
.mp-st.update { background:var(--mp-up); color:var(--mp-upT); }
.mp-st.same { background:none; color:var(--mp-sub); font-weight:600; }
.mp-ct tr.old td { opacity:.55; }
.mp-spin { display:inline-block; width:15px; height:15px; border:2px solid var(--mp-ln); border-top-color:var(--mp-acc); border-radius:50%; animation:mpSpin .8s linear infinite; vertical-align:-3px; }
@keyframes mpSpin { to { transform:rotate(360deg); } }
.mp-load { padding:28px; text-align:center; color:var(--mp-sub); font:600 13px var(--mp-ff); }
.mp-pop { position:absolute; z-index:20; display:flex; flex-direction:row !important; flex-wrap:nowrap !important; width:max-content; gap:6px; padding:6px; border-radius:10px; background:var(--mp-bg); border:1px solid var(--mp-ln); box-shadow:0 10px 28px rgba(2,6,23,.22); animation:mpUp .14s ease-out; }
.mp-pop::after { content:""; position:absolute; left:var(--ax, 50%); bottom:-6px; width:10px; height:10px; margin-left:-5px; background:var(--mp-bg); border-right:1px solid var(--mp-ln); border-bottom:1px solid var(--mp-ln); transform:rotate(45deg); }
.mp-pill { height:28px; padding:0 12px; border:0; border-radius:6px; background:var(--mp-on); color:var(--mp-tx); font:800 11px var(--mp-ff) !important; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; }
.mp-pill:hover { filter:brightness(.96); }
.mp-pill.del { background:#F43F5E; color:#fff; }
.mp-pill.del:hover { background:#e8344f; filter:none; }
#mp-conf .mp-pill { width:auto !important; min-width:0 !important; margin:0 !important; flex:none !important; }   
@keyframes mpUp { from { transform:translateY(6px); opacity:0; } to { transform:none; opacity:1; } }
.mp-btn.rose { background:var(--mp-rose); border-color:var(--mp-rose); color:#fff; font-weight:800; }
.mp-btn.rose:hover { filter:brightness(1.06); background:var(--mp-rose); }
@media (min-width: 861px) {
  html.tsp-mail-open #split-layout-container, html.tsp-mail-open #admin-cal-wrapper { margin-right:var(--mp-pw, 440px) !important; width:auto !important; max-width:calc(100% - var(--mp-pw, 440px)) !important; }
}
#mail-panel, #mail-fly { --mp-uBg:#eef3f8; --mp-uRd:#64748b; }
html[data-theme="dark"] #mail-panel, html[data-tsp-mail]:not([data-tsp-mail="default"]) #mail-panel { --mp-uBg:rgba(255,255,255,.06); --mp-uRd:var(--mp-sub); }
#mail-panel .mp-row.un { background:var(--mp-uBg); }
#mail-panel .mp-row.un.sel { background:var(--mp-on); }
#mail-panel .mp-row.un .mp-r1::before { display:none; }
#mail-panel .mp-row.un .mp-r1 .d::before { content:"NEW"; display:inline-block; margin-right:8px; padding:2px 6px; border-radius:5px; background:var(--mp-pri); color:var(--mp-priT); font:800 9.5px var(--mp-ff); letter-spacing:.06em; vertical-align:1px; }
#mail-panel .mp-row.un .mp-r1, #mail-panel .mp-row.un .mp-r2 { font-weight:800; color:var(--mp-tx); }
#mail-panel .mp-row:not(.un) .mp-r1, #mail-panel .mp-row:not(.un) .mp-r2 { font-weight:500; color:var(--mp-uRd); }
#mail-panel, #mail-fly { --mp-fI:#64748b; --mp-fA:#2f5f8f; }
html[data-theme="dark"] #mail-panel, html[data-theme="dark"] #mail-fly, html[data-tsp-mail]:not([data-tsp-mail="default"]) #mail-panel, html[data-tsp-mail]:not([data-tsp-mail="default"]) #mail-fly { --mp-fI:var(--mp-sub); --mp-fA:var(--mp-acc); }
.mp-fb { color:var(--mp-tx) !important; }
.mp-fb svg { color:var(--mp-fI); }
.mp-fb.pri, .mp-fb.pri svg { color:var(--mp-fA) !important; }
.mp-fb.del, .mp-fb.del svg { color:var(--mp-rose) !important; }
@media (min-width: 861px) {
  html:is(.tsp-mail-open, .tsp-msg-open) body:not(.split-active) #content:not(.tech-split-mode) { grid-template-columns:repeat(auto-fill, minmax(min(400px, 100%), 1fr)) !important; }
}
#mail-fly input:-webkit-autofill, #mail-fly input:-webkit-autofill:hover, #mail-fly input:-webkit-autofill:focus, #mail-fly input:-webkit-autofill:active { -webkit-text-fill-color:var(--mp-tx) !important; caret-color:var(--mp-tx); -webkit-box-shadow:none !important; box-shadow:none !important; background-clip:text !important; transition:background-color 600000s 0s, color 600000s 0s !important; }   
.mp-thb { width:30px; height:30px; border-radius:50%; border:1px solid var(--mp-ln); background:var(--mp-chip); color:var(--mp-sub); display:inline-flex; align-items:center; justify-content:center; flex:none; padding:0; }
.mp-thb:hover, .mp-thb.on { color:var(--mp-tx); background:var(--mp-on); }
.mp-thb svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mp-ths { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; padding:6px 0 2px; }
@media (max-width: 860px) { .mp-ths { grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:12px; } }
.mp-th { border:0; background:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--mp-sub); font:700 10.5px var(--mp-ff); white-space:nowrap; }
.mp-th .c { width:30px; height:30px; border-radius:50%; position:relative; box-shadow:inset 0 0 0 1px rgba(127,127,127,.35); display:flex; align-items:center; justify-content:center; }
.mp-th .c svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.mp-th.on { color:var(--mp-tx); }
.mp-th.on .c { box-shadow:0 0 0 2px var(--mp-bg), 0 0 0 4px var(--mp-tx); }
.mp-th.on .c svg { opacity:1; }
.mp-th.light .c svg { stroke:#0f172a; }
.mp-th:hover .c { transform:scale(1.06); }
.mp-fb.busy svg { animation:mpSpin .8s linear infinite; }
.mp-fb.busy { pointer-events:none; opacity:.75; }
#mail-panel .mp-row.pick { background:var(--mp-on) !important; box-shadow:inset 3px 0 0 var(--mp-rose); }
#mail-panel .mp-row { user-select:none; -webkit-user-select:none; }
.mp-fsel { flex:1; height:32px; border:0; background:none; color:var(--mp-tx); font:600 13.5px var(--mp-ff); outline:none; cursor:pointer; }
.mp-fsel option { background:var(--mp-bg); color:var(--mp-tx); }
html.mp-over-ss #mail-panel { z-index:90010; } html.mp-over-ss #mail-fly { z-index:90011; }
.mp-btn.mp-unr { height:30px; padding:0 11px; font-size:11.5px; flex:none; }
.mp-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.mp-tabsep { flex-basis:100%; height:0; }
.mp-tabp { height:28px; padding:0 10px; border-radius:8px; border:1px solid var(--mp-ln); background:var(--mp-chip); color:var(--mp-sub); font:700 11.5px var(--mp-ff); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.mp-tabp.on { background:var(--mp-chipOn); color:var(--mp-chipOnT); border-color:var(--mp-chipOn); }
#mail-fly .mp-fbd, #mail-fly .mp-fbd * { -webkit-user-select:text; user-select:text; }
#mail-fly .mp-fbd button, #mail-fly .mp-fbd button * { -webkit-user-select:none; user-select:none; }
.mp-view { position:absolute; inset:0; z-index:15; display:flex; flex-direction:column; background:var(--mp-solid, var(--mp-bg)); }
#mail-fly.mp-vw-on #mp-fly-in { visibility:hidden; }   
.mp-vtabs { display:flex; gap:6px; padding:8px 16px; border-bottom:1px solid var(--mp-ln); overflow-x:auto; flex:none; }
.mp-vtabs:empty { display:none; }
.mp-vbd { flex:1; min-height:0; overflow:auto; position:relative; }
.mp-vpdf { position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff; }
.mp-vimg { min-height:100%; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--mp-bg2); }
.mp-vz { position:absolute; inset:0; overflow:auto; scrollbar-gutter:stable; display:flex; background:var(--mp-bg2); cursor:grab; overscroll-behavior:contain; }
.mp-vz { touch-action: pan-x pan-y; }   
html body .mp-view.mp-fs { position: fixed !important; inset: 0 !important; z-index: 2147482000 !important; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }   
.mp-vz.fit { overflow-x:hidden; }
.mp-vz.fit1 { overflow:hidden; }
.mp-vz.drag { cursor:grabbing; user-select:none; }
.mp-vzi { margin:auto; padding:16px; display:flex; flex-direction:column; align-items:center; gap:12px; box-sizing:content-box; }
.mp-vzi canvas, .mp-vzi img { display:block; background:#fff; box-shadow:0 1px 3px rgba(2,6,23,.18), 0 6px 18px rgba(2,6,23,.10); border-radius:2px; -webkit-user-drag:none; }
.mp-vzp { position:absolute; right:14px; bottom:12px; padding:4px 9px; border-radius:7px; background:rgba(15,23,42,.72); color:#fff; font:700 11.5px var(--mp-ff); pointer-events:none; opacity:0; transition:opacity .2s; }
.mp-vzp.on { opacity:1; }
.mp-vimg img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.mp-vtxt { margin:0; padding:16px 20px; font:13px/1.55 ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; color:var(--mp-tx); }
.mp-vsheet, .mp-vsheet *, .mp-vtxt, .mp-vtxt * { -webkit-user-select:text !important; user-select:text !important; cursor:text; }   
.mp-vsheet { padding:0; background:#fff; min-height:100%; min-width:100%; width:max-content; }
.mp-vsheet table { border-collapse:collapse; font:12.5px Arial, Helvetica, sans-serif; color:#111827; }
.mp-vsheet td, .mp-vsheet th { border:1px solid #e2e8f0; padding:5px 9px; white-space:nowrap; max-width:360px; overflow:hidden; text-overflow:ellipsis; }
.mp-vsheet tr:first-child td { background:#f1f5f9; font-weight:700; position:sticky; top:0; }
.mp-ibs { display:flex; gap:2px; flex:none; }
.mp-ib { width:32px; height:32px; border:0; border-radius:8px; background:none; color:var(--mp-tx); display:inline-flex; align-items:center; justify-content:center; padding:0; }
.mp-ib svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mp-ib:hover { background:var(--mp-on); }
.mp-ib.pri { color:var(--mp-fA); }
.mp-ib.del { color:var(--mp-rose); }
.mp-pop.dn::after { bottom:auto; top:-6px; transform:rotate(225deg); }
.mp-chip { position:relative; }
.mp-chip .cb { position:absolute; top:-8px; right:-7px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#F43F5E; color:#fff; font:800 10px/17px var(--mp-ff); text-align:center; box-shadow:0 0 0 2px var(--mp-bg); }   
.mp-chips { overflow-y:visible; }
.mp-lbh { font:600 11px var(--mp-ff); letter-spacing:0; text-transform:none; color:var(--mp-sub); font-style:normal; margin-left:6px; }
.mp-sigx { min-height:92px; max-height:260px; overflow:auto; border:1px solid var(--mp-inb); border-radius:9px; background:var(--mp-in); color:var(--mp-tx); padding:10px 12px; font:14px/1.5 Arial, Helvetica, sans-serif; outline:none; }
.mp-sigx:focus { border-color:var(--mp-acc); }
.mp-sigx:empty::before { content:attr(data-ph); color:#94a3b8; }
.mp-sigx img { max-width:100%; }
.mp-lnk2 { border:0; background:none; color:var(--mp-sub); font:700 12px var(--mp-ff); padding:6px 0 0; text-decoration:underline; }
.mp-sigv { margin-top:8px; border-top:1px dashed var(--mp-ln); padding-top:8px; }
.mp-sigh label { display:inline-flex; align-items:center; gap:6px; font:700 11.5px var(--mp-ff); color:var(--mp-sub); cursor:pointer; }
.mp-sigh input { width:15px; height:15px; margin:0; accent-color:var(--mp-pri); }
.mp-sigb { margin-top:6px; background:var(--mp-bg2); border:1px solid var(--mp-ln); color:var(--mp-tx); border-radius:9px; padding:10px 12px; font:14px/1.5 Arial, Helvetica, sans-serif; }
.mp-sigv.off .mp-sigb { opacity:.35; }
.mp-fb .lb { position:relative; padding:3px 0; }
.mp-fb .lb::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:currentColor; transform:scaleX(0); transform-origin:center; transition:transform .18s ease; }
.mp-fb:not([disabled]):hover .lb::after { transform:scaleX(1); }
.mp-fb:hover { background:none !important; }
.mp-fb.del { color:var(--mp-rose) !important; }
.mail-badge-host { position:relative; }
.mail-badge-count { display:none; position:absolute; top:-8px; right:-8px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#ef4444; color:#fff; font:800 10px/17px Inter, sans-serif; text-align:center; z-index:2; pointer-events:none; }
.mail-badge-count.on { display:block; }
.mail-badge-total { display:none; position:absolute; bottom:-8px; right:-8px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#64748b; color:#fff; font:800 10px/17px Inter, sans-serif; text-align:center; z-index:2; pointer-events:none; box-shadow:0 0 0 2px #fff; font-variant-numeric:tabular-nums; }   
.mail-badge-total.on { display:block; }
html.tsp-thorn #tech-filter-box .mail-badge-total { box-shadow:0 0 0 2px #E8E8EC; }
.menu-item .mail-badge-count { position:static; margin-left:auto; }
@media (max-width: 860px) {
  #mail-panel { width:100%; border-left:0; }
  #mail-fly { right:0 !important; left:0 !important; width:auto !important; border-radius:0; z-index:9991; }
  .mp-grip { display:none; }
  .mp-back { display:inline-flex; }
  .mp-fhd .mp-cls { display:none; }
  .mp-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mp-sgrid { grid-template-columns:minmax(0, 1fr); }
  .mp-ct th.hm, .mp-ct td.hm { display:none; }
}