/* Wickshift 3.2 — precision collection, consistent color, and measured motion. */
:root{--ws-ease:cubic-bezier(.2,.8,.2,1);--ws-duration:260ms;--blue:var(--accent);--primary:var(--accent);--gm-accent:var(--accent)}
button,a,input,select,textarea,summary{transition:background-color .22s,border-color .22s,color .22s,box-shadow .22s,transform .22s var(--ws-ease)}
button:not(:disabled):active,.btn:active{transform:translateY(1px) scale(.98)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
body .v12-gradient,body .gm-submit,body .btn-primary,body .primary,body .cta,body .gm-upgrade-link,body button:not(.secondary):not(.ghost):not(.danger)[type=submit]{background:linear-gradient(120deg,var(--accent),var(--gm-secondary,var(--accent)))!important;color:var(--accentText,#0c0f18)!important;border-color:var(--accent)!important;box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 15%,transparent)}
body #nav button.active,body [role=tab][aria-selected=true]{color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important;background:var(--accentSoft)!important}
body .xp-fill,body .progress-fill,body .level-fill,body progress{background:var(--accent)!important;accent-color:var(--accent)}
body input[type=checkbox],body input[type=range]{accent-color:var(--accent)}
body .gm-accent,body .accent{color:var(--accent)!important}
.ws-public-profile{margin:0 0 12px!important;color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))!important}
#wsPublicProfileStatus:empty{display:none}
/* Flatten only the workspace navigation; profile cards retain their layout. */
@media(max-width:900px){
 body .shell{display:block!important}
 body .shell>aside{display:block!important;position:sticky!important;top:0!important;width:100%!important;max-width:100%!important;height:auto!important;padding:8px 10px!important;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
 body .shell>aside .nav-caption,body .shell>aside .sidebar-note,body #gmWorkspaceExpand{display:none!important}
 body .shell>aside #nav{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important;width:100%;padding:3px 0 7px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior-x:contain}
 body #nav .gm-nav-submenu,body #nav #gmWorkspaceItems{display:contents!important}
 body .shell>aside #nav [data-tab]{display:flex!important;flex:0 0 auto!important;align-items:center;gap:7px!important;width:auto!important;min-height:42px;margin:0!important;padding:10px 13px!important;white-space:nowrap;font-size:12px!important;border-radius:10px}
 body #nav [data-tab] svg{width:16px!important;height:16px!important}
 body .profile-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:18px}body .profile-tabs>*{flex-shrink:0}
}
/* Native vector vaults: titanium daily, prism weekly, and earned level seal. */
body .gm-case-sign.ws-vault,body .case-spotlight-icon.ws-vault,body .pack-symbol.ws-vault{display:grid!important;place-items:center!important;width:164px!important;height:120px!important;min-width:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;transform:none!important;overflow:visible!important}
body .ws-vault::before,body .ws-vault::after{display:none!important}
.ws-vault svg{width:100%!important;height:100%!important;filter:drop-shadow(0 12px 16px #0005)!important;overflow:visible;transition:transform .4s var(--ws-ease)}
.ws-vault .vault-light{stroke:var(--accent);fill:none}.ws-vault .vault-seal{fill:var(--accent)}
.ws-vault[data-vault=weekly] .vault-light{stroke:var(--gm-secondary,var(--accent));stroke-width:3}
.ws-vault[data-vault=level] .vault-light{stroke-width:2.5;stroke-dasharray:5 3}
.ws-drops article:hover .ws-vault svg,.premium-case:hover .ws-vault svg{transform:translateY(-5px) rotate(-2deg)}
body .ws-drops{gap:18px;background:none!important;border:0!important;padding:0!important}
body .ws-drops article{position:relative;overflow:hidden;padding:26px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent 65%),var(--panel);box-shadow:inset 0 1px 0 #ffffff0a}
.ws-drops article:after{content:'01 / DAILY';position:absolute;right:22px;top:24px;font-size:9px;letter-spacing:2px;color:var(--muted)}
.ws-drops article[data-drop=weekly]:after{content:'02 / WEEKLY'}
body .ws-drops .gm-case-sign{margin:0 0 24px!important}.ws-drops h2{letter-spacing:-.04em}.ws-drops details{margin:18px 0 10px}.ws-drops summary{cursor:pointer;font-size:12px}
body .premium-case .pack-symbol.ws-vault{width:100px!important;height:78px!important}
body .case-item .gm-case-sign.ws-vault{width:100%!important;height:100px!important}
/* Collection surfaces retain rarity colors and owned item identities. */
body .cosmetic-card,body .case-item{border-radius:12px!important;border:1px solid color-mix(in srgb,var(--rarity) 25%,var(--line))!important;border-bottom:3px solid var(--rarity)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--rarity) 8%,var(--panel)),var(--panel))!important;box-shadow:inset 0 1px 0 #ffffff0b,0 10px 30px #00000015;overflow:hidden;transition:transform .25s var(--ws-ease),border-color .25s,box-shadow .25s}
body .cosmetic-card:hover{transform:translateY(-4px);border-color:var(--rarity)!important;box-shadow:0 12px 28px #0003}
body .cosmetic-art.border-preview,body .cosmetic-art.art-tag{background:linear-gradient(155deg,#ffffff08,transparent 55%),repeating-linear-gradient(135deg,transparent 0 18px,#ffffff03 19px 20px),#10151d!important;min-height:145px;border-radius:8px;position:relative;overflow:hidden}
body .border-demo-avatar{width:72px;height:72px;background:radial-gradient(circle at 35% 25%,#354252,#111820)!important;color:#eaf2f9;font-size:23px}
body .border-demo-banner{width:84%;height:72px;background:linear-gradient(125deg,#283542,#10161f 60%)!important;letter-spacing:4px;font-size:10px;color:#eaf2f9}
body .art-tag .cosmetic-symbol{display:none!important}
body .art-tag .tag-caption{position:relative!important;inset:auto!important;display:inline-flex!important;align-items:center;justify-content:center;max-width:90%;padding:12px 18px!important;margin:auto;text-align:center;font-size:11px!important;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--rarity)!important;border:1px solid color-mix(in srgb,var(--rarity) 65%,transparent);border-left:3px solid var(--rarity);border-radius:3px;background:linear-gradient(110deg,color-mix(in srgb,var(--rarity) 12%,#10151d),#10151d);text-shadow:0 0 18px color-mix(in srgb,var(--rarity) 35%,transparent)}
body .art-tag{display:flex!important;align-items:center;justify-content:center}
body .cosmetic-meta{padding:12px 5px 6px;gap:9px}body .cosmetic-meta>strong{font-size:14px;letter-spacing:-.02em}body .rarity-label{letter-spacing:2px}
body :is(.frame-silver,.frame-red,.frame-gold,.frame-void,.frame-ink){border:2px solid var(--frame-metal)!important;box-shadow:0 0 0 2px #10151d,0 0 0 3px color-mix(in srgb,var(--frame-metal) 45%,transparent),0 0 22px color-mix(in srgb,var(--frame-metal) 16%,transparent),inset 0 0 12px color-mix(in srgb,var(--frame-metal) 15%,transparent)!important}
.frame-silver{--frame-metal:#d7e7f2}.frame-red{--frame-metal:#ed536b}.frame-gold{--frame-metal:#e7bd70}.frame-void{--frame-metal:#b899ff}.frame-ink{--frame-metal:#919cac}
body .frame-gold{border-style:double!important;border-width:4px!important}body .frame-ink{outline:1px dashed #919cac;outline-offset:4px}body .frame-void{animation:ws-frame-glow 4s ease-in-out infinite}
@keyframes ws-frame-glow{50%{filter:drop-shadow(0 0 5px #b899ff66)}}
/* Entry and exit transitions, including native dialogs and class-based overlays. */
:is(dialog,.modal,.case-overlay,.detail-overlay,.gm-image-zoom){transition:opacity .22s var(--ws-ease),transform .22s var(--ws-ease),display .22s allow-discrete,overlay .22s allow-discrete;opacity:0;transform:translateY(8px) scale(.985)}
:is(dialog[open],.modal.open,.case-overlay.open,.detail-overlay.open,.gm-image-zoom){opacity:1;transform:none}
@starting-style{dialog[open],.modal.open,.case-overlay.open,.detail-overlay.open,.gm-image-zoom{opacity:0;transform:translateY(12px) scale(.98)}}
dialog::backdrop{background:#05080db3;backdrop-filter:blur(7px);transition:opacity .22s,display .22s allow-discrete,overlay .22s allow-discrete}
.ws-exit-ghost{pointer-events:none!important;animation:ws-exit .2s var(--ws-ease) forwards!important}
@keyframes ws-exit{to{opacity:0;transform:translateY(6px) scale(.985)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body .premium-case .pack-symbol.ws-vault>*,body .case-spotlight-icon.ws-vault>*{visibility:visible!important}
body #tradeForm .ws-entry-actions button[type=submit]{background:linear-gradient(120deg,var(--accent),var(--gm-secondary,var(--accent)))!important;border-color:var(--accent)!important;color:var(--accentText)!important;box-shadow:0 4px 16px var(--accentSoft)!important}
body #tradeForm :is(input,select,textarea):focus{border-color:var(--accent)!important;outline:2px solid var(--accentSoft)!important}
body .premium-case{background:linear-gradient(115deg,var(--accentSoft),transparent 70%),var(--panel)!important}
body .gamify-crate{border-color:var(--accent)!important}
body .hero .btn:not(.outline),body .btn:not(.outline),body .gm-return-button{background:linear-gradient(120deg,var(--accent),var(--gm-secondary,var(--accent)))!important;color:var(--accentText,#0c0f18)!important;border-color:var(--accent)!important}
body:has(.hero.wrap) .pnl-preview .chart-line{stroke:var(--accent)!important}body:has(.hero.wrap) .pnl-preview .pnl-chart circle{fill:var(--accent)!important}
body .pnl-chart stop{stop-color:var(--accent)!important}
body input[type=file]::file-selector-button{border-color:var(--accent)!important;background:var(--accentSoft)!important}
body .trader-tabs button[aria-selected=true],body .tabs button.selected{border-color:var(--accent)!important;background:var(--accentSoft)!important;color:var(--accent)!important}
body main button:focus-visible,body #nav button:focus-visible,body header button:focus-visible{outline-color:var(--accent)!important}
body #profileAvatarLarge:is(.frame-silver,.frame-red,.frame-gold,.frame-void,.frame-ink){border-color:var(--frame-metal)!important;box-shadow:0 0 0 2px #10151d,0 0 0 3px var(--frame-metal),0 0 22px color-mix(in srgb,var(--frame-metal) 16%,transparent)!important}
/* Section changes animate in both directions without delaying their handlers. */
main>.section{transition:opacity .2s,transform .2s,display .2s allow-discrete;opacity:0;transform:translateY(6px)}
main>.section.active{opacity:1;transform:none}
@starting-style{main>.section.active{opacity:0;transform:translateY(10px)}}
body .profile-tag:not(.rarity-ultra-mythic){padding:7px 12px;border-radius:3px;border:1px solid color-mix(in srgb,var(--rarity) 55%,transparent);border-left:3px solid var(--rarity);background:linear-gradient(110deg,color-mix(in srgb,var(--rarity) 12%,var(--panel)),var(--panel));color:var(--rarity);font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}