:root {
  --bg-dark: #1b2434;
  --primary: #379dd8;
  --text: #e2e8f0;
  --muted: #9aa4b2;
  --border: #4d545f;
  --radius: 20px;
  --font: Roboto, system-ui, Segoe UI, Arial, sans-serif;
}

html, body { margin: 0; padding: 0; height: 100%; scrollbar-width: none; -ms-overflow-style: none; zoom: 1.1; }
body::-webkit-scrollbar { display: none; }

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font);
  display: block;
}

main.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
label { font-size: 14px; color: var(--text); }

.input, select, textarea { background: var(--bg-dark); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; outline: none; }
.input:focus, textarea:focus { border-color: var(--primary); }

#links { width: 100%; height: 120px; scrollbar-width: none; -ms-overflow-style: none; }
#links::-webkit-scrollbar { display: none; }

#out { width: 100%; height: 340px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; scrollbar-width: none; -ms-overflow-style: none; }
#out::-webkit-scrollbar { display: none; }

.button-row { display: flex; gap: 10px; align-items: center; }

.btn-primary, input[type="submit"] { background: var(--primary); color: white; border: 1px solid var(--primary); border-radius: var(--radius); padding: 10px 16px; cursor: pointer; }
.btn-primary:hover, input[type="submit"]:hover { opacity: .9; }

.circle-btn { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--primary); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.circle-btn:hover { background: var(--primary); color: white; }

.core-toggle { position: relative; width: 240px; height: 40px; border-radius: 999px; border: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; align-items: center; user-select: none; }
.core-toggle .labels { position: relative; z-index: 2; display: contents; }
.core-toggle .labels span { text-align: center; cursor: pointer; font-size: 14px; }
.core-toggle .knob { position: absolute; z-index: 1; top: 2px; bottom: 2px; width: calc(50% - 4px); border-radius: 999px; background: rgba(55,157,216,0.25); border: 1px solid var(--primary); transition: transform .2s ease; }
.core-toggle[data-core="singbox"] .knob { transform: translateX(2px); }
.core-toggle[data-core="xray"] .knob { transform: translateX(calc(100% + 2px)); }

.hidden { display: none !important; }

@media (max-width: 600px) {
  html, body { zoom: 1; }
  main.container { padding: 12px 10px; }
  .core-toggle { width: 200px; height: 36px; }
  #out { height: 280px; }
}