:root{
  color-scheme: dark;
  --bg:#0b0f1a;
  --panel:#0f1626;
  --panel-2:#121c31;
  --text:#e6edf3;
  --muted:#9fb0c3;
  --primary:#6ea8fe;
  --accent:#b26eff;
  --accent-2:#5cf1d3;
  --danger:#ff6e6e;
  --ok:#6effa1;
  --surface:#0b1324;
  --stroke:#203150;
  --radius:14px;
  --gap:16px;
  --glow: 0 0 18px rgba(110,168,254,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  background:
    radial-gradient(1000px 800px at 70% -20%, rgba(110,168,254,.10), transparent 60%),
    radial-gradient(900px 700px at -10% 10%, rgba(178,110,255,.10), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height:1.5;
  min-height: 100vh;
}

.app-header{
  padding: clamp(22px, 3vw, 34px) 20px 10px;
  text-align:center;
}
.app-header h1{
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.3px;
  text-shadow: var(--glow);
  font-size: clamp(22px, 2.4vw, 30px);
}
.tagline{margin:0;color:var(--muted)}

.app-main{
  max-width:1200px;
  margin:0 auto;
  padding:10px clamp(12px, 3vw, 20px) 40px;
  display:grid;
  gap: var(--gap);
}
.panel{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid #1b263c;
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
@supports (backdrop-filter: blur(8px)){
  .panel{
    background: linear-gradient(180deg, rgba(17,25,42,0.75), rgba(12,18,33,0.65));
    backdrop-filter: blur(8px) saturate(120%);
  }
}

.input-row{
  display:grid;
  grid-template-columns: 1.2fr minmax(260px, 360px);
  gap: var(--gap);
}
textarea{
  width:100%;
  height: clamp(200px, 36vh, 280px);
  resize:vertical;
  background: var(--surface);
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(110,168,254,.06);
}
textarea:focus{border-color:#2b4f93; box-shadow: 0 0 0 4px rgba(110,168,254,.15)}

.file-column{display:flex;flex-direction:column;gap:10px}
.file-drop{
  display:block;border:2px dashed #28406e;border-radius:12px;min-height:140px;
  background: var(--surface);
  cursor:pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.file-drop:hover{border-color:#3a63ab; transform: translateY(-2px)}
.file-drop-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;color:var(--muted)}

.input-actions{display:flex;gap:8px;flex-wrap:wrap}
button{
  appearance:none;border:1px solid transparent;border-radius:12px;padding:12px 14px;
  font-weight:700; cursor:pointer; color:#0b1020; background:#d7e3ff;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  min-height:44px;
}
button:active{transform: translateY(1px)}
button.primary{
  background: linear-gradient(180deg, #6ea8fe, #4d89ea);
  color:#071020; border-color:#3d6dc9;
  box-shadow: 0 10px 22px rgba(78, 140, 245, .25);
}
button.secondary{
  background: linear-gradient(180deg, #cbb9ff, #9f86ff);
  color:#140b2a; border-color:#7a60e7;
  box-shadow: 0 10px 22px rgba(178, 110, 255, .22);
}
button.ghost{
  background: transparent; color: var(--text);
  border-color:#304566;
}
button:disabled{opacity:.55; cursor:not-allowed}

.hint{color:var(--muted)}

.settings-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.setting{display:flex;flex-direction:column;gap:8px}
.radio, .checkbox{display:flex;align-items:center;gap:10px;cursor:pointer}
input[type="number"], input[type="range"], select{
  background:var(--surface);border:1px solid var(--stroke);color:var(--text);border-radius:10px;
  padding:10px 10px; outline:none; min-height:44px;
}
input[type="number"]:disabled{opacity:.6}
select{height:44px}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.status{
  margin-top:10px; color: var(--muted)
}
.progress{
  margin-top:10px;height:12px;background:var(--surface);border:1px solid var(--stroke);border-radius:20px;overflow:hidden
}
.progress-bar{
  height:100%; width:0%;
  background:
    linear-gradient(90deg, #6ea8fe, #b26eff, #5cf1d3);
  background-size: 200% 100%;
  animation: slideBg 2.8s linear infinite;
  transition: width .3s ease;
}
@keyframes slideBg{
  0%{background-position: 0% 0}
  100%{background-position: 200% 0}
}

.stage-panel{position:relative;overflow:hidden}
.groups{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.group-card{
  background: var(--surface); border:1px solid var(--stroke);border-radius:14px; padding:12px;
  position:relative; overflow:hidden;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.group-card:hover{transform: translateY(-2px); border-color:#335587; box-shadow: 0 10px 30px rgba(0,0,0,.28)}
.group-title{
  margin:0 0 8px; font-size:18px; font-weight:800; color:#cfe1ff;
  text-shadow: 0 0 10px rgba(110,168,254,.25)
}
.name-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:30px}
.name-item{
  background: #101a33; border:1px solid #2a3d63; border-radius:10px; padding:10px 12px; color:#e6edf3;
  transform-origin:left center;
  animation: popIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes popIn{
  0%{transform: scale(.9);opacity:.0; filter: blur(4px)}
  60%{transform: scale(1.04);opacity:1}
  100%{transform: scale(1);filter: none}
}

.lights{
  position:absolute; inset:-10% -10% -10% -10%; pointer-events:none; opacity:.0; transition: opacity .4s ease;
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(110,168,254,.18), transparent 60%),
    radial-gradient(500px 180px at 80% 0%, rgba(178,110,255,.18), transparent 60%),
    radial-gradient(900px 300px at 50% 110%, rgba(255,110,110,.12), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(1px);
}
.lights.on{opacity:.9; animation: flicker 3.5s infinite ease-in-out}
@keyframes flicker{
  0%,100%{opacity:.85}
  7%{opacity:.95}
  12%{opacity:.75}
  20%{opacity:.92}
  27%{opacity:.7}
  45%{opacity:.96}
  60%{opacity:.78}
  73%{opacity:.9}
}

.app-footer{
  max-width:1200px;margin:0 auto;padding:6px clamp(12px, 3vw, 20px) calc(30px + env(safe-area-inset-bottom));
  color:var(--muted)
}

/* Focus ring for accessibility */
:focus-visible{
  outline: 3px solid #6ea8feaa;
  outline-offset: 2px;
  border-radius: 10px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}

/* Mobile layout */
@media (max-width:900px){
  .input-row{grid-template-columns:1fr}
}