/* ==========================================================
   ELEVATE MY DORM -- Trend Engine Style Presets v1
   CSS filter overlays applied to the canvas + ambient room mood
   ========================================================== */

/* The Trend Engine container -- shows preset bubbles & mixer */
.trend-engine {
  margin-top: 18px;
  padding: 18px;
  background: linear-gradient(135deg, #FFFDF8 0%, #FFF4E0 100%);
  border: 1px solid rgba(248, 170, 70, 0.18);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.trend-engine::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 12% 18%, rgba(63, 210, 199, 0.10) 0%, transparent 55%);
  pointer-events: none;
}
.trend-engine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
}
.trend-engine-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.trend-engine-title em {
  background: var(--grad-cool);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic;
}
.trend-engine-sub {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Preset chips */
.preset-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  position: relative;
}
.preset-chip {
  appearance: none;
  border: 1px solid rgba(10, 37, 64, 0.10);
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.preset-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(248, 170, 70, 0.18), 0 2px 6px rgba(10, 37, 64, 0.08);
  border-color: rgba(248, 170, 70, 0.40);
}
.preset-chip.is-active {
  border-color: #1A8A8E;
  box-shadow: 0 0 0 2px rgba(26, 138, 142, 0.20), 0 8px 20px rgba(26, 138, 142, 0.18);
}
.preset-chip-swatch {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.preset-chip-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
.preset-chip-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 3px;
}

/* Preset swatch gradients */
.swatch-industrial   { background: linear-gradient(135deg, #3D4147 0%, #6B6F75 50%, #C77B4A 100%); }
.swatch-cottagecore  { background: linear-gradient(135deg, #F4E3D7 0%, #E8A87C 50%, #85A878 100%); }
.swatch-japandi      { background: linear-gradient(135deg, #EFE6D9 0%, #C9B89A 50%, #5C4D3D 100%); }
.swatch-boho         { background: linear-gradient(135deg, #E8B86E 0%, #D67D5C 50%, #A04030 100%); }
.swatch-steampunk    { background: linear-gradient(135deg, #4A3220 0%, #8A6B3D 50%, #C9892E 100%); }
.swatch-coastal      { background: linear-gradient(135deg, #BDDDE8 0%, #5BA3C0 50%, #E8DDC8 100%); }

/* Mixer panel */
.mixer-panel {
  margin-top: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(63, 210, 199, 0.06) 0%, rgba(26, 138, 142, 0.10) 100%);
  border: 1px dashed rgba(26, 138, 142, 0.30);
  border-radius: 12px;
  position: relative;
}
.mixer-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #1A8A8E;
  font-weight: 700;
  margin-bottom: 8px;
}
.mixer-selects {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.mixer-select {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(10, 37, 64, 0.15);
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 600;
}
.mixer-x {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #1A8A8E;
  font-size: 20px;
  text-align: center;
}
.mixer-active-tag {
  margin-top: 10px;
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--grad-cool);
  color: #FFFFFF;
  letter-spacing: 1px;
  font-weight: 600;
}
.mixer-active-tag:empty { display: none; }

/* Canvas filter classes -- applied to the room canvas */
.canvas-wrap.preset-industrial canvas   { filter: saturate(0.65) contrast(1.10) brightness(0.92) sepia(0.10); }
.canvas-wrap.preset-cottagecore canvas  { filter: saturate(1.20) brightness(1.05) hue-rotate(-8deg) contrast(0.95); }
.canvas-wrap.preset-japandi canvas      { filter: saturate(0.55) brightness(1.02) contrast(0.96) sepia(0.15); }
.canvas-wrap.preset-boho canvas         { filter: saturate(1.35) hue-rotate(12deg) contrast(1.06) brightness(1.02); }
.canvas-wrap.preset-steampunk canvas    { filter: sepia(0.40) saturate(0.85) contrast(1.18) brightness(0.85) hue-rotate(-15deg); }
.canvas-wrap.preset-coastal canvas      { filter: hue-rotate(-12deg) saturate(0.90) brightness(1.10) contrast(0.94); }

/* Mixer blends -- two filters layered (less intense individually) */
.canvas-wrap.mix-industrial-boho canvas      { filter: saturate(1.08) contrast(1.10) hue-rotate(8deg) sepia(0.12); }
.canvas-wrap.mix-cottagecore-japandi canvas  { filter: saturate(0.85) brightness(1.05) hue-rotate(-4deg) sepia(0.08); }
.canvas-wrap.mix-steampunk-boho canvas       { filter: sepia(0.30) saturate(1.10) contrast(1.12) hue-rotate(-5deg); }
.canvas-wrap.mix-industrial-japandi canvas   { filter: saturate(0.60) contrast(1.05) brightness(0.98) sepia(0.10); }
.canvas-wrap.mix-coastal-cottagecore canvas  { filter: saturate(1.05) brightness(1.08) hue-rotate(-10deg) contrast(0.97); }


/* =============================================================
   EXPANDED VISUAL SET v2 -- distinct canvas grades per shop style
   Same mechanism as the originals: a color-grade filter on the room canvas.
   ============================================================= */
.canvas-wrap.preset-tech canvas        { filter: saturate(0.70) brightness(1.04) contrast(1.08) hue-rotate(190deg) opacity(0.98); }
.canvas-wrap.preset-basic canvas       { filter: saturate(0.95) brightness(1.01) contrast(1.00); }
.canvas-wrap.preset-earthy canvas      { filter: saturate(1.05) brightness(0.98) contrast(1.02) sepia(0.22) hue-rotate(-12deg); }
.canvas-wrap.preset-glam canvas        { filter: saturate(1.25) brightness(1.08) contrast(1.10) sepia(0.18) hue-rotate(310deg); }
.canvas-wrap.preset-celestial canvas   { filter: saturate(1.10) brightness(1.02) contrast(1.04) hue-rotate(230deg); }
.canvas-wrap.preset-kawaii canvas      { filter: saturate(1.30) brightness(1.10) contrast(0.98) hue-rotate(300deg); }
.canvas-wrap.preset-maximalist canvas  { filter: saturate(1.55) contrast(1.14) brightness(1.03) hue-rotate(20deg); }
.canvas-wrap.preset-preppy canvas      { filter: saturate(1.15) brightness(1.05) contrast(1.05) hue-rotate(-4deg); }
.canvas-wrap.preset-socal canvas       { filter: saturate(1.20) brightness(1.12) contrast(1.02) hue-rotate(-18deg); }
.canvas-wrap.preset-academia canvas    { filter: sepia(0.30) saturate(0.80) contrast(1.14) brightness(0.82) hue-rotate(-10deg); }
.canvas-wrap.preset-cyberpunk canvas   { filter: saturate(1.50) contrast(1.22) brightness(0.92) hue-rotate(265deg); }
.canvas-wrap.preset-y2k canvas         { filter: saturate(1.45) brightness(1.08) contrast(1.06) hue-rotate(280deg); }
.canvas-wrap.preset-hypebeast canvas   { filter: saturate(1.30) contrast(1.18) brightness(0.96); }
.canvas-wrap.preset-grunge canvas      { filter: saturate(0.75) contrast(1.16) brightness(0.88) sepia(0.18); }
.canvas-wrap.preset-sportsfan canvas   { filter: saturate(1.40) contrast(1.12) brightness(1.04) hue-rotate(-6deg); }
.canvas-wrap.preset-midcentury canvas  { filter: saturate(1.10) contrast(1.05) brightness(1.00) sepia(0.20) hue-rotate(-14deg); }