:root{
  --sm-bg: #ffffff;
  --sm-panel: #ffffff;
  --sm-border: #e7e9f0;
  --sm-text: #101828;
  --sm-dim: #667085;
  --sm-accent: #4ea8ff;     
  --sm-prem: linear-gradient(135deg,#8A5CFF 0%, #4EA8FF 100%);
  --sm-red: #e5484d;
  --sm-radius: 14px;
  --sm-gap: 14px;
}


.smx { color: var(--sm-text); background: #f4dbf6; }
.smx__head { padding: 24px 24px 8px; }
.smx__title { font-size: 32px; margin: 0 0 6px; }
.smx__strap { color: var(--sm-dim); margin: 0; }

.smx__layout { display: grid; grid-template-columns: 340px 1fr 320px; gap: 20px; padding: 16px 24px 32px; }
@media (max-width:1400px){ .smx__layout { grid-template-columns: 340px 1fr; } .smx__aside{ display:none; } }
@media (max-width:1024px){ .smx__layout { grid-template-columns: 1fr; } .smx__filters{ position:sticky; top:0; z-index:4; } }

.smx__filters, .smx__results, .smx__aside .smx-aside__inner {
  background: var(--sm-panel); border: 1px solid var(--sm-border); border-radius: var(--sm-radius);
}

.smx__filters { padding: 16px; max-height: calc(100vh - 120px); overflow:auto; }
.smx__block { margin-bottom: 14px; }
.smx__h { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; color: var(--sm-dim); }
.smx-block__head { display:flex; align-items:center; justify-content:space-between; }
.smx__more { font-size: 12px; color: var(--sm-accent); background: transparent; border: 0; cursor: pointer; }
.smx__more:hover { background:none; color:#698ed1; text-decoration:underline 1px; }
.smx-chips { display:flex; flex-wrap:wrap; gap:8px; }
.smx-chip, .smx-chips button {
  border-radius: 999px; border:1px solid var(--sm-border); background: rgba(255,255,255,.03);
  padding: 6px 10px; color: var(--sm-text); font-size: 13px; cursor: pointer;
}
.smx-chip.is-active { background: var(--sm-accent); color: #03121f; box-shadow: 0 0 0 4px rgba(78,168,255,.18); }
.smx-chip--add { border-style: dashed; }

.smx-selected { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.smx-selected .smx-chip { background: rgba(255,255,255,.04); }

.smx__results { padding: 12px; min-height: 60vh; }
.smx-res__bar { display:flex; gap:10px; align-items:center; justify-content:space-between; padding: 4px 6px 10px; border-bottom:1px solid var(--sm-border); }
.smx-res__count { color: var(--sm-dim); }
.smx-res__chips { display:flex; flex-wrap:wrap; gap:8px; }

.smx-res__wrap { padding: 16px 10px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }
@media (max-width:1300px){ .smx-res__wrap{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:900px) { .smx-res__wrap{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:600px) { .smx-res__wrap{ grid-template-columns: 1fr;} }

.smx-drawer[hidden]{ display:none !important; }
.smx-drawer { position: fixed; inset: 0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index: 50; }
.smx-drawer__card { width: min(880px, 94vw); max-height: 80vh; overflow:auto; background: var(--sm-panel); border:1px solid var(--sm-border); border-radius: 16px; }
.smx-drawer__head { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; border-bottom:1px solid var(--sm-border);}
.smx-drawer__search { padding: 10px 14px; }
.smx-search { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--sm-border); background: rgba(255,255,255,.04); color: var(--sm-text); }
.smx-tiles { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; padding: 8px 14px 16px; }
.smx-tile { display:block; border-radius:12px; border:1px solid var(--sm-border); background: rgba(255,255,255,.03); padding:10px; cursor:pointer; font-size: 14px;}
.smx-tile.is-active{ outline: 2px solid var(--sm-accent); background: rgba(78,168,255,.15); }

.smx__filtersFoot { display:flex; justify-content:space-between; padding-top: 8px; }
.smx-reset { background: transparent; border: 0; color: var(--sm-dim); cursor: pointer; }

.smx__aside .smx-aside__inner { padding: 12px; }
.smx-tips { margin: 0; padding-left: 18px; color: var(--sm-dim); font-size: 14px; }

.smx-range { margin: 14px 0 18px; }

.smx-range__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.smx-range__head .smx__h{ margin:0; }
.smx-range__head .smx-hint{
  color:var(--sm-dim); font-size:12px;
}
.smx-range.is-on .smx-hint{ color:var(--sm-text); }

.smx-range input[type=range]{
  width:100%;
  appearance:none; -webkit-appearance:none; background:
    linear-gradient(var(--sm-accent) 0 0) 0/var(--p,0%) 100% no-repeat,
    #e5e7eb;               
  height:4px; border-radius:999px; outline:none; cursor:pointer;
}

.smx-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--sm-accent);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  margin-top:calc((18px - 4px)/-2);
}

.smx-range input[type=range]::-moz-range-track{
  background:#e5e7eb; height:4px; border-radius:999px;
}
.smx-range input[type=range]::-moz-range-progress{
  background:var(--sm-accent); height:4px; border-radius:999px;
}
.smx-range input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--sm-accent);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.smx-range .smx-range__labels{
  display:flex; justify-content:space-between;
  color:var(--sm-dim); font-size:12px; margin-top:8px;
}

.smx__results,
.smx__filters,
.smx-aside__inner{
    background: #fff6ff;
}
.smx__titleRow{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.smx__title{
  font-size: 40px; line-height:1.1; margin:0;
}
.smx__titleMark{
  background: linear-gradient(90deg,#111 0%, #4ea8ff 55%, #111 100%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.smx__strap{ color: var(--sm-dim); margin-top: 6px; }
.smx-presets--hero{ display:flex; gap:10px; flex-wrap:wrap; }
.smx-preset{
  appearance: none; border:1px solid var(--sm-border); background:#fff;
  padding:8px 12px; border-radius:999px; font-size:14px; color:#0f172a;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.smx-preset:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(16,24,40,.08); border-color:#cfd4e2; }
.smx-preset:active{ transform: translateY(0); }
.smx-sort select{
  padding:8px 10px; border:1px solid var(--sm-border); border-radius:10px; background:#fff; color:#0f172a;
}
.smx-view{
  border:1px solid var(--sm-border); background:#fff; color:#111; padding:6px 10px; border-radius:10px; cursor:pointer;
}
.smx-view.is-active{ border-color: var(--sm-accent); box-shadow:0 0 0 3px rgba(78,168,255,.2); }

.smx-chip, .smx-chips button{
  background:#fff; color:#111; border:1px solid var(--sm-border);
}
.smx-chip.is-active{
  background: var(--sm-accent); color:#03243e; box-shadow:0 0 0 4px rgba(78,168,255,.20);
}
.smx-chip, .smx-chips button:hover{
    background: #d9d9d9;
}

.smx__aside--ranges .smx-aside__inner{ position:sticky; top:84px; }
.smx-range{ margin:14px 0 18px; }
.smx-range .smx__h{ color:#384150; }
.smx-range input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none;
  background: linear-gradient(90deg, transparent var(--p,0%), var(--sm-accent) var(--p,0%), var(--sm-accent) var(--p,0%), transparent var(--p,0%));
  height:4px; border-radius:999px; outline:none;
}
.smx-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid var(--sm-accent); box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.smx-range .smx-range__labels{ color:var(--sm-dim); font-size:12px; margin-top:6px; }

.smx-card{
  background:#fff; border:1px solid var(--sm-border); border-radius:12px; overflow:hidden;
  box-shadow:0 8px 20px rgba(16,24,40,.06); transition: transform .14s ease, box-shadow .14s ease;
}
.smx-card:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(16,24,40,.10); }
.smx-card__cover img{ display:block; width:100%; height:auto; }
.smx-card__body{ padding:10px 12px; }
.smx-badge{ display:inline-block; padding:2px 6px; border-radius:6px; background:#f1f5ff; color:#143261; font-size:12px; }


:root {
  --smx-accent: #4ea8ff;
  --smx-track:  #e5e9f1;   
  --smx-track-dim: #d6dbe6;  
}

.smx-range { margin: 14px 0 18px; }
.smx-range .smx-range__labels { display:flex; justify-content:space-between; font-size:12px; color:#667085; margin-top:6px; }
.smx-range .smx-hint { font-size:12px; color:#94a3b8; margin-left:auto; }
.smx-range.is-on .smx-hint { color:#0b1622; font-weight:700; }

.smx-range input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:999px;
  outline:none;
  background:
    linear-gradient(to right,
      var(--smx-accent) 0 var(--pct, 50%),
      var(--smx-track)  var(--pct, 50%) 100%);
}

.smx-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#fff;
  border:2px solid var(--smx-accent);
  box-shadow:none;           
  cursor:pointer;
}

.smx-range input[type="range"]::-moz-range-track{
  height:4px; border-radius:999px;
  background:
    linear-gradient(to right,
      var(--smx-accent) 0 var(--pct, 50%),
      var(--smx-track)  var(--pct, 50%) 100%);
}
.smx-range input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border:2px solid var(--smx-accent);
  background:#fff; border-radius:50%; box-shadow:none; cursor:pointer;
}

.smx-range input[type="range"]:focus-visible { outline: 2px solid rgba(78,168,255,.35); outline-offset: 6px; }

.smx-range input[type="range"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;  
  border: 0 !important;
  box-shadow: none !important;
  width: 100%;
  height: 28px;                     
  outline: none;
}

.smx-range input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right,
      var(--smx-accent) 0 var(--p, 0%),
      var(--smx-track)  var(--p, 0%) 100%);
}

.smx-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--smx-accent);
  box-shadow: none;
  margin-top: -6px; 
  cursor: pointer;
}

.smx-range input[type="range"]::-moz-range-track{
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right,
      var(--smx-accent) 0 var(--p, 0%),
      var(--smx-track)  var(--p, 0%) 100%);
}
.smx-range input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--smx-accent);
  box-shadow: none;
  cursor: pointer;
}

.smx-range input[type="range"]:focus-visible{
  outline: 2px solid rgba(78,168,255,.35);
  outline-offset: 6px;
}

.smx__titleRow{
  display:grid;
  grid-template-columns: 1fr minmax(520px, 700px);
  align-items:center;
  gap: 20px;
  padding: 24px 24px 6px;
}
@media (max-width:1200px){
  .smx__titleRow{ grid-template-columns: 1fr; }
}

.smx-steps{
  background:#fff; border:1px solid var(--sm-border);
  border-radius: var(--sm-radius); padding:14px 16px;
}
.smx-steps__list{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin:0; padding:0; list-style:none;
}
@media (max-width:1200px){
  .smx-steps__list{ grid-template-columns: 1fr; }
}
.smx-step{ display:flex; align-items:center; gap:12px; }
.smx-step__num{
  width:28px; height:28px; border-radius:50%;
  background:#0f172a; color:#fff; display:grid; place-items:center;
  font-weight:800; box-shadow: 0 6px 14px rgba(15,23,42,.25);
}
.smx-step__txt strong{ display:block; font-weight:800; color:#111; }
.smx-step__txt span{ display:block; font-size:12px; color:var(--sm-dim); margin-top:2px; }

.smx-presetsRow{ padding: 10px 24px 0; }
.smx-presetsGrid{
  display:grid; gap:10px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
@media (max-width:1600px){ .smx-presetsGrid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width:1000px){
  .smx-presetsGrid{
    grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
    overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
}

.smx-presetBox{
  position:relative; height:96px;
  border:1px solid var(--sm-border); border-radius:12px;
  background:#fff; color:#0f172a; cursor:pointer;
  display:flex; align-items:flex-end; padding:10px; font-weight:800;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.smx-presetBox:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16,24,40,.10);
  border-color:#cfd4e2;
}

.smx-presetBox::after{
  content: attr(data-label);
}

.smx-bg--fastdark .smx-presetBox,
.smx-bg--thriller .smx-presetBox{ color:#eef3ff; }

.smx__titleRow{
  display:grid;
  grid-template-columns: minmax(420px,560px) 1fr; 
  align-items:center;
  gap: 12px;                                 
  padding: 10px 24px 8px;
}

.smx-presetsHead{
  display:flex; align-items:baseline; gap:10px; margin: 8px 24px 4px;
}
.smx-presetsTitle{
  font-weight:800; color:#111; font-size:16px;
}
.smx-tag{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#eef4ff; color:#2b4a7a; font-weight:700; font-size:12px;
}
.smx-presetsHint{ margin-left:auto; color:#667085; font-size:12px; }

.smx-presetBox{
  position:relative; height:96px;
  border:1px solid var(--sm-border); border-radius:12px;
  background:#fff; color:#0f172a; cursor:pointer;
  display:flex; align-items:flex-end; padding:10px; font-weight:800;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.smx-presetBox.is-on{
  border-color: var(--sm-accent);
  box-shadow: 0 0 0 3px rgba(78,168,255,.22);
  transform: translateY(-2px);
}

.smx-bg--cozy{        background: linear-gradient(135deg,#ffd7a6 0%,#fff4d8 60%); }
.smx-bg--fastdark{    background: radial-gradient(80% 120% at 80% 0%,#0a1328 0%,#26385f 55%,#3e4f7f 100%); color:#eef3ff; }
.smx-bg--horror{      background: radial-gradient(90% 140% at 70% 10%,#1a0f14 0%,#3e1b28 55%,#562139 100%); color:#ffe8ef; }
.smx-bg--romcom{      background: linear-gradient(135deg,#ffe0ef 0%,#fff4fb 60%); }
.smx-bg--epic{        background: linear-gradient(135deg,#dfe9ff 0%,#f4f7ff 60%); }
.smx-bg--cozymystery{ background: linear-gradient(135deg,#dcffe9 0%,#f1fff7 60%); }
.smx-bg--thriller{    background: radial-gradient(100% 120% at 80% 0%,#0e1118 0%,#1f2a3a 55%,#2b3a50 100%); color:#e9f1ff; }
.smx-bg--ya{          background: linear-gradient(135deg,#ccffe7 0%,#e8fff5 60%); }
.smx-bg--feelgood{    background: linear-gradient(135deg,#fff0b0 0%,#fff8d7 60%); }
.smx-bg--mind{        background: linear-gradient(135deg,#dcd6ff 0%,#f1efff 60%); }
#sm-studio { position: relative; }
#sm-studio .smx-cta { display: grid; place-items: center; margin: 12px 0 18px; }
#sm-studio .smx-btn.smx-btn--mix{
  appearance:none; border:0; cursor:pointer;
  padding: 14px 22px; border-radius: 16px;
  background: linear-gradient(90deg,#735cff, #7dd3fc);
  color:#0b1020; font-weight:700; font-size:16px; letter-spacing:.2px;
  box-shadow: 0 8px 24px rgba(74, 79, 255, .25);
  display:inline-flex; align-items:center; gap:10px;
}
#sm-studio .smx-btn.smx-btn--mix .dot{
  width:10px; height:10px; border-radius:50%; background:#0b1020; display:inline-block;
  box-shadow:0 0 0 4px rgba(11,16,32,.15) inset;
}
#sm-studio .smx-cta__hint{ margin-top:8px; font-size:12px; opacity:.7; }

#sm-studio .smx-brew { display:grid; place-items:center; padding:22px 0; }
#sm-studio .smx-brew__ring{
  width:56px; height:56px; border-radius:50%;
  border:4px solid rgba(255,255,255,.16);
  border-top-color:#8bc6ff; animation: smx-spin 1s linear infinite;
}
#sm-studio .smx-brew__txt{ margin-top:12px; font-size:14px; opacity:.75; }
@keyframes smx-spin{ to{ transform: rotate(360deg); } }

.sm-win{ 
  display:grid; grid-template-columns: 160px 1fr; gap:18px;
  align-items:center; padding:16px; border-radius:18px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 6px 22px rgba(0,0,0,.18) inset, 0 2px 10px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}
.sm-win__art{ border-radius:12px; overflow:hidden; background:rgba(255,255,255,.08); }
.sm-win__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.sm-win__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sm-win__tag{ font-size:11px; font-weight:700; padding:4px 8px; border-radius:999px;
  background: rgba(125,211,252,.18); color:#dff2ff; text-transform:uppercase; letter-spacing:.6px; }
.sm-win__title{ font-size:24px; line-height:1.1; margin:6px 0 0; color:#000000;}
.sm-win__by{ opacity:.8; margin-left:6px; color:hsl(0 0% 28%);}
.sm-win__body{ min-width:0; }
.sm-win__cta{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.sm-win__cta .smx-btn{
  appearance:none; border:0; cursor:pointer; padding:10px 14px; border-radius:12px;
  background:rgba(255,255,255,.10); color:#fff;
}
.smx-btn--primary{ background: linear-gradient(90deg,#735cff,#7dd3fc); color:#0b1020; font-weight:700; }
.sm-meter__label,.sm-meter__sub{color:#000000;}
.sm-win__eyebrow{color:hsl(0 0% 28%);}

.sm-win-mount{ margin:10px 0 18px; }
#sm-studio.is-mixing #smx-results,
#sm-studio.is-result #smx-results{ display:none; }
#sm-studio.is-mixing .smx-brew{ display:grid; }
#sm-studio:not(.is-mixing) .smx-brew{ display:none; }

.page-template-page-shelmatch .smx {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: 24px;       
  padding-right: 24px;
  background: #e6e6e6;
  box-sizing: border-box;
}

.page-template-page-shelmatch .smx__head,
.page-template-page-shelmatch .smx-presetsRow,
.page-template-page-shelmatch .smx__layout {
  padding-left: 0;
  padding-right: 0;
}

.smx-cta{
    margin-top: 250px !important;
}