@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* PropXConnect v2.3.0 — palette + type aligned to the propxconnect.com design.
   Libre Franklin (Franklin Gothic lineage) carries display and body; IBM Plex
   Mono carries every figure. Teal is the brand; ORANGE IS ONLY EVER AN ACTION,
   so --pxc-action is deliberately separate from --pxc-accent.
   Flip the whole thing to the TradeSaber orange palette with the shortcode:
   [propxconnect palette="orange"]  */

#pxc-root{
  --pxc-bg:#0C1417; --pxc-surface:#111C21; --pxc-surface-2:#16242A; --pxc-surface-3:#1C2F36;
  --pxc-border:#1E3239; --pxc-border-2:#28414A;
  --pxc-text:#EDF3F5; --pxc-muted:#8FA6AE; --pxc-muted-2:#5A737D;
  --pxc-accent:#0FA0CC; --pxc-accent-deep:#00647F; --pxc-accent-soft:rgba(15,160,204,.13);
  --pxc-on-accent:#FFFFFF;
  --pxc-action:#EA6D22; --pxc-action-deep:#C4551A; --pxc-on-action:#0C1417;
  --pxc-pos:#38CE8D; --pxc-pos-soft:rgba(56,206,141,.13);
  --pxc-neg:#E85F63;
  --pxc-info:#57CDF9; --pxc-info-soft:rgba(87,205,249,.12);
  --pxc-warn:#E3A008; --pxc-warn-soft:rgba(227,160,8,.15);
  --pxc-shadow:0 18px 44px -26px rgba(0,0,0,.85);
  --pxc-mono:'IBM Plex Mono',ui-monospace,monospace;
  --pxc-disp:'Libre Franklin',system-ui,sans-serif;
  --pxc-body:'Libre Franklin',system-ui,sans-serif;

  display:block;font-family:var(--pxc-body);color:var(--pxc-text);font-size:15px;line-height:1.5;
  background:var(--pxc-bg);overflow:hidden;
  /* full-bleed: break out of the theme's constrained content column */
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  -webkit-font-smoothing:antialiased;
}
#pxc-root[data-theme="light"]{
  --pxc-bg:#F4F7F8; --pxc-surface:#FFFFFF; --pxc-surface-2:#EDF2F4; --pxc-surface-3:#E2EBEE;
  --pxc-border:#D5E1E5; --pxc-border-2:#B8CCD3;
  --pxc-text:#08161A; --pxc-muted:#4F6771; --pxc-muted-2:#84999F;
  --pxc-accent:#00647F; --pxc-accent-deep:#004A5F; --pxc-accent-soft:rgba(0,100,127,.09);
  --pxc-on-accent:#FFFFFF;
  --pxc-action:#D25710; --pxc-action-deep:#AF470C; --pxc-on-action:#FFFFFF;
  --pxc-pos:#0E7F52; --pxc-pos-soft:rgba(14,127,82,.12);
  --pxc-neg:#C13A3E;
  --pxc-info:#0B8FC4; --pxc-info-soft:rgba(11,143,196,.10);
  --pxc-warn:#B7791F; --pxc-warn-soft:rgba(183,121,31,.14);
  --pxc-shadow:0 16px 40px -28px rgba(40,50,70,.4);
}

/* ---- Alternate palette: the TradeSaber orange, for [propxconnect palette="orange"] ---- */
#pxc-root[data-palette="orange"]{
  --pxc-bg:#1F1F21; --pxc-surface:#292A2C; --pxc-surface-2:#303134; --pxc-surface-3:#38393D;
  --pxc-border:#3A3A3F; --pxc-border-2:#4A4A50;
  --pxc-text:#F2F0EB; --pxc-muted:#A8A8A2; --pxc-muted-2:#75756E;
  --pxc-accent:#E88103; --pxc-accent-deep:#B96500; --pxc-accent-soft:rgba(232,129,3,.13);
  --pxc-on-accent:#131313;
  --pxc-action:#E88103; --pxc-action-deep:#B96500; --pxc-on-action:#131313;
  --pxc-pos:#2FBF71; --pxc-pos-soft:rgba(47,191,113,.13);
  --pxc-neg:#E14B4B;
  --pxc-info:#57CDF9; --pxc-info-soft:rgba(87,205,249,.12);
}
#pxc-root[data-palette="orange"][data-theme="light"]{
  --pxc-bg:#F5F3EF; --pxc-surface:#FFFFFF; --pxc-surface-2:#EFEBE4; --pxc-surface-3:#E6E1D8;
  --pxc-border:#DFDAD1; --pxc-border-2:#C6BFB3;
  --pxc-text:#191917; --pxc-muted:#67675F; --pxc-muted-2:#93938B;
  --pxc-accent:#C46B00; --pxc-accent-deep:#9C5500; --pxc-accent-soft:rgba(196,107,0,.10);
  --pxc-on-accent:#FFFFFF;
  --pxc-action:#C46B00; --pxc-action-deep:#9C5500; --pxc-on-action:#FFFFFF;
  --pxc-pos:#0E7F52; --pxc-pos-soft:rgba(14,127,82,.12);
  --pxc-neg:#C13A3E;
  --pxc-info:#0B8FC4; --pxc-info-soft:rgba(11,143,196,.10);
}
#pxc-root *{box-sizing:border-box}
#pxc-root a{color:inherit;text-decoration:none}
#pxc-root :focus-visible{outline:2px solid var(--pxc-accent);outline-offset:2px;border-radius:6px}

#pxc-root .topbar{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,34px);border-bottom:1px solid var(--pxc-border);background:var(--pxc-bg)}
#pxc-root .topbar,#pxc-root .shell{max-width:1360px;margin-left:auto;margin-right:auto;width:100%}
#pxc-root .brand{display:flex;align-items:center;gap:11px}
#pxc-root .mark{width:36px;height:36px;flex:none;position:relative;display:grid;place-items:center;color:var(--pxc-on-accent);font-family:var(--pxc-disp);font-weight:700}
#pxc-root .mark img{width:100%;height:100%;object-fit:contain;display:block}
#pxc-root .nm{display:flex;flex-direction:column;line-height:1}
#pxc-root .nm b{font-family:var(--pxc-disp);font-size:19px;font-weight:600;letter-spacing:.01em}
#pxc-root .nm b i{color:var(--pxc-accent);font-style:normal;font-weight:700}
#pxc-root .nm .pw{font-family:var(--pxc-mono);font-size:9.5px;letter-spacing:.06em;color:var(--pxc-muted-2);margin-top:3px;text-transform:uppercase}
#pxc-root .nm .pw em{color:var(--pxc-accent);font-style:normal}
#pxc-root .spacer{margin-left:auto}
#pxc-root .topsearch{position:relative;width:min(300px,40vw)}
#pxc-root .topsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--pxc-muted-2)}
#pxc-root .topsearch input{width:100%;background:var(--pxc-surface);border:1px solid var(--pxc-border);color:var(--pxc-text);border-radius:10px;padding:10px 12px 10px 36px;font-family:var(--pxc-body);font-size:14px;outline:none}
#pxc-root .topsearch input:focus{border-color:var(--pxc-accent);box-shadow:0 0 0 3px var(--pxc-accent-soft)}
#pxc-root .themebtn{flex:none;width:38px;height:38px;border-radius:10px;background:var(--pxc-surface);border:1px solid var(--pxc-border);color:var(--pxc-muted);cursor:pointer;display:grid;place-items:center}
#pxc-root .themebtn:hover{color:var(--pxc-text);border-color:var(--pxc-border-2)}
#pxc-root .themebtn svg{width:18px;height:18px}

#pxc-root .shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;padding:22px}
@media(max-width:820px){#pxc-root .shell{grid-template-columns:1fr}}
#pxc-root .side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#pxc-root .side-head .t{font-family:var(--pxc-disp);font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--pxc-muted);font-weight:600}
#pxc-root .reset{font-size:12px;color:var(--pxc-accent);background:none;border:none;cursor:pointer;padding:4px}
#pxc-root .count{font-family:var(--pxc-mono);font-size:12.5px;color:var(--pxc-muted);margin:2px 0 16px}
#pxc-root .count b{color:var(--pxc-accent)}
#pxc-root .fgroup{margin-bottom:18px;border-bottom:1px solid var(--pxc-border);padding-bottom:16px}
#pxc-root .fgroup:last-child{border-bottom:none}
#pxc-root .fgroup .lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--pxc-muted-2);font-weight:600;margin-bottom:9px}
#pxc-root .country-wrap{position:relative}
#pxc-root .country-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--pxc-muted-2);pointer-events:none}
#pxc-root .country{width:100%;background:var(--pxc-surface);border:1px solid var(--pxc-border);color:var(--pxc-text);border-radius:10px;padding:11px 12px 11px 34px;font-family:var(--pxc-body);font-size:14px;outline:none}
#pxc-root .country:focus{border-color:var(--pxc-accent);box-shadow:0 0 0 3px var(--pxc-accent-soft)}
#pxc-root .chips{display:flex;flex-wrap:wrap;gap:6px}
#pxc-root .chip{font-size:12.5px;color:var(--pxc-muted);background:var(--pxc-surface);border:1px solid var(--pxc-border);border-radius:999px;padding:6px 11px;cursor:pointer;transition:.13s;user-select:none}
#pxc-root .chip:hover{color:var(--pxc-text);border-color:var(--pxc-border-2)}
#pxc-root .chip[aria-pressed="true"]{background:var(--pxc-accent-soft);border-color:var(--pxc-accent);color:var(--pxc-accent);font-weight:500}
#pxc-root .chip.tgl[aria-pressed="true"]{background:var(--pxc-pos-soft);border-color:var(--pxc-pos);color:var(--pxc-pos)}

#pxc-root .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:16px;align-content:start}
@media(max-width:560px){#pxc-root .grid{grid-template-columns:1fr}}
#pxc-root .card{background:var(--pxc-surface);border:1px solid var(--pxc-border);border-radius:14px;padding:20px;box-shadow:var(--pxc-shadow)}
#pxc-root .chead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
#pxc-root .fid{display:flex;gap:13px;align-items:center;min-width:0}
#pxc-root .logo{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;font-family:var(--pxc-disp);font-weight:700;font-size:18px;color:var(--pxc-on-accent)}
#pxc-root .fname{font-family:var(--pxc-disp);font-size:20px;font-weight:600;line-height:1.1}
#pxc-root .fmeta{font-family:var(--pxc-mono);font-size:11.5px;color:var(--pxc-muted-2);margin-top:3px}
#pxc-root .getbtn{flex:none;font-family:var(--pxc-body);font-weight:600;font-size:13px;color:var(--pxc-on-action);background:linear-gradient(150deg,var(--pxc-action),var(--pxc-action-deep));border:none;border-radius:9px;padding:10px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
#pxc-root .getbtn:hover{filter:brightness(1.08)}
#pxc-root .getbtn svg{width:13px;height:13px}
#pxc-root .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#pxc-root .badge{font-family:var(--pxc-mono);font-size:11px;font-weight:500;border-radius:7px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent}
#pxc-root .badge.ok{background:var(--pxc-pos-soft);color:var(--pxc-pos);border-color:color-mix(in srgb,var(--pxc-pos) 30%,transparent)}
#pxc-root .badge.warn{background:var(--pxc-warn-soft);color:var(--pxc-warn);border-color:color-mix(in srgb,var(--pxc-warn) 35%,transparent)}
#pxc-root .badge.plat{background:var(--pxc-info-soft);color:var(--pxc-info);border-color:color-mix(in srgb,var(--pxc-info) 25%,transparent)}
#pxc-root .badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}

#pxc-root .selector{margin-top:18px;background:var(--pxc-surface-2);border:1px solid var(--pxc-border);border-radius:12px;padding:14px}
#pxc-root .sel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#pxc-root .seg{display:inline-flex;background:var(--pxc-bg);border:1px solid var(--pxc-border);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
#pxc-root .seg button{font-family:var(--pxc-body);font-size:13px;font-weight:500;color:var(--pxc-muted);background:none;border:none;border-radius:8px;padding:7px 13px;cursor:pointer;transition:.14s;white-space:nowrap}
#pxc-root .seg button:hover{color:var(--pxc-text)}
#pxc-root .seg button[aria-selected="true"]{background:var(--pxc-accent);color:var(--pxc-on-accent);font-weight:600}
#pxc-root .qbtn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--pxc-border-2);background:var(--pxc-bg);color:var(--pxc-muted);font-family:var(--pxc-disp);font-weight:600;font-size:14px;display:grid;place-items:center;cursor:pointer}
#pxc-root .qbtn:hover{color:var(--pxc-accent);border-color:var(--pxc-accent)}
#pxc-root .row2{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:12px}
#pxc-root .sizes-wrap{display:flex;flex-direction:column;gap:6px}
#pxc-root .sizes-wrap .mini{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--pxc-muted-2);font-weight:600}
#pxc-root .mode{display:inline-flex;align-self:flex-start;background:var(--pxc-bg);border:1px solid var(--pxc-border);border-radius:9px;padding:3px}
#pxc-root .mode button{font-family:var(--pxc-mono);font-size:11.5px;color:var(--pxc-muted);background:none;border:none;border-radius:6px;padding:6px 12px;cursor:pointer}
#pxc-root .mode button[aria-selected="true"]{background:var(--pxc-surface-3);color:var(--pxc-text)}
#pxc-root .rules{margin-top:13px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--pxc-border);border:1px solid var(--pxc-border);border-radius:11px;overflow:hidden}
@media(max-width:520px){#pxc-root .rules{grid-template-columns:1fr}}
#pxc-root .rule{background:var(--pxc-surface);padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
#pxc-root .rule .rk{font-size:12px;color:var(--pxc-muted)}
#pxc-root .rule .rv{font-family:var(--pxc-mono);font-size:13px;font-weight:500;text-align:right}
#pxc-root .rule .rv.g{color:var(--pxc-pos)}#pxc-root .rule .rv.r{color:var(--pxc-neg)}#pxc-root .rule .rv.a{color:var(--pxc-accent)}
#pxc-root .rule .rv.tbd{color:var(--pxc-muted-2);font-style:italic}

#pxc-root .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
#pxc-root .price{font-family:var(--pxc-mono);font-size:13px;color:var(--pxc-muted);display:flex;flex-direction:column;gap:4px}
#pxc-root .price .prow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#pxc-root .price .plabel{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--pxc-muted-2);min-width:42px}
#pxc-root .price .allin b{color:var(--pxc-text);font-weight:700}
#pxc-root .price .muted{color:var(--pxc-muted-2);font-size:11px}
#pxc-root .price .reg{text-decoration:line-through;color:var(--pxc-muted-2);font-size:12.5px}
#pxc-root .price .sale{color:var(--pxc-accent);font-weight:700;font-size:15px}
#pxc-root .price .codeline{color:var(--pxc-pos);font-size:11.5px}
#pxc-root .price .codeline b{color:var(--pxc-pos)}
#pxc-root .price .ph{color:var(--pxc-accent);background:var(--pxc-accent-soft);border:1px dashed var(--pxc-accent-deep);border-radius:6px;padding:2px 7px;font-size:11px}
#pxc-root .getbig{font-family:var(--pxc-body);font-weight:600;font-size:13px;color:var(--pxc-on-action);background:linear-gradient(150deg,var(--pxc-action),var(--pxc-action-deep));border:none;border-radius:9px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
#pxc-root .getbig:hover{filter:brightness(1.08)}
#pxc-root .getbig svg{width:13px;height:13px}
#pxc-root .src{display:flex;align-items:center;gap:12px;margin-top:10px}
#pxc-root .src a{font-family:var(--pxc-mono);font-size:11px;color:var(--pxc-info);display:inline-flex;align-items:center;gap:5px}
#pxc-root .src a:hover{color:var(--pxc-text)}
#pxc-root .src .verified{font-family:var(--pxc-mono);font-size:10.5px;color:var(--pxc-muted-2)}

#pxc-root .empty{text-align:center;padding:60px 20px;color:var(--pxc-muted);border:1px dashed var(--pxc-border-2);border-radius:14px}
#pxc-root .empty b{color:var(--pxc-text);font-family:var(--pxc-disp);display:block;font-size:18px;margin-bottom:6px}
#pxc-root .pxc-foot{border-top:1px solid var(--pxc-border);max-width:1360px;margin:0 auto;padding:18px 22px 24px;text-align:center}
#pxc-root .pxc-foot .fb{font-family:var(--pxc-mono);font-size:12px;color:var(--pxc-muted)}
#pxc-root .pxc-foot .fb b{color:var(--pxc-accent)}
#pxc-root .pxc-foot .dis{font-size:11.5px;color:var(--pxc-muted-2);margin-top:8px;line-height:1.55}

/* ---- v1.0.4 additions ---- */
#pxc-root .topbar{flex-wrap:wrap}
#pxc-root .viewtoggle{display:inline-flex;background:var(--pxc-surface);border:1px solid var(--pxc-border);border-radius:10px;padding:3px}
#pxc-root .viewtoggle button{font-family:var(--pxc-body);font-size:13px;font-weight:500;color:var(--pxc-muted);background:none;border:none;border-radius:8px;padding:8px 13px;cursor:pointer;transition:.14s}
#pxc-root .viewtoggle button:hover{color:var(--pxc-text)}
#pxc-root .viewtoggle button[aria-selected="true"]{background:var(--pxc-accent);color:var(--pxc-on-accent);font-weight:600}
#pxc-root .lang{background:var(--pxc-surface);border:1px solid var(--pxc-border);color:var(--pxc-text);border-radius:10px;padding:9px 10px;font-family:var(--pxc-body);font-size:13px;cursor:pointer;outline:none}
#pxc-root .lang:focus{border-color:var(--pxc-accent);box-shadow:0 0 0 3px var(--pxc-accent-soft)}

/* price moved into card header, right-aligned */
#pxc-root .chead-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none}
#pxc-root .chead-right .price{align-items:flex-end;text-align:right}
#pxc-root .chead-right .prow{justify-content:flex-end}

/* copyable coupon chip */
#pxc-root .cpn{font-family:var(--pxc-mono);font-size:11px;color:var(--pxc-pos);background:var(--pxc-pos-soft);border:1px solid color-mix(in srgb,var(--pxc-pos) 30%,transparent);border-radius:6px;padding:2px 7px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:.13s;line-height:1.4}
#pxc-root .cpn:hover{filter:brightness(1.12)}
#pxc-root .cpn .cic{opacity:.7}
#pxc-root .cpn.copied{background:var(--pxc-accent-soft);color:var(--pxc-accent);border-color:var(--pxc-accent)}

/* list / table view */
#pxc-root .tablewrap{overflow-x:auto;border:1px solid var(--pxc-border);border-radius:14px;background:var(--pxc-surface);box-shadow:var(--pxc-shadow)}
#pxc-root .pxc-table{width:100%;border-collapse:collapse;font-family:var(--pxc-mono);font-size:12.5px;white-space:nowrap}
#pxc-root .pxc-table th{text-align:left;padding:12px 13px;color:var(--pxc-muted);font-weight:600;border-bottom:1px solid var(--pxc-border);background:var(--pxc-surface-2)}
#pxc-root .pxc-table th.sortable{cursor:pointer;user-select:none}
#pxc-root .pxc-table th.sortable:hover{color:var(--pxc-text)}
#pxc-root .pxc-table th .ar{color:var(--pxc-accent)}
#pxc-root .pxc-table td{padding:10px 13px;border-bottom:1px solid var(--pxc-border);vertical-align:middle}
#pxc-root .pxc-table tbody tr:last-child td{border-bottom:none}
#pxc-root .pxc-table tbody tr:hover{background:var(--pxc-surface-2)}
#pxc-root .pxc-table .firm-td{font-family:var(--pxc-body);font-weight:600;font-size:14px}
#pxc-root .pxc-table .firmcell{display:flex;align-items:center;gap:9px}
#pxc-root .pxc-table .dotlogo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--pxc-on-accent);font-family:var(--pxc-disp);font-weight:700;font-size:11px;flex:none}
#pxc-root .pxc-table .amber{color:var(--pxc-accent)}
#pxc-root .pxc-table .split{color:var(--pxc-accent)}
#pxc-root .pxc-table .tbd{color:var(--pxc-muted-2)}
#pxc-root .pxc-table .reg{text-decoration:line-through;color:var(--pxc-muted-2);margin-right:3px}
#pxc-root .lsel{background:var(--pxc-bg);border:1px solid var(--pxc-border);color:var(--pxc-text);border-radius:7px;padding:6px 8px;font-family:var(--pxc-body);font-size:12.5px;cursor:pointer;outline:none}
#pxc-root .lsel:focus{border-color:var(--pxc-accent)}
#pxc-root .getbtn.sm{padding:7px 12px;font-size:12px}
#pxc-root .pxc-table .cpn{margin-left:5px}

/* ---- v1.0.6: bulletproof row alignment (override theme table resets) ---- */
#pxc-root .pxc-table{border-collapse:collapse;table-layout:auto}
#pxc-root .pxc-table thead{display:table-header-group}
#pxc-root .pxc-table tbody{display:table-row-group}
#pxc-root .pxc-table tr{display:table-row}
#pxc-root .pxc-table th,#pxc-root .pxc-table td{display:table-cell;vertical-align:middle;line-height:1.4;padding:11px 13px;height:auto;box-sizing:border-box;float:none}
#pxc-root .pxc-table .firmcell{line-height:1.2}
#pxc-root .pxc-table .lsel{vertical-align:middle;margin:0}

/* ---- v1.0.7: compare ---- */
#pxc-root .pxc-spacer{flex:1 1 auto}
#pxc-root .src{flex-wrap:wrap}
#pxc-root .cmpbtn{font-family:var(--pxc-body);font-size:12px;font-weight:600;color:var(--pxc-muted);background:var(--pxc-surface-2);border:1px solid var(--pxc-border);border-radius:8px;padding:6px 11px;cursor:pointer;transition:.13s}
#pxc-root .cmpbtn:hover{color:var(--pxc-text);border-color:var(--pxc-border-2)}
#pxc-root .cmpbtn.on{background:var(--pxc-accent-soft);border-color:var(--pxc-accent);color:var(--pxc-accent)}
#pxc-root .cta-cell{display:flex;align-items:center;gap:8px;white-space:nowrap}

#pxc-root .pxc-cmpbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:min(1100px,94vw);
  background:var(--pxc-surface);border:1px solid var(--pxc-border-2);border-radius:14px;padding:10px 14px;box-shadow:0 20px 50px -16px rgba(0,0,0,.6)}
#pxc-root .pxc-cmpbar .cmpcount{font-family:var(--pxc-mono);font-size:12px;color:var(--pxc-muted);font-weight:600}
#pxc-root .cchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--pxc-mono);font-size:12px;color:var(--pxc-text);background:var(--pxc-surface-2);border:1px solid var(--pxc-border);border-radius:999px;padding:4px 6px 4px 9px}
#pxc-root .cchip .cdot{width:8px;height:8px;border-radius:50%}
#pxc-root .cchip button{background:none;border:none;color:var(--pxc-muted-2);cursor:pointer;font-size:11px;padding:0 2px}
#pxc-root .cchip button:hover{color:var(--pxc-neg)}
#pxc-root .pxc-cmpbar .btn-go{font-family:var(--pxc-body);font-weight:600;font-size:13px;color:var(--pxc-on-action);background:linear-gradient(150deg,var(--pxc-action),var(--pxc-action-deep));border:none;border-radius:9px;padding:9px 15px;cursor:pointer}
#pxc-root .pxc-cmpbar .btn-go[disabled]{opacity:.45;cursor:not-allowed}
#pxc-root .pxc-cmpbar .btn-clr{font-family:var(--pxc-body);font-size:13px;color:var(--pxc-muted);background:none;border:1px solid var(--pxc-border);border-radius:9px;padding:9px 13px;cursor:pointer}

#pxc-root .pxc-cmp{position:fixed;inset:0;z-index:1300;background:color-mix(in srgb,var(--pxc-bg) 86%,transparent);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
#pxc-root .cmp-inner{width:min(1100px,96vw);max-height:90vh;display:flex;flex-direction:column;background:var(--pxc-surface);border:1px solid var(--pxc-border-2);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
#pxc-root .cmp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--pxc-border)}
#pxc-root .cmp-head h3{margin:0;font-family:var(--pxc-disp);font-size:19px;font-weight:600}
#pxc-root .cmp-close{font-family:var(--pxc-body);font-size:13px;color:var(--pxc-muted);background:var(--pxc-surface-2);border:1px solid var(--pxc-border);border-radius:9px;padding:8px 14px;cursor:pointer}
#pxc-root .cmp-close:hover{color:var(--pxc-text)}
#pxc-root .cmp-scroll{overflow:auto;padding:0}
#pxc-root .cmp-table{width:100%;border-collapse:collapse;font-family:var(--pxc-mono);font-size:13px}
#pxc-root .cmp-table th,#pxc-root .cmp-table td{display:table-cell;text-align:left;padding:11px 14px;border-bottom:1px solid var(--pxc-border);vertical-align:middle}
#pxc-root .cmp-table thead th{position:sticky;top:0;background:var(--pxc-surface-2);z-index:1}
#pxc-root .cmp-table tbody th{font-family:var(--pxc-body);color:var(--pxc-muted);font-weight:600;font-size:12px;white-space:nowrap;background:var(--pxc-surface)}
#pxc-root .cmp-table td.win{background:var(--pxc-pos-soft);color:var(--pxc-pos)}
#pxc-root .cmp-table td.win b{color:var(--pxc-pos)}
#pxc-root .cmh{display:flex;align-items:center;gap:8px}
#pxc-root .cmh .dotlogo{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--pxc-on-accent);font-family:var(--pxc-disp);font-weight:700;font-size:11px;flex:none}
#pxc-root .cmh-f{font-family:var(--pxc-body);font-weight:600;font-size:13px;color:var(--pxc-text)}
#pxc-root .cmh-s{font-size:11px;color:var(--pxc-muted-2)}
#pxc-root .cmx{margin-left:auto;background:none;border:none;color:var(--pxc-muted-2);cursor:pointer;font-size:12px}
#pxc-root .cmx:hover{color:var(--pxc-neg)}
#pxc-root .cmp-table .reg{text-decoration:line-through;color:var(--pxc-muted-2);margin-right:4px}
#pxc-root .cmp-table .cc{font-size:10.5px;color:var(--pxc-pos);background:var(--pxc-pos-soft);border-radius:5px;padding:1px 5px;margin-left:4px}
#pxc-root .cmp-summary{padding:16px 20px;border-top:1px solid var(--pxc-border);background:var(--pxc-surface-2)}
#pxc-root .cmp-rec{display:flex;align-items:center;gap:10px;font-family:var(--pxc-disp);font-size:18px;margin-bottom:12px}
#pxc-root .rec-badge{font-family:var(--pxc-body);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pxc-on-accent);background:linear-gradient(150deg,var(--pxc-accent),var(--pxc-accent-deep));border-radius:999px;padding:4px 10px}
#pxc-root .cmp-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
#pxc-root .sc{display:flex;flex-direction:column;gap:2px;background:var(--pxc-surface);border:1px solid var(--pxc-border);border-radius:9px;padding:9px 12px}
#pxc-root .sc-l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--pxc-muted-2);font-weight:600}
#pxc-root .sc-w{font-family:var(--pxc-body);font-weight:600;font-size:13.5px;color:var(--pxc-accent)}
@media(max-width:600px){#pxc-root .pxc-cmpbar{bottom:10px;padding:8px 10px}}

/* ---- v1.0.8: ensure hidden overlay/bar actually hide (display overrode [hidden]) ---- */
#pxc-root .pxc-cmp[hidden],#pxc-root .pxc-cmpbar[hidden]{display:none !important}

/* ---- v1.0.9: top compare button + overlay controls ---- */
#pxc-root .cmptop{position:relative;display:inline-flex;align-items:center;gap:6px;font-family:var(--pxc-body);font-size:13px;font-weight:600;color:var(--pxc-text);background:var(--pxc-surface);border:1px solid var(--pxc-border);border-radius:10px;padding:9px 13px;cursor:pointer;transition:.14s}
#pxc-root .cmptop:hover{border-color:var(--pxc-accent);color:var(--pxc-accent)}
#pxc-root .cmptop svg{width:16px;height:16px}
#pxc-root .cmptop .cmptop-n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--pxc-accent);color:var(--pxc-on-accent);font-family:var(--pxc-mono);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
#pxc-root .cmh-controls{display:flex;gap:5px;margin-top:5px}
#pxc-root .cmh-controls select{background:var(--pxc-bg);border:1px solid var(--pxc-border);color:var(--pxc-text);border-radius:6px;padding:4px 6px;font-family:var(--pxc-body);font-size:11.5px;max-width:120px}
#pxc-root .cmp-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#pxc-root .cmp-add{background:var(--pxc-surface-2);border:1px solid var(--pxc-border);color:var(--pxc-text);border-radius:9px;padding:8px 11px;font-family:var(--pxc-body);font-size:13px;cursor:pointer}
#pxc-root .cmp-clr2{font-family:var(--pxc-body);font-size:13px;color:var(--pxc-muted);background:none;border:1px solid var(--pxc-border);border-radius:9px;padding:8px 12px;cursor:pointer}
#pxc-root .cmp-clr2:hover{color:var(--pxc-neg);border-color:var(--pxc-neg)}
#pxc-root .cmp-hint{padding:26px 22px;color:var(--pxc-muted);font-size:14px;line-height:1.6}
#pxc-root .cmp-table .cta-row td{padding-top:14px;padding-bottom:14px}
#pxc-root .cmp-table .cta-row .getbtn.sm{width:100%;justify-content:center}
#pxc-root .cmp-table .winbtn{background:linear-gradient(150deg,var(--pxc-accent),var(--pxc-accent-deep));box-shadow:0 6px 18px -8px var(--pxc-accent);font-weight:700}
#pxc-root .cmp-rec{flex-wrap:wrap}
#pxc-root .cmp-rec .recget{margin-left:auto}
#pxc-root .recget{font-family:var(--pxc-body);font-weight:700;font-size:13px;color:var(--pxc-on-action);background:linear-gradient(150deg,var(--pxc-action),var(--pxc-action-deep));border:none;border-radius:9px;padding:10px 16px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 8px 20px -8px var(--pxc-action)}
#pxc-root .recget:hover{filter:brightness(1.08)}

/* ---- v1.1.1: compare equal columns + country switch + policy values ---- */
#pxc-root .cmp-table{table-layout:fixed;width:100%}
#pxc-root .cmp-table th:first-child,#pxc-root .cmp-table td:first-child{width:150px}
#pxc-root .cmp-table th,#pxc-root .cmp-table td{word-wrap:break-word;overflow-wrap:break-word}
#pxc-root .cmp-country{background:var(--pxc-surface-2);border:1px solid var(--pxc-border);color:var(--pxc-text);border-radius:9px;padding:8px 11px;font-family:var(--pxc-body);font-size:13px;width:150px;outline:none}
#pxc-root .cmp-country:focus{border-color:var(--pxc-accent);box-shadow:0 0 0 3px var(--pxc-accent-soft)}
#pxc-root .cmp-table .good-v{color:var(--pxc-pos);font-weight:600}
#pxc-root .cmp-table .bad-v{color:var(--pxc-neg);font-weight:600}

/* ---- v1.4.0: per-row source link chip ---- */
#pxc-root .refq{
  display:inline-grid;place-items:center;
  width:17px;height:17px;margin-left:7px;
  border-radius:5px;border:1px solid var(--pxc-border-2);
  background:var(--pxc-surface-2);color:var(--pxc-muted);
  font-family:var(--pxc-disp);font-weight:700;font-size:10.5px;line-height:1;
  text-decoration:none;vertical-align:middle;cursor:pointer;flex:none;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}
#pxc-root .refq:hover,
#pxc-root .refq:focus-visible{
  color:var(--pxc-accent);border-color:var(--pxc-accent);background:var(--pxc-accent-soft);
}
/* keep the chip legible inside a highlighted "win" cell */
#pxc-root .cmp-table td.win .refq{
  border-color:var(--pxc-pos);color:var(--pxc-pos);background:transparent;
}
#pxc-root .cmp-table td.win .refq:hover{background:var(--pxc-pos-soft)}
@media (prefers-reduced-motion:reduce){#pxc-root .refq{transition:none}}

/* ---- v1.5.0: card "See more" panel ---- */
/* value + source chip share the right-hand flex slot of a .rule */
#pxc-root .rule .rvw{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}
#pxc-root .rule .rvw .rv{text-align:right}

/* the two grids butt together into one continuous table when expanded */
#pxc-root .rules.rules-open{border-bottom-left-radius:0;border-bottom-right-radius:0}
#pxc-root .rules-more{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
/* an odd final row would otherwise leave a border-coloured hole in column 2 */
#pxc-root .rules-more .rule:last-child:nth-child(odd){grid-column:1 / -1}

#pxc-root .morebtn{
  width:100%;margin-top:9px;padding:8px 12px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;border:1px dashed var(--pxc-border-2);border-radius:9px;
  color:var(--pxc-muted);font-family:var(--pxc-body);font-size:12px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}
#pxc-root .morebtn:hover,#pxc-root .morebtn:focus-visible{
  color:var(--pxc-accent);border-color:var(--pxc-accent);background:var(--pxc-accent-soft);
}
#pxc-root .morebtn svg{width:14px;height:14px;flex:none;transition:transform .16s ease}
#pxc-root .morebtn.open svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){#pxc-root .morebtn,#pxc-root .morebtn svg{transition:none}}

/* .rules-more also carries .rules, so it inherits the 520px single-column collapse.
   Only the odd-row span needs undoing there. */
@media(max-width:520px){#pxc-root .rules-more .rule:last-child:nth-child(odd){grid-column:auto}}

/* ---- v1.6.0: prohibited-activities "!" button (top-right of card) ---- */
#pxc-root .qbtn.qbtn-warn{
  border-color:color-mix(in srgb,var(--pxc-warn) 40%,transparent);
  color:var(--pxc-warn);font-weight:800;
}
#pxc-root .qbtn.qbtn-warn:hover,
#pxc-root .qbtn.qbtn-warn:focus-visible{
  color:var(--pxc-warn);border-color:var(--pxc-warn);background:var(--pxc-warn-soft);
}

/* ---- v1.8.0: single-phase plans (e.g. Instant-only) render one labelled toggle ---- */
#pxc-root .mode.single button{cursor:default;opacity:1}

/* ---- v2.1.0: sim-funded (amber) availability tier + country note ---- */
#pxc-root .cmp-table .warn-v{color:var(--pxc-warn);font-weight:600}
#pxc-root .cmp-table .cnote{display:block;margin-top:2px;font-size:11px;color:var(--pxc-muted);font-weight:400;line-height:1.35}

/* ---- v2.4.0: firm logo tiles -------------------------------------------
   .logo / .dotlogo already carried the two-letter badge; a logo simply
   fills the same tile. Keeping the brand-colour tile under every logo is
   what stops a row of square marks and wide wordmarks looking ragged, and
   it means one asset works on both the dark and the light theme.
   ---------------------------------------------------------------------- */
#pxc-root .logo.haslogo,
#pxc-root .dotlogo.haslogo{padding:0;overflow:hidden;background:transparent !important}
#pxc-root .logo.haslogo img,
#pxc-root .dotlogo.haslogo img{width:100%;height:100%;object-fit:cover;display:block}


/* ---- v2.6.0: the list, as rows -----------------------------------------
   One row per firm carrying five things: who, what kind of drawdown, the
   cheapest way in, the offer, and the action. Everything else lives behind
   the Details toggle. The previous column layout needed a horizontal
   scrollbar and put twenty numbers in front of someone who had not picked a
   firm yet — the detail was not deleted, it moved one click away.
   ---------------------------------------------------------------------- */
#pxc-root .lrows{display:flex;flex-direction:column;gap:10px}
#pxc-root .lrow{
	background:var(--pxc-surface);border:1px solid var(--pxc-border);border-radius:14px;
	overflow:hidden;transition:border-color .14s;
}
#pxc-root .lrow:hover{border-color:var(--pxc-border-2)}
#pxc-root .lrow.is-open{border-color:var(--pxc-accent)}

/* FIXED columns for the two chip groups.
   `auto` sized the drawdown column to its own content, so a firm with one
   badge and a firm with three started their platform icons in different
   places and nothing lined up down the page. Fixed widths cost a little
   space on the narrow rows and buy a straight edge on every row. */
#pxc-root .lrow-head{
	display:grid;align-items:center;gap:16px;padding:14px 18px;
	grid-template-columns:minmax(190px,1.4fr) 152px minmax(190px,1fr) 150px auto;
}
#pxc-root .lrow-firm{display:flex;align-items:center;gap:13px;min-width:0}
#pxc-root .lrow .dotlogo{width:44px;height:44px;border-radius:11px;font-size:14px;flex:none}
#pxc-root .lrow-id{display:flex;flex-direction:column;gap:3px;min-width:0}
#pxc-root .lrow-id .fline{display:flex;align-items:center;gap:0;min-width:0}
#pxc-root .lrow-id .fn{
	font-family:var(--pxc-disp);font-weight:600;font-size:16px;line-height:1.2;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
#pxc-root .lrow-id .fsub{font-family:var(--pxc-mono);font-size:11px;color:var(--pxc-muted-2)}

/* Drawdown is the one spec worth showing before a firm is chosen — it is
   the rule newcomers most often misread. */
#pxc-root .lrow-dd{display:flex;gap:5px;flex-wrap:wrap}
#pxc-root .lp-dd{
	display:inline-block;font-family:var(--pxc-mono);font-size:10px;font-weight:500;
	letter-spacing:.09em;text-transform:uppercase;padding:5px 9px;border-radius:6px;
	border:1px solid currentColor;
}
#pxc-root .dd-eod{color:var(--pxc-pos)}
#pxc-root .dd-intraday{color:var(--pxc-neg)}
#pxc-root .dd-static,#pxc-root .dd-fixed{color:var(--pxc-muted)}

#pxc-root .lp-now{font-family:var(--pxc-mono);font-weight:600;font-size:17px;display:block}
#pxc-root .lp-was{font-family:var(--pxc-mono);font-size:11.5px;color:var(--pxc-muted-2);text-decoration:line-through}
#pxc-root .lp-tbd{font-family:var(--pxc-mono);font-size:12px;color:var(--pxc-muted-2)}

/* The offer reads as one object: percentage over code, no gap between. */
#pxc-root .lp-offer{display:flex;flex-direction:column;border-radius:9px;overflow:hidden;min-width:132px}
#pxc-root .lp-off{
	background:var(--pxc-action);color:var(--pxc-on-action);text-align:center;
	font-family:var(--pxc-disp);font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:6px 8px;
}
#pxc-root .lp-offer .cpn{
	width:100%;border-radius:0;justify-content:center;border:1px solid var(--pxc-border-2);border-top:0;
	font-size:11.5px;letter-spacing:.07em;
}

#pxc-root .lrow-act{display:flex;align-items:center;gap:8px;justify-content:flex-end}
#pxc-root .lrow-more{
	font-family:var(--pxc-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
	color:var(--pxc-muted);background:none;border:1px solid var(--pxc-border);border-radius:8px;
	padding:9px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
#pxc-root .lrow-more:hover{color:var(--pxc-text);border-color:var(--pxc-border-2)}
#pxc-root .lrow-more .cv{font-size:9px}

/* Detail — only rendered when the row is open. */
#pxc-root .lrow-detail{border-top:1px solid var(--pxc-border);background:var(--pxc-surface-2);padding:16px 18px}
#pxc-root .ld-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
#pxc-root .ld-lbl{font-family:var(--pxc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pxc-muted-2)}
#pxc-root .ld-pick .lsel{
	background:var(--pxc-surface);border:1px solid var(--pxc-border);color:var(--pxc-text);
	border-radius:8px;padding:7px 9px;font-family:var(--pxc-body);font-size:13px;
}
#pxc-root .ld-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 20px}
#pxc-root .sp{display:flex;flex-direction:column;gap:3px;min-width:0}
#pxc-root .sl{font-family:var(--pxc-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--pxc-muted-2)}
#pxc-root .sv{font-size:13.5px}
#pxc-root .ld-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--pxc-border)}

/* Stack rather than shrink. Five columns of 90px is worse than two rows. */
@media(max-width:1040px){
	#pxc-root .lrow-head{grid-template-columns:minmax(160px,1.4fr) 120px 150px auto;gap:14px}
	#pxc-root .lrow-dd{display:none}
}
@media(max-width:780px){
	#pxc-root .lrow-head{grid-template-columns:1fr 1fr;gap:12px}
	#pxc-root .lrow-firm{grid-column:1 / -1}
	#pxc-root .lrow-act{grid-column:1 / -1;justify-content:stretch}
	#pxc-root .lrow-act .getbtn.sm{flex:1;justify-content:center}
}

/* Platforms replace the price column. A firm with dozens of plans can't have
   every price entered, and platform is what people filter on at this stage. */
#pxc-root .lrow-plat{display:flex;gap:5px;flex-wrap:wrap}
#pxc-root .lp-pi{
	width:26px;height:26px;flex:none;border-radius:50%;overflow:hidden;
	display:grid;place-items:center;background:var(--pxc-surface-3);
	font-family:var(--pxc-mono);font-size:9.5px;font-weight:600;color:var(--pxc-text);
	box-shadow:0 0 0 1px var(--pxc-border);cursor:default;
}
#pxc-root .lp-pi img{width:100%;height:100%;object-fit:cover;display:block}
#pxc-root .lp-pi.mono{letter-spacing:.02em}
#pxc-root .lp-pi.more{background:transparent;color:var(--pxc-muted-2);box-shadow:0 0 0 1px var(--pxc-border-2);font-size:10px}
#pxc-root .lrow-plat{gap:6px}

/* Per-firm earn rate, shown where the row can carry it. */
#pxc-root .lp-earn{
	font-family:var(--pxc-mono);font-size:10.5px;letter-spacing:.06em;
	color:var(--pxc-info);white-space:nowrap;
}
#pxc-root .lp-earn b{font-weight:600}

/* ---- v2.9.0: featured firms -------------------------------------------
   A recommendation that moves when you re-sort is not a recommendation, so
   ranked firms are pinned in their own block with a heading. They still obey
   the filters — pinning must not resurrect a firm the visitor filtered out.
   ---------------------------------------------------------------------- */
#pxc-root .lgroup{
	display:flex;align-items:center;gap:12px;margin:4px 0 10px;
	font-family:var(--pxc-mono);font-size:10px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--pxc-muted-2);
}
#pxc-root .lgroup::after{content:"";flex:1;height:1px;background:var(--pxc-border)}
#pxc-root .lrows.is-featured{margin-bottom:22px}

#pxc-root .lrow.is-rank{position:relative}
#pxc-root .lrow.r1{
	border-color:var(--pxc-accent);
	box-shadow:0 0 0 1px var(--pxc-accent), 0 10px 30px -18px var(--pxc-accent);
	background:linear-gradient(180deg,var(--pxc-accent-soft),transparent 60%),var(--pxc-surface);
}
#pxc-root .lrow.r2{border-color:var(--pxc-border-2)}
#pxc-root .lrow.r3{border-color:var(--pxc-border-2)}

#pxc-root .lp-rank{
	display:inline-flex;align-items:center;gap:5px;margin-left:10px;flex:none;vertical-align:middle;
	font-family:var(--pxc-mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;
	text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap;
}
#pxc-root .lp-rank i{font-style:normal;font-size:10px;line-height:1}
#pxc-root .lp-rank.r1{background:var(--pxc-accent);color:var(--pxc-on-accent)}
#pxc-root .lp-rank.r2{color:#C9CDD2;box-shadow:inset 0 0 0 1px #9BA1A8}
#pxc-root .lp-rank.r3{color:#C98F5E;box-shadow:inset 0 0 0 1px #A5713F}

@media(max-width:640px){
	#pxc-root .lp-rank{margin-left:0;margin-top:6px}
	#pxc-root .lrow-id .fn{display:flex;flex-direction:column;align-items:flex-start}
}

/* ---- platform icon manager (admin) ---- */
.pxc-plats .pxc-plat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:18px 0}
.pxc-plats .pxc-plat{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #dcdcde;border-radius:8px;padding:14px}
.pxc-plats .pxc-plat-prev{
	width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
	background:#f0f0f1;color:#1d2327;font-weight:700;font-size:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.pxc-plats .pxc-plat-prev img{width:100%;height:100%;object-fit:cover;display:block}
.pxc-plats .pxc-plat-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.pxc-plats .pxc-plat-btns{display:flex;gap:6px}
.pxc-plats .pxc-plat-col{font-size:12px;color:#646970;display:flex;flex-direction:column;gap:4px}
.pxc-plats .pxc-plat-color{max-width:130px}

/* Medals for 2nd and 3rd. Drawn, not typed — emoji medals differ per platform
   and can't take the theme's colours. */
#pxc-root .lp-rank.medal{padding:0;background:none;box-shadow:none;cursor:default}
#pxc-root .lp-medal{width:22px;height:22px;display:block}

/* ---- platform popup ---------------------------------------------------
   Fixed-position, appended to the root rather than to a row, because render()
   replaces row markup wholesale and would take the panel with it.
   ---------------------------------------------------------------------- */
#pxc-root .pxc-platpop{
	position:fixed;z-index:70;max-width:min(460px,calc(100vw - 16px));
	background:var(--pxc-surface-2);border:1px solid var(--pxc-border-2);border-radius:12px;
	padding:12px 14px;box-shadow:0 18px 44px -14px rgba(0,0,0,.7);
}
#pxc-root .pxc-platpop .pp-head{
	font-family:var(--pxc-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--pxc-muted-2);margin-bottom:10px;
}
#pxc-root .pxc-platpop .pp-list{display:flex;flex-wrap:wrap;gap:8px}
#pxc-root .pxc-platpop .pp-item{
	display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;
	background:var(--pxc-surface);border:1px solid var(--pxc-border);border-radius:999px;
}
#pxc-root .pxc-platpop .pp-item b{font-weight:500;font-size:13px;white-space:nowrap}
#pxc-root .pxc-platpop::after{
	content:"";position:absolute;left:50%;width:10px;height:10px;
	background:var(--pxc-surface-2);border:1px solid var(--pxc-border-2);transform:translateX(-50%) rotate(45deg);
}
#pxc-root .pxc-platpop.above::after{bottom:-6px;border-top:0;border-left:0}
#pxc-root .pxc-platpop.below::after{top:-6px;border-bottom:0;border-right:0}

#pxc-root .lp-pi.more{cursor:pointer;transition:.14s}
#pxc-root .lp-pi.more:hover{color:var(--pxc-text);box-shadow:0 0 0 1px var(--pxc-accent)}
#pxc-root .lp-pi.more[aria-expanded="true"]{background:var(--pxc-accent);color:var(--pxc-on-accent);box-shadow:none}

/* ---- v2.13.0: even rows -------------------------------------------------
   Two drawdown badges per line, the third wrapping underneath, and the
   platform icons on a fixed grid so every row's icons sit at the same x.
   ---------------------------------------------------------------------- */
#pxc-root .lrow-dd{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
	align-content:center;justify-items:stretch;
}
#pxc-root .lrow-dd .lp-dd{
	display:flex;align-items:center;justify-content:center;
	white-space:nowrap;padding:5px 4px;font-size:9.5px;
}
#pxc-root .lrow-plat{
	display:grid;grid-template-columns:repeat(6,26px);gap:6px;
	align-content:center;justify-content:start;
}
@media(max-width:1100px){
	#pxc-root .lrow-plat{grid-template-columns:repeat(4,26px)}
}
@media(max-width:780px){
	#pxc-root .lrow-dd,#pxc-root .lrow-plat{display:flex;flex-wrap:wrap}
}

/* ---- v2.14.0: weighted comparison ------------------------------------- */
#pxc-root .cmp-prefs{
	background:var(--pxc-surface-2);border:1px solid var(--pxc-border);border-radius:12px;
	padding:14px 16px;margin:0 0 12px;
}
#pxc-root .cmp-prefs-h{
	display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;
	font-family:var(--pxc-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pxc-muted-2);
}
#pxc-root .cmp-pref-reset{
	background:none;border:0;color:var(--pxc-muted-2);cursor:pointer;font:inherit;text-decoration:underline;
}
#pxc-root .cmp-pref-reset:hover{color:var(--pxc-text)}
#pxc-root .cmp-pref-grid{display:flex;flex-wrap:wrap;gap:7px}
#pxc-root .wchip{
	display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-size:12.5px;
	background:transparent;color:var(--pxc-muted);border:1px solid var(--pxc-border);
	border-radius:999px;padding:6px 13px 6px 10px;transition:.14s;
}
#pxc-root .wchip i{
	width:9px;height:9px;border-radius:50%;border:1px solid var(--pxc-border-2);flex:none;transition:.14s;
}
#pxc-root .wchip:hover{border-color:var(--pxc-border-2);color:var(--pxc-text)}
#pxc-root .wchip.w1{color:var(--pxc-text);border-color:var(--pxc-accent)}
#pxc-root .wchip.w1 i{background:var(--pxc-accent);border-color:var(--pxc-accent)}
#pxc-root .wchip.w2{color:var(--pxc-on-accent);background:var(--pxc-accent);border-color:var(--pxc-accent);font-weight:600}
#pxc-root .wchip.w2 i{background:var(--pxc-on-accent);border-color:transparent;box-shadow:0 0 0 3px color-mix(in srgb,var(--pxc-on-accent) 35%,transparent)}

#pxc-root .cmp-pref-reqs{
	display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:12px;
	padding-top:11px;border-top:1px solid var(--pxc-border);font-size:12.5px;color:var(--pxc-muted);
}
#pxc-root .cmp-pref-reqs label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
#pxc-root .cmp-pref-reqs select{
	background:var(--pxc-surface);border:1px solid var(--pxc-border);color:var(--pxc-text);
	border-radius:6px;padding:4px 8px;font:inherit;font-size:12px;
}

#pxc-root .cmp-verdict{
	background:var(--pxc-surface);border:1px solid var(--pxc-border-2);border-radius:12px;
	padding:15px 17px;margin:0 0 14px;
}
#pxc-root .cmp-verdict.empty{color:var(--pxc-muted-2);font-size:13px;border-style:dashed}
#pxc-root .cmp-verdict p{margin:0 0 7px}
#pxc-root .cmp-verdict p:last-child{margin-bottom:0}
#pxc-root .v-lead{font-size:16px;font-weight:600;color:var(--pxc-text)}
#pxc-root .v-lead.bad{color:var(--pxc-danger,#e85f63)}
#pxc-root .v-line{font-size:13px;color:var(--pxc-muted)}
#pxc-root .v-line b{color:var(--pxc-text);font-weight:600}
#pxc-root .v-line.dim{color:var(--pxc-muted-2)}
#pxc-root .v-line.warn{color:var(--pxc-action)}
#pxc-root .v-line.warn b{color:var(--pxc-action)}
#pxc-root .v-note{font-size:11.5px;color:var(--pxc-muted-2);font-style:italic}
#pxc-root .sc-x2{font-style:normal;font-size:9.5px;color:var(--pxc-accent);font-weight:700}

/* ---- v2.18.0: compare layout, rewritten -------------------------------
   One place decides the heights. The previous attempt left `.cmp-body` on
   `align-items:start`, so the table column sized itself to its content, the
   scroll container had no bounded parent to flex inside, and the panel simply
   ran off the bottom of the screen with nothing to scroll.
   
   The chain that has to hold: .cmp-inner is a bounded flex column -> .cmp-body
   stretches to fill it -> .cmp-main is a flex column of the same height ->
   .cmp-scroll is the only thing that grows, and it scrolls.
   Every link needs min-height:0, or flex children refuse to shrink below
   their content and the overflow reappears one level up.
   ---------------------------------------------------------------------- */
#pxc-root .cmp-inner{display:flex;flex-direction:column;min-height:0}

#pxc-root .cmp-body{
	display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;
	align-items:stretch;
	flex:1;min-height:0;padding:0 16px 16px;
}
#pxc-root .cmp-rail{
	display:flex;flex-direction:column;gap:12px;
	min-height:0;overflow-y:auto;padding-right:4px;
}
#pxc-root .cmp-main{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
#pxc-root .cmp-main .cmp-verdict{flex:none}
#pxc-root .cmp-main .cmp-scroll{flex:1;min-height:0;overflow:auto}
#pxc-root .cmp-main .cmp-summary{flex:none}

#pxc-root .cmp-rail .cmp-prefs{margin:0}
#pxc-root .cmp-rail .cmp-pref-grid{display:flex;flex-direction:column;gap:5px}
#pxc-root .cmp-rail .wchip{width:100%;justify-content:flex-start}
#pxc-root .cmp-rail .cmp-pref-reqs{flex-direction:column;align-items:flex-start;gap:9px}
#pxc-root .cmp-rail .cmp-scores{
	background:var(--pxc-surface-2);border:1px solid var(--pxc-border);border-radius:12px;padding:12px 14px;
	display:flex;flex-direction:column;gap:7px;flex:none;
}

#pxc-root .cmp-expand{
	background:transparent;border:1px solid var(--pxc-border);color:var(--pxc-muted);
	width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;
	display:grid;place-items:center;transition:.14s;
}
#pxc-root .cmp-expand:hover{border-color:var(--pxc-accent);color:var(--pxc-text)}

/* Full screen, but never underneath the WordPress admin bar — a header you
   cannot reach is worse than a smaller panel. */
#pxc-root .pxc-cmp.is-full{padding:0}
#pxc-root .pxc-cmp.is-full .cmp-inner{
	width:100vw;max-width:none;height:100vh;max-height:100vh;border-radius:0;
}
body.admin-bar #pxc-root .pxc-cmp.is-full{top:32px}
body.admin-bar #pxc-root .pxc-cmp.is-full .cmp-inner{height:calc(100vh - 32px);max-height:calc(100vh - 32px)}
@media screen and (max-width:782px){
	body.admin-bar #pxc-root .pxc-cmp.is-full{top:46px}
	body.admin-bar #pxc-root .pxc-cmp.is-full .cmp-inner{height:calc(100vh - 46px);max-height:calc(100vh - 46px)}
}

@media(max-width:900px){
	#pxc-root .cmp-body{grid-template-columns:1fr;overflow:auto}
	#pxc-root .cmp-rail{overflow:visible}
	#pxc-root .cmp-main .cmp-scroll{overflow:visible}
	#pxc-root .cmp-rail .cmp-pref-grid{flex-direction:row;flex-wrap:wrap}
	#pxc-root .cmp-rail .wchip{width:auto}
	#pxc-root .cmp-rail .cmp-pref-reqs{flex-direction:row;flex-wrap:wrap;align-items:center}
}

/* chip states, readable without relying on colour alone */
#pxc-root .wchip .wl{flex:1;text-align:left}
#pxc-root .wchip .wx{
	font-style:normal;font-size:10px;font-weight:800;letter-spacing:.02em;
	padding:1px 5px;border-radius:4px;background:var(--pxc-on-accent);color:var(--pxc-accent);
}
#pxc-root .wchip.w0{opacity:.62}
#pxc-root .wchip.w0 i{background:transparent}
#pxc-root .cmp-pref-links{display:inline-flex;gap:12px;align-items:center}