/* ===========================================================
   Dashboard CSS — reorganized into numbered categories
   - Order of rules **within** each category preserved
   - No deletions, !important kept as-is
   - Responsive rules moved to the end
   =========================================================== */

/* ========== 01 • Variables & Root ========== */
:root{
  --violet: 248 100% 77.45%;
  --pink: 325 75% 65%;
  --blue-cart: 198 100% 65%;
  --gold: 46 100% 62%;
  --platinum: 196 60% 72%;
  --text: 0 0% 100%;
  --muted: 0 0% 85%;
  --corner: 28px;
  --corner-pill: 24px;
  --glass: 0 0% 100% / 7%;
  --stroke: 0 0% 100% / 36%;
  --tb-level-color: hsl(var(--violet));
  --profile-square-color: hsl(248 100% 77.45%);
  --profile-circle-color: hsl(312.16 100% 70%);
  --token-circle-color: hsl(312.16 100% 70%);
  --rank1: 0 0% 85%;
  --rank2: 25 40% 60%;
  --rank3: 110 85% 70%;
  --rank4: 190 95% 70%;
  --rank5: 350 70% 60%;
  --rank6: 249 100% 77%;
  --rank7: 310 100% 70%;
  --rank8: 42 95% 68%;
  --rank9: 30 100% 60%;
  --tokens-gradient: linear-gradient(135deg, hsl(328 100% 71%), hsl(267 100% 60%));
  --tokens-glow: hsl(328 100% 71% / 0.85);
  /* Unified dropdown width (menus: gear / notif / wish / cart) */
  --dropdown-w: 210px;
  --dropdown-max-h: 150px;
  
    --cart-col: 3.2rem;
}
:root :is(.tb-frame,body[class*="rank-"] .tb-frame,[data-rank] .tb-frame,[class*="level-"] .tb-frame).tb-frame{
  box-shadow: 0 0 16px color-mix(in srgb,var(--tb-level-color,#7A8CFF) 72%,transparent), 0 0 56px color-mix(in srgb,var(--tb-level-color,#7A8CFF) 42%,transparent), 0 0 120px color-mix(in srgb,var(--tb-level-color,#7A8CFF) 24%,transparent) !important;
}
:root :is(body.rank-10,[data-rank="10"],.level-10) .tb-frame.tb-frame{
  overflow: visible !important;
  box-shadow: 0 0 16px color-mix(in srgb,#FF4FEF 72%,transparent), 0 0 56px color-mix(in srgb,#7A8CFF 42%,transparent), 0 0 120px color-mix(in srgb,#FF4FEF 24%,transparent) !important;
}

body.rank-10 #ddGear{
  border-color: hsl(var(--pink)) !important;
  box-shadow: 0 0 12px color-mix(in hsl,hsl(var(--pink)) 60%,transparent),
              0 0 24px color-mix(in hsl,hsl(var(--pink)) 45%,transparent);
}

body.rank-10 .tb-side-panel.is-gear{
  border-color: hsl(var(--pink)) !important;
  box-shadow: 0 0 12px color-mix(in hsl,hsl(var(--pink)) 60%,transparent),
              0 0 24px color-mix(in hsl,hsl(var(--pink)) 45%,transparent);
}
:root{
  --tb-welcome-scale: 0.97;
  --tb-welcome-nudge-x: 0px;
  --tb-welcome-nudge-y: 0px;
}
:root :is(body.rank-10,[data-rank="10"],.level-10){
  --tb-welcome-nudge-x: 0.45px;
  --tb-welcome-nudge-y: -0.6px;
}
:root :is(body[class*="rank-"],[data-rank],[class*="level-"]) .tb-frame .tb-welcome.tb-welcome{
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  position: relative !important;
  left: var(--tb-welcome-nudge-x) !important;
  top: var(--tb-welcome-nudge-y) !important;
  white-space: nowrap;
  letter-spacing: normal !important;
  contain: paint !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
:root :is(body.rank-10,[data-rank="10"],.level-10) .tb-header.tb-header{
  align-items: center !important;
}
:root :is(.tb-frame,.tb-wrapper,.dropdown.left-of-frame,.dropdown.right-of-frame,#ddUser,#ddCart) :where(a,a:visited,a:hover,a:active,a:focus,a:focus-visible){
  color: currentColor !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* ========== 02 • Base & Resets ========== */
*{
  box-sizing: border-box;
}
/* ========== 03 • Layout & Frame (tb-*) ========== */

/* Dashboard visibility (Eye toggle)
   - Hidden state must not block other header interactions (pointer-events:none)
   - Light fade for show/hide
*/
.tb-frame{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.tb-frame.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}

/* Desktop-only helpers (dashboard-focus.js)
   - Hover zoom (x1.5) anchored from top (scale applied to .tb-wrapper)
   - Tooltip on non-clickable areas
   - Fullscreen focus overlay (centered)
*/
@media (min-width: 766px){
  .dashboard-header-root .tb-wrapper{
    will-change: transform;
    transition: transform 280ms ease;
    transform: translateZ(0);
  }

  .dashboard-header-root.tb-focus-hover .tb-wrapper{
    transform: scale(1.5);
    transform-origin: top center;
  }

  body.auth-off .dashboard-header-root.tb-focus-hover .tb-wrapper,
  body.auth-off .dashboard-header-root.tb-in-focus .tb-wrapper{
    transform: none !important;
  }

  .tb-dashboard-tooltip{
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 12px;
    border: 3px solid var(--tb-level-color);
    background: hsl(0 0% 8% / 88%);
    color: hsl(var(--text));
    font-family: 'OrbitronVA',sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2px;
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow:
      0 0 12px color-mix(in hsl,var(--tb-level-color) 60%,transparent),
      0 0 24px color-mix(in hsl,var(--tb-level-color) 45%,transparent);
  }

  .tb-dash-focus-modal{
    position: fixed;
    inset: 0;
    z-index: 2147483701;
    display: grid;
    place-items: center;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
  }

  .tb-avatarConfirm{
    position: fixed;
    inset: 0;
    z-index: 2147483710;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .tb-avatarConfirm[hidden]{
    display: none;
  }

  .tb-avatarConfirm__box{
    width: min(420px, 100%);
    padding: 28px 24px;
    border-radius: 14px;
    border: 2px solid rgba(253,253,244,0.9);
    background: linear-gradient(180deg, rgba(15,10,30,0.95), rgba(10,8,20,0.95));
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 12px rgba(138,43,226,0.08);
    text-align: center;
  }

  .tb-avatarConfirm__title{
    margin: 0 0 10px;
    color: #fff;
    font-family: 'OrbitronVA', sans-serif;
    font-size: 22px;
    font-weight: 800;
  }

  .tb-avatarConfirm__text{
    margin: 0 0 22px;
    color: hsl(var(--text));
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
  }

  .tb-avatarConfirm__actions{
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
  }

  .tb-avatarConfirm__btn{
    min-width: 96px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: hsl(var(--text));
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .tb-avatarConfirm__btn:hover,
  .tb-avatarConfirm__btn:focus-visible{
    transform: translateY(-1px);
    outline: none;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 0 10px rgba(255,255,255,0.08);
  }

  .tb-avatarConfirm__btn--confirm{
    border-color: rgba(255, 209, 102, 0.28);
    background: rgba(255, 209, 102, 0.10);
    color: rgba(255,245,214,0.98);
  }

  .dashboard-header-root.tb-in-focus{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    pointer-events: auto;
    z-index: 2147483702;
  }

  .dashboard-header-root.tb-in-focus .tb-wrapper{
    transform: scale(var(--tb-dash-focus-scale, 1));
    transform-origin: top center;
    transition: transform 220ms ease;
  }

  .dashboard-header-root.tb-in-focus.tb-focus-hover .tb-wrapper{
    transform: scale(var(--tb-dash-focus-scale, 1));
  }
}



.tb-wrapper{
  position: relative;
  overflow: visible;
  width: 620px;
  max-width: 620px;
  min-width: 620px;
  margin: 24px auto 12px;
  background: transparent;
}
.tb-frame{
  position: relative;
  z-index: 1;
  padding: 12px 18px 18px;
  border-radius: 9px;
  overflow: visible !important;
  background: rgba(10,10,13,0.60);
  border: 3px solid var(--tb-level-color);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 0 12px color-mix(in hsl,var(--tb-level-color) 60%,transparent), 0 0 24px color-mix(in hsl,var(--tb-level-color) 45%,transparent);
}
body.auth-off .dashboard-header-root{
  pointer-events: none;
}
body.auth-off .dashboard-header-root .tb-frame{
  opacity: 1;
  background: rgb(18,18,22);
  filter: grayscale(0.9);
}
.tb-header{
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tb-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}
body.rank-10 .tb-frame::before,
body.rank-10 .identity::before{
  content: "";
  position: absolute;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
body.rank-10 .tb-frame{
  position: relative;
  overflow: visible;
}
body.rank-10 .tb-frame::before{
  inset: -3px;
  padding: 3px;
  border: 3px solid transparent;
  background: linear-gradient(#0000,#0000) padding-box,linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink))) border-box;
  z-index: 3;
  box-shadow: 0 0 10px hsl(var(--violet)),0 0 20px hsl(var(--pink)),0 0 36px hsl(var(--pink));
}
.tb-photo-frame{
  border: 3px solid hsl(var(--pink));
  box-shadow: 0 0 10px hsl(var(--pink)),0 0 20px hsl(var(--pink));
}
.tb-photo-circle{
  border: 3px solid hsl(var(--violet));
  box-shadow: 0 0 10px hsl(var(--violet)),0 0 20px hsl(var(--violet));
  border-radius: 50%;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .identity,
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .tb-frame{
  border: 0;
  background: rgba(0, 0, 0, 0.92);
  position: relative;
  overflow: visible;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .tb-frame{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .tb-frame::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  border: 3px solid transparent;
  background: linear-gradient(#0000,#0000) padding-box,linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink))) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 10px hsl(var(--violet)),0 0 20px hsl(var(--pink)),0 0 36px hsl(var(--pink));
}
body.rank-9 .tb-frame{
  border-color: #7A8CFF !important;
  box-shadow: 0 0 20px color-mix(in srgb,#FF4FEF 70%,transparent),0 0 40px color-mix(in srgb,#7A8CFF 50%,transparent);
}
body.rank-9 .tb-frame::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 4px solid transparent;
  background: linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8,.rank-9) .tb-frame{
  border-color: var(--tb-level-color) !important;
  box-shadow: 0 0 20px color-mix(in srgb,var(--tb-level-color) 70%,transparent), 0 0 40px color-mix(in srgb,var(--tb-level-color) 50%,transparent) !important;
}
body.rank-10 .tb-frame{
  border-color: #7A8CFF !important;
  box-shadow: 0 0 28px color-mix(in srgb,#FF4FEF 70%,transparent), 0 0 56px color-mix(in srgb,#7A8CFF 50%,transparent) !important;
}
.tb-frame::after{
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  border: 3.5px solid transparent;
  background: linear-gradient(#0000,#0000) padding-box, linear-gradient(90deg,var(--tb-level-color),var(--tb-level-color)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
body.rank-10 .tb-frame::after{
  background: linear-gradient(#0000,#0000) padding-box, linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink))) border-box;
}
.tb-frame > *:not(.tb-overlay){
  position: relative;
  z-index: 1;
}
body.rank-10 .tb-frame::before{
  will-change: transform,filter;
  transform: translateZ(0);
}

/* ========== 04 • Typography & Fonts ========== */

.tb-welcome{
  margin: 0;
  font-size: 34px;
  color: var(--tb-level-color);
  text-shadow: 0 0 5px color-mix(in hsl,var(--tb-level-color) 45%,transparent);
}
@font-face{
  font-family: 'OrbitronVA';
  src: url('../fonts/orbitron-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.tb-gradient-text{
  background: linear-gradient(135deg,hsl(328 100% 73%),hsl(267 100% 68%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 8px hsl(267 100% 68% / 0.25);
}

/* ========== 05 • Buttons & Controls ========== */

.icon-btn{
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: hsl(var(--glass));
  border: 1.75px solid var(--tb-level-color);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 6px color-mix(in hsl,var(--tb-level-color) 35%,transparent), 0 0 14px color-mix(in hsl,var(--tb-level-color) 25%,transparent);
}

/* Eye pin cursor hint (red pin) */
.icon-btn.eye.cursor-pin{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff2b2b' d='M14.5 2.5c-.6-.6-1.6-.6-2.2 0l-1.7 1.7c-.3.3-.4.7-.3 1.1l.7 3.3-3.8 3.8-2.8.4c-.4.1-.8.4-.9.8-.1.4 0 .9.3 1.2l2.4 2.4-3 3c-.4.4-.4 1 0 1.4s1 .4 1.4 0l3-3 2.4 2.4c.3.3.8.4 1.2.3.4-.1.7-.5.8-.9l.4-2.8 3.8-3.8 3.3.7c.4.1.8 0 1.1-.3l1.7-1.7c.6-.6.6-1.6 0-2.2L14.5 2.5z'/%3E%3C/svg%3E") 12 2, pointer;
}

/* Subtle feedback on pin */
.icon-btn.eye.pin-pulse{
  animation: tbPinPulse 220ms ease-out;
}
@keyframes tbPinPulse{
  0%{ transform: scale(1); }
  55%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
.icon-btn.bell svg{
  color: #ff7dd8;
}
.icon-btn.heart svg{
  color: #ff5167;
}
.icon-btn.cart svg{
  color: hsl(var(--blue-cart));
}
.ghost-btn,.primary-btn{
  font: inherit;
  padding: 2px 5px;
  border-radius: 18px;
  cursor: pointer;
  color: #fff;
  border: 5px solid hsl(var(--stroke));
  background: hsl(var(--glass));
}
.primary-btn{
  background: linear-gradient(135deg,hsl(var(--violet) / 0.7),hsl(var(--pink) / 0.7));
  border-color: transparent;
}
.qty{
  display: flex;
  align-items: center;
  gap: 6px;
}
.qty-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid hsl(0 0% 100% / 20%);
  background: hsl(0 0% 100% / 6%);
  color: #fff;
  cursor: pointer;
}
.qty-val{
  min-width: 24px;
  text-align: center;
}
.icon-btn.cart img{
  display: block;
  width: 40px;
  height: 40px;
}
body.rank-10 .icon-btn.gear,
body.rank-10 .icon-btn.eye{
  border-color: hsl(var(--pink)) !important;
  box-shadow: 0 0 6px color-mix(in hsl,hsl(var(--pink)) 35%,transparent), 0 0 14px color-mix(in hsl,hsl(var(--pink)) 25%,transparent);
}

body.rank-10 .dock.outside .connected-anchor{
  border-color: hsl(var(--pink)) !important;
}

body.rank-10 .dock.outside .connected-actions:first-of-type .welcome-box,
body.rank-10 .dock.outside .connected-actions:first-of-type .icon-btn.bell,
body.rank-10 .dock.outside .connected-actions:first-of-type .icon-btn.heart,
body.rank-10 .dock.outside .connected-actions:first-of-type .icon-btn.cart{
  border-color: hsl(var(--violet)) !important;
  box-shadow: 0 0 6px color-mix(in hsl,hsl(var(--violet)) 35%,transparent), 0 0 14px color-mix(in hsl,hsl(var(--violet)) 25%,transparent);
}
.icon-btn.cart .cart-badge,
#btnCart .cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff2e86;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(255,46,134,.6);
  pointer-events: none;}

.icon-btn.cart .cart-badge:empty,
#btnCart .cart-badge:empty { display: none;}

.icon-btn.cart,
#btnCart,
.icon-btn.heart,
#btnWish {
  position: relative;
}

.icon-btn.heart .wish-badge,
#btnWish .wish-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff2e86;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(255,46,134,.6);
  pointer-events: none;
  z-index: 2;
}

.icon-btn.heart .wish-badge:empty,
#btnWish .wish-badge:empty,
.icon-btn.heart .wish-badge.is-hidden,
#btnWish .wish-badge.is-hidden {
  display: none;
}

#wishlistDropdownList .wishlist-link {
  display: block;
  color: inherit;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}

#wishlistDropdownList .wishlist-link:hover {
  text-decoration: none;
}

#wishlistDropdownList .wishlist-title {
  color: hsl(var(--gold));
  font-family: 'OrbitronVA', sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 0 6px hsl(var(--gold) / 0.28), 0 0 14px hsl(var(--gold) / 0.16);
}

#wishlistDropdownList .wishlist-meta {
  font-weight: 700;
}

#wishlistDropdownList .wishlist-meta.cat-eisth {
  color: var(--menu-eisth-pink-lite, #ff8dd8);
  text-shadow:
    0 0 5px color-mix(in oklab, var(--menu-eisth-pink-lite, #ff8dd8) 72%, transparent),
    0 0 10px color-mix(in oklab, var(--menu-eisth-pink-lite, #ff8dd8) 42%, transparent);
}

#wishlistDropdownList .wishlist-meta.cat-figure {
  color: #cfc4ff;
  text-shadow:
    0 0 5px color-mix(in oklab, #8ab6ff 70%, transparent),
    0 0 10px color-mix(in oklab, #5f5fa0 38%, transparent);
}

#wishlistDropdownList .wishlist-meta.cat-service {
  color: #e6d08a;
  text-shadow:
    0 0 5px color-mix(in oklab, #e6d08a 68%, transparent),
    0 0 10px color-mix(in oklab, #b59b5f 34%, transparent);
}

#wishlistDropdownList .wishlist-meta.cat-merch {
  color: #cfd6e5;
  text-shadow:
    0 0 5px color-mix(in oklab, #cfd6e5 68%, transparent),
    0 0 10px color-mix(in oklab, #a9b3c4 34%, transparent);
}

#wishlistDropdownList .wishlist-meta.cat-collectible {
  color: var(--pink-light, #ffb2ea);
  text-shadow:
    0 0 5px color-mix(in oklab, var(--pink-light, #ffb2ea) 74%, transparent),
    0 0 10px color-mix(in oklab, var(--pink-light, #ffb2ea) 42%, transparent);
}

#wishlistDropdownList .wishlist-empty {
  opacity: 0.86;
  text-align: center;
}


/* ========== 06 • Dropdowns & Menus ========== */
/* Admin-only entry in gear menu */
#ddGear .admin-only{ display:none; }
body.is-admin #ddGear .admin-only{ display:block; }


.dropdown{
  position: absolute;
  z-index: 200;
  display: none;
  /* Hover buffer: lets the cursor travel from icon → menu without the preview collapsing */
  --tb-dd-bridge: 14px;
  width: min(var(--dropdown-w), calc(100vw - 16px));
  min-width: min(var(--dropdown-w), calc(100vw - 16px));
  max-width: min(var(--dropdown-w), calc(100vw - 16px));
  /* Keep equal inner gutters on both sides (right gutter measured from the scrollbar) */
  padding: 5px 9px;
  max-height: var(--dropdown-max-h, 150px);
  overflow-y: auto;
  /* Keep scrolling but hide the scrollbar (notif / wish / cart / gear menus) */
  scrollbar-gutter: stable;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
  color: #fff;
  background: hsl(0 0% 8% / 88%);
  border: 3px solid var(--tb-level-color);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 0 12px color-mix(in hsl,var(--tb-level-color) 60%,transparent), 0 0 24px color-mix(in hsl,var(--tb-level-color) 45%,transparent);
  font-size: 10px;}

body.rank-10 #ddNotif,
body.rank-10 #ddWish,
body.rank-10 #ddCart{
  border-color: hsl(var(--violet)) !important;
  box-shadow: 0 0 12px color-mix(in hsl,hsl(var(--violet)) 60%,transparent), 0 0 24px color-mix(in hsl,hsl(var(--violet)) 45%,transparent);
}

/* WebKit scrollbar: hide while preserving scroll */
.dropdown::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.dropdown::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--tb-dd-bridge));
  height: var(--tb-dd-bridge);
}
#ddGear{
  --tb-dd-bridge: 18px;
  --dropdown-max-h: 1000px;
  padding: 4px 9px;
}

#ddNotif,
#ddWish{
  --tb-dd-bridge: 18px;
  --dropdown-max-h: 1000px;
  padding: 4px 9px;
}

#ddGear .dropdown-list{
  margin: 0;
}
.dropdown.show{
  display: block;
}
.dropdown.mega{
  font-size: 11px;
}
.dropdown.down{
  transform: translateY(6px);
}
.dropdown-title{
  font-size: 12px;
  margin-bottom: 3px;
  text-align: center;
}
.dropdown-list{
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 2px;
}
.dropdown-list.mega li{
  padding: 3px 6px;
  background: hsl(0 0% 100% / 4%);
  border: 1px solid hsl(0 0% 100% / 10%);
  border-radius: 7px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dropdown-list li.danger{
  color: #ff8a8a;
  font-weight: 900;
}
.identity,.card,.dropdown,.dock-inner,.track{
  border-color: var(--tb-level-color);
}

#ddCart {
  --tb-dd-bridge: 18px;
  --dropdown-max-h: 1000px;
  padding: 4px 9px;
  --cart-col: 2.4rem;
}

#ddCart .cart-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#ddCart .cart-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

#ddCart .cart-list > .cart-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,var(--cart-col)) minmax(0,1fr) minmax(0,var(--cart-col));
  grid-template-areas:
    "icon meta price"
    "icon controls price";
  align-items: center;
  column-gap: 6px;
  row-gap: 0px;
  padding: 2px 6px;
  border-radius: 9px;
  background: hsl(0 0% 100% / 5%);
  border: 1px solid hsl(0 0% 100% / 12%);
  min-height: 28px;}

#ddCart .cart-list > .cart-item::before {
  content: attr(data-icon, "📦");
  grid-area: icon;
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 14px;
  font-size: 11px;
  line-height: 14px;
  opacity: .95;
  justify-self: center;}

#ddCart .cart-item.empty {
  font-size: 11px;
  padding: 3px;
  border: 2px dashed rgba(255,255,255,.25);
  border-radius: 9px;}

#ddCart .cart-item .meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  gap: 1px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  transform: none;}

#ddCart .cart-item .name {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.05;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;}

#ddCart .cart-item .cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  opacity: .85;
  margin-left: 2px;}

#ddCart .cart-item .controls {
  grid-area: controls;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  transform: none;}

#ddCart .cart-item .controls button {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.2);
  background: hsl(0 0% 100% / 6%);
  color: inherit;
  font-size: 10px;
  cursor: pointer;}

#ddCart .cart-item .controls .rm svg {
  width: 10px;
  height: 10px;
  display: block;
  pointer-events: none;}

#ddCart .cart-item .qty-val {
  width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;}

#ddCart .cart-item .price {
  grid-area: price;
  position: static;
  transform: none;
  min-width: 0;
  max-width: 100%;
  text-align: right;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  justify-self: end;}

#ddCart .cart-sub {
  font-size: 11px;
  gap: 5px;
  margin-top: 5px;
  margin-bottom: 5px;}

#ddCart .cart-actions {
  margin-top: 5px;}

#ddCart .cart-actions .ghost-btn,
#ddCart .cart-actions .primary-btn {
  font-size: 10px;
  padding: 4px 7px;
  line-height: 1;
  border-width: 3px;
  border-radius: 11px;}

#ddCart .cart-actions .primary-btn{
  border-color: color-mix(in hsl, var(--tb-level-color) 56%, transparent);
  background: color-mix(in hsl, var(--tb-level-color) 18%, transparent);
  box-shadow: 0 0 12px color-mix(in hsl, var(--tb-level-color) 24%, transparent), 0 0 24px color-mix(in hsl, var(--tb-level-color) 16%, transparent);
}

#ddCart .cart-actions .primary-btn:hover,
#ddCart .cart-actions .primary-btn:focus-visible{
  border-color: color-mix(in hsl, var(--tb-level-color) 76%, transparent);
  background: color-mix(in hsl, var(--tb-level-color) 26%, transparent);
  box-shadow: 0 0 16px color-mix(in hsl, var(--tb-level-color) 32%, transparent), 0 0 30px color-mix(in hsl, var(--tb-level-color) 22%, transparent);
}

body.rank-10 #ddCart .cart-actions .primary-btn{
  border-color: rgba(255,124,196,0.42);
  background: rgba(124,72,255,0.18);
  box-shadow: 0 0 12px rgba(255,124,196,0.18), 0 0 24px rgba(124,72,255,0.16);
}

body.rank-10 #ddCart .cart-actions .primary-btn:hover,
body.rank-10 #ddCart .cart-actions .primary-btn:focus-visible{
  border-color: rgba(255,124,196,0.58);
  background: rgba(124,72,255,0.24);
  box-shadow: 0 0 16px rgba(255,124,196,0.24), 0 0 30px rgba(124,72,255,0.22);
}

.dropdown.mega > .ghost-btn,
.dropdown.mega > a.ghost-btn {
  display: block;
  width: fit-content;
  min-width: 94px;
  margin: 10px auto 0;
  padding: 8px 10px;
  line-height: 1;
  text-align: center;
  border-width: 3px;
  border-radius: 12px;}

/* ========== 06b • Side Panels (mobile) ========== */

.tb-side-overlay{
  position: fixed;
  inset: 0;
  background: var(--tb-side-overlay-bg, rgba(0,0,0,0.58));
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
  z-index: 999;
}

.tb-side-overlay.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms ease;
}

body.rank-10 #tbDashFocusOverlay{
  background: rgba(0,0,0,0.72);
}

.tb-side-panel{
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--tb-side-w, 80vw);
  background: hsl(0 0% 8% / 88%);
  border: 3px solid var(--tb-level-color);
  border-radius: 0;
  padding: 5px 9px;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  z-index: 1000;
  will-change: transform;
}

.tb-side-panel.is-dashboard{
  overflow-x: hidden;
}


.tb-side-panel.left{
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  left: 0;
  transform: translateX(-102%);
  transition: transform 220ms ease;
}

.tb-side-panel.right{
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  right: 0;
  transform: translateX(102%);
  transition: transform 220ms ease;
}

.tb-side-panel.is-open{
  transform: translateX(0);
  box-shadow: 0 0 12px color-mix(in hsl,var(--tb-level-color) 60%,transparent), 0 0 24px color-mix(in hsl,var(--tb-level-color) 45%,transparent);
}

.tb-side-title{
  font-size: clamp(22px, 6vw, 34px);
  margin-bottom: 10px;
  text-align: center;
  font-weight: 900;
  font-family: 'OrbitronVA',sans-serif;
  letter-spacing: 0.3px;
}

body.tb-side-open{
  overflow: hidden;
}
  
/* ========== 07 • Cart & Quantity ========== */

.cart-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.cart-item{
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  background: hsl(0 0% 100% / 4%);
  border: 1px solid hsl(0 0% 100% / 10%);
}
.cart-sub,.cart-actions{
  display: flex;
  margin-top: 12px;
}
.cart-sub{
  justify-content: space-between;
  align-items: center;
  font-size: 26px;
}
.cart-actions{
  gap: 12px;
  justify-content: flex-end;
}

/* ========== 08 • Identity & Profile (cards, avatar) ========== */

.identity{
  margin-top: 4px;
  padding: 8px 8px 16px;
  border-radius: 22px;
  position: relative;
  background: transparent;
  border: 0;
}
.rank-title{
  text-align: center;
  font-size: 35px;
  margin-top: 8px;
  margin-bottom: 18px !important;
}
.id-grid,.col{
  display: grid;
}
.id-grid{
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.col{
  gap: 6px;
  justify-items: center;
}
.card{
  border-radius: var(--corner-pill);
  background: hsl(0 0% 100% / 3%);
  border: 1px solid var(--tb-level-color);
  padding: 14px;
  text-align: center;
  width: 100%;
}

/* Extra bottom air for LEVEL / VOXENS cards (without affecting avatar square) */
.card:has(#levelText),
.card:has(#tokensLabel){
  padding-bottom: 38px;
}
.tokencap{
  border: 5px solid hsl(var(--stroke));
}
.avatar-circle{
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18,14,28,0.88);
  border: 5px solid var(--tb-level-color);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease;
}
.avatar-circle:focus,
.avatar-circle:focus-visible{
  outline: none;
}

.avatar-circle:hover,
.avatar-circle.has-avatar:focus-visible{
  transform: translateY(-1px);
}
.avatar-circle::before,
.avatar-circle::after{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.avatar-circle::before{
  content: "";
  inset: 0;
  background: rgba(10,8,18,0.62);
  z-index: 1;
}
.avatar-circle::after{
  content: "🗑️";
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  font-size: 30px;
  line-height: 1;
  z-index: 2;
}
.avatar-circle.has-avatar:hover::before,
.avatar-circle.has-avatar:hover::after,
.avatar-circle.has-avatar:focus-visible::before,
.avatar-circle.has-avatar:focus-visible::after{
  opacity: 1;
}
.avatar-circle img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: none;
}
.initials{
  position: relative;
  z-index: 1;
  font-size: 46px;
  font-weight: 1000;
}
.avatar-circle.is-uploading{
  opacity: .72;
  pointer-events: none;
}
.card.borderless{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.card.borderless.pill.big{
  height: 176px;
}
.card.pill.big.tokens-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.card.pill.big.tokens-card .dot.gradient{
  width: 146px !important;
  height: 146px !important;
  border: none !important;
  box-shadow: none !important;
}
.card.avatar.tall{
  position: relative;
}
.card.avatar{
  border-width: 4px !important;
  border-color: var(--tb-level-color);
}
.tokens-card .dot,
.tokens-card .dot.gradient,
.tokens-card .tokencap,
.tokencap{
  background: transparent !important;
  border-color: var(--tb-level-color) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none;
  box-shadow: none !important;
}
.tokens-card .dot.tokencap{
  position: relative;
  width: 132px;
  height: 132px;
  margin-top: 11px;
}
.tokens-card .dot.tokencap::before,
.tokens-card .dot.tokencap::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tokens-card .tokencap{
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none;
  box-shadow: 0 0 10px color-mix(in hsl,var(--tb-level-color) 55%,transparent), 0 0 24px color-mix(in hsl,var(--tb-level-color) 45%,transparent) !important;
}
.tokens-card .dot.tokencap #tokenValue{
  font-size: 1.8rem;
}
#avatarCircle .initials::after{
  content: "📷";
  font-size: 65px;
  line-height: 1;
  opacity: .92;
  pointer-events: none;
}
body.rank-10 .identity::before{
  inset: 0;
  padding: 2.5px;
  border: 2.5px solid transparent;
  background: linear-gradient(#0000,#0000) padding-box,linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink))) border-box;
  z-index: 0;
}
body.rank-10 .card.avatar.tall{
  border-color: hsl(var(--pink)) !important;
}
body.rank-10 .card.avatar.tall .avatar-circle{
  border-color: hsl(var(--violet)) !important;
}
body.rank-10 .card.pill.big.tokens-card .dot.tokencap{
  border-color: hsl(var(--pink)) !important;
  box-shadow: 0 0 14px color-mix(in hsl,var(--tb-level-color) 62%,transparent), 0 0 32px color-mix(in hsl,var(--tb-level-color) 52%,transparent) !important;
  margin-top: 11px;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .identity::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  border: 2.5px solid transparent;
  background: linear-gradient(#0000,#0000) padding-box,linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink))) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  box-shadow: 0 0 6px hsl(var(--violet) / .9),0 0 12px hsl(var(--pink) / .8),0 0 24px hsl(var(--pink) / .7),0 0 48px hsl(var(--pink) / .6);
  z-index: 0;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .card.pill.big.tokens-card .dot.tokencap{
  box-shadow: 0 0 14px color-mix(in hsl,var(--tb-level-color) 62%,transparent),0 0 32px color-mix(in hsl,var(--tb-level-color) 52%,transparent) !important;
  margin-top: 11px;
}
body.rank-9 .identity::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  border: 2.5px solid transparent;
  background: linear-gradient(#0000,#0000) padding-box,linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink))) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  box-shadow: 0 0 6px hsl(var(--violet) / 0.9),0 0 12px hsl(var(--pink) / 0.8),0 0 24px hsl(var(--pink) / 0.7),0 0 48px hsl(var(--pink) / 0.6);
  z-index: 0;
}
body.rank-9 .identity{
  border: 0;
  background: transparent;
  position: relative;
  overflow: visible;
}
.identity .card.avatar{
  position: relative;
}
.identity{
  box-shadow: 0 0 5px hsl(var(--violet) / 0.60), 0 0 10px hsl(var(--pink) / 0.44), 0 0 18px hsl(var(--pink) / 0.30);
}
body.rank-10 .identity::before{
  box-shadow: 0 0 5px hsl(var(--violet) / 0.68), 0 0 10px hsl(var(--pink) / 0.56), 0 0 18px hsl(var(--pink) / 0.46), 0 0 30px hsl(var(--pink) / 0.36);
}
.card.avatar,
.card.avatar.tall{
  position: relative;
  box-shadow: 0 0 7px color-mix(in hsl,var(--tb-level-color) 66%,transparent), 0 0 14px color-mix(in hsl,var(--tb-level-color) 48%,transparent);
}
.avatar-circle{
  box-shadow: 0 0 6px color-mix(in hsl,var(--tb-level-color) 60%,transparent) inset, 0 0 14px color-mix(in hsl,var(--tb-level-color) 46%,transparent);
}

.pill.big,.dot{
  display: grid;
  place-items: center;}

.pill.big{
  height: 160px;}

.dot{
  width: 126px;
  height: 126px;
  border-radius: 50%;
  color: #fff;}

#avatarCircle{
  position: relative;}
  
/* ========== 09 • Tiles ========== */

.tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.tile{
  height: 130px;
  padding: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: var(--corner-pill);
  background: hsl(0 0% 100% / 3%);
  border: 5px solid hsl(var(--stroke));
  cursor: pointer;
}
.tile-icon img{
  display: block;
  width: 84px;
  height: 84px;
  object-fit: contain;
  image-rendering: auto;
}
.tile.neon-gold:hover{
  transform: translateY(-2px) scale(1.02);
  background-color: hsl(48 100% 55% / 0.08);
}
.tile.neon-platinum:hover{
  transform: translateY(-2px) scale(1.02);
  background-color: hsl(var(--platinum) / 0.08);
}
.tile.neon-gold,.tile.neon-platinum{
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  border-width: 3px !important;
  color: inherit;
  text-shadow: none;
}
.tile.neon-platinum{
  border-color: hsl(215 20% 75%) !important;
}
.tile.neon-platinum:hover{
  border-color: hsl(215 25% 85%) !important;
  transform: translateY(-2px) scale(1.02);
  background-color: hsl(var(--platinum) / 0.08);
}
.tile.neon-gold .tile-icon img,
.tile.neon-platinum .tile-icon img{
  filter: drop-shadow(0 0 4px color-mix(in hsl,var(--tb-level-color) 80%,transparent)) drop-shadow(0 0 12px color-mix(in hsl,var(--tb-level-color) 50%,transparent)) drop-shadow(0 0 22px color-mix(in hsl,var(--tb-level-color) 35%,transparent));
}
body.rank-10 .tile.neon-gold .tile-icon img,
body.rank-10 .tile.neon-platinum .tile-icon img{
  filter: contrast(1.06) brightness(1.04) drop-shadow(0 0 4px color-mix(in hsl,color-mix(in hsl,var(--tb-level-color) 85%,hsl(var(--pink)) 15%) 92%,black 8%)) drop-shadow(0 0 12px color-mix(in hsl,color-mix(in hsl,var(--tb-level-color) 85%,hsl(var(--pink)) 15%) 72%,black 28%)) drop-shadow(0 0 22px color-mix(in hsl,color-mix(in hsl,var(--tb-level-color) 85%,hsl(var(--pink)) 15%) 56%,black 44%)) !important;
}



.neon-gold{
  border-color: hsl(var(--gold) / 0.75);
  box-shadow: 0 0 12px hsl(var(--gold) / 0.6) inset, 0 0 10px hsl(var(--gold) / 0.55);}

.neon-platinum{
  border-color: hsl(var(--platinum) / 0.75);
  box-shadow: 0 0 12px hsl(var(--platinum) / 0.6) inset, 0 0 10px hsl(var(--platinum) / 0.55);}
  
/* ========== 10 • Progress / Track ========== */

.tb-welcome,
.tb-welcome .muted,
.tb-welcome .username,
.progress .left strong,
.progress .right strong,
#welcomeText,
#signInText,
.progress .label,
.dock-inner,
.dock-inner button,
#rankName,
#levelText,
#tokensLabel,
#tokenValue,
.welcome-text{
  font-family: 'OrbitronVA',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.tb-welcome,
.tb-welcome .muted,
.tb-welcome .username,
.progress .left strong,
.progress .right strong{
  color: var(--tb-level-color);
  text-shadow: 0 0 8px hsl(267 100% 68% / 0.25);
}
.meta .name{
  font-size: 20px;
  margin-bottom: 6px;
}
.progress{
  margin-top: 18px;
}
.track{
  position: relative;
  height: 60px;
  border-radius: 12px;
  background: hsl(0 0% 100% / 4%);
  border: 3px solid var(--tb-level-color);
  overflow: hidden;
  box-shadow: 0 0 12px color-mix(in hsl,var(--tb-level-color) 60%,transparent), 0 0 24px color-mix(in hsl,var(--tb-level-color) 45%,transparent);
}

body.rank-10 .progress .track{
  border-color: hsl(var(--violet)) !important;
  box-shadow: 0 0 12px color-mix(in hsl,hsl(var(--violet)) 60%,transparent), 0 0 24px color-mix(in hsl,hsl(var(--violet)) 45%,transparent);
}
.fill{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w,0%);
  background: linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink)));
  border-right: 2px solid hsl(0 0% 100% / 18%);
}
.progress .fill{
  background: var(--tb-level-color) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none;
  border-right: none !important;
  box-shadow: none !important;
}
.progress .fill.max-level{
  background: linear-gradient(135deg,hsl(var(--violet) / 0.75),hsl(var(--pink) / 0.75));
}
.progress.max-level .center{
  display: none !important;
}
.center{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size: 26px;
}
.meta .xxl{
  font-size: 34px;
  color: var(--tb-level-color);
  text-shadow: 0 0 5px color-mix(in hsl,var(--tb-level-color) 40%,transparent);
}
body[class*="rank-"] .tb-wwelcome,
body[class*="rank-"] .tb-welcome .muted,
body[class*="rank-"] .tb-welcome .username,
body[class*="rank-"] #rankName,
body[class*="rank-"] #tokensLabel,
body[class*="rank-"] #tokenValue,
body[class*="rank-"] .progress .left strong,
body[class*="rank-"] .progress .right strong,
body[class*="rank-"] .progress .center,
body[class*="rank-"] .below,
body[class*="rank-"] .xxl,
body[class*="rank-"] #signInText{
  text-shadow: 0 0 5px color-mix(in hsl,var(--tb-level-color) 45%,transparent);
}
.progress .center{
  background: linear-gradient(90deg,hsl(267 100% 62%),hsl(328 100% 66%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 5px hsl(267 100% 62% / 0.45);
}
body.rank-10 .progress .fill{
  background: linear-gradient(90deg,#7A8CFF,#FF4FEF) !important;
  box-shadow: 0 0 10px color-mix(in srgb,#FF4FEF 60%,transparent);
}
body.rank-10 .tb-wwelcome,
body.rank-10 .tb-welcome .muted,
body.rank-10 .tb-welcome .username,
body.rank-10 #rankName,
body.rank-10 #levelText,
body.rank-10 .progress .center,
body.rank-10 .progress .left strong,
body.rank-10 .progress .right strong,
body.rank-10 #signInText{
  background: linear-gradient(90deg,hsl(var(--violet)),hsl(var(--pink))) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .progress .fill{
  background: linear-gradient(90deg,#7A8CFF,#FF4FEF) !important;
  box-shadow: 0 0 10px color-mix(in srgb,#FF4FEF 60%,transparent);
}
body.rank-10 .tb-welcome,
body.rank-10 .tb-welcome .muted,
body.rank-10 .tb-welcome .username,
body.rank-10 #rankName,
body.rank-10 #levelText,
body.rank-10 .progress .center,
body.rank-10 .progress .left strong,
body.rank-10 .progress .right strong,
body.rank-10 #signInText{
  text-shadow: 0 0 4px color-mix(in hsl,hsl(var(--violet)) 36%,transparent), 0 0 7px color-mix(in hsl,hsl(var(--pink)) 24%,transparent) !important;
}
body.rank-10 .tb-welcome,
body.rank-10 #rankName,
body.rank-10 #levelText,
body.rank-10 #tokensLabel,
body.rank-10 #tokenValue,
body.rank-10 .progress .center,
body.rank-10 .xxl{
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;}
  
/* ========== 11 • Dock & Settings ========== */

.dock{
  margin-top: 0;
}
.dock.outside{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(260px, calc(422px - (927px - 100vw)), 422px);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 clamp(10px, calc(10px + (100vw - 927px) * 0.046243), 18px);
  box-sizing: border-box;
}

.dock.outside .tb-header{
  margin-bottom: 0;
  height: 100%;
  align-items: center;
}
.dock.outside .tb-actions{
  gap: 6px;
}

.dock.outside .tb-welcome{
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  text-align: center;
  font-size: 13.2px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: clip;
  text-transform: none;
}
.dock.outside .connected-actions{
  display: flex;
  align-items: center;
  gap: 5px;
}

.dock.outside .welcome-box{
  width: 152px;
  justify-content: center;
}

.dock.outside .connected-anchor{
  margin-left: auto;
  width: 152px;
  justify-content: center;
}

.dock.outside .connected-anchor .sign{
  width: 100%;
  min-width: 0;
  text-align: center;
  font-size: 13.2px;
  line-height: 1.05;
}
.dock.outside .icon-btn{
  width: 30px;
  height: 30px;
  border-radius: 6px;
}
.dock.outside .icon-btn.gear,
.dock.outside .icon-btn.eye{
  border-radius: 999px;
}
.dock.outside .icon-btn img{
  width: 24px;
  height: 24px;
}
.dock.outside .icon-btn svg{
  width: 19px;
  height: 19px;
}
.dock-inner{
  position: relative;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
  height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  background: #000;
  border: 1.75px solid var(--tb-level-color);
  box-shadow: none;
  flex-shrink: 0;
}
.sign{
  font-size: 14px;
  font-weight: 1000;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .4px;
}
.dock-inner button{
  width: auto;
}
body.rank-10 .dock-inner{
  position: relative;
  top: 0;
}
body.rank-10 .dock-inner::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  border: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
  box-shadow: none;
  opacity: 0;
}
body.rank-10 #btnGear svg,
body.rank-10 .btn-gear svg,
body.rank-10 .gear-btn svg,
body.rank-10 [data-gear] svg,
body.rank-10 .gear svg{
  color: hsl(var(--text));
  fill: currentColor;
  stroke: currentColor;
  filter: none;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .dock-inner::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  border: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
  box-shadow: none;
  opacity: 0;
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .dock-inner{
  position: relative;
  top: 0;
}
body.rank-9 .dock-inner::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  border: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
  box-shadow: none;
  opacity: 0;
}
body.rank-9 .dock-inner{
  position: relative;
  top: 0;
}

#signInBtn{
  display: none;}

#signInText{
  text-transform: uppercase;
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: .5px;
  width: 100%;
  text-align: center;
  display: block;
  margin: 0 auto;
  line-height: 1.1;
  background: linear-gradient(135deg,hsl(328 100% 73%),hsl(267 100% 68%));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 8px hsl(267 100% 68% / 0.25);
  color: transparent;}
  
/* ========== 12 • Badges & Tokens ========== */

.badge-wrap{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.badge-wrap img#badgeIcon{
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  max-width: 85%;
  max-height: 85%;
}
#rankName,#levelText,#tokensLabel,#tokenValue{
  letter-spacing: .5px;
}
#levelText{
  display: inline-block;
  font-size: 1.8rem;
  margin-top: -10px;
}
#tokensLabel{
  font-size: 1.8rem;
  margin-top: 6px;
}
#tokenValue{
  font-family: 'OrbitronVA',sans-serif !important;
}
#tokenValue.token-max{
  background-image: var(--tokens-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 10px var(--tokens-glow) !important;
  display: inline-block !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none;
}
#tokensLabel.token-max{
  background-image: var(--tokens-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 10px var(--tokens-glow) !important;
  display: inline-block !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none;
}
#tokenValue,.token,.token-glow{
  background: transparent;
}
body.rank-10 #rankName,
body.rank-10 #levelText,
body.rank-10 #levelValue,
body.rank-10 #levelNumber,
body.rank-10 .xxl{
  color: var(--tb-level-color) !important;
  -webkit-text-fill-color: var(--tb-level-color);
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) #rankName,
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) #levelText,
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) #levelValue,
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) #levelNumber,
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8) .xxl{
  color: var(--tb-level-color) !important;
  -webkit-text-fill-color: var(--tb-level-color);
}
body.rank-9 #rankName,
body.rank-9 #levelText,
body.rank-9 #levelValue,
body.rank-9 #levelNumber,
body.rank-9 .xxl{
  color: var(--tb-level-color) !important;
  -webkit-text-fill-color: var(--tb-level-color);
}
#badgeIcon:hover,
#levelText:hover,
#tokensLabel:hover,
.tokens-card .dot.tokencap:hover,
.tokens-card .dot.tokencap:hover *{
  cursor: pointer;
}
.badge-wrap img#badgeIcon{
  filter: drop-shadow(0 0 7px color-mix(in hsl,var(--tb-level-color) 72%,transparent)) drop-shadow(0 0 18px color-mix(in hsl,var(--tb-level-color) 48%,transparent));
}
body.rank-10 .badge-wrap img#badgeIcon{
  filter: drop-shadow(0 0 6px color-mix(in hsl,color-mix(in hsl,var(--tb-level-color) 88%,hsl(var(--pink)) 12%) 92%,black 8%)) drop-shadow(0 0 16px color-mix(in hsl,color-mix(in hsl,var(--tb-level-color) 80%,hsl(var(--pink)) 20%) 90%,black 10%)) !important;
}

/* ========== 13 • Ranks / Themes ========== */

body.rank-10,
[data-rank="10"],
.level-10{
  --violet: 248 100% 77.45%;
  --pink: 325 75% 65%;
  --tb-level-color: hsl(var(--violet));
}
body:is(.rank-1,.rank-2,.rank-3,.rank-4,.rank-5,.rank-6,.rank-7,.rank-8){
  --tb-level-color: hsl(var(--violet));
}
body.rank-1,[data-rank="1"],.level-1{
  --violet: var(--rank1);
  --pink: var(--rank1);
  --tb-level-color: hsl(var(--rank1));
}
body.rank-2,[data-rank="2"],.level-2{
  --violet: var(--rank2);
  --pink: var(--rank2);
  --tb-level-color: hsl(var(--rank2));
}
body.rank-3,[data-rank="3"],.level-3{
  --violet: var(--rank3);
  --pink: var(--rank3);
  --tb-level-color: hsl(var(--rank3));
}
body.rank-4,[data-rank="4"],.level-4{
  --violet: var(--rank4);
  --pink: var(--rank4);
  --tb-level-color: hsl(var(--rank4));
}
body.rank-5,[data-rank="5"],.level-5{
  --violet: var(--rank5);
  --pink: var(--rank5);
  --tb-level-color: hsl(var(--rank5));
}
body.rank-6,[data-rank="6"],.level-6{
  --violet: var(--rank6);
  --pink: var(--rank6);
  --tb-level-color: hsl(var(--rank6));
}
body.rank-7,[data-rank="7"],.level-7{
  --violet: var(--rank7);
  --pink: var(--rank7);
  --tb-level-color: hsl(var(--rank7));
}
body.rank-8,[data-rank="8"],.level-8{
  --violet: var(--rank8);
  --pink: var(--rank8);
  --tb-level-color: hsl(var(--rank8));
}
body.rank-9,[data-rank="9"],.level-9{
  --violet: var(--rank9);
  --pink: var(--rank9);
  --tb-level-color: hsl(var(--rank9));
}


/* ========== 14 • Utilities & Effects ========== */

.gradient,.gradient-text{
  background: linear-gradient(135deg,hsl(var(--violet)),hsl(var(--pink)));
}
.below{
  font-size: 28px;
  font-weight: 1000;
  text-align: center;
  width: 100%;
}
.huge{
  font-size: 34px;
}
.gradient-text{
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tb-tier-tooltip{
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  background: hsl(0 0% 8% / 0.96);
  color: #fff;
  border: 3px solid hsl(var(--tb-level-color));
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.25;
  box-shadow: 0 16px 40px rgba(0,0,0,.58);
  transform: translate(-50%,-140%);
  white-space: nowrap;
  font-weight: 700;
}
.tb-overlay{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  isolation: isolate;
  contain: paint;
  background-color: rgba(0,0,0,0.08);
  background-image: linear-gradient(to bottom,rgba(255,255,255,0.03),rgba(255,255,255,0.03));
  background-blend-mode: lighten;
}
.tb-overlay::before{
  will-change: transform;
  transform: translateZ(0);
}

/* ========== ZZ • Unclassified (check) ========== */

.thumb{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg,hsl(var(--violet) / 0.6),hsl(var(--pink) / 0.6));}
  
/* ========== 99 • Responsive (@media) ========== */

@media (max-width: 765px) {
  /* Mobile-style dock layout from 765px down:
     icons on the 2nd row (2 left / 2 right), eye disabled. */

  /* Dropdown menus (notif / wishlist / cart / gear): hidden from 765px down */
  #ddNotif,
  #ddWish,
  #ddCart,
  #ddGear{
    display: none !important;
  }
  .dock.outside{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 34px 34px minmax(0, 12fr) 34px minmax(0, 1fr);
    grid-template-rows: auto 34px;
    align-items: center;
    justify-content: stretch;
    column-gap: clamp(6px, 2vw, 8px);
    row-gap: 6px;
    padding: 8px clamp(8px, 2.4vw, 10px) 0 clamp(8px, 2.4vw, 10px);
    /* Keep both pills exactly the same width, and shrink text smoothly across
       the whole 765px → 350px range (no threshold/jump). */
    --dock-pill-w: 152px;
    --dock-pill-font: 13.2px;
    --dock-welcome-font: 13.2px;
    --dock-welcome-gap: 2.5px;
  }

  /* Cart internal columns: 765px -> 350px progressive shrink */
  :root{
    --cart-col: clamp(34px, calc(34px + (100vw - 350px) * 0.014458), 40px);
  }


  /* Icon buttons (bell/heart/cart/gear/eye): move the whole button box down 2px
     without affecting layout flow (so dropdowns/dashboard don't shift). */
  #btnNotif,
  #btnWish,
  #btnCart,
  #btnGear,
  #btnEye{
    transform: translateY(2px);
  }

  /* Side panel width: 765px -> 350px, 60% -> 90% (progressive) */
  :root{
    --tb-side-w: clamp(60vw, calc(90vw - (100vw - 350px) * 0.552), 90vw);
  }

  /* Side panel: when the dropdown nodes are moved inside it, the panel itself
     provides the glass/bg/border, so the dropdown becomes a plain wrapper. */
  .tb-side-panel .dropdown{
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .tb-side-panel:not(.is-dashboard):not(.is-gear){
    border-color: hsl(var(--violet));
    box-shadow: 0 0 12px color-mix(in hsl, hsl(var(--violet)) 60%, transparent), 0 0 24px color-mix(in hsl, hsl(var(--violet)) 45%, transparent);
  }

  /* Side panel title: slightly smaller on mobile. */
  .tb-side-title{
    font-size: clamp(18px, 5.2vw, 28px);
    margin-bottom: 16px;
  }

  /* Inside the side panel we keep only ONE title (the side panel header).
     Some dropdowns already contain their own title (.dropdown-title) → hide it on mobile panels. */
  .tb-side-panel .dropdown-title{
    display: none !important;
  }

  /* Override the mobile "hide dropdowns" rule when the dropdown is hosted
     inside the side panel. (ID selectors would otherwise win.) */
  .tb-side-panel #ddNotif,
  .tb-side-panel #ddWish,
  .tb-side-panel #ddCart,
  .tb-side-panel #ddGear{
    display: block !important;
  }

  /* When we move an existing dropdown into the side panel, we mark it with .tb-in-side
     so it's always visible regardless of desktop dropdown .show state. */
  .tb-in-side{
    display: block !important;
  }

  /* Side-panel typography:
     - Notif/Wish/Cart: slightly larger
     - Gear: noticeably larger (handled below via .is-gear)
  */
  .tb-side-panel #ddNotif,
  .tb-side-panel #ddWish{
    font-size: 15px;
  }

  /* Cart panel: slightly larger than notif/wish for readability. */
  .tb-side-panel #ddCart{
    font-size: 17px;
  }

  .tb-side-panel .dropdown-list{
    gap: 6px;
  }
  .tb-side-panel .dropdown-list a,
  .tb-side-panel .dropdown-list button{
    font-size: 14px;
    line-height: 1.25;
    padding-block: 7px;
  }

  /* Cart items were designed to be compact in the desktop dropdown.
     In the side panel we slightly upsize them for readability. */
  .tb-side-panel #ddCart .cart-list > .cart-item{
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 0px;
    row-gap: 18px;
  }
  .tb-side-panel #ddCart .cart-item .name{ font-size: 14px; }
  .tb-side-panel #ddCart .cart-item .cat{ font-size: 13px; }
  .tb-side-panel #ddCart .cart-item .price{ font-size: 14px; align-self: start; }

  .tb-side-panel #ddCart .cart-item .qty-val{ font-size: 13px; }
  .tb-side-panel #ddCart .cart-item .controls{ margin-top: 16px; }
  .tb-side-panel #ddCart .cart-list > .cart-item::before{
    align-self: start;
    font-size: 16px;
    height: 18px;
    line-height: 18px;
  }

  /* Cart subtotal + actions: match the size of the "View all" / "See all" CTAs. */
  .tb-side-panel #ddCart .cart-sub{
    font-size: 14px;
  }

  /* Unified vertical spacing before CTAs (Notif/Wish/Cart) */
  .tb-side-panel #ddNotif > .ghost-btn,
  .tb-side-panel #ddWish > .ghost-btn,
  .tb-side-panel #ddCart .cart-actions{
    margin-top: 14px;
  }

  .tb-side-panel #ddCart .cart-actions .ghost-btn,
  .tb-side-panel #ddCart .cart-actions .primary-btn{
    font-size: 14px;
    padding: 8px 10px;
    line-height: 1;
    border-width: 3px;
    border-radius: 12px;
  }

  /* Gear panel: bigger content + vertically centered. */
  .tb-side-panel.is-gear .tb-side-body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 90px);
  }

  .tb-side-panel.is-gear #ddGear{
    font-size: 27px;
  }
  .tb-side-panel.is-gear #ddGear .dropdown-list a,
  .tb-side-panel.is-gear #ddGear .dropdown-list button{
    font-size: 24px;
    padding-block: 16px;
  }

  /* Dashboard inside side panel: keep its original proportions, but scale uniformly
     to fit the side panel width (scale is set via JS: --tb-dash-scale). */
  .tb-side-panel .dashboard-header-root{
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    transform: translateX(calc(var(--tb-dash-nudge-x, 0px) + var(--tb-dash-manual-x, 0px))) !important;
    transform-origin: center center;
    zoom: var(--tb-dash-scale, 1);
  }

  /* Extra nudge: ensure the dashboard block itself can sit perfectly centered. */
  .tb-side-panel.is-dashboard .dashboard-header-root{
    margin-inline: auto;
  }

  /* Dashboard panel: center the dashboard both horizontally and vertically */
  .tb-side-panel.is-dashboard .tb-side-body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 90px);
  }

  /* Ensure the dashboard root itself can be centered perfectly (avoid any intrinsic left drift). */
  .tb-side-panel.is-dashboard .dashboard-header-root{
    display: block;
    margin-inline: auto;
  }

  .dock.outside .welcome-box:not(.connected-anchor){
    grid-row: 1;
    grid-column: 1 / -1;
    position: relative;
    top: -1px;
    width: var(--dock-pill-w);
    justify-content: center;
    /* Make the welcome text scale/fit cleanly without cropping. */
    container-type: inline-size;
    padding-inline: clamp(6px, calc(6px + (100vw - 350px) * 0.00964), 10px);
  }

  .dock.outside .tb-welcome{
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dock-welcome-gap);
    text-align: center;
    /* Welcome shrinks smoothly across the whole range (no jump / no "back & forth"). */
    font-size: var(--dock-welcome-font);
    line-height: 1.05;
    overflow: hidden;
    text-overflow: clip;
  }

  .dock.outside .connected-anchor{
    grid-row: 1;
    grid-column: 1 / -1;
    margin-left: 0;
    position: relative;
    top: -1px;
    width: var(--dock-pill-w);
    justify-content: center;
  }

  .dock.outside .connected-anchor .sign{
    width: 100%;
    min-width: 0;
    text-align: center;
    font-size: var(--dock-pill-font);
    line-height: 1.05;
  }

  /* Each side (Welcome + Sign-in) becomes its own 2-row mini-grid:
     - Row 1: the pill (Welcome / Sign-in)
     - Row 2: icons, centered exactly under that pill */
  .dock.outside .connected-actions{
    display: grid;
    grid-row: 1 / 3;
    width: var(--dock-pill-w);
    row-gap: 6px;
    align-items: center;
  }
  .dock.outside .connected-actions:first-of-type{
    grid-column: 1 / 4;
    justify-self: start;
    grid-template-columns: minmax(0, 1fr) 34px 34px 34px minmax(0, 1fr);
    grid-template-rows: auto 34px;
  }
  .dock.outside .connected-actions:last-of-type{
    grid-column: 5 / -1;
    justify-self: end;
    grid-template-columns: minmax(0, 1fr) 34px 34px minmax(0, 1fr);
    grid-template-rows: auto 34px;
  }

  /* Let the action buttons become grid children (so we can center them under their pill). */
  .dock.outside .tb-actions{
    display: contents;
  }

  /* Left group: cloche / coeur / panier (centered under Welcome). */
  .dock.outside .connected-actions:first-of-type .icon-btn.bell{
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }
  .dock.outside .connected-actions:first-of-type .icon-btn.heart{
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }
  .dock.outside .connected-actions:first-of-type .icon-btn.cart{
    grid-column: 4;
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }

  /* Right group: engrenage / oeil (centered under SIGN-IN / connected). */
  .dock.outside .connected-actions:last-of-type .icon-btn.gear{
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }
  .dock.outside .connected-actions:last-of-type .icon-btn.eye{
    display: grid;
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }

}


@media (max-width: 999.98px) {
  /* Dropdown menus (notifications / wishlist / cart / gear):
     - Start shrinking from the *exact* 1000px size (no jump at 1000 -> 999)
     - Continuous shrink all the way down to 350px
  */
  :root{
    /* 999px: 240px  →  350px: 165px (linear) */
        /* 999px: 210px  →  350px: 150px (linear) */
    --dropdown-w: clamp(150px, calc(150px + (100vw - 350px) * 0.0924499229584), 210px);
    --cart-col: clamp(40px, calc(40px + (100vw - 766px) * 0.047210), 51px);
  }
}