/* SlabX Metallic Panels v0.5 — presentation only; all counts and links stay live. */
:is(.slx-tier-strip .slx-tier-count,.slx-map .tile,.slx-collection-grid .slx-collectible,.slx-explorer .slx-set-summary,.slx-tier-panel,.slx-graded-ref-grid .slx-graded-ref-item,.slx-tier-panel .slx-grade-potential-item),.slx-metrics>.card,.slx-floor>.slx-history,.slx-brand-art.slx-brand-silver,#nav>button,#app>aside>.btn{
  --metal-h:208;--metal-s:80%;--metal-glow:.24;--metal-bevel:4px;
  position:relative;isolation:isolate;
  border:1px solid hsl(var(--metal-h) var(--metal-s) 65%)!important;
  border-radius:12px!important;
  --metal-face:
    repeating-linear-gradient(0deg,#ffffff0b 0px,#ffffff0b .5px,#00000019 .5px,#00000019 1px,transparent 1px,transparent 3px),
    repeating-linear-gradient(0deg,transparent 0px,transparent 7px,#ffffff07 7px,#ffffff07 8px,transparent 8px,transparent 11px),
    linear-gradient(180deg,#ffffff24,transparent 26%,#00000014 64%,#00000070),
    linear-gradient(100deg,hsl(var(--metal-h) var(--metal-s) 16%) 0%,hsl(var(--metal-h) var(--metal-s) 43%) 15%,hsl(var(--metal-h) var(--metal-s) 24%) 30%,hsl(var(--metal-h) var(--metal-s) 14%) 58%,hsl(var(--metal-h) var(--metal-s) 36%) 83%,hsl(var(--metal-h) var(--metal-s) 18%) 100%);
  background:var(--metal-face)!important;
  --metal-shadow:inset 0 1px 1px #fff9,inset 0 -2px 3px #000c,0 3px 2px #000b,0 5px 15px #0007,0 0 12px hsl(var(--metal-h) var(--metal-s) 53% / var(--metal-glow));
  box-shadow:var(--metal-shadow)!important;
  color:#fff!important;
  text-shadow:0 1px 2px #000d,0 2px 4px #0008;
}
:is(.slx-tier-strip .slx-tier-count,.slx-map .tile,.slx-collection-grid .slx-collectible,.slx-explorer .slx-set-summary,.slx-tier-panel,.slx-graded-ref-grid .slx-graded-ref-item,.slx-tier-panel .slx-grade-potential-item)::before,.slx-metrics>.card::before,.slx-floor>.slx-history::before,#app.shell::before,.slx-brand-art::before,#nav>button::after,#app>aside>.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:var(--metal-bevel) solid transparent;
  --metal-frame:conic-gradient(from 135deg,#000a 0deg,hsl(var(--metal-h) var(--metal-s) 55%) 26deg,#fff 42deg,hsl(var(--metal-h) var(--metal-s) 30%) 70deg,#07111c 92deg,hsl(var(--metal-h) var(--metal-s) 68%) 133deg,#fff 144deg,hsl(var(--metal-h) var(--metal-s) 35%) 160deg,#0009 181deg,hsl(var(--metal-h) var(--metal-s) 62%) 222deg,#fff 239deg,hsl(var(--metal-h) var(--metal-s) 38%) 255deg,#030b12 271deg,hsl(var(--metal-h) var(--metal-s) 66%) 314deg,#fff 326deg,#000a 360deg) border-box;
  background:var(--metal-frame);
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
:is(.slx-tier-strip .slx-tier-count,.slx-map .tile,.slx-collection-grid .slx-collectible,.slx-explorer .slx-set-summary,.slx-graded-ref-grid .slx-graded-ref-item,.slx-tier-panel .slx-grade-potential-item)::after,.slx-metrics>.card::after,.slx-floor>.slx-history::after,#app.shell::after,.slx-brand-art::after{
  content:"";position:absolute;inset:calc(var(--metal-bevel) + 1px);pointer-events:none;border-radius:calc(12px - var(--metal-bevel));
  border:1px solid hsl(var(--metal-h) var(--metal-s) 72% / .58);
  box-shadow:inset 0 1px 2px #000b,0 1px 0 #000b;
}
.slx-tier-strip .slx-tier-count{padding:12px 8px 11px;--metal-glow:.35}
.slx-tier-strip .slx-tier-count[data-metal-tier="1"]{--metal-h:146;--metal-s:93%}
.slx-tier-strip .slx-tier-count[data-metal-tier="2"]{--metal-h:215;--metal-s:96%}
.slx-tier-strip .slx-tier-count[data-metal-tier="3"]{--metal-h:280;--metal-s:91%}
.slx-tier-strip .slx-tier-count[data-metal-tier="4"]{--metal-h:26;--metal-s:97%}
.slx-tier-strip .slx-tier-count[data-metal-tier="5"]{--metal-h:45;--metal-s:93%}
.slx-tier-strip .slx-tier-count.pending{--metal-h:207;--metal-s:27%;--metal-glow:.22}
.slx-tier-strip .slx-tier-count.total{--metal-h:38;--metal-s:81%;--metal-glow:.27}
.slx-tier-strip .slx-tier-count :is(.slx-count-label,.slx-count-num,.slx-count-goal,.slx-count-remain){color:#fff}
.slx-tier-strip .slx-count-num{text-shadow:0 1px 0 #ffffff75,0 3px 2px #000a,0 5px 8px #0008}
.slx-map .heat{gap:10px;padding:5px 3px 10px}
.slx-map .tile{--metal-h:202;--metal-s:84%;--metal-bevel:2px;padding:10px 8px;min-height:76px}
.slx-map .tile.neg{--metal-h:350;--metal-s:65%}
.slx-map .tile :is(b,small){color:#fff!important}
.slx-map .slx-heat-logo{filter:drop-shadow(0 2px 2px #0008)}
.slx-collection-grid .slx-collectible{--metal-h:207;--metal-s:27%;--metal-bevel:3px;padding:12px}
.slx-collection-grid .slx-collectible.owned{--metal-h:146;--metal-s:76%}
.slx-collection-grid .slx-collectible :is(.slx-card-name,.slx-card-number,.slx-card-state){color:#fff}
.slx-collection-grid .slx-card-art{box-shadow:0 0 0 1px #0008,0 2px 4px #0008}
.slx-explorer .slx-set-summary{--metal-h:207;--metal-s:61%;--metal-bevel:3px}
.slx-explorer .slx-set-summary :is(small,.slx-set-note,.slx-catalog-note,.sub){color:#f1f7ff}
.slx-map .tile:hover,.slx-collection-grid .slx-collectible:hover,.slx-tier-count[data-slx-open]:hover{filter:brightness(1.08)}
:is(.slx-tier-count,.slx-map .tile,.slx-collectible):focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:600px){.slx-collection-grid .slx-collectible{padding:9px}.slx-map .tile{padding:11px 9px}}

/* The profile panel follows its assigned tier; pending identification stays amber. */
#main .slx-tier-panel.slx-tier-1{--metal-h:146;--metal-s:93%}
#main .slx-tier-panel.slx-tier-2{--metal-h:215;--metal-s:96%}
#main .slx-tier-panel.slx-tier-3{--metal-h:280;--metal-s:91%}
#main .slx-tier-panel.slx-tier-4{--metal-h:26;--metal-s:97%}
#main .slx-tier-panel.slx-tier-5{--metal-h:45;--metal-s:93%}
#main .slx-tier-panel.slx-tier-pending{--metal-h:36;--metal-s:85%}
#main .slx-tier-panel{padding:20px;--metal-glow:.3}
#main .slx-tier-panel .slx-tier-title{color:#fff;text-shadow:0 1px 0 #ffffff70,0 3px 3px #0009}
#main .slx-tier-panel :is(.slx-tier-reason,.slx-tier-meta,.slx-rarity-header,.slx-grade-potential-title){color:#f4f8ff;opacity:1}
#main .slx-tier-panel .slx-tier-chip{color:#fff;background:#0003;border-color:#ffffff70;box-shadow:inset 0 1px #ffffff30,0 2px 4px #0004}
#main .slx-tier-panel :is(.slx-rarity,.slx-grade-potential){border-top-color:#ffffff40}
#main .slx-tier-panel .slx-grade-potential-item{--metal-h:inherit;--metal-s:inherit;--metal-bevel:2px;--metal-glow:.1;padding:12px}
#main .slx-tier-panel::after{opacity:.5}

/* Keep the existing Raw / PSA 8 / PSA 9 / PSA 10 color meanings. */
.slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item:nth-child(1){--metal-h:146;--metal-s:93%}
.slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item:nth-child(2){--metal-h:280;--metal-s:91%}
.slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item:nth-child(3){--metal-h:26;--metal-s:97%}
.slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item:nth-child(4){--metal-h:45;--metal-s:93%}
body #main .slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item:nth-child(n){
  --metal-bevel:3px;padding:13px 12px;overflow:visible;
  background:var(--metal-face)!important;
  border:1px solid hsl(var(--metal-h) var(--metal-s) 65%)!important;
  box-shadow:var(--metal-shadow)!important;
}
body #main .slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item::before{
  inset:0;height:auto;border:var(--metal-bevel) solid transparent;
  background:var(--metal-frame)!important;
}
body #main .slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item>span{color:#fff!important}
body #main .slx-graded-ref .slx-graded-ref-grid>.slx-graded-ref-item .slx-graded-ref-detail{color:#f0f6ff!important}

/* One continuous metal face per inventory row, with transparent data cells. */
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier]{
  --metal-h:207;--metal-s:27%;
  background:
    repeating-linear-gradient(0deg,#ffffff08 0px,#ffffff08 .5px,#00000015 .5px,#00000015 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#ffffff10,transparent 35%,#00000038),
    linear-gradient(100deg,hsl(var(--metal-h) var(--metal-s) 13%) 0%,hsl(var(--metal-h) var(--metal-s) 27%) 15%,hsl(var(--metal-h) var(--metal-s) 17%) 30%,hsl(var(--metal-h) var(--metal-s) 12%) 58%,hsl(var(--metal-h) var(--metal-s) 25%) 83%,hsl(var(--metal-h) var(--metal-s) 15%) 100%)!important;
}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier="1"]{--metal-h:146;--metal-s:93%}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier="2"]{--metal-h:215;--metal-s:96%}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier="3"]{--metal-h:280;--metal-s:91%}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier="4"]{--metal-h:26;--metal-s:97%}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier="5"]{--metal-h:45;--metal-s:93%}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier]>td{
  background:transparent!important;color:#fff!important;
  border-bottom:1px solid hsl(var(--metal-h) var(--metal-s) 12%)!important;
  text-shadow:0 1px 2px #000d;
  box-shadow:inset 0 1px 0 hsl(var(--metal-h) var(--metal-s) 72% / .7),inset 0 2px 0 #ffffff15,inset 0 -1px 0 #0009;
}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier]>td:first-child{
  box-shadow:inset 4px 0 0 hsl(var(--metal-h) var(--metal-s) 61%),inset 5px 0 0 #0008,inset 0 1px 0 hsl(var(--metal-h) var(--metal-s) 78% / .8),inset 0 -1px 0 #0009;
}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier]>td:last-child{
  box-shadow:inset -2px 0 0 hsl(var(--metal-h) var(--metal-s) 51%),inset 0 1px 0 hsl(var(--metal-h) var(--metal-s) 72% / .7),inset 0 -1px 0 #0009;
}
#main :is(#it,#slxInventoryResults) tr[data-inventory-tier]:hover{filter:brightness(1.1)}
#main :is(#it,#slxInventoryResults) :is(.slx-profile-link,.slx-row-tier-label){color:#f0f8ff;text-shadow:0 1px 2px #000c}

/* Trading Floor summary cards keep their established metric colors. */
.slx-metrics>.card{--metal-bevel:3px;--metal-glow:.25;padding:16px}
.slx-metrics>.card:nth-child(1){--metal-h:154;--metal-s:88%}
.slx-metrics>.card:nth-child(2){--metal-h:348;--metal-s:79%}
.slx-metrics>.card:nth-child(3){--metal-h:53;--metal-s:87%}
.slx-metrics>.card:nth-child(4){--metal-h:193;--metal-s:94%}
.slx-metrics>.card:nth-child(5){--metal-h:30;--metal-s:88%}
.slx-metrics>.card :is(small,.num,.slx-alerts){color:#fff}
.slx-metrics>.card .num{text-shadow:0 1px 0 #ffffff60,0 3px 3px #000a}
.slx-metrics>.card :is(.up,.dn){display:inline-block;padding:3px 6px;border-radius:5px;background:#0007;font-size:inherit;line-height:1.4}
.slx-metrics>.card .up{color:#c1ffe0}
.slx-metrics>.card .dn{color:#ffd3dc}

/* Navigation retains its icons and sizing; the selected route shines blue. */
#nav>button,#app>aside>.btn{--metal-h:207;--metal-s:34%;--metal-bevel:3px;--metal-glow:.12;min-height:44px}
#nav>button.on{--metal-h:213;--metal-s:96%;--metal-glow:.45;border-color:#9bdcff!important;box-shadow:inset 4px 0 #b7eaff,var(--metal-shadow)!important}
#nav>button::before{color:#e5f5ff!important;text-shadow:0 1px 2px #000c}
#nav>button::after,#app>aside>.btn::after{display:block;width:auto;height:auto}
#nav>button:hover,#app>aside>.btn:hover{filter:brightness(1.16)}
#nav>button:active,#app>aside>.btn:active{filter:brightness(.94)}
#nav>button:focus-visible,#app>aside>.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Continuous silver-blue metal frames around the app and the original logo art. */
#app.shell,.slx-brand-art{
  --metal-h:207;--metal-s:50%;--metal-bevel:5px;
  position:relative;isolation:isolate;
  border:1px solid #a4d6f5!important;
  box-shadow:inset 0 1px 1px #ffffffa6,inset 0 -2px 3px #000c,0 4px 12px #0009,0 0 14px #6cbfff38!important;
}
#app.shell{padding:6px;border-radius:16px!important}
#app.shell::before,#app.shell::after{z-index:5}
#app.shell::after{border-radius:calc(16px - var(--metal-bevel))}
.slx-brand-art{border-radius:12px}
.slx-brand-art::before,.slx-brand-art::after{z-index:2}

/* Keep the portfolio plot readable over the same blue metal as the heat map. */
.slx-floor>.slx-history{--metal-h:202;--metal-s:84%;--metal-bevel:4px;--metal-glow:.25;padding:16px}
.slx-floor>.slx-history .slx-panel-head :is(b,small){color:#f4faff!important}
.slx-floor>.slx-history .slx-chart{
  background:linear-gradient(180deg,#041523bd,#041523de);
  border-radius:8px;
  box-shadow:inset 0 0 0 1px #b5e4ff38,inset 0 2px 8px #0005;
}
@media(max-width:600px){
  #app.shell{--metal-bevel:4px;padding:5px}
  .slx-brand-art{--metal-bevel:4px}
}

/* Silver logo plaque: centered transparent wordmark and a separate centered motto. */
.slx-brand-art.slx-brand-silver{
  --metal-h:210;--metal-s:6%;--metal-bevel:5px;--metal-glow:.2;
  --metal-face:
    repeating-linear-gradient(0deg,#ffffff16 0px,#ffffff16 .5px,#00000017 .5px,#00000017 1px,transparent 1px,transparent 3px),
    repeating-linear-gradient(0deg,transparent 0px,transparent 7px,#ffffff12 7px,#ffffff12 8px,transparent 8px,transparent 11px),
    linear-gradient(180deg,#ffffff55,transparent 28%,#00000010 70%,#00000038),
    linear-gradient(100deg,#737b84 0%,#f2f4f6 15%,#a7aeb6 32%,#6c747e 58%,#e5e8ed 83%,#89919b 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  aspect-ratio:auto;padding:14px 14px 16px;container-type:inline-size;
  text-align:center;line-height:normal;border-color:#dce6ee!important;
}
.slx-brand-art.slx-brand-silver img{
  position:static;display:block;width:100%;max-width:100%;height:auto;
  left:auto;top:auto;margin:0;object-fit:contain;
}
.slx-brand-art.slx-brand-silver .slx-brand-tagline{
  display:block;width:100%;margin:0;color:#533b12;
  font-family:Segoe UI,Arial,sans-serif;font-size:clamp(10px,2vw,24px);font-size:clamp(10px,5cqi,24px);
  font-weight:800;line-height:1.2;letter-spacing:.02em;white-space:nowrap;text-align:center;
  text-shadow:0 1px 0 #ffffffb3,0 -1px 0 #3c2d1740;
}
@media(max-width:600px){.slx-brand-art.slx-brand-silver{--metal-bevel:4px;padding:12px 12px 14px}}

/* Balance the tagline between the visible wordmark and the lower frame. */
.slx-brand-art.slx-brand-silver .slx-brand-tagline{transform:translateY(clamp(-26px,-2.5cqi,-6px))}