/* The panel's frame: a sidebar down the left (accounts, the pages, the connection and the theme) and a slim bar across the top of the page.
   The sidebar is dark in both themes, like the top bar it replaces. Nothing here is a drop-down: the accounts are always on show. */

.shell{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.main-col{min-width:0;display:flex;flex-direction:column}
body.gated .side,body.gated .bar{display:none}
body.gated .shell{display:block}

/* ---- the sidebar ---- */
.side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:16px 12px 12px;
  background:linear-gradient(180deg,var(--pc-0e1430,#0e1430) 0%,var(--pc-090d1d,#090d1d) 60%,var(--pc-070a16,#070a16) 100%);color:var(--pc-c7ced9,#c7ced9);border-right:1px solid rgba(255,255,255,.07);scrollbar-width:thin;scrollbar-color:var(--pc-2a3350,#2a3350) transparent}
.side .side-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 4px;color:#fff;text-decoration:none}
.side .side-brand img{border-radius:9px;box-shadow:0 6px 18px -6px rgba(var(--pcr-96-84-255,96,84,255),.75)}
.side .side-brand small{margin-left:auto;color:var(--pc-6f7a96,#6f7a96);font-size:11px}
.side .side-brand:focus-visible,.side a:focus-visible,.side button:focus-visible{outline:2px solid var(--pc-8fb0ff,#8fb0ff);outline-offset:2px}

/* the pages */
.side #nav{display:flex;flex-direction:column;flex:none;flex-wrap:nowrap;order:0;overflow:visible;gap:2px;padding:0}
.side #nav a,.side .side-foot>a{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--pc-aeb8d0,#aeb8d0);text-decoration:none;font-weight:580;font-size:14px;letter-spacing:.005em;white-space:nowrap;transition:background .15s,color .15s}
.side #nav a:hover,.side .side-foot>a:hover{background:rgba(255,255,255,.07);color:#fff}
.side #nav a.on,.side .side-foot>a.on{background:linear-gradient(135deg,rgba(var(--pcr-61-123-255,61,123,255),.30),rgba(var(--pcr-122-60-245,122,60,245),.24));color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--pcr-143-176-255,143,176,255),.28)}
.side #nav a.on::after{display:none}
.side #nav a .ni,.side .side-foot>a .ni{flex:none;opacity:.92}
.side #nav a.on .ni,.side .side-foot>a.on .ni{color:var(--pc-b9ccff,#b9ccff);opacity:1}
.side #nav .cnt{margin-left:auto}
.ng{margin:14px 12px 4px;font:700 10.5px/1 system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--pc-6f7a96,#6f7a96)}
.side #nav .ng:first-of-type{margin-top:10px}

/* the foot: Settings, the eBay connection, the theme, the lock */
.side-foot{margin-top:auto;display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.side-status{display:flex;align-items:center;gap:9px;padding:4px 10px}
.side-status .es{flex:1;min-width:0;font-size:12.5px;color:var(--pc-9aa6c4,#9aa6c4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .lock-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:8px 12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:600;border-radius:10px}
.side .lock-btn:hover:not(:disabled){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5)}
.side .lock-btn[hidden]{display:none}

/* ---- the accounts (only with two or more) ---- */
.side-accts{display:grid;gap:6px}
.side-accts[hidden]{display:none}
.side-accts .ng{margin:0 6px 2px}
.acct-tile{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--pc-e8edff,#e8edff);text-align:left;font-weight:500;min-height:0}
.acct-tile:hover:not(:disabled){background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.acct-tile,.acct-chip-btn{--h:calc(var(--accent-hue,224) + var(--o,0))}
.acct-tile.open{background:rgba(255,255,255,.1);border-color:hsl(var(--h) var(--acct-s,70%) 62% / .55);box-shadow:inset 3px 0 0 hsl(var(--h) var(--acct-s,72%) 58%)}
.acct-tile.going{opacity:.6}
.acct-tile .acct-nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.acct-tile .acct-nm b{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.acct-tile .acct-nm small{font-size:11.5px;color:var(--pc-8f9bb8,#8f9bb8)}
.acct-tile .acct-n{flex:none}
.acct-tile kbd{display:none}
.acct-links{display:flex;gap:6px}
.acct-links button{flex:1;padding:5px 8px;font-size:12px;min-height:0;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--pc-aeb8d0,#aeb8d0)}
.acct-links button:hover:not(:disabled){background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.3)}
.acct-solo{display:block;padding:6px 12px;font-size:12.5px;color:var(--pc-7d89a8,#7d89a8);text-decoration:none}
.acct-solo:hover{color:var(--pc-c7d3f5,#c7d3f5)}

/* ---- the bar across the top of the page ---- */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;min-height:56px;padding:9px clamp(16px,2vw,32px);background:var(--bg);border-bottom:1px solid var(--line)}
@supports (background:color-mix(in srgb,red 50%,blue)){.bar{background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.bar-gap{flex:1}
.bar-who{display:flex;align-items:center;gap:10px;min-width:0}
.bar-who[hidden]{display:none}
.bar-who .acct-mk{width:28px;height:28px;font-size:10.5px}
.bar-who b{font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-who>span:not(.acct-mk){font-size:12.5px;color:var(--muted);white-space:nowrap}
body.multi-account .bar{box-shadow:0 2px 0 0 hsl(var(--acct-hue,220) var(--acct-s,72%) 55%)}
.banner{margin:0}

/* ---- folded: the sidebar shrinks to a strip of icons (by hand with the button or "[", or by itself in a narrow window); nothing is hidden behind a menu ---- */
body.side-folded .shell{grid-template-columns:68px minmax(0,1fr)}
body.side-folded .side{padding:12px 8px;align-items:stretch}
body.side-folded .side .side-brand{justify-content:center;padding:2px 0 4px}
body.side-folded .side .side-brand .wordmark,body.side-folded .side .side-brand small,body.side-folded .ng,body.side-folded .nl,body.side-folded .acct-tile .acct-nm,body.side-folded .side-status .es,body.side-folded .acct-links,body.side-folded .acct-solo,body.side-folded .side-accts .ng,body.side-folded .ng-row,body.side-folded .acct-cap,body.side-folded .acct-fold{display:none}
body.side-folded .side #nav a,body.side-folded .side .side-foot>a{justify-content:center;padding:10px 0;gap:0}
body.side-folded .side #nav .cnt{position:absolute;top:2px;right:4px;margin:0;padding:0 5px;font-size:9.5px}
body.side-folded .acct-tile{justify-content:center;padding:6px 0;position:relative;border-radius:12px}
body.side-folded .acct-tile .acct-n{position:absolute;top:-4px;right:2px}
body.side-folded .acct-chips{flex-direction:column;align-items:center;gap:8px;padding:0}
body.side-folded .side-status{justify-content:center;flex-direction:column;gap:8px;padding:2px 0}
body.side-folded .side .lock-btn{padding:8px 0}
body.side-folded .bar-who>span:not(.acct-mk){display:none}
body.side-folded .side-fold{margin:0 auto}
.side-fold{display:grid;place-items:center;width:34px;height:30px;padding:0;min-height:0;margin-left:auto;border-radius:9px;background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--pc-9aa6c4,#9aa6c4)}
.side-fold:hover:not(:disabled){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
body.side-folded .side-fold{width:40px}
@media(max-width:640px){body.side-folded .shell{grid-template-columns:56px minmax(0,1fr)}.bar{gap:8px}}
.acct-n{flex:none;font-style:normal;min-width:19px;height:19px;padding:0 6px;border-radius:99px;background:#ff6b5f;color:#fff;font:700 11px/19px system-ui,sans-serif;text-align:center}

/* a short window: tighten the sidebar so the foot stays on screen */
@media(min-width:1061px) and (max-height:940px){
  .side{gap:10px;padding:12px 10px 10px}
  .side #nav a,.side .side-foot>a{padding:7px 12px}
  .ng{margin:9px 12px 3px}
  .acct-tile{padding:6px 9px}
  .acct-links button{padding:4px 8px}
  .side-foot{gap:6px;padding-top:8px}
}

/* the accounts, compact: a row of small marks (the open one ringed), the open one's name beneath */
.ng-row{display:flex;align-items:center;justify-content:space-between;margin:0 6px 2px}
.ng-row .ng{margin:0}
.acct-fold{width:22px;height:22px;display:grid;place-items:center;padding:0;min-height:0;border-radius:7px;background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--pc-9aa6c4,#9aa6c4)}
.acct-fold:hover:not(:disabled){background:rgba(255,255,255,.1);color:#fff}
.acct-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 4px}
.acct-chip-btn{position:relative;width:38px;height:38px;padding:0;min-height:0;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.acct-chip-btn:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.acct-chip-btn.open{border-color:hsl(var(--h) var(--acct-s,72%) 62%);box-shadow:0 0 0 2px hsl(var(--h) var(--acct-s,72%) 58% / .45)}
.acct-chip-btn .acct-mk{width:28px;height:28px;font-size:10.5px}
.acct-chip-btn .acct-n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:17px;box-shadow:0 0 0 2px var(--pc-0a0e1d,#0a0e1d)}
.acct-plus{color:var(--pc-aeb8d0,#aeb8d0);font-size:20px;font-weight:400;border-style:dashed}
.acct-cap{margin:0;padding:0 6px;font-size:12px;color:var(--pc-8f9bb8,#8f9bb8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-cap b{color:#fff;font-weight:650;margin-right:4px}
/* the fold button sits at the top right of the sidebar, level with the brand */
.side .side-fold{position:absolute;top:19px;right:12px;margin:0}
.side .side-brand{padding-right:50px}
body.side-folded .side .side-fold{position:static;margin:0 auto 2px}
body.side-folded .side .side-brand{padding-right:0}

/* ---- spacing and separation (the sidebar uses the height it is given): groups are divided by a hairline, the accounts sit in a panel of their own,
   and the gaps and the size of each row grow with the height of the window, so a tall window is filled and a short one still fits ---- */
.side{gap:clamp(10px,1.6vh,18px);padding:clamp(14px,1.8vh,20px) 12px 12px}
.side .side-brand{padding-bottom:clamp(2px,.6vh,8px)}
.side-accts{padding:10px 10px 11px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);gap:8px}
.side-accts .ng-row{margin:0 2px 2px}
.side-accts .acct-chips{padding:2px 0}
.side-accts .acct-cap{padding:2px 2px 0}
.side-accts .acct-solo{padding:2px 2px}
.side #nav{gap:clamp(2px,.4vh,5px)}
.side #nav a,.side .side-foot>a{padding:clamp(7px,1vh,10px) 12px;font-size:14.5px}
.side #nav .ng{margin:clamp(8px,1.3vh,14px) 0 clamp(3px,.5vh,6px);padding:clamp(9px,1.3vh,14px) 12px 0;border-top:1px solid rgba(255,255,255,.08)}
.side .side-foot{gap:clamp(8px,1.2vh,14px);padding-top:clamp(10px,1.6vh,16px)}
.side .side-status{padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.035)}
.side .lock-btn{padding:clamp(8px,1.2vh,11px) 12px}
body.side-folded .side-accts{padding:8px 4px;background:none;border:0}
body.side-folded .side #nav .ng{display:none}
body.side-folded .side #nav a,body.side-folded .side .side-foot>a{padding:clamp(9px,1.4vh,13px) 0}
body.side-folded .side #nav>a:first-of-type{margin-bottom:2px}
@media(min-width:1061px) and (max-height:940px){
  .side{gap:10px;padding:12px 10px 10px}
  .side #nav a,.side .side-foot>a{padding:7px 12px}
  .side #nav .ng{margin:8px 0 3px;padding:8px 12px 0}
}
main{max-width:1680px;width:100%}
@media(min-width:1061px) and (max-height:800px){
  .side{gap:8px;padding:10px 10px 8px}
  .side #nav a,.side .side-foot>a{padding:5px 12px}
  .side #nav .ng{margin:5px 0 2px;padding:6px 12px 0}
  .side-accts{padding:7px 8px 8px;gap:6px}
  .side .side-status{padding:3px 10px}
  .side .lock-btn{padding:6px 12px}
  .side-foot{gap:5px;padding-top:6px}
}

/* ---- the sidebar never grows sideways: the accounts panel is a grid whose column may shrink below the width of its longest name, and nothing in the sidebar may scroll across ---- */
.side{overflow-x:hidden}
.side-accts{grid-template-columns:minmax(0,1fr);min-width:0}
.side-accts>*{min-width:0}
.acct-tile{min-width:0;max-width:100%;overflow:hidden}
.acct-tile .acct-nm{min-width:0}
.acct-links{min-width:0}
.acct-links button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ng-row{min-width:0}
.acct-chips{min-width:0}

/* ---- a window that does not belong to the open account is covered (window-guard.js) ---- */
html.win-guarded body>.shell{filter:blur(6px) saturate(.6);pointer-events:none;user-select:none}
.win-guard{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(var(--pcr-6-9-19,6,9,19),.78);padding:20px}
.win-card{width:min(480px,100%);padding:30px 32px;border-radius:20px;text-align:center;background:var(--pc-111a33,#111a33);color:var(--pc-e8ecf8,#e8ecf8);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.win-card .acct-mk{width:46px;height:46px;font-size:15px;margin:0 auto 12px;border-radius:13px}
.win-card h2{font-size:19px;margin:0 0 8px;color:#fff}
.win-card p{margin:0;color:var(--pc-aeb9dc,#aeb9dc);line-height:1.55}
.win-card .sub{color:var(--pc-7d89a8,#7d89a8)}
.win-card .row{display:flex;gap:10px;flex-wrap:wrap}
.win-card button:not(.primary){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}

/* the launcher: a window tied to no account lists the accounts and opens each in its own Chrome */
.win-launcher{overflow-y:auto;align-items:start}
.win-card.wide{width:min(720px,100%);margin:6vh auto;text-align:left}
.win-card.wide h2{font-size:21px}
.win-said{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:rgba(52,211,153,.14);color:#6ee7b7}
.win-list{display:grid;gap:10px;margin-top:16px}
.win-acct{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.win-acct[data-open]{border-color:rgba(var(--pcr-143-176-255,143,176,255),.55)}
.win-acct .acct-mk{width:38px;height:38px;font-size:13px;margin:0;flex:none}
.win-acct-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.win-acct-t b{color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-acct-t small{color:var(--pc-8f9bb8,#8f9bb8);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-need{margin-top:1px;font-size:12.5px}
.win-need.bad{color:#ff8a80}.win-need.warn{color:#f2b955}.win-need.ok{color:#6ee7b7}.win-need.none{color:var(--pc-7d89a8,#7d89a8)}

/* clearer small things on the dark sidebar: icons, group names, fold buttons */
.ng{color:var(--pc-97a4c6,#97a4c6)}
.acct-fold,.side-fold{color:var(--pc-cfd8f0,#cfd8f0);border-color:rgba(255,255,255,.26)}
.acct-fold:hover:not(:disabled),.side-fold:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.14)}
.side #nav a,.side .side-foot>a{color:var(--pc-c3cde6,#c3cde6)}
.side #nav a .ni,.side .side-foot>a .ni{opacity:1;color:var(--pc-aebcea,#aebcea)}
.side #nav a.on .ni,.side .side-foot>a.on .ni{color:var(--pc-d6e2ff,#d6e2ff)}
.acct-tile .acct-nm small,.acct-cap{color:var(--pc-a7b3d2,#a7b3d2)}
.acct-chip-btn .acct-mk{width:30px;height:30px;font-size:13px}
.acct-chip-btn{width:40px;height:40px}
.acct-plus{color:var(--pc-cfd8f0,#cfd8f0);border-color:rgba(255,255,255,.3)}
.side-status .es{color:var(--pc-b3bfdc,#b3bfdc)}
.acct-links button{color:var(--pc-cfd8f0,#cfd8f0);border-color:rgba(255,255,255,.22)}
.side-fold svg,.acct-fold svg{stroke-width:2.2}

/* the account at the top of the page: the same mark as everywhere else (white initials on the account's colour), its name in the page's own text colour */
.bar-who{gap:12px}
.bar .bar-who .acct-mk{width:34px;height:34px;font-size:12.5px;border-radius:10px}
.bar-who b{font-size:16px;font-weight:700;color:var(--ink)}
.bar-who>span:not(.acct-mk){font-size:13px;font-weight:500;color:var(--muted);opacity:1;padding:0;background:none}
.bar .bar-who .acct-mk{color:#fff}

/* ---- the menu never squashes (7 Oct 2026) ----
   When the menu was taller than the window, the flex layout shrank its parts to fit: the fold button was squeezed to a sliver and its icon drew over the account marks and
   the pages beneath. Nothing in the menu may shrink now; a menu that is still too tall scrolls instead. And in a shorter window the whole menu, open or folded, is
   tightened a little so it fits without scrolling (down to about 700px high with every page showing, in the next two blocks). */
.side > *{flex-shrink:0}
.side .side-fold{flex:none}
@media(max-height:940px){
  body.side-folded .side{gap:6px;padding:10px 8px 8px}
  body.side-folded .side #nav a,body.side-folded .side .side-foot>a{padding:6px 0}
  body.side-folded .side-accts{padding:4px 4px}
  body.side-folded .acct-chips{gap:5px}
  body.side-folded .acct-chip-btn{width:34px;height:34px}
  body.side-folded .side .side-fold{margin:0 auto}
  body.side-folded .side-foot{gap:4px;padding-top:6px}
  body.side-folded .side-status{gap:5px}
}
@media(min-width:1061px) and (max-height:940px){
  .side{gap:8px;padding:10px 10px 8px}
  .side #nav{gap:1px}
  .side #nav a,.side .side-foot>a{padding:5px 12px}
  .side #nav .ng,.ng{margin:6px 0 2px;padding:7px 12px 0}
  .side-accts{padding:7px 8px 8px;gap:5px}
  .acct-chip-btn{width:34px;height:34px}
  .side-foot{gap:6px;padding-top:7px}
  .side .side-status{padding:4px 10px}
  .side .lock-btn{padding:6px 12px}
}
/* a very short window (about 700px high, a small laptop screen): tighter again, so every page still shows without scrolling */
@media(max-height:780px){
  .side{gap:6px;padding-top:8px;padding-bottom:6px}
  .side #nav a,.side .side-foot>a{padding-top:3px;padding-bottom:3px}
  body.side-folded .side #nav a,body.side-folded .side .side-foot>a{padding:4px 0}
  .side #nav .ng,.ng{margin:4px 0 1px;padding-top:5px}
  .side-accts{padding:5px 7px 6px;gap:4px}
  .side-foot{gap:4px;padding-top:5px}
  .side .side-status{padding:3px 10px}
  .side .lock-btn{padding:5px 12px}
  body.side-folded .side-foot{gap:2px;padding-top:4px}
  body.side-folded .acct-chips{gap:4px}
  body.side-folded .acct-chip-btn{width:32px;height:32px}
}

/* Compact menu: the 58px day/night switch is wider than the 52px rail and was cut off - fold it to one round button showing the current mode */
body.side-folded .side .side-status .theme-switch{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}
body.side-folded .side .side-status .theme-switch .ts-knob{display:none}
body.side-folded .side .side-status .theme-switch svg{width:18px;height:18px}
body.side-folded .side .side-status .theme-switch .ts-moon,body.side-folded .side .side-status .theme-switch[aria-checked="true"] .ts-sun{display:none}
body.side-folded .side .side-status .theme-switch[aria-checked="true"] .ts-moon{display:block;color:#fff}
body.side-folded .side .side-status .theme-switch .ts-sun{color:#ffd66b}
body.side-folded .side .side-status{padding:4px 0;background:none}