:root {
  --bg: #0b0b0c;
  --panel: #111214;
  --panel-2: #0f1012;
  --text: #e7e7ea;
  --muted: #a3a3ad;
  --line: #2a2c34;
  --accent: #a6f750;
  --accent-2: #f5d35c;
  --danger: #ff7272;
  --radius: 12px;
  --gap: 14px;
  --shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  --glow: 0 0 0 1px var(--line), 0 0 0 2px rgba(166,247,80,.1), 0 6px 18px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(166,247,80,.05), transparent 50%),
    radial-gradient(900px 700px at 120% 0%, rgba(245,211,92,.04), transparent 50%),
    var(--bg);
  color: var(--text);
  font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: .2px;
}

.container {
  max-width: 1800px;
  margin: 22px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: calc(100vh - 50px);
}

.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.panel > .head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: #d7d7de;
  letter-spacing: .6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.panel .body { padding: 14px; }

#lista{
  width:100%;
  border-radius: var(--radius);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background:#121212;
  color:#fff;
  text-align:center;
  font-family:monospace;
  white-space:pre;
  caret-color:#fff;
  padding:12px;
  resize: both;
  min-height: clamp(160px, 34vh, 520px);
  overflow: auto;
}

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

    select#gates{
      padding:8px 12px;
      border:2px solid var(--line);
      border-radius:1000px;
      background:#0e0f12;
      color:#ffffff;
      font-weight:400;
      letter-spacing:.3px;
      box-shadow: var(--shadow);
      outline:none;
      appearance:none;
      opacity: .85;
      transition: box-shadow .35s ease, border-color .35s ease, opacity .35s ease;
    }
    #gates:focus,
    #gates.active {
      opacity: 1;
      border-color: var(--accent);
      box-shadow: 0 0 12px var(--accent), 0 0 22px var(--accent-2);
    }

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:#14161a;
  color:var(--text);
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  letter-spacing:.3px;
  transition:.15s ease;
  cursor:pointer;
  box-shadow: var(--shadow);
  position:relative; z-index:1;
}
.btn:hover{ transform:translateY(-1px); box-shadow: var(--glow); }
.btn:active{ transform:translateY(0); }
.btn-accent{ background:linear-gradient(180deg,#1b2a11,#10170b); border-color:#26331b; color:#d8ff9a; }
.btn-warn{ background:linear-gradient(180deg,#2c2315,#1b160d); border-color:#010101; color:#ffe6a9; }
.toolbar{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; position:relative; z-index:1; }

.search{ margin-top:var(--gap); }
.search input{
  width:100%; padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--line); background:#0e0f12; box-shadow:var(--shadow);
  color:var(--text);
}

.sections{ margin-top:var(--gap); display:grid; gap:var(--gap); }

details.section{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg,#0f1012,#0b0c0e); box-shadow:var(--shadow);
}
details.section summary{
  list-style:none; cursor:pointer; padding:12px 14px; font-weight:700; letter-spacing:.4px;
  display:flex; align-items:center; gap:10px; user-select:none;
}
details.section summary::-webkit-details-marker{ display:none; }
.sum-right{ margin-left:auto; display:flex; gap:8px; }

.section .content{
  border-top:1px solid var(--line);
  overflow:hidden;
  max-height: 0;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 14px;
}
.section[open] .content{
  padding: 12px 14px;
}

.icon-btn{
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; border:1px solid var(--line);
  background:#121317; box-shadow:var(--shadow); cursor:pointer;
  position:relative; z-index:1;
}
.material-icons{ font-size:18px; color:#d6d6dd; pointer-events:none; line-height:1; }

.slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 100%;
  max-width: 100%;
}
.slider-container input[type=range] {
  flex: 1;
  min-width: 120px;
}

.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:8px; margin-top:10px; flex:1; }
.pill{ text-align:center; padding:8px 0; border:1px solid var(--line); border-radius:999px; background:#0e0f12; }

.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.4px; margin-right:6px;
  background:#1b2a11; color:#d8ff9a; border:1px solid #26331b;
}

.custom-swal {
  background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
}
.custom-swal .swal2-title { color: var(--text) !important; letter-spacing: .3px; }
.custom-swal .swal2-html-container { color: var(--muted) !important; }
.custom-swal-confirm {
  background: linear-gradient(180deg,#1b2a11,#10170b) !important;
  color: #d8ff9a !important;
  border: 1px solid #26331b !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow) !important;
}
.custom-swal-cancel {
  background: linear-gradient(180deg,#2c2315,#1b160d) !important;
  color: #ffe6a9 !important;
  border: 1px solid #3a2e1b !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow) !important;
}

@media (max-width:768px){
  .panel > .head { padding:10px 12px; font-size:12px; flex-direction:column; align-items:flex-start; }
  .toolbar{ gap:8px; }
  .btn{ flex:1 1 auto; padding:10px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .icon-btn{ width:30px; height:30px; }
  #lista{ min-height: clamp(140px, 28vh, 380px); }
}
.tg-forward-options { 
  border-top: 1px solid var(--line); 
  margin-top: 8px; 
  padding-top: 10px; 
  display: grid; 
  gap: 8px; 
}
.tg-forward-row { display: flex; align-items: center; gap: 8px; }
.tg-check input[type=checkbox] { transform: translateY(1px); }
.tg-check span { color: var(--muted); }
.tg-check strong { color: var(--text); }