/* ═══════════════════════════════════════ */
/* VISUARIUM — Compiled Utilities          */
/* ═══════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;tab-size:4}
body{line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
input,button{font:inherit;color:inherit}
a{color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}

/* ── Scroll ── */
.scroll-smooth{scroll-behavior:smooth}

/* ── Position ── */
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{inset:0}
.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}
.top-6{top:1.5rem}.right-6{right:1.5rem}
.top-1\/2{top:50%}.left-1\/2{left:50%}
.top-\[72px\]{top:72px}.left-\[72px\]{left:72px}.right-\[72px\]{right:72px}.bottom-\[72px\]{bottom:72px}

/* ── Transform ── */
.-translate-x-1\/2{transform:translateX(-50%)}
.-translate-y-1\/2{transform:translateY(-50%)}
.translate-y-\[10px\]{transform:translateY(10px)}
.scale-95{transform:scale(.95)}

/* ── Z-index ── */
.z-10{z-index:10}
.z-\[100\]{z-index:100}
.z-\[200\]{z-index:200}
.z-\[1000\]{z-index:1000}

/* ── Display ── */
.block{display:block}
.hidden{display:none}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}

/* ── Flex / Grid ── */
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-8{gap:2rem}
.gap-\[2px\]{gap:2px}.gap-\[3px\]{gap:3px}.gap-\[10px\]{gap:10px}
.gap-x-3{column-gap:.75rem}
.gap-y-2\.5{row-gap:.625rem}
.gap-y-3{row-gap:.75rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.group{position:relative}

/* ── Width ── */
.w-2\.5{width:.625rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-12{width:3rem}
.w-\[7px\]{width:7px}.w-\[18px\]{width:18px}.w-\[140px\]{width:140px}.w-\[320px\]{width:320px}
.w-full{width:100%}

/* ── Height ── */
.h-2\.5{height:.625rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-12{height:3rem}.h-14{height:3.5rem}
.h-\[1px\]{height:1px}.h-\[7px\]{height:7px}.h-\[18px\]{height:18px}.h-\[200px\]{height:200px}
.h-full{height:100%}

/* ── Min/Max ── */
.min-w-0{min-width:0}
.min-h-screen{min-height:100vh}
.min-h-\[1\.5em\]{min-height:1.5em}
.max-w-\[560px\]{max-width:560px}
.max-w-\[1100px\]{max-width:1100px}
.max-w-\[1200px\]{max-width:1200px}
.max-h-\[400px\]{max-height:400px}

/* ── Padding ── */
.p-2{padding:.5rem}.p-3\.5{padding:.875rem}.p-7{padding:1.75rem}.p-8{padding:2rem}
.p-\[1px\]{padding:1px}
.p-10{padding:2.5rem}
.px-0{padding-left:0;padding-right:0}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-\[5px\]{padding-left:5px;padding-right:5px}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-\[2px\]{padding-top:2px;padding-bottom:2px}
.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-24{padding-top:6rem}
.pt-\[120px\]{padding-top:120px}
.pb-2{padding-bottom:.5rem}.pb-8{padding-bottom:2rem}.pb-14{padding-bottom:3.5rem}.pb-20{padding-bottom:5rem}
.pb-\[1px\]{padding-bottom:1px}
.pr-16{padding-right:4rem}

/* ── Margin ── */
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-auto{margin-top:auto}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.ml-2{margin-left:.5rem}.ml-\[6px\]{margin-left:6px}
.mx-4{margin-left:1rem;margin-right:1rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* ── Typography ── */
.text-center{text-align:center}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}
.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[17px\]{font-size:17px}
.text-\[18px\]{font-size:18px}.text-\[19px\]{font-size:19px}
.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.font-\[family-name\:var\(--font-mono\)\]{font-family:var(--font-mono)}
.font-\[family-name\:var\(--font-sans\)\]{font-family:var(--font-sans)}
.font-inter{font-family:'Inter',-apple-system,sans-serif}
.leading-none{line-height:1}
.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.625}
.leading-\[1\.65\]{line-height:1.65}
.tracking-tight{letter-spacing:-.025em}
.tracking-wide{letter-spacing:.025em}
.tracking-\[0\.08em\]{letter-spacing:.08em}
.uppercase{text-transform:uppercase}
.whitespace-nowrap{white-space:nowrap}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.no-underline{text-decoration:none}
.underline{text-decoration-line:underline}
.decoration-1{text-decoration-thickness:1px}
.underline-offset-2{text-underline-offset:2px}
.align-super{vertical-align:super}
.select-none{user-select:none}

/* ── Text colors ── */
.text-\[var\(--text-primary\)\]{color:var(--text-primary)}
.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}
.text-\[var\(--text-tertiary\)\]{color:var(--text-tertiary)}
.text-\[var\(--text-micro\)\]{color:var(--text-micro)}
.text-\[var\(--gold\)\]{color:var(--gold)}
.text-\[var\(--accent-orange\)\]{color:var(--accent-orange)}

/* ── Background colors ── */
.bg-\[var\(--bg\)\]{background-color:var(--bg)}
.bg-\[var\(--surface\)\]{background-color:var(--surface)}
.bg-\[var\(--surface-hover\)\]{background-color:var(--surface-hover)}
.bg-\[var\(--surface-border\)\]{background-color:var(--surface-border)}
.bg-\[var\(--search-overlay-bg\)\]{background-color:var(--search-overlay-bg)}
.bg-\[var\(--eye-bg\)\]{background-color:var(--eye-bg)}
.bg-\[var\(--pupil-bg\)\]{background-color:var(--pupil-bg)}
.bg-\[var\(--gold-bg\)\]{background-color:var(--gold-bg)}
.bg-\[rgba\(255\2c 0\2c 144\2c 0\.15\)\]{background-color:rgba(255,0,144,0.15)}
.bg-transparent{background-color:transparent}

/* ── Borders ── */
.border{border-width:1px;border-style:solid}
.border-2{border-width:2px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-none{border:none}
.border-transparent{border-color:transparent}
.border-\[var\(--surface-border\)\]{border-color:var(--surface-border)}
.border-\[var\(--gold-border\)\]{border-color:var(--gold-border)}
.border-\[rgba\(255\2c 0\2c 144\2c 0\.3\)\]{border-color:rgba(255,0,144,0.3)}
.border-t-\[var\(--text-tertiary\)\]{border-top-color:var(--text-tertiary)}
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.rounded-\[11px\]{border-radius:11px}

/* ── Effects ── */
.opacity-0{opacity:0}.opacity-80{opacity:.8}.opacity-90{opacity:.9}
.shadow-\[var\(--search-shadow\)\]{box-shadow:var(--search-shadow)}
.shadow-\[var\(--shadow-preview\)\]{box-shadow:var(--shadow-preview)}
.backdrop-blur-\[4px\]{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.backdrop-blur-\[20px\]{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}
.overflow-y-auto{overflow-y:auto}
.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}
.cursor-default{cursor:default}
.outline-none{outline:none}
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}

/* ── Transitions ── */
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.duration-75{transition-duration:75ms}
.duration-100{transition-duration:100ms}
.duration-150{transition-duration:150ms}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}

/* ── Placeholder ── */
.placeholder-\[var\(--text-micro\)\]::placeholder{color:var(--text-micro)}

/* ── Animation ── */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.animate-spin{animation:spin 1s linear infinite}

/* ── Hover ── */
.hover\:opacity-80:hover{opacity:.8}
.hover\:bg-\[var\(--surface\)\]:hover{background-color:var(--surface)}
.hover\:bg-\[var\(--surface-hover\)\]:hover{background-color:var(--surface-hover)}
.hover\:border-\[var\(--surface-border-hover\)\]:hover{border-color:var(--surface-border-hover)}
.hover\:text-\[var\(--text-primary\)\]:hover{color:var(--text-primary)}
.hover\:text-\[var\(--text-secondary\)\]:hover{color:var(--text-secondary)}
.hover\:text-\[var\(--text-tertiary\)\]:hover{color:var(--text-tertiary)}

/* ── Responsive md (768px+) ── */
@media(min-width:768px){
  .md\:block{display:block}
  .md\:grid-cols-\[repeat\(auto-fill\2c minmax\(340px\2c 1fr\)\)\]{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
  .md\:px-8{padding-left:2rem;padding-right:2rem}
}

/* ── Accessibility ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ── Mobile category selector ── */
@media(max-width:767px){
  #subTabs{display:none !important}
}
@media(min-width:768px){
  #mobileCatTrigger{display:none !important}
}

/* ── Scrollbar ── */
.scrollbar-thin{scrollbar-width:thin}
.scrollbar-thumb-\[var\(--surface-border\)\]{scrollbar-color:var(--surface-border) transparent}