@font-face { font-family: "Trainer Settings Display"; src: url("/assets/fonts/RuneScape-UF.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Trainer Settings Text"; src: url("/assets/fonts/RuneScape-Plain-12.woff2") format("woff2"); font-display: swap; }
.keybind-dialog { --gold: #d4a54a; --gold-muted: #b99b62; --edge: #3c3225; --text: #d9c7aa; --muted: #b5a890; font: 16px/1.45 "Trainer Settings Text", Georgia, serif; }
.keybind-dialog, .keybind-dialog * { box-sizing: border-box; }
.keybind-dialog {
  width: min(460px, calc(100vw - 36px));
  max-width: none;
  padding: 0;
  overflow: visible;
  border: 1px solid #6a5432;
  border-radius: 4px;
  color: var(--text);
  background: #100c08;
  box-shadow:
    0 0 0 4px #21180f,
    0 0 0 5px #3b2c1c,
    0 28px 90px rgba(0, 0, 0, .86);
}

.keybind-dialog::backdrop {
  background: rgba(4, 3, 2, .78);
  backdrop-filter: blur(3px);
}

.keybind-panel {
  padding: 27px;
  background:
    radial-gradient(circle at 50% 0, rgba(180, 121, 47, .12), transparent 42%),
    linear-gradient(145deg, #18110b, #0e0b08 72%);
}

.keybind-heading {
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(212, 165, 74, .16);
  text-align: center;
}

.keybind-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--gold-muted);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.keybind-heading h2 {
  margin: 0;
  color: #ead9bb;
  font: 28px/1.1 "Trainer Settings Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: .035em;
  text-shadow: 0 2px 3px #000;
}

.keybind-heading p {
  margin: 8px 0 0;
  color: #978871;
  font-size: 14px;
  line-height: 1.4;
}

.keybind-list {
  display: grid;
  margin-top: 17px;
  gap: 8px;
}

.keybind-row {
  display: grid;
  min-height: 44px;
  padding: 5px 6px 5px 14px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 148px;
  border: 1px solid rgba(111, 87, 53, .34);
  border-radius: 3px;
  color: #c9b99e;
  background: rgba(8, 6, 4, .42);
  font-size: 16px;
}

.keybind-capture,
.keybind-actions button {
  height: 32px;
  border: 1px solid #55442d;
  border-radius: 2px;
  color: #dfca9d;
  background: linear-gradient(#282017, #17120d);
  font: 15px "Trainer Settings Display", Georgia, serif;
  cursor: pointer;
}

.keybind-capture:hover,
.keybind-capture:focus-visible,
.keybind-actions button:hover,
.keybind-actions button:focus-visible {
  border-color: #a17c3f;
  color: #f1d78e;
  outline: 0;
}

.keybind-capture.is-listening {
  border-color: #d4a54a;
  color: #f4dc9b;
  background: #332414;
  box-shadow: 0 0 12px rgba(212, 165, 74, .14);
}

.keybind-error {
  min-height: 18px;
  margin: 9px 2px 0;
  color: #df8978;
  font-size: 14px;
  line-height: 1.35;
}

.keybind-actions {
  display: grid;
  margin-top: 9px;
  align-items: center;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
}

.keybind-actions button {
  padding: 0 13px;
}

.keybind-actions .keybind-reset {
  border-color: transparent;
  color: #998970;
  background: transparent;
}

.keybind-actions .keybind-save {
  border-color: #8b6a35;
  color: #f0d38c;
  background: linear-gradient(#392a18, #21180f);
}

.latency-setting {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
}
.latency-setting label { display: flex; justify-content: space-between; gap: 16px; color: var(--gold); }
.latency-setting output { color: #e7d7bb; font-size: 14px; }
.latency-setting input { width: 100%; margin: 14px 0 4px; accent-color: var(--gold); }
.latency-setting p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.keybind-dialog { max-height: calc(100vh - 40px); overflow-y: auto; }


.settings-notice { position: fixed; z-index: 20; right: 20px; bottom: 20px; max-width: calc(100vw - 40px); margin: 0; padding: 14px 20px; border: 1px solid #8b6a35; border-radius: 3px; background: #21180f; color: #f0d38c; box-shadow: 0 5px 24px #0008; }
@media (max-width: 480px) {
  .keybind-panel { padding: 20px 16px; }
  .keybind-row { padding-left: 10px; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
  .keybind-actions { grid-template-columns: 1fr 1fr; }
  .keybind-actions > span { display: none; }
  .keybind-actions .keybind-reset { grid-column: 1 / -1; justify-self: start; }
  .latency-setting label { flex-wrap: wrap; gap: 4px; }
}

.latency-setting .realistic-ping{justify-content:flex-start;gap:10px;margin-top:14px;font-size:14px}.realistic-ping input{width:17px;height:17px;margin:0;accent-color:#d2ae68}