:root {
  --bg: #f5f7fa; --card-bg: #fff; --text: #333; --text-light: #666;
  --primary: #4f46e5; --primary-hover: #4338ca; --accent: #10b981; --border: #e2e8f0;
}
body.dark {
  --bg: #1a202c; --card-bg: #2d3748; --text: #e2e8f0; --text-light: #a0aec0;
  --primary: #667eea; --primary-hover: #5a67d8; --accent: #48bb78; --border: #4a5568;
}

* { box-sizing:border-box; }
body {
  margin:0; padding:2rem;
  font-family:'Poppins',sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; transition:background .3s,color .3s;
}
.card {
  width:100%; max-width:600px;
  background:var(--card-bg); padding:2rem;
  border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.05);
}

h1 { text-align:center; color:var(--primary); margin-top:0; }
label { display:block; margin:1rem 0 .5rem; font-weight:600; color:var(--text-light); }
.options { display:flex; gap:1rem; margin-bottom:1rem; }

input,textarea {
  width:100%; padding:.75rem; border:1px solid var(--border);
  border-radius:.5rem; transition:border-color .2s; font-size:1rem;
}
input:focus,textarea:focus { border-color:var(--primary); }

.button-row { display:flex; gap:1rem; margin-top:1rem; }
button {
  flex:1; padding:.75rem; font-weight:600; background:var(--primary);
  color:#fff; border:none; border-radius:.5rem; cursor:pointer; transition:background .2s;
}
button.secondary { background:var(--accent); }
button:hover { background:var(--primary-hover); }
button.secondary:hover { background:var(--primary); }

.copy-btn { margin-left:.5rem; padding:.25rem .5rem; font-size:.8rem; background:var(--accent); }
.copy-btn:hover { background:var(--primary); }

.hidden { display:none; }
#output { margin-top:2rem; }
.result-box { background:var(--bg); border:1px solid var(--border); border-radius:.5rem; padding:1rem; margin-top:1rem; }
.result-box h3 { color:var(--accent); margin:0 0 .5rem; }
pre { font-family:monospace; color:var(--text-light); white-space:pre-wrap; word-break:break-word; margin:0; }

.switch { display:inline-flex; align-items:center; cursor:pointer; }
.switch input { opacity:0; width:0; height:0; }
.slider { width:40px; height:20px; background:var(--border); border-radius:20px; position:relative; margin-right:.5rem; transition:.2s; }
.slider::before { content:''; position:absolute; width:16px; height:16px; background:#fff; border-radius:50%; top:2px; left:2px; transition:.2s; }
.switch input:checked + .slider { background:var(--primary); }
.switch input:checked + .slider::before { transform:translateX(20px); }
.switch-label { font-size:.9rem; color:var(--text); }

.pretty-url { color:var(--primary); text-decoration:none; margin-bottom:1rem; display:block; }
.pretty-url:hover { text-decoration:underline; }

.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal.hidden { display:none; }
.modal-content { background:var(--card-bg); padding:2rem; border-radius:1rem; text-align:center; }
.modal-buttons { display:flex; gap:1rem; margin-top:1rem; }
.modal-buttons button { flex:1; padding:.5rem; }

.dark-btn {
  display:flex; align-items:center; justify-content:center;
  position:fixed; bottom:1rem; right:1rem; width:40px; height:40px;
  border:none; border-radius:50%; background:var(--primary); color:#fff;
  font-size:1.2rem; cursor:pointer; transition:background .2s;
}
.dark-btn:hover { background:var(--primary-hover); }

footer {
  position:relative; width:100%; max-width:600px;
  text-align:center; margin-top:auto; padding:2.5rem 0 4rem;
  color:var(--text-light);
}
.users { display:flex; justify-content:center; gap:2rem; }
.user { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.user img { width:40px; height:40px; border-radius:50%; }
.user-info { display:flex; flex-direction:column; align-items:flex-start; }
.user-info .name { color:var(--text); font-weight:600; }
.user-info .handle { color:var(--text-light); font-size:.8rem; }

.discord-container {
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
}
.discord-logo-footer { width:50px; height:50px; }