.theme-main{display:block}

.themes-hero{
  position:relative;
  padding:140px 0 90px;
  overflow:hidden;
}
.themes-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(140deg, rgba(255,255,255,.06), transparent 55%);
  opacity:.8;
  pointer-events:none;
}
.themes-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1000px 600px at 15% -10%, var(--brand-soft), transparent 60%);
  mix-blend-mode:screen;
  opacity:.7;
  pointer-events:none;
}
.themes-hero .container{
  position:relative;
  z-index:1;
  display:grid;
  gap:20px;
  max-width:820px;
}
.themes-hero .chip{width:max-content}
.themes-hero h1{margin:0;font-size:clamp(36px,6vw,68px);line-height:1.02}
.themes-hero p{margin:0;font-size:18px;opacity:.88}

.theme-status{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:.01em;
}
.theme-status strong{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  box-shadow:0 10px 28px var(--brand-glow);
}
.themes-note{font-size:15px;opacity:.72}

.theme-grid{
  margin:40px auto 90px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.theme-card{
  position:relative;
  border-radius:24px;
  border:1px solid var(--outline);
  background:var(--card-gradient);
  box-shadow:var(--surface-elev);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s var(--ease);
  --theme-preview:linear-gradient(135deg,#4338ca,#a855f7,#ec4899,#6366f1);
  --theme-glow:rgba(167,139,250,.45);
  --theme-accent:var(--brand);
}
.theme-card:hover{transform:translateY(-6px);border-color:var(--brand-soft-x);}
.theme-card.is-active{border-color:var(--brand-soft-x);box-shadow:0 28px 70px rgba(0,0,0,.55);}

.theme-preview{position:relative;height:180px;overflow:hidden;}
.theme-preview::before,
.theme-preview::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
}
.theme-preview::before{
  background:var(--theme-preview);
  background-size:200% 200%;
  animation:previewFlow 18s linear infinite;
  filter:saturate(1.1);
}
.theme-preview::after{
  background:radial-gradient(900px 320px at 18% -12%, var(--theme-glow), transparent 60%);
  mix-blend-mode:screen;
  opacity:.7;
  animation:previewGlow 12s ease-in-out infinite alternate;
}

.theme-body{display:grid;gap:14px;padding:22px 22px 26px;flex:1;}
.theme-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.theme-heading h2{margin:0;font-size:24px;color:var(--theme-accent);}
.theme-tag{font-size:14px;font-weight:700;color:var(--theme-accent);}
.theme-card p{margin:0;opacity:.85;}
.theme-meta{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;opacity:.78;}
.theme-meta li{position:relative;padding-left:18px;}
.theme-meta li::before{content:"✦";position:absolute;left:0;color:var(--theme-accent);opacity:.7;}
.theme-apply{justify-content:center;width:100%;}
.theme-apply[disabled]{cursor:default;color:var(--text);background:var(--chip-bg);border-color:var(--brand);box-shadow:0 14px 36px var(--brand-glow);}

.theme-card--aurora{--theme-preview:linear-gradient(135deg,#312e81,#a855f7,#ec4899,#6366f1);--theme-glow:rgba(167,139,250,.45);--theme-accent:#B9A7FF;}
.theme-card--nebula{--theme-preview:linear-gradient(135deg,#0f172a,#1d4ed8,#7dd3fc,#a855f7);--theme-glow:rgba(125,211,252,.42);--theme-accent:#7DD3FC;}
.theme-card--sunrise{--theme-preview:linear-gradient(135deg,#7c2d12,#f97316,#fbbf24,#f472b6);--theme-glow:rgba(251,191,36,.4);--theme-accent:#FBBF24;}
.theme-card--ocean{--theme-preview:linear-gradient(135deg,#0f766e,#0ea5e9,#22d3ee,#38bdf8);--theme-glow:rgba(34,211,238,.38);--theme-accent:#22D3EE;}
.theme-card--forest{--theme-preview:linear-gradient(135deg,#064e3b,#22c55e,#a3e635,#bef264);--theme-glow:rgba(163,230,53,.36);--theme-accent:#A3E635;}
.theme-card--midnight{--theme-preview:linear-gradient(135deg,#111827,#1e3a8a,#2563eb,#60a5fa);--theme-glow:rgba(96,165,250,.38);--theme-accent:#60A5FA;}
.theme-card--nikita{--theme-preview:linear-gradient(135deg,#050307,#8b0000,#ff2d55,#9b111e);--theme-glow:rgba(255,45,85,.42);--theme-accent:#FF375F;}

@keyframes previewFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes previewGlow{0%{opacity:.55;}50%{opacity:.85;}100%{opacity:.55;}}

@media (max-width: 1200px){
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 780px){
  .themes-hero{padding:120px 0 70px;}
  .theme-grid{grid-template-columns:1fr;gap:20px;margin-bottom:70px;}
  .theme-preview{height:160px;}
}
@media (max-width: 520px){
  .themes-hero{padding:100px 0 60px;}
  .themes-hero p{font-size:16px;}
  .theme-body{padding:18px 18px 22px;}
  .theme-heading h2{font-size:22px;}
  .theme-status{flex-direction:column;align-items:flex-start;gap:6px;}
}