/* AllPanelExch (.net) — replica of the live panel screens.
   Class language is its own: nothing here reuses the row/tap/pin/kwboard/togs set on the
   sibling .com build, nor the mast/press/gutter set used elsewhere on the network. */
:root{
  --sky-a:#0093D0; --sky-b:#0A5E7E; --sky-mid:#0787C6;
  --white:#FFFFFF; --ink:#1E2B33; --ink-2:#4A5B66; --faint:#8FA3AE;
  --field:#EDF2F9; --field-2:#E4E7EA; --line:#D8E2EA;
  --blue:#0089CC; --blue-d:#0673AC; --blue-soft:#59AEDB;
  --green:#1D7A33; --green-d:#166126; --wa:#25D366;
  --rd:6px; --rd-lg:10px; --hold:1080px;
  --face:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--ink);font:16px/1.7 var(--face);
  background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 620px,var(--sky-b) 100%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--blue-d)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--ink);font-weight:700}
h1{font-size:clamp(1.7rem,4vw,2.5rem)}
h2{font-size:clamp(1.25rem,2.6vw,1.75rem);margin-top:1.6em}
h3{font-size:1.1rem;margin-top:1.3em}
p{margin:0 0 1.05em}
.band{width:100%;max-width:var(--hold);margin:0 auto;padding:0 20px}
.dash{position:absolute;left:-9999px;top:0;z-index:999;background:var(--wa);color:#04250F;
  padding:10px 16px;font-weight:700}
.dash:focus{left:0}

/* ------------------------------------------------- cap (header) */
.cap{position:sticky;top:0;z-index:60;width:100%;max-width:100vw;background:rgba(0,147,208,.97);
  backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.22)}
.cap-in{display:flex;align-items:center;gap:14px;min-height:60px}
.sign{display:flex;align-items:center;flex:none;margin-right:auto}
.sign img{height:34px;width:auto;display:block}
.tabs{display:flex;align-items:center;gap:2px}
.tabs a{font-size:.94rem;font-weight:600;color:#EAF6FD;text-decoration:none;padding:8px 11px;border-radius:var(--rd)}
.tabs a:hover{background:rgba(255,255,255,.18);color:#fff}
.tabs a[aria-current="page"]{background:#fff;color:var(--blue-d)}
.knob{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  text-decoration:none;border:0;border-radius:var(--rd);cursor:pointer;padding:11px 20px;font-size:1rem}
.knob-wa{background:var(--wa)!important;color:#04250F!important}
.knob-wa:hover{background:#2FE372!important}
.knob-blue{background:var(--blue)!important;color:#fff!important}
.knob-blue:hover{background:var(--blue-d)!important}
.knob-soft{background:var(--blue-soft)!important;color:#fff!important}
.knob-green{background:var(--green)!important;color:#fff!important}
.knob-lg{padding:14px 28px;font-size:1.08rem}
.opn{display:none;flex:none;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);
  color:#fff;width:42px;height:40px;border-radius:var(--rd);cursor:pointer;font-size:1.15rem;line-height:1}
@media(max-width:940px){
  .tabs{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--sky-mid);padding:6px 16px 12px;max-height:0;overflow:hidden;visibility:hidden}
  .tabs.out{max-height:80vh;overflow:auto;visibility:visible}
  .tabs a{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.16)}
  .opn{display:block;order:3}
  .cap-in .knob-wa{display:none}
}

/* --------------------------------------- gate: the panel replica card */
.gatewrap{padding:34px 0 38px;text-align:center}
.gate-mark{margin:0 auto 22px;max-width:210px}
.gate-mark img{width:100%;height:auto;display:block}
.gate{max-width:440px;margin:0 auto;background:var(--white);border-radius:var(--rd-lg);
  box-shadow:0 10px 34px rgba(0,0,0,.22);padding:26px 24px 24px;text-align:left}
.gate h2{margin:0 0 18px;text-align:center;font-size:1.45rem;font-weight:400;color:var(--blue-d)}
.gate h2 span{font-size:1.1rem}
.gate-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:.9rem;margin:-6px 0 16px}
.gate-or::before,.gate-or::after{content:'';flex:1;height:1px;background:var(--line)}
.slotrow{display:flex;margin-bottom:14px;border-radius:var(--rd);overflow:hidden;
  border:1px solid var(--line);text-decoration:none}
.slotrow>span{flex:1;background:var(--field);padding:12px 14px;color:var(--ink-2);font-size:1rem}
.slotrow>span.ph{color:var(--faint)}
.slotrow i{flex:none;width:48px;background:var(--field-2);display:flex;align-items:center;
  justify-content:center;border-left:1px solid var(--line)}
.slotrow i svg{width:19px;height:19px;fill:#33414B}
.slotrow:hover{border-color:var(--blue)}
.slotrow.tel>span:first-child{flex:1;display:flex;align-items:center;gap:8px;background:var(--white)}
.flagin{flex:none;width:20px;height:14px;border-radius:2px;overflow:hidden;display:block;
  background:linear-gradient(180deg,#FF9933 0 33%,#fff 33% 66%,#138808 66% 100%);
  border:1px solid var(--line)}
.slotrow.tel .verify{flex:none;background:var(--green);color:#fff;font-weight:700;font-size:.93rem;
  display:flex;align-items:center;white-space:nowrap;padding:0 18px}
.gate .knob{width:100%;margin-top:4px}
.gate-link{display:block;text-align:right;margin:10px 0 0;font-size:.95rem;color:var(--blue-d)}
.gate-alt{text-align:center;margin:14px 0 0;font-weight:700;font-size:.98rem;color:var(--ink)}
.gate-alt a{color:var(--blue);text-decoration:none}
.gate-fine{text-align:center;margin:14px 0 0;font-size:.76rem;color:var(--faint);line-height:1.5}

/* --------------------------------------------------------- content */
.sheetwrap{background:var(--white);border-radius:var(--rd-lg) var(--rd-lg) 0 0;
  box-shadow:0 -4px 30px rgba(0,0,0,.14);padding:6px 0 40px;margin-top:8px}
.pathbar{font-size:.85rem;color:var(--faint);margin:20px 0 4px}
.pathbar a{color:var(--ink-2);text-decoration:none}
.brief{background:#EAF5FC;border-left:4px solid var(--blue);border-radius:0 var(--rd) var(--rd) 0;
  padding:17px 20px;margin:20px 0}
.brief p{margin:0;font-size:1.04rem}
.grid{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.grid th,.grid td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.grid th{background:#F2F7FB;font-weight:700}
.grid td:first-child{color:var(--blue-d);font-weight:600}
.scroll{overflow-x:auto;margin:18px 0}
.rungs{counter-reset:r;list-style:none;padding:0;margin:20px 0}
.rungs li{counter-increment:r;position:relative;padding:0 0 16px 50px}
.rungs li::before{content:counter(r);position:absolute;left:0;top:-2px;width:32px;height:32px;
  border-radius:var(--rd);background:var(--blue);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:700px){.pair{grid-template-columns:1fr}}
.pair>div{background:#F7FAFC;border:1px solid var(--line);border-radius:var(--rd);padding:16px 18px}
.pair h3{margin-top:0}

/* ------------------------------------------------------------ asks */
.asks details{border:1px solid var(--line);border-radius:var(--rd);margin-bottom:8px;background:#FBFDFE}
.asks summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:1.02rem;list-style:none}
.asks summary::-webkit-details-marker{display:none}
.asks summary::after{content:'+';float:right;color:var(--blue);font-size:1.3rem;line-height:1}
.asks details[open] summary::after{content:'\2212'}
.asks div{padding:0 16px 14px;color:var(--ink-2);font-size:.95rem}

/* ---------------------------------------------- roundoff + searches */
.roundoff{margin:38px 0 22px;padding:20px 22px;background:#F2F7FB;border:1px solid var(--line);
  border-left:5px solid var(--blue);border-radius:var(--rd);max-height:330px;overflow-y:auto}
.roundoff h2{margin-top:0;font-size:1.24rem}
.roundoff h3{font-size:1rem;color:var(--blue-d)}
.roundoff p,.roundoff li,.roundoff dd,.roundoff td{font-size:.92rem;color:var(--ink-2)}
.roundoff ul,.roundoff ol{margin:0 0 1em;padding-left:1.2em}
.roundoff dl{margin:0 0 1em}
.roundoff dt{font-weight:700;color:var(--ink);margin-top:.55em}
.roundoff dd{margin:0 0 .35em}
.roundoff table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1em}
.roundoff th,.roundoff td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.searches{margin:24px 0 10px}
.searches h2{font-size:1.18rem;margin-bottom:.65em}
.searches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.searches li{font-size:.8rem;color:var(--ink-2);background:#F2F7FB;border:1px solid var(--line);
  border-radius:99px;padding:7px 14px}

/* -------------------------------------------------------- foot-bar */
.foot-bar{background:var(--sky-a);color:#fff;padding:26px 0 20px;font-size:.92rem}
.fb-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:26px}
@media(max-width:820px){.fb-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fb-cols{grid-template-columns:1fr}}
.foot-bar img.fmark{height:30px;width:auto;margin-bottom:10px;display:block}
.foot-bar h3{font-size:.98rem;color:#fff;margin:0 0 .6em}
.foot-bar ul{list-style:none;margin:0;padding:0}
.foot-bar li{margin-bottom:6px}
.foot-bar a{color:#E4F4FE;text-decoration:none;font-weight:600}
.foot-bar a:hover{color:#fff;text-decoration:underline}
.rings{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 4px}
.rings a{display:inline-flex;width:31px;height:31px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--rd);color:#E4F4FE}
.rings a:hover{background:#fff;color:var(--blue-d)}
.rings svg{width:16px;height:16px;fill:currentColor}
.tpl{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 12px;
  background:rgba(255,255,255,.16);border-radius:var(--rd);color:#fff;text-decoration:none;font-size:.84rem}
.tpl svg{width:15px;height:15px;fill:#00B67A;flex:none}
.fb-end{border-top:1px solid rgba(255,255,255,.3);margin-top:22px;padding-top:15px;
  font-size:.83rem;color:#DCF1FB}

/* ------------------------------------------------------- wa chip */
.wachip{position:fixed;right:18px;bottom:18px;z-index:80;width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.3);animation:wach 2.4s infinite}
.wachip svg{width:32px;height:32px;fill:#fff}
@keyframes wach{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.wachip{animation:none}}
:focus-visible{outline:3px solid #fff;outline-offset:2px}