:root{
  --bg:#f1f5f9;
  --card:#fff;
  --border:#e5e7eb;
  --text:#0f172a;
  --accent:#6366f1;
  --accent-light:rgba(99,102,241,.12);
  --radius:14px;
  --shadow:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

/* THEMES */
body[data-theme="light"]{
  --bg:#f1f5f9; --card:#ffffff; --border:#e5e7eb; --text:#0f172a;
  --accent:#6366f1; --accent-light:rgba(99,102,241,.12);
}
body[data-theme="dark"]{
  --bg:#0f172a; --card:#1f2937; --border:#334155; --text:#f8fafc;
  --accent:#38bdf8; --accent-light:rgba(56,189,248,.12);
}
body[data-theme="midnight"]{
  --bg:#030712; --card:#0b0f19; --border:#1f293d; --text:#f8fafc;
  --accent:#6366f1; --accent-light:rgba(99,102,241,0.15);
}
body[data-theme="ocean"]{
  --bg:#ecfeff; --card:#ffffff; --border:#a5f3fc; --text:#083344;
  --accent:#0891b2; --accent-light:rgba(8,145,178,.12);
}
body[data-theme="sunset"]{
  --bg:#fff7ed; --card:#ffffff; --border:#fed7aa; --text:#431407;
  --accent:#ea580c; --accent-light:rgba(234,88,12,.12);
}
body[data-theme="forest"]{
  --bg:#f0fdf4; --card:#ffffff; --border:#bbf7d0; --text:#052e16;
  --accent:#16a34a; --accent-light:rgba(22,163,74,.12);
}
body[data-theme="lavender"]{
  --bg:#faf5ff; --card:#ffffff; --border:#e9d5ff; --text:#3b0764;
  --accent:#9333ea; --accent-light:rgba(147,51,234,.12);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Inter,system-ui,-apple-system,sans-serif
}
html{
  color-scheme: light dark;
  -webkit-tap-highlight-color: transparent;
}
body{
  background:var(--bg);
  color:var(--text);
  transition:background.25s, color.25s;
  padding-bottom:env(safe-area-inset-bottom);
}
header{
  padding:12px 16px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter:blur(8px);
}
header h2{
  font-size:clamp(16px, 4vw, 20px);
  font-weight:700;
}
.theme-select-wrap{
  display:flex;
  align-items:center;
  gap:8px
}
.theme-select{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  min-height:40px;
}
.wrapper{
  max-width:1200px;
  margin:16px auto;
  padding:0 16px
}
.steps{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.step-btn{
  flex:1 1 100px;
  padding:12px 8px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
  color:var(--text);
  font-size:clamp(12px, 3vw, 14px);
  min-height:44px;
  text-align:center;
}
.step-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:var(--shadow);
}
.step-btn:disabled{
  opacity:.4;
  cursor:not-allowed
}
.step-content{
  display:none
}
.step-content.active{
  display:block;
  animation:fadeIn.3s ease;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}
.category-card-wrapper{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(95px,1fr));
  gap:12px;
  margin-top:12px
}
@media (min-width:640px){
.category-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}
}
.category-card{
  aspect-ratio:1/1;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:.2s;
  background:var(--card);
  font-weight:600;
  text-transform:capitalize;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  user-select:none;
}
.category-card:active{transform:scale(.97)}
.category-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.category-active{
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px var(--accent-light);
  transform:scale(1.02)
}
.container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  contain:layout;
}
@media (min-width:480px){
.container{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  display:flex;
  flex-direction:column;
  transition:.2s;
  box-shadow:var(--shadow);
  position:relative;
  contain:content;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg)
}
.card-remove{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:6px;
  border:none;
  background:var(--border);
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  opacity:0;
  transition:.2s;
  z-index:2;
}
.card:hover .card-remove{opacity:1}

.icon-box{
  width:100px;
  height:100px;
  border-radius:12px;
  background:var(--accent-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:80px;
  flex-shrink:0;
  margin:0 auto 8px;
}
.content{
  flex:1;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px
}
.title{
  color:var(--accent);
  font-weight:700;
  font-size:18px;
  text-align:center;
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
select{
  width:100%;
  padding:10px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background-color:var(--card);
  color:var(--text);
  font-size:16px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  min-height:44px;
}
select:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
select option{
  background-color:var(--card);
  color:var(--text);
}
.row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:auto
}
.colorBox{
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid var(--border);
  flex-shrink:0
}
.btn{
  width:36px;
  height:36px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  flex-shrink:0
}
.btn:active{transform:scale(.95)}
#prompt{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  white-space:pre-wrap;
  line-height:1.7;
  font-size:14px;
  box-shadow:var(--shadow);
  overflow-wrap:break-word;
}
.action-btns{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}
.copy,.next-btn{
  flex:1 1 200px;
  padding:14px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size:15px;
  min-height:48px;
  transition:.2s;
}
.copy:active,.next-btn:active{transform:scale(.98)}
.next-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}
.next-btn.secondary{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent)
}
.toast{
  position:fixed;
  top:24%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.9);
  background:var(--text);
  color:var(--bg);
  padding:16px 28px;
  border-radius:12px;
  font-weight:600;
  font-size:15px;
  opacity:0;
  transition:all.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:1000;
  pointer-events:none;
  box-shadow:var(--shadow-lg);
}
.toast.show{
  opacity:1;
  transform:translate(-50%) scale(1);
}

.skeleton{
  background:linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size:200% 100%;
  animation:loading 1.5s infinite;
}
@keyframes loading{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.category-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
  gap:8px;
}
.category-header h3{
  margin:0;
  color:var(--accent);
  font-size:clamp(16px, 4vw, 18px);
}
.category-header label{
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width:480px){
.category-card-wrapper{padding:10px}
.category-grid{
    grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
    gap:8px;
  }
.category-card{
    padding:6px;
    gap:4px;
    border-radius:12px;
  }

.category-card > div:first-child{
    font-size:48px;
    line-height:1;
  }
.category-card > div:last-child{
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    padding:0 2px;
  }

.container{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
.card{
    padding:8px;
  }

.icon-box{
    width:80px;
    height:80px;
    font-size:56px;
    margin:0 auto 6px;
    border-radius:10px;
  }
.title{font-size:14px;margin-bottom:2px}
.content{gap:6px}

 select{
    padding:8px 28px 8px 8px;
    font-size:16px;
    min-height:44px;
    border-radius:8px;
  }
.row{gap:6px}
.colorBox{width:36px;height:36px;border-radius:6px}
.btn{width:36px;height:36px;border-radius:6px}

.card-remove{
    top:4px;
    right:4px;
    width:22px;
    height:22px;
    font-size:20px;
    opacity:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}