:root{
  --bg:#0b0b10; --panel:#15161b; --panel-2:#1b1d24; --accent:#7c3aed; --text:#e5e7eb; --muted:#9ca3af;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0b10,#0f1117);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
}
.wrap{
  flex:1; height:100%;
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap:20px; padding:16px; max-width:100vw;
}
@media (max-width: 900px){
  .wrap{ grid-template-columns: 1fr; }
  .preview-card{ min-height: 60vh; }
}
.card{
  display:flex; flex-direction:column; min-height:0;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #232533;border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
header{padding:16px 18px 12px;border-bottom:1px solid #232533}
.content{padding:16px 18px; overflow:auto; flex:1 1 auto;}
.actions{display:flex; gap:10px; justify-content:flex-end; padding:12px 18px; border-top:1px solid #232533}
h1,h2{margin:0}
.hint{font-size:.85rem;color:var(--muted)}

.stepper{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid #232533;
}
.chip{padding:6px 10px;border-radius:999px;border:1px solid #2a2c36;font-size:.82rem;color:#cbd5e1;opacity:.6;transition:.2s}
.chip.active{opacity:1;border-color:#7c3aed;color:white;box-shadow:0 0 0 2px rgba(124,58,237,.25) inset}

.row{display:grid;gap:16px}
@media(min-width:900px){.row{grid-template-columns:1fr 1fr}}

label{display:block;font-size:.92rem;color:var(--muted);margin:8px 0 6px}
input[type="text"],textarea,select{
  width:100%;padding:10px 12px;border:1px solid #2a2c36;background:#0f1117;color:var(--text);border-radius:10px
}
textarea{min-height:90px;resize:vertical}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.btn{appearance:none;border:1px solid transparent;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:#14151b;border-color:#2a2c36;color:var(--text)}
.btn-primary{background:linear-gradient(90deg,#7c3aed,#06b6d4);color:white;border-color:#2a2c36;box-shadow:0 6px 16px rgba(124,58,237,.35)}

/* Big choose-file button */
.filebox{border:1px dashed #2a2c36;background:#0f1117;padding:16px;border-radius:12px}
.hidden-input{display:none}
.big-file-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:#2563eb; color:#fff; border:none; padding:12px 16px; border-radius:10px;
  font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(37,99,235,.35); transition:transform .12s ease, box-shadow .12s ease;
}
.big-file-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(37,99,235,.45); }
.file-hint{margin-top:8px; color:#9ca3af; font-size:.9rem}
.file-selected{margin-top:8px; color:#cbd5e1; font-size:.9rem}

/* icon grid */
.icon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:900px){.icon-grid{grid-template-columns:repeat(3,1fr)}}
.icon-item{
  border:1px solid #2a2c36;border-radius:12px;padding:12px;background:#0f1117;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
.icon-item:hover{ transform:translateY(-2px); }
.icon-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.icon-head input[type="checkbox"]{transform:scale(1.15)}
.icon-head .ico{width:22px;text-align:center}
.icon-url{margin-top:6px}
.icon-item.on{
  border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.25);
  animation:glow-pulse 0.9s ease;
}
@keyframes glow-pulse{
  0%{ box-shadow:0 0 0 0 rgba(124,58,237,.0); }
  50%{ box-shadow:0 0 0 6px rgba(124,58,237,.18); }
  100%{ box-shadow:0 0 0 0 rgba(124,58,237,.0); }
}

/* color picker */
.color-palette{display:flex; flex-direction:column; gap:12px;}
.color-big{
  width:100%; height:56px; border-radius:12px; border:1px solid #2a2c36; background:#0f1117; padding:6px;
  display:flex; align-items:center; justify-content:center;
}
.color-big input[type="color"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:42px; border:none; background:transparent; cursor:pointer; border-radius:8px;
}

/* sliders */
.slider-row{display:grid; grid-template-columns: 1fr 140px; gap:12px; align-items:center}
.slider-row input[type="range"]{width:100%}

/* Right preview */
.preview-card .preview-wrap{padding:0; flex:1 1 auto; display:flex; min-height:0}
.preview-card iframe{border:0; width:100%; height:100%; border-top:1px solid #232533}

/* footer */
footer{color:#94a3b8;text-align:center;font-size:.9rem;padding:10px 0; user-select:none}

/* small badges + mini presence */
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #2a2c36;color:#cbd5e1;padding:4px 8px;border-radius:999px;font-size:.8rem;background:#0f1117}
.badge.good{border-color:#22c55e;color:#dcfce7;background:#052e18}
.badge.err{border-color:#ef4444;color:#fee2e2;background:#3a0a0a}

.discord-actions{display:flex;gap:10px;align-items:center;margin-top:10px}

.pres-mini{display:none;margin-top:10px;border:1px solid #2a2c36;border-radius:10px;padding:8px;background:#0f1117}
.pres-mini.show{display:flex;gap:10px;align-items:center}
.pres-mini .av{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#111}
.pres-mini .dot{position:absolute;right:0;bottom:0;transform:translate(25%,25%);width:12px;height:12px;border-radius:50%;border:2px solid #1e1f25;background:#80848e}
.pres-mini .dot.online{background:#23a55a}.pres-mini .dot.idle{background:#f0b232}.pres-mini .dot.dnd{background:#f23f43}
.pres-mini .info .name{font-weight:700}
.pres-mini .info .act{color:#b5bac1;font-size:.92rem}


/* Stylish URL input */
.fancy-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #475569;
  background: #0b1020;
  color: #e2e8f0;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}
.fancy-input::placeholder{ color:#94a3b8; }
.fancy-input:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

#finishHostBtn{ }


/* Big overlay notice */
.big-notice{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}
.big-notice-card{
  background: rgba(20,20,22,.9);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 520px;
  color: #e2e8f0;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.big-notice-title{
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.big-notice-body{
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.big-notice code{
  background: #0b1020;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
  margin-top: 6px;
}

/* Fancy input (if not already) */
.fancy-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #475569;
  background: #0b1020;
  color: #e2e8f0;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}
.fancy-input::placeholder{ color:#94a3b8; }
.fancy-input:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}