/* Moonclutch Cases catalog (V34). Palette: #0D0F13 bg, #191D24 panels, #242932 hover, #2A2F38 borders, #F2F3F5 / #949BA6 text, #8591C8 accent */
.cx-top{display:flex;align-items:baseline;gap:12px;margin:2px 0 12px}
.cx-title{margin:0;font-size:22px;font-weight:800;letter-spacing:.01em;color:#F2F3F5}
.cx-count{font-size:12px;color:#949BA6}
.cx-bar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(200px,260px) auto auto;gap:10px;align-items:center;margin-bottom:10px}
.cx-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;background:#12151B;border:1px solid #2A2F38;border-radius:6px;color:#949BA6;min-width:0;transition:border-color .16s,background .16s}
.cx-search svg{width:15px;height:15px;flex:none}
.cx-search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0!important;color:#F2F3F5;font-size:13px}
.cx-search input::placeholder{color:#949BA6}
.cx-search:focus-within{border-color:#8591C8;background:#14181f;box-shadow:0 0 0 1px #8591C8}
.cx-risk{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;background:#12151B;border:1px solid #2A2F38;border-radius:6px;font-size:12px;color:#949BA6}
.cx-risk label{font-weight:700;color:#F2F3F5}
.cx-risk output{min-width:58px;text-align:right;font-weight:700;color:#F2F3F5;font-size:12px;white-space:nowrap}
.cx-risk output[data-level=low]{color:#46c46b}.cx-risk output[data-level=medium]{color:#e3c33f}.cx-risk output[data-level=high]{color:#f0933a}.cx-risk output[data-level=very_high]{color:#ef5a4f}
.cx-risk input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:70px;height:6px;border-radius:3px;background:linear-gradient(90deg,#3fbf65,#e3c33f 40%,#f0933a 70%,#ef4a40);outline-offset:6px;margin:0}
.cx-risk input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#F2F3F5;border:2px solid #0D0F13;box-shadow:0 0 0 1px #8591C8;cursor:pointer}
.cx-risk input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#F2F3F5;border:2px solid #0D0F13;box-shadow:0 0 0 1px #8591C8;cursor:pointer}
.cx-risk input[data-level=all]{filter:saturate(.55) brightness(.85)}
.cx-menu{position:relative}
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 13px;background:#191D24;border:1px solid #2A2F38;border-radius:6px;color:#F2F3F5;font-size:12px;font-weight:600;white-space:nowrap;transition:background .16s,border-color .16s,color .16s}
.cx-btn b{font-weight:700}.cx-btn svg{width:11px;height:11px;color:#949BA6}
.cx-btn:hover{background:#242932;border-color:#3a414d}.cx-btn:active{background:#1f242c;transform:translateY(1px)}
.cx-btn[aria-expanded=true]{border-color:#8591C8}
.cx-btn.solid{background:#8591C8;border-color:#8591C8;color:#0D0F13}.cx-btn.solid:hover{background:#98a3d3}
.cx-btn.ghost{background:transparent}
.cx-btn:focus-visible,.cx-cats button:focus-visible,.cx-card:focus-visible,.cx-pop button:focus-visible{outline:2px solid #8591C8!important;outline-offset:2px!important}
.cx-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;padding:6px;background:#191D24;border:1px solid #2A2F38;border-radius:8px;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.cx-pop[hidden]{display:none}
.cx-pop>button{display:flex;align-items:center;justify-content:space-between;width:100%;height:34px;padding:0 10px;background:none;border:0;border-radius:5px;color:#c9ced6;font-size:12.5px;text-align:left}
.cx-pop>button:hover{background:#242932;color:#F2F3F5}
.cx-pop>button em{font-style:normal;color:#8591C8;visibility:hidden}.cx-pop>button[aria-checked=true]{color:#F2F3F5}.cx-pop>button[aria-checked=true] em{visibility:visible}
.cx-range{padding:12px;display:grid;gap:10px;min-width:230px}
.cx-range label{display:grid;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#949BA6}
.cx-range label span{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;background:#12151B;border:1px solid #2A2F38;border-radius:6px}
.cx-range label span:focus-within{border-color:#8591C8}
.cx-range i{font-style:normal;color:#949BA6}.cx-range input{flex:1;min-width:0;background:none;border:0;outline:0!important;color:#F2F3F5;font-size:13px}
.cx-err{margin:0;font-size:11.5px;color:#ef6b61}.cx-err[hidden]{display:none}
.cx-actions{display:flex;gap:8px;justify-content:flex-end}.cx-actions .cx-btn{height:32px}
.cx-cats{display:flex;gap:6px;overflow-x:auto;padding:5px;margin-bottom:10px;background:#12151B;border:1px solid #2A2F38;border-radius:8px;scrollbar-width:none}
.cx-cats::-webkit-scrollbar{display:none}
.cx-cats button{flex:none;height:32px;padding:0 14px;background:transparent;border:1px solid transparent;border-radius:5px;color:#949BA6;font-size:12px;font-weight:700;letter-spacing:.04em;transition:background .16s,color .16s,border-color .16s}
.cx-cats button:hover{background:#191D24;color:#F2F3F5}
.cx-cats button.on{background:rgba(133,145,200,.16);border-color:rgba(133,145,200,.5);color:#F2F3F5}
.cx-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:0;margin-bottom:10px}
.cx-chips:empty{display:none}
.cx-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 10px;background:#191D24;border:1px solid #2A2F38;border-radius:5px;font-size:11.5px;color:#c9ced6}
.cx-chip button{width:20px;height:20px;border:0;border-radius:4px;background:none;color:#949BA6;font-size:14px;line-height:1}.cx-chip button:hover{background:#242932;color:#F2F3F5}
.cx-clear{height:26px;padding:0 10px;background:none;border:1px solid transparent;border-radius:5px;color:#8591C8;font-size:11.5px;font-weight:700}.cx-clear:hover{background:rgba(133,145,200,.12)}
/* grid: 5-6 columns on wide desktop, 4-5 laptop, 2-3 tablet, 2 mobile */
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(172px,calc((100% - 50px) / 6)),1fr));gap:10px;align-items:stretch;grid-auto-rows:1fr}
.cx-card{position:relative;display:grid;grid-template-rows:auto auto auto auto;align-content:start;justify-items:center;gap:6px;min-width:0;height:100%;padding:12px 10px 12px;background:#191D24;border:1px solid #2A2F38;border-radius:6px;color:#F2F3F5;text-align:center;overflow:hidden;
  transition:background-color 180ms ease,border-color 180ms ease;-webkit-tap-highlight-color:rgba(133,145,200,.18)}
.cx-card::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 34%,rgba(133,145,200,.18),transparent 70%);opacity:0;transition:opacity 200ms ease;pointer-events:none}
.cx-art{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/.86;min-width:0}
.cx-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 200ms ease;will-change:transform}
.cx-ph{width:56%;height:auto;color:#3a414d;transition:color 200ms ease,transform 200ms ease}
.cx-name{position:relative;max-width:100%;font-size:13.5px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-price{position:relative;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;background:#12151B;border:1px solid #2A2F38;border-radius:5px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.cx-moon{color:#8591C8;font-size:13px}
.cx-vol{position:relative;width:100%;padding:3px 4px 0}
.cx-vbar{position:relative;display:block;height:3px;border-radius:2px;background:linear-gradient(90deg,#3fbf65,#e3c33f 40%,#f0933a 70%,#ef4a40)}
.cx-vbar i{position:absolute;top:-4px;width:2px;height:11px;margin-left:-1px;border-radius:1px;background:#F2F3F5;box-shadow:0 0 0 1px #0D0F13}
.cx-vol.na .cx-vbar{background:#2f3540}.cx-vol small{display:block;margin-top:4px;font-size:10px;color:#949BA6}
@media(hover:hover){
 .cx-card:hover{background:#242932;border-color:#3d4452}
 .cx-card:hover::before{opacity:1}
 .cx-card:hover .cx-art img{transform:scale(1.04)}
 .cx-card:hover .cx-ph{color:#5b6475;transform:scale(1.04)}
}
.cx-card:active{background:#2a303a}
@media(hover:none){.cx-card:active::before{opacity:1}}
.cx-empty{grid-column:1/-1;display:grid;justify-items:center;gap:12px;padding:44px 12px;background:#12151B;border:1px dashed #2A2F38;border-radius:8px;color:#c9ced6;font-size:13.5px}
@media(max-width:900px){.cx-bar{grid-template-columns:1fr 1fr}.cx-search{grid-column:1/-1}.cx-risk{grid-column:1/-1}.cx-menu .cx-btn{width:100%}.cx-pop{left:0;right:auto;min-width:100%}#cxRangeWrap .cx-pop{right:0;left:auto;min-width:230px}.cx-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media(max-width:640px){.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cx-card{padding:10px 8px}.cx-name{font-size:12.5px}.cx-title{font-size:19px}}
@media(prefers-reduced-motion:reduce){.cx-card,.cx-card::before,.cx-art img,.cx-ph{transition:none!important}.cx-card:hover .cx-art img{transform:none}}
/* override global input skin inside the catalog toolbar */
#app .cx-search input,#app .cx-range input{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:0!important;height:100%!important;min-height:0!important;border-radius:0!important;width:auto!important}
#app .cx-search input:focus,#app .cx-range input:focus{outline:0!important;box-shadow:none!important}
#app .cx-range input{height:34px!important}
#app .cx-risk input[type=range]{border:0!important;padding:0!important;height:6px!important;min-height:0!important;width:auto!important;background:linear-gradient(90deg,#3fbf65,#e3c33f 40%,#f0933a 70%,#ef4a40)!important;border-radius:3px!important;box-shadow:none!important}
#app .cx-risk input[type=range][data-level=all]{opacity:.6}
#app .cx-risk input[type=range]:focus-visible{outline:2px solid #8591C8!important;outline-offset:6px!important}