/* ============================================================
   Eza RCON — dark banking style UI
   ============================================================ */

:root {
  --bg: #05070d;
  --bg-2: #080b13;
  --panel: rgba(255, 255, 255, .038);
  --panel-2: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --txt: #eef2f7;
  --txt-2: #9aa7b8;
  --txt-3: #64717f;
  --green: #00b37a;
  --green-2: #12d18e;
  --green-soft: rgba(0, 179, 122, .14);
  --blue: #4b8dff;
  --blue-soft: rgba(75, 141, 255, .14);
  --amber: #f99c00;
  --amber-soft: rgba(249, 156, 0, .14);
  --red: #fb2c36;
  --red-soft: rgba(251, 44, 54, .13);
  --purple: #a06bff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --side: 252px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--txt);
  font: 400 15px/1.5 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(0, 179, 122, .16), transparent 60%),
    radial-gradient(760px 420px at 96% 4%, rgba(75, 141, 255, .10), transparent 62%),
    radial-gradient(700px 500px at 60% 108%, rgba(0, 179, 122, .07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.ta-r { text-align: right; }
.ico { width: 16px; height: 16px; }
[hidden] { display: none !important; }

button, input, select { font: inherit; color: inherit; }
svg { fill: currentColor; width: 20px; height: 20px; flex: none; }

/* ------------------------------ login ------------------------------ */

.login {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login__glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 179, 122, .22), transparent 65%);
  filter: blur(30px);
  animation: float 9s ease-in-out infinite;
}

@keyframes float {
  50% { transform: translateY(-22px) scale(1.05); }
}

.login__card {
  position: relative;
  width: min(400px, 100%);
  padding: 34px 30px 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028));
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  animation: rise .5s cubic-bezier(.2, .8, .2, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}

.login__sub {
  margin: 14px 0 24px;
  color: var(--txt-2);
  font-size: 14px;
}

.login__error {
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid rgba(251, 44, 54, .3);
  border-radius: var(--radius-sm);
  background: var(--red-soft);
  color: #ff9a9e;
  font-size: 13.5px;
  animation: shake .35s;
}

@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.login__hint {
  margin: 18px 0 0;
  color: var(--txt-3);
  font-size: 12.5px;
  text-align: center;
}

.login .btn--lg { width: 100%; height: 46px; font-size: 15px; }

/* ------------------------------ brand ------------------------------ */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  color: #04160f;
  font: 700 19px/1 "DM Sans", sans-serif;
  box-shadow: 0 6px 18px rgba(0, 179, 122, .35);
}

.brand--lg .brand__mark { width: 42px; height: 42px; font-size: 23px; border-radius: 13px; }

.brand__text { font-size: 17px; letter-spacing: .1em; }
.brand__text b { color: var(--green-2); font-weight: 700; }
.brand--lg .brand__text { font-size: 21px; }

/* ------------------------------ shell ------------------------------ */

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--side) 1fr;
  height: 100%;
}

.side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px 18px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  backdrop-filter: blur(10px);
}

.side__server {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.side__serverName {
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side__serverMeta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--txt-3);
  font: 400 12px/1 "DM Mono", monospace;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--txt-3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
  flex: none;
}

.dot--on { background: var(--green-2); box-shadow: 0 0 0 3px var(--green-soft); animation: pulse 2s infinite; }
.dot--off { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

@keyframes pulse {
  50% { box-shadow: 0 0 0 6px rgba(0, 179, 122, .05); }
}

.nav { display: flex; flex-direction: column; gap: 3px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--txt-2);
  cursor: pointer;
  text-align: left;
  font-size: 14.5px;
  transition: .16s;
}

.nav__item svg { width: 19px; height: 19px; opacity: .85; }
.nav__item:hover { background: var(--panel); color: var(--txt); }

.nav__item.is-active {
  background: linear-gradient(90deg, var(--green-soft), rgba(0, 179, 122, .04));
  border-color: rgba(0, 179, 122, .25);
  color: #fff;
}

.nav__item.is-active svg { color: var(--green-2); opacity: 1; }

.nav__badge {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--panel-2);
  font: 500 12px/1.7 "DM Mono", monospace;
  color: var(--txt-2);
  font-style: normal;
}

.side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.side__ver { color: var(--txt-3); font: 400 11.5px/1.5 "DM Mono", monospace; }

/* ------------------------------ topbar ------------------------------ */

.main { display: flex; flex-direction: column; min-width: 0; height: 100%; }

.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.top__title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.top__sub { margin: 3px 0 0; color: var(--txt-3); font-size: 13px; }
.top__left { min-width: 0; }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.lang {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.lang button {
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--txt-3);
  font: 500 12px/1 "DM Mono", monospace;
  cursor: pointer;
  transition: .15s;
}

.lang button:hover { color: var(--txt); }
.lang button.is-on { background: var(--panel-2); color: var(--green-2); }

.views { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 26px 40px; }
.view { display: none; animation: fade .22s ease; }
.view.is-active { display: block; }

@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.views::-webkit-scrollbar, .term__out::-webkit-scrollbar, .tableWrap::-webkit-scrollbar { width: 9px; height: 9px; }
.views::-webkit-scrollbar-thumb, .term__out::-webkit-scrollbar-thumb, .tableWrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1); border-radius: 9px; border: 2px solid transparent; background-clip: content-box;
}

/* ------------------------------ atoms ------------------------------ */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  transition: .16s;
  white-space: nowrap;
}

.btn:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  color: #04160f;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 179, 122, .28);
}

.btn--primary:hover { box-shadow: 0 12px 28px rgba(0, 179, 122, .38); }
.btn--danger { border-color: rgba(251, 44, 54, .35); background: var(--red-soft); color: #ff9a9e; }
.btn--ghost { background: var(--panel); color: var(--txt-2); }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn--block { width: 100%; }

.iconBtn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--txt-2);
  cursor: pointer;
  transition: .16s;
}

.iconBtn svg { width: 18px; height: 18px; }
.iconBtn:hover { color: var(--txt); border-color: var(--line-2); }
.iconBtn.is-spin svg { animation: spin .8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  font-size: 13.5px;
  font-weight: 500;
}

.pill--lg { height: 30px; font-size: 13px; }
.pill--on { border-color: rgba(0, 179, 122, .3); background: var(--green-soft); color: #7ff0c4; }
.pill--off { border-color: rgba(251, 44, 54, .3); background: var(--red-soft); color: #ff9a9e; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--txt-2);
  font-size: 12.5px;
}
.tag--mono { font-family: "DM Mono", monospace; font-size: 11.5px; }
.tag--ok { color: var(--green-2); background: var(--green-soft); }
.tag--err { color: var(--red); background: var(--red-soft); }

.copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--txt-2);
  font: 400 12.5px/1.6 "DM Mono", monospace;
  cursor: pointer;
  transition: .15s;
}

.copy:hover { color: var(--green-2); border-color: rgba(0, 179, 122, .3); }
.copy .ico { width: 13px; height: 13px; }

/* ------------------------------ forms ------------------------------ */

.field { display: block; margin-bottom: 16px; }
.field__label { display: block; margin-bottom: 7px; color: var(--txt-2); font-size: 13px; }

.field__wrap { position: relative; display: block; }
.field__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--txt-3); }

.field__wrap input { padding-left: 40px; padding-right: 42px; }

.field__eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--txt-3);
  cursor: pointer;
}
.field__eye:hover { color: var(--txt); }
.field__eye svg { width: 17px; height: 17px; }

.input, input[type="text"], input[type="password"], input[type="number"], .term__in input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .28);
  outline: none;
  transition: .16s;
}

.input:focus, input:focus {
  border-color: rgba(0, 179, 122, .55);
  box-shadow: 0 0 0 3px rgba(0, 179, 122, .12);
}

.input::placeholder, input::placeholder { color: var(--txt-3); }

.form { padding: 4px 2px; }
.form--row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.form--row .field { flex: 1; min-width: 190px; margin-bottom: 0; }
.form--row .btn { margin-bottom: 1px; }

.note { color: var(--txt-3); font-size: 13px; line-height: 1.6; }
.note--ok { color: var(--green-2); }
.note--err { color: var(--red); }

.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: center;
  color: var(--txt-2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--green-2);
  cursor: pointer;
}
.input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------ hero ------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 28px;
  margin-bottom: 18px;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  width: 340px;
  height: 340px;
  right: -70px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 179, 122, .22), transparent 65%);
  filter: blur(12px);
}

.hero__text { position: relative; min-width: 0; flex: 1; }
.hero__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero__title { margin: 14px 0 4px; font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.hero__motd { margin: 0 0 16px; color: var(--txt-2); font-size: 14.5px; }
.hero__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.hero__ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__bg, .ring__fg { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring__bg { stroke: rgba(255, 255, 255, .07); }
.ring__fg {
  stroke: var(--green-2);
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 0 8px rgba(18, 209, 142, .5));
}

.hero__ringText { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hero__ringText b { font: 500 32px/1 "DM Mono", monospace; }
.hero__ringText span { color: var(--txt-3); font: 400 12px/1.6 "DM Mono", monospace; }

/* ------------------------------ stats ------------------------------ */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }

.stat { position: relative; display: flex; align-items: center; gap: 13px; padding: 16px 18px 18px; overflow: hidden; }
.stat__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; }
.stat__icon svg { width: 20px; height: 20px; }
.stat__icon--g { background: var(--green-soft); color: var(--green-2); }
.stat__icon--b { background: var(--blue-soft); color: #7fb0ff; }
.stat__icon--y { background: var(--amber-soft); color: #ffc457; }
.stat__icon--p { background: rgba(160, 107, 255, .14); color: #c39bff; }

.stat__body { min-width: 0; }
.stat__label { display: block; color: var(--txt-3); font-size: 12.5px; }
.stat__value { font-size: 20px; font-weight: 500; }
.stat__sub { display: block; margin-top: 2px; color: var(--txt-3); font-size: 11px; letter-spacing: .01em; min-height: 13px; }

.stat__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .05); }
.stat__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-2)); transition: width .5s; }
.stat:nth-child(2) .stat__bar i { background: linear-gradient(90deg, #3b7bff, #7fb0ff); }
.stat:nth-child(3) .stat__bar i { background: linear-gradient(90deg, #d98200, #ffc457); }
.stat:nth-child(4) .stat__bar i { background: linear-gradient(90deg, #7f45e0, #c39bff); }
.stat__bar i.is-warn { background: linear-gradient(90deg, #d98200, #ffc457) !important; }
.stat__bar i.is-crit { background: linear-gradient(90deg, #b3121c, #fb2c36) !important; }

/* ------------------------------ panels ------------------------------ */

.cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-bottom: 18px; }
.cols--2 { grid-template-columns: 1fr 1fr; }

.panel { padding: 18px 20px; margin-bottom: 14px; }
.cols .panel { margin-bottom: 0; }
.panel--warn { border-color: rgba(249, 156, 0, .22); }

.panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.panel__head h3 { margin: 0; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.search { position: relative; display: block; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--txt-3); }
.search input { width: 190px; height: 32px; padding: 0 12px 0 32px; border-radius: 10px; font-size: 13px; }
#wlName { width: 130px; height: 32px; font-size: 13px; }

/* ------------------------------ players list ------------------------------ */

.players { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; }

.pchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  font-size: 13.5px;
  transition: .15s;
}

.pchip:hover { border-color: rgba(0, 179, 122, .3); background: var(--green-soft); }
.pchip__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #04160f; font-size: 12px; font-weight: 700; }
.pchip--off { color: var(--txt-3); }
.pchip--off .pchip__av { background: var(--panel-2); color: var(--txt-3); }

.empty { display: grid; place-items: center; padding: 26px 10px; color: var(--txt-3); font-size: 13.5px; width: 100%; text-align: center; }

/* ------------------------- player heads (skins) ------------------------- */
/* 8x8 face of a 64x64 skin, scaled: background-size 800%, face at (8,8),
   hat/overlay layer at (40,8). Position % = texel / (64 - 8) = /56. */

.head {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.head--sm { width: 24px; height: 24px; border-radius: 6px; }

.head__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  color: #04160f;
  font-size: 13px;
  font-weight: 700;
}
.head--sm .head__fallback { font-size: 11px; }

.head--skin::before,
.head--skin::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--skin);
  background-repeat: no-repeat;
  background-size: 800% 800%;
  image-rendering: pixelated;
}
.head--skin::before { background-position: 14.2857% 14.2857%; }
.head--skin::after { background-position: 71.4286% 14.2857%; }
.head--skin .head__fallback { display: none; }

.pchip--off .head { filter: saturate(.45) brightness(.75); }
.act--skin { color: #7fb0ff; }
.act--skin:hover { background: var(--blue-soft); color: #a9cbff; }

/* ------------------------------ quick actions ------------------------------ */

.quickGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }

.qbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--txt);
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  transition: .16s;
}

.qbtn svg { width: 18px; height: 18px; color: var(--green-2); }
.qbtn:hover { transform: translateY(-1px); border-color: rgba(0, 179, 122, .3); background: var(--green-soft); }
.qbtn--amber svg { color: var(--amber); }
.qbtn--amber:hover { border-color: rgba(249, 156, 0, .3); background: var(--amber-soft); }
.qbtn--red svg { color: var(--red); }
.qbtn--red:hover { border-color: rgba(251, 44, 54, .3); background: var(--red-soft); }

.quickGroups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

/* ------------------------------ table ------------------------------ */

.tableWrap { overflow-x: auto; margin: 0 -20px -4px; padding: 0 20px; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--txt-3);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  white-space: nowrap;
}

.table td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, .04); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(255, 255, 255, .025); }

.u { display: flex; align-items: center; gap: 10px; }
.u__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #04160f; font-size: 13px; font-weight: 700; }
.u__name { font-weight: 500; }

.acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.act {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--txt-3);
  cursor: pointer;
  transition: .15s;
}

.act svg { width: 15px; height: 15px; }
.act:hover { color: var(--txt); border-color: var(--line-2); }
.act--kick:hover { color: var(--amber); border-color: rgba(249, 156, 0, .35); background: var(--amber-soft); }
.act--ban:hover { color: var(--red); border-color: rgba(251, 44, 54, .35); background: var(--red-soft); }
.act--op:hover, .act--deop:hover { color: var(--green-2); border-color: rgba(0, 179, 122, .35); background: var(--green-soft); }
.act--wl:hover { color: #7fb0ff; border-color: rgba(75, 141, 255, .35); background: var(--blue-soft); }

.rows { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-size: 13.5px;
}

.row:last-child { border-bottom: 0; }
.row__time { color: var(--txt-3); font: 400 12px/1.6 "DM Mono", monospace; flex: none; }
.row__act { flex: none; }
.row__txt { color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row--bad .row__act { color: var(--red); }
.row--good .row__act { color: var(--green-2); }

/* ------------------------------ console ------------------------------ */

.term { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; overflow: hidden; }

.term__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
}

.term__dots { display: flex; gap: 6px; }
.term__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.term__dots i:first-child { background: #ff5f57; }
.term__dots i:nth-child(2) { background: #febc2e; }
.term__dots i:last-child { background: #28c840; }
.term__title { color: var(--txt-3); font-size: 12.5px; }
.term__right { margin-left: auto; }

.term__out {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  background: rgba(0, 0, 0, .3);
  font: 400 13.5px/1.75 "DM Mono", monospace;
}

.tline { white-space: pre-wrap; word-break: break-word; }
.tline--cmd { color: #7ff0c4; margin-top: 10px; }
.tline--cmd::before { content: "> "; color: var(--txt-3); }
.tline--err { color: #ff9a9e; }
.tline--ok { color: var(--txt-2); }
.tline--sys { color: var(--txt-3); }
.tline--time { color: var(--txt-3); }

.term__in { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-top: 1px solid var(--line); }
.term__prompt { color: var(--green-2); font-size: 15px; font-weight: 500; }
.term__in input { flex: 1; height: 40px; font-family: "DM Mono", monospace; font-size: 13.5px; }
.term__in input:focus { border-color: rgba(0, 179, 122, .5); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 15px 14px; }
.chips:empty { display: none; }

.chip {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--txt-2);
  font: 400 12px/1.5 "DM Mono", monospace;
  cursor: pointer;
  transition: .15s;
}

.chip:hover { color: var(--green-2); border-color: rgba(0, 179, 122, .3); background: var(--green-soft); }
.chip--del { display: inline-flex; align-items: center; gap: 6px; }
.chip--del:hover { color: var(--red); border-color: rgba(251, 44, 54, .3); background: var(--red-soft); }

.chips--wl { padding: 0; }

/* ------------------------------ settings ------------------------------ */

.kv { display: grid; gap: 9px; margin-bottom: 16px; }

.kv > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  font-size: 13.5px;
}

.kv span { color: var(--txt-3); }
.kv b { margin-left: auto; font-weight: 500; }

/* ------------------------------ modal ------------------------------ */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(3, 5, 10, .72); backdrop-filter: blur(6px); animation: fade .16s; }
.modal__box { width: min(430px, 100%); padding: 20px 22px; box-shadow: var(--shadow); animation: rise .22s; }
.modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal__head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal__head .iconBtn { margin-left: auto; width: 32px; height: 32px; }
.modal__body { color: var(--txt-2); font-size: 14px; }
.modal__body p { margin: 0 0 12px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ------------------------------ toasts ------------------------------ */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 9px; }

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 380px;
  padding: 12px 15px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(16, 21, 32, .96);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  animation: slide .22s cubic-bezier(.2, .8, .2, 1);
}

.toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-2); flex: none; box-shadow: 0 0 8px var(--green-2); }
.toast--err::before { background: var(--red); box-shadow: 0 0 8px var(--red); }
.toast--err { border-color: rgba(251, 44, 54, .3); }
.toast.is-out { opacity: 0; transform: translateX(20px); transition: .25s; }

@keyframes slide { from { opacity: 0; transform: translateX(24px); } }

/* ------------------------------ responsive ------------------------------ */

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cols, .cols--2, .quickGroups { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .side { flex-direction: row; align-items: center; gap: 10px; padding: 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side__server, .side__foot { display: none; }
  .nav { flex-direction: row; gap: 4px; }
  .nav__item span { display: none; }
  .nav__item { padding: 9px; }
  .nav__badge { display: none; }
  .top { padding: 14px 16px; }
  .top__title { font-size: 18px; }
  .views { padding: 16px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px; }
  .hero__title { font-size: 22px; }
  .hero__ring { width: 104px; height: 104px; }
  .stats { grid-template-columns: 1fr; }
  .quickGrid { grid-template-columns: 1fr; }
  .search input { width: 130px; }
}