/* Zoho Mail page only. Loaded via `extra: crm, p-mail`. Every class is scoped .pxh- */
.pxh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pxh-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================= hero: custom-domain inbox + Streams ================= */
.pxh-hero .pxh-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.pxh-hero .pg-h1 { max-width: 15ch; }
.pxh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.pxh-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #fff; border: 1px solid #D6E3F1; box-shadow: 0 8px 18px -14px rgba(8,34,56,.5); font: 600 13.5px/1.25 var(--f-body); color: #082238; }
.pxh-chips .pxh-ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #E4EEF8; color: #226DB4; box-sizing: border-box; }

.pxh-mbx { position: relative; margin: 0; padding: 0 0 70px; perspective: 1400px; }
.pxh-mbx__win { position: relative; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 60px 100px -50px rgba(8,34,56,.55); overflow: hidden; transform-style: preserve-3d; will-change: transform; }
.pxh-mbx__bar { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid #EDF2F6; background: linear-gradient(180deg, #FBFCFE, #F5F8FB); }
.pxh-mbx__bar b { font: 700 14px/1.2 var(--f-display); color: #082238; }
.pxh-mbx__dom { padding: 4px 9px; border-radius: 8px; background: #E4EEF8; font: 600 12px/1 var(--f-body); color: #226DB4; }
.pxh-mbx__bar em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #F3F7F9; font: 600 11px/1 var(--f-body); font-style: normal; color: #64748B; }
.pxh-mbx__body { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 318px; }
.pxh-mbx__rail { display: grid; align-content: start; gap: 4px; margin: 0; padding: 12px 10px; list-style: none; background: #F7FAFC; border-right: 1px solid #EDF2F6; }
.pxh-mbx__rail li { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 11px; transition: background .35s, box-shadow .35s; }
.pxh-mbx__rail li.is-on { background: #fff; box-shadow: 0 6px 14px -10px rgba(8,34,56,.45); }
.pxh-mbx__rail li.is-ping { background: #FFF6DC; }
.pxh-mbx__rail i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font: 700 12.5px/1 var(--f-display); font-style: normal; }
.pxh-mbx__rail i .pxh-ic { width: 15px; height: 15px; }
.pxh-mbx__rail span { min-width: 0; }
.pxh-mbx__rail b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.25 var(--f-body); color: #082238; }
.pxh-mbx__rail small { display: block; font: 500 10.5px/1.3 var(--f-body); color: #64748B; }
.pxh-mbx__streams { margin-top: 8px; border-top: 1px dashed #DCE5EE; border-radius: 0 0 11px 11px !important; padding-top: 12px !important; }
.pxh-mbx__list { min-width: 0; padding: 12px 14px; }
.pxh-mbx__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 4px 10px; font: 700 15px/1.2 var(--f-display); color: #082238; }
.pxh-mbx__h span { font: 600 10.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #94A3B8; }
.pxh-mbx__msgs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pxh-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid #EDF2F6; }
.pxh-msg.is-unread { background: #F4F9FE; border-color: #D3E4F5; }
.pxh-msg.is-unread .pxh-msg__t b { font-weight: 700; }
.pxh-msg__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font: 700 12.5px/1 var(--f-display); font-style: normal; }
.pxh-msg__t { min-width: 0; }
.pxh-msg__t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 var(--f-body); color: #082238; }
.pxh-msg__t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.3 var(--f-body); color: #64748B; }
.pxh-msg em { font: 600 11px/1 var(--f-body); font-style: normal; color: #94A3B8; font-variant-numeric: tabular-nums; }
.pxh-msg.is-new { animation: pxhIn .7s cubic-bezier(.2,.7,.1,1) both; }
.pxh-msg.is-out { animation: pxhOut .45s ease both; }
@keyframes pxhIn { from { opacity: 0; transform: translateY(-16px) scale(.97); } }
@keyframes pxhOut { to { opacity: 0; transform: translateY(12px); } }

.pxh-stream { position: absolute; z-index: 3; right: -14px; bottom: 0; width: min(330px, 78%); padding: 14px 15px; border-radius: 18px; background: #fff; border: 1px solid #F3DFA6; box-shadow: 0 34px 60px -30px rgba(8,34,56,.55); will-change: transform; }
.pxh-stream__h { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 700 13px/1.2 var(--f-display); color: #082238; }
.pxh-stream__h .pxh-ic { color: #D99A00; }
.pxh-stream__mail { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 7px 9px; border-radius: 10px; background: #FFF8E6; font: 600 11.5px/1.35 var(--f-body); color: #6B5310; }
.pxh-stream__mail .pxh-ic { width: 14px; height: 14px; }
.pxh-stream__c { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxh-stream__c li { display: flex; align-items: flex-start; gap: 8px; font: 500 12px/1.45 var(--f-body); color: #334155; }
.pxh-stream__c i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font: 700 10.5px/1 var(--f-display); font-style: normal; }
.pxh-stream__c b { color: #082238; }
.pxh-stream__c u { text-decoration: none; padding: 0 3px; border-radius: 4px; background: #E4EEF8; color: #226DB4; font-weight: 600; }
.pxh-stream__c li.is-wait { opacity: 0; transform: translateY(6px); }
.pxh-stream__c li { transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.1,1); }

.pxh-float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: #082238; color: #fff; font: 600 12px/1 var(--f-body); box-shadow: 0 16px 30px -16px rgba(8,34,56,.7); white-space: nowrap; will-change: transform; }
.pxh-float .pxh-ic { width: 15px; height: 15px; color: #3FB97A; }
.pxh-float--a { top: -16px; right: 18px; }
.pxh-float--b { left: -18px; bottom: 96px; background: #fff; color: #082238; border: 1px solid #E2E8F0; }
.pxh-float--b .pxh-ic { color: #EA580C; }

/* ================= 01. edges as an inbox ================= */
.pxh-edges { background: linear-gradient(180deg, #fff, #F3F7F9); overflow-x: clip; }
.pxh-ebox { margin-top: 40px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 80px -56px rgba(8,34,56,.45); overflow: hidden; }
.pxh-ebox__bar { display: flex; align-items: center; gap: 7px; padding: 14px 20px; border-bottom: 1px solid #EDF2F6; background: #F7FAFC; }
.pxh-ebox__bar span { width: 10px; height: 10px; border-radius: 50%; background: #D7E0E8; }
.pxh-ebox__bar b { margin-left: 10px; font: 700 13.5px/1 var(--f-display); color: #334155; }
.pxh-elist { margin: 0; padding: 0; list-style: none; }
.pxh-e { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 250px); gap: 20px; align-items: start; padding: 24px 28px 24px 30px; border-top: 1px solid #EDF2F6; transition: background .3s; }
.pxh-e:first-child { border-top: 0; }
.pxh-e::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); transform: scaleY(.35); transform-origin: center; transition: transform .45s cubic-bezier(.2,.7,.1,1); }
.pxh-e:hover { background: #FAFCFE; }
.pxh-e:hover::before, .pxh-e.is-in::before { transform: scaleY(1); }
.pxh-e__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.pxh-e__ic .pxh-ic { width: 25px; height: 25px; }
.pxh-e__from { margin: 0 0 4px; font: 600 12px/1.3 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #94A3B8; }
.pxh-e h3 { margin: 0 0 6px; font: 700 20px/1.3 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxh-e__t p:last-child { overflow-wrap: anywhere; margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; max-width: 62ch; }
.pxh-e__vs { display: grid; gap: 5px; justify-self: end; margin: 4px 0 0; padding: 12px 14px; border-radius: 14px; background: #F7FAFC; border: 1px solid #E8EEF4; font: 500 12.5px/1.4 var(--f-body); color: #64748B; text-align: right; }
.pxh-e__vs b { font: 700 14px/1.3 var(--f-display); color: var(--c); }
.pxh-js .pxh-e { opacity: 0; transform: translateX(-18px); transition: opacity .6s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 80ms), transform .7s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 80ms), background .3s; }
.pxh-js .pxh-e.is-in { opacity: 1; transform: none; }

/* ================= 02. switch weekend checklist ================= */
.pxh-switch { overflow-x: clip; }
.pxh-switch__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); margin-top: 40px; align-items: start; }
.pxh-switch__side { position: sticky; top: 104px; display: grid; gap: 16px; }
.pxh-src { display: grid; gap: 8px; }
.pxh-src button { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 14px; border: 1.5px solid #E2E8F0; background: #fff; font: 600 15px/1.2 var(--f-body); color: #334155; cursor: pointer; text-align: left; transition: border-color .25s, background .25s, color .25s; }
.pxh-src button:hover { border-color: #B9CFE4; }
.pxh-src button.is-on { border-color: #226DB4; background: #F2F7FC; color: #082238; }
.pxh-src button:focus-visible { outline: 3px solid #00A3D9; outline-offset: 2px; }
.pxh-src__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, #fff); }
.pxh-flow { padding: 20px; border-radius: 20px; background: #082238; color: #fff; box-shadow: 0 30px 60px -40px rgba(8,34,56,.8); }
.pxh-flow__lbl { margin: 0 0 12px; font: 600 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #9FB8CC; }
.pxh-flow__pipe { position: relative; height: 34px; margin-bottom: 14px; }
.pxh-flow__pipe i { position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: repeating-linear-gradient(90deg, #2C4E6B 0 6px, transparent 6px 11px); }
.pxh-flow__env { position: absolute; z-index: 1; top: 0; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #1A73E8; color: #fff; transition: left .8s cubic-bezier(.6,0,.2,1), background .5s; }
.pxh-flow.is-m .pxh-flow__env { background: #0F6CBD; }
.pxh-flow.is-zoho .pxh-flow__env { left: calc(100% - 34px); background: #FFB81C; color: #082238; }
.pxh-flow__dest { margin: 0 0 16px; }
.pxh-flow__dest b { display: block; font: 700 22px/1.2 var(--f-display); color: #fff; }
.pxh-flow.is-zoho .pxh-flow__dest b { color: #FFD166; }
.pxh-flow__dest span { font: 500 13.5px/1.45 var(--f-body); color: #BFD3E2; }
.pxh-flow__prog span { display: block; height: 6px; border-radius: 6px; background: #1C3A55; overflow: hidden; }
.pxh-flow__prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #00A3D9, #3FB97A); transition: width .5s cubic-bezier(.2,.7,.1,1); }
.pxh-flow__prog small { display: block; margin-top: 8px; font: 500 13px/1 var(--f-body); color: #BFD3E2; }
.pxh-flow__prog b { color: #fff; }

.pxh-clip { position: relative; padding: 30px clamp(18px, 3vw, 36px) 26px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 80px -60px rgba(8,34,56,.5); }
.pxh-clip::before { content: ""; position: absolute; left: 50%; top: -11px; width: 120px; height: 22px; margin-left: -60px; border-radius: 8px; background: linear-gradient(180deg, #D7E0E8, #BFCBD6); box-shadow: 0 4px 10px -6px rgba(8,34,56,.5); }
.pxh-clip__tag { position: absolute; right: 22px; top: 18px; margin: 0; padding: 4px 10px; border-radius: 999px; background: #F3F7F9; font: 600 11px/1 var(--f-body); color: #64748B; }
.pxh-phase + .pxh-phase { margin-top: 26px; }
.pxh-phase h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.pxh-phase h3 span { padding: 5px 10px; border-radius: 8px; background: #E4EEF8; font: 700 11.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #226DB4; }
.pxh-todo { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pxh-todo li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 12px 12px; border-radius: 14px; transition: background .4s; }
.pxh-todo li > i { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 9px; border: 2px solid #CBD7E2; background: #fff; color: transparent; transition: background .35s, border-color .35s, color .35s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.pxh-todo li > i .pxh-ic { width: 17px; height: 17px; stroke-width: 2.6; }
.pxh-todo b { display: block; margin-bottom: 3px; font: 700 16px/1.35 var(--f-display); color: #082238; }
.pxh-todo p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pxh-todo li.is-done > i { border-color: #3FB97A; background: #3FB97A; color: #fff; transform: scale(1.06); }
.pxh-todo li.is-done b { color: #0B5E3A; }
.pxh-todo li.is-now { background: #F2F7FC; }
.pxh-todo li[data-sw-mx].is-done { background: #FFF8E6; }
.pxh-clip__end { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; padding: 14px 16px; border-radius: 14px; background: #EEF8F2; font: 500 14.5px/1.55 var(--f-body); color: #1F4D36; }
.pxh-clip__end .pxh-ic { margin-top: 2px; color: #089949; }
.pxh-swap { animation: pxhFade .45s ease both; }
@keyframes pxhFade { from { opacity: .2; } }

/* ================= 03. DNS records helper (dark band) ================= */
.pxh-dns__box { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 22px; margin-top: 40px; align-items: start; }
.pxh-dns__in { position: sticky; top: 100px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.pxh-dns__tag { display: inline-block; margin: 0 0 16px; padding: 5px 10px; border-radius: 999px; background: rgba(255,184,28,.16); font: 600 11.5px/1 var(--f-body); color: #FFD166; }
.pxh-dns__f { display: grid; gap: 8px; }
.pxh-dns__f > span, .pxh-dns__fs legend { font: 600 13px/1.3 var(--f-body); color: #BFD3E2; }
.pxh-dns__f input { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(3,16,30,.45); font: 600 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
.pxh-dns__f input:focus { outline: none; border-color: #FFB81C; box-shadow: 0 0 0 3px rgba(255,184,28,.25); }
.pxh-dns__f input[aria-invalid="true"] { border-color: #F87171; }
.pxh-dns__err { margin: 8px 0 0; font: 500 13px/1.4 var(--f-body); color: #FCA5A5; }
.pxh-dns__fs { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.pxh-dns__fs legend { margin-bottom: 10px; padding: 0; }
.pxh-dns__fs > label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font: 500 14.5px/1.4 var(--f-body); color: #E6EEF5; cursor: pointer; }
.pxh-dns__fs input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #FFB81C; }
.pxh-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(3,16,30,.45); border: 1px solid rgba(255,255,255,.14); }
.pxh-seg label { flex: 1; position: relative; }
.pxh-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pxh-seg span { display: block; padding: 9px 6px; border-radius: 9px; text-align: center; font: 600 13.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #BFD3E2; transition: background .25s, color .25s; }
.pxh-seg input:checked + span { background: #FFB81C; color: #082238; }
.pxh-seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 1px; }
.pxh-dns__hint { margin: 10px 0 0; font: 500 13px/1.5 var(--f-body); color: #9FB8CC; }

.pxh-dns__out { min-width: 0; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.pxh-dns__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pxh-dns__head p { margin: 0; font: 500 14px/1.2 var(--f-body); color: #64748B; white-space: nowrap; }
.pxh-dns__head b { font: 700 16px/1 var(--f-display); color: #082238; }
.pxh-dns__meter { flex: 1; height: 8px; border-radius: 8px; background: #E2E8F0; overflow: hidden; }
.pxh-dns__meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00A3D9, #3FB97A); transition: width .45s cubic-bezier(.2,.7,.1,1); }
.pxh-recs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxh-rec { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 12px 14px; border-radius: 14px; background: #F7FAFC; border: 1px solid #E8EEF4; transition: background .3s, border-color .3s; }
.pxh-rec.is-added { background: #EEF8F2; border-color: #BFE7CF; }
.pxh-rec.is-new { animation: pxhIn .5s cubic-bezier(.2,.7,.1,1) both; }
.pxh-rec__type { display: grid; place-items: center; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font: 800 11.5px/1 var(--f-display); letter-spacing: .04em; }
.pxh-rec__main { min-width: 0; }
.pxh-rec__lbl { margin: 0 0 4px; font: 700 13.5px/1.3 var(--f-display); color: #082238; }
.pxh-rec__lbl small { margin-left: 6px; font: 500 12px/1 var(--f-body); color: #64748B; }
.pxh-rec dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 12.5px; }
.pxh-rec dt { font: 600 11px/1.6 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #94A3B8; }
.pxh-rec dd { margin: 0; min-width: 0; font: 500 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0F2A40; overflow-wrap: anywhere; }
.pxh-rec dd em { font-style: normal; color: #B45309; }
.pxh-rec__tip { margin: 6px 0 0; font: 500 12.5px/1.45 var(--f-body); color: #64748B; }
.pxh-rec__act { display: grid; gap: 6px; justify-items: end; }
.pxh-rec__act button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid #D5DFE8; background: #fff; font: 600 12.5px/1 var(--f-body); color: #082238; cursor: pointer; white-space: nowrap; }
.pxh-rec__act button .pxh-ic { width: 14px; height: 14px; }
.pxh-rec__act button:hover { border-color: #226DB4; }
.pxh-rec__act button:focus-visible { outline: 2px solid #00A3D9; outline-offset: 2px; }
.pxh-rec__act button[aria-pressed="true"] { background: #3FB97A; border-color: #3FB97A; color: #fff; }
.pxh-rec__act button.is-copied { border-color: #3FB97A; color: #087A3B; }
.pxh-dns__msg { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #F3F7F9; font: 500 14px/1.5 var(--f-body); color: #334155; }
.pxh-dns__msg.is-done { background: #FFF6DC; color: #5B4300; }
.pxh-dns__note { max-width: 78ch; margin: 22px 0 0; font: 400 14.5px/1.6 var(--f-body); color: #9FB8CC; }

.pxh-adv__note { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #F3F7F9; border: 1px solid #E2E8F0; font: 500 14.5px/1.55 var(--f-body); color: #475569; max-width: 60ch; }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .pxh-mbx__body { grid-template-columns: 150px minmax(0, 1fr); }
  .pxh-e { grid-template-columns: 52px minmax(0, 1fr); }
  .pxh-e__vs { grid-column: 2; justify-self: start; text-align: left; }
}
@media (max-width: 980px) {
  .pxh-hero .pxh-hero__grid { grid-template-columns: 1fr; }
  .pxh-mbx { max-width: 640px; margin-top: 12px; }
  .pxh-switch__grid { grid-template-columns: 1fr; }
  .pxh-switch__side { position: sticky; top: 72px; z-index: 5; grid-template-columns: minmax(0, 1fr); }
  .pxh-src { grid-template-columns: 1fr 1fr; }
  .pxh-src button { font-size: 13.5px; padding: 11px 12px; }
  .pxh-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 14px 16px; }
  .pxh-flow__lbl { grid-column: 1 / -1; margin-bottom: 4px; }
  .pxh-flow__pipe { margin: 0; }
  .pxh-flow__dest { margin: 0; }
  .pxh-flow__dest b { font-size: 17px; }
  .pxh-flow__dest span { display: none; }
  .pxh-flow__prog { grid-column: 1 / -1; margin-top: 6px; }
  .pxh-dns__box { grid-template-columns: 1fr; }
  .pxh-dns__in { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .pxh-mbx { padding-bottom: 0; }
  .pxh-mbx__body { grid-template-columns: 1fr; min-height: 0; }
  .pxh-mbx__rail { display: flex; gap: 6px; overflow: hidden; padding: 10px; border-right: 0; border-bottom: 1px solid #EDF2F6; }
  .pxh-mbx__rail li { flex: none; padding: 6px 8px; }
  .pxh-mbx__rail small, .pxh-mbx__streams, .pxh-mbx__rail li:nth-child(4) { display: none !important; }
  .pxh-mbx__h span { display: none; }
  .pxh-msg:nth-child(n+4) { display: none; }
  .pxh-stream { position: relative; right: auto; width: auto; margin: -14px 12px 0; }
  .pxh-float { display: none; }
  .pxh-mbx__dom { display: none; }
  .pxh-e { grid-template-columns: 1fr; gap: 12px; padding: 22px 18px 22px 22px; }
  .pxh-e__vs { grid-column: 1; }
  .pxh-e__ic { width: 44px; height: 44px; border-radius: 13px; }
  .pxh-e h3 { font-size: 18.5px; }
  .pxh-switch__side { top: 84px; gap: 8px; }
  .pxh-src { gap: 6px; }
  .pxh-src button { padding: 8px 10px; font-size: 12.5px; gap: 7px; border-radius: 11px; }
  .pxh-src__dot { width: 9px; height: 9px; }
  .pxh-flow { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 14px; border-radius: 14px; }
  .pxh-flow__lbl { grid-column: 1; margin: 0; font-size: 10.5px; }
  .pxh-flow__pipe { display: none; }
  .pxh-flow__dest { grid-column: 1; }
  .pxh-flow__dest b { font-size: 16px; }
  .pxh-flow__prog { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }
  .pxh-clip { padding: 26px 14px 18px; }
  .pxh-clip__tag { position: static; display: inline-block; margin-bottom: 12px; }
  .pxh-todo li { grid-template-columns: 26px minmax(0, 1fr); gap: 11px; padding: 10px 6px; }
  .pxh-todo li > i { width: 26px; height: 26px; }
  .pxh-rec { grid-template-columns: 1fr; }
  .pxh-rec__type { justify-self: start; padding: 0 10px; }
  .pxh-rec__act { grid-auto-flow: column; justify-content: start; }
  .pxh-dns__in, .pxh-dns__out { padding: 16px; }
  .pxh-dns__head p { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .pxh-js .pxh-e { opacity: 1; transform: none; transition: none; }
  .pxh-msg.is-new, .pxh-rec.is-new, .pxh-swap { animation: none; }
  .pxh-flow__env, .pxh-todo li > i, .pxh-stream__c li { transition: none; }
}