:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111;
  --muted:#6b7280;
  --shadow:rgba(0,0,0,.05);
}

body.dark{
  --bg:#0f172a;
  --card:#1e293b;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --shadow:rgba(0,0,0,.4);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  transition:
  background-color .4s cubic-bezier(.4,0,.2,1),
  color .4s cubic-bezier(.4,0,.2,1),
  box-shadow .4s cubic-bezier(.4,0,.2,1);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins',sans-serif;
}

body,
.icon-btn,
.header,
.preset-list,
.preset-card,
.preset-dropdown,
.preset-dropdown a svg,
#searchInput,
.slider-dots span{
  transition:
  background-color .4s cubic-bezier(.4,0,.2,1),
  color .4s cubic-bezier(.4,0,.2,1),
  box-shadow .4s cubic-bezier(.4,0,.2,1);
}
/* ================= HEADER ================= */

.header{
  background:var(--card);
  box-shadow:0 4px 20px var(--shadow);
  position:sticky;
  top:0;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  font-weight:700;
  font-size:16px;
}

.icon-btn{
  background: none;
  color:var(--text);
  border:none;
  cursor:pointer;
  padding:8px;
  border-radius:50%;
}

.icon-btn:hover{
    background: none;
    color:#DBC900;
}

.icon-btn svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

/* HEADER DROPDOWN */

.dropdown{
  position:absolute;
  right:20px;
  top:60px;
  background:var(--card);
  color:var(--text);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  display:none;
  min-width:180px;
  z-index:9999;
}

.dropdown.show{
  display:block;
}

.dropdown a{
  display:flex;
  gap:10px;
  padding:14px;
  text-decoration:none;
  color:var(--text);
}

.dropdown a:hover{
  color:#DBC900;
}

.dd-icon{
  width:18px;
  height:18px;
}

/* ================= SEARCH ================= */

.search-section{
  padding:20px;
}

#searchInput{
  background:var(--card);
  color:var(--text);
  width:100%;
  padding:14px;
  border-radius:40px;
  border:none;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}

/* ================= PROMO SLIDER ================= */

.promo-slider{
  padding:0 20px 20px;
}

.slides{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  height:170px;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
  border-radius:22px;
  overflow:hidden;
}

.slide.active{
  opacity:1;
}

/* Background blur */
.slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:blur(20px);
  transform:scale(1.2);
  z-index:1;
}

/* Foreground image */
.slide-img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
}

/* Text */
.promo-text{
  position:absolute;
  bottom:18px;
  left:18px;
  color:#fff;
  z-index:3;
  text-shadow:0 4px 15px rgba(0,0,0,.7);
}

.promo-text h3{
  font-size:16px;
  font-weight:600;
}

.promo-text p{
  font-size:13px;
  opacity:.9;
}

/* SLIDER DOTS */

.slider-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:12px;
}

.slider-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--muted);
  transition:.3s;
}

.slider-dots span.active{
  width:18px;
  border-radius:10px;
  background: var(--text);
}

/* ================= PRESET LIST ================= */

.preset-list{
  padding:0 20px 40px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.preset-card{
  background:var(--card);
  box-shadow:0 6px 20px var(--shadow);
  border-radius:20px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  transition: opacity .25s ease, transform .25s ease, height .25s ease, margin .25s ease, padding .25s ease;
}

.preset-card.hide{
  opacity:0;
  transform:translateY(-6px);
  height:0;
  margin:0;
  padding-top:0;
  padding-bottom:0;
  overflow:hidden;
}

.preset-card:hover{
  box-shadow:0 20px 50px #DBC900;
}

.preset-info h4{
  font-size:14px;
}

.preset-info span{
  color:var(--muted);
  font-size:12px;
}

.preset-menu{
  position:relative;
}

.preset-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:var(--card);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  min-width:160px;
  display:none;
  z-index:99999;
}

.preset-dropdown.show{
  display:block;
}

.preset-dropdown a svg{
  stroke: var(--text);
  fill: none;
}

.preset-dropdown a{
  display:flex;
  gap:10px;
  padding:14px;
  text-decoration:none;
  color: var(--text);
}

.preset-dropdown a:hover{
  color:#DBC900
}

/* ================= TOAST ================= */

.toast{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--card);
  color:var(--muted);
  padding:12px 20px;
  border-radius:30px;
  font-size:13px;
  opacity:0;
  transition:.3s;
  z-index:99999;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ================= LOADING ================= */

#loadingScreen{
  position:fixed;
  inset:0;
  background:var(--card);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:100000;
  opacity:1;
  transition:opacity .5s ease, visibility .5s ease;
}

#loadingScreen.hide{
  opacity:0;
  visibility:hidden;
}

.loading-character{
  width:120px;
  animation:fadeZoom 1.2s ease forwards;
}

.loading-text{
  margin-top:18px;
  font-size:16px;
  font-weight:600;
  text-align:center;
  color:var(--text);
}

.dots::after{
  content:"";
  animation:dotsAnim 1.4s infinite;
}

@keyframes fadeZoom{
  from{opacity:0; transform:scale(.7);}
  to{opacity:1; transform:scale(1);}
}

@keyframes dotsAnim{
  0%{content:"";}
  25%{content:".";}
  50%{content:"..";}
  75%{content:"...";}
  100%{content:"";}
}