:root {
  color-scheme: dark;

  --bg: #09090b;
  --surface: #111114;
  --surface-2: #17171b;
  --surface-3: #202026;
  --border: #2a2a31;

  --text: #f5f5f7;
  --muted: #92929d;

  --accent: #8b5cf6;
  --accent-2: #6d45dd;

  --green: #39d98a;
  --yellow: #f7c948;
  --red: #ff5c72;

  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}


/* LOGIN */

.login-view {
  min-height: 100vh;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(139, 92, 246, .16),
      transparent 34%
    ),
    var(--bg);
}

.login-card {
  width: min(420px, 100%);

  background:
    rgba(17, 17, 20, .92);

  border:
    1px solid var(--border);

  border-radius:
    28px;

  padding:
    36px;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.35);
}

.login-card h1 {
  margin:
    22px 0 4px;

  font-size:
    28px;
}

.login-card p {
  color:
    var(--muted);

  margin:
    0 0 28px;
}

.login-card label {
  display: block;

  color:
    var(--muted);

  font-size:
    13px;

  margin-bottom:
    8px;
}

.login-card input {
  width:
    100%;

  margin-bottom:
    16px;
}

.brand-mark {
  width:
    58px;

  height:
    58px;

  border-radius:
    18px;

  display:
    grid;

  place-items:
    center;

  font-weight:
    800;

  font-size:
    24px;

  background:
    linear-gradient(
      135deg,
      #a78bfa,
      #6d28d9
    );

  box-shadow:
    0 14px 40px
    rgba(109,40,217,.28);
}

.brand-mark.small {
  width:
    40px;

  height:
    40px;

  border-radius:
    13px;

  font-size:
    17px;
}


/* APP */

.app {
  min-height:
    100vh;

  display:
    grid;

  grid-template-columns:
    230px minmax(0, 1fr);
}

.sidebar {
  position:
    sticky;

  top:
    0;

  height:
    100vh;

  border-right:
    1px solid var(--border);

  background:
    #0d0d10;

  padding:
    24px 16px;

  display:
    flex;

  flex-direction:
    column;
}

.sidebar-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    0 8px 28px;
}

.sidebar-brand strong,
.sidebar-brand span {
  display:
    block;
}

.sidebar-brand span {
  color:
    var(--muted);

  font-size:
    12px;
}

nav {
  display:
    grid;

  gap:
    7px;
}

.nav-item {
  border:
    0;

  background:
    transparent;

  color:
    var(--muted);

  padding:
    12px 14px;

  border-radius:
    12px;

  text-align:
    left;
}

.nav-item:hover {
  color:
    var(--text);

  background:
    var(--surface);
}

.nav-item.active {
  color:
    #fff;

  background:
    rgba(139,92,246,.16);

  border:
    1px solid
    rgba(139,92,246,.24);
}

.logout {
  margin-top:
    auto;

  border:
    1px solid var(--border);

  border-radius:
    12px;

  padding:
    11px;

  background:
    transparent;

  color:
    var(--muted);
}

.main {
  min-width:
    0;

  padding:
    32px;

  max-width:
    1500px;

  width:
    100%;
}

.topbar {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    24px;

  margin-bottom:
    30px;
}

.topbar h1 {
  margin:
    0;

  font-size:
    30px;
}

.topbar p {
  margin:
    5px 0 0;

  color:
    var(--muted);
}

.top-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


/* COMPONENTS */

.status {
  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    .05em;
}

.status.online {
  color:
    var(--green);
}

.status.offline {
  color:
    var(--red);
}

button.primary,
button.secondary {
  border-radius:
    11px;

  padding:
    10px 16px;

  border:
    1px solid transparent;
}

button.primary {
  background:
    var(--accent);

  color:
    white;

  font-weight:
    700;
}

button.primary:hover {
  background:
    var(--accent-2);
}

button.secondary {
  background:
    var(--surface-2);

  border-color:
    var(--border);

  color:
    var(--text);
}

input,
select {
  background:
    #0e0e11;

  border:
    1px solid var(--border);

  color:
    var(--text);

  border-radius:
    11px;

  padding:
    11px 13px;

  outline:
    none;
}

input:focus,
select:focus {
  border-color:
    var(--accent);
}

.stats-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    14px;
}

.stat-card,
.plan-card,
.panel {
  border:
    1px solid var(--border);

  background:
    var(--surface);

  border-radius:
    var(--radius);
}

.stat-card {
  padding:
    22px;
}

.stat-card span,
.plan-card span {
  display:
    block;

  color:
    var(--muted);

  font-size:
    13px;
}

.stat-card strong {
  display:
    block;

  margin-top:
    14px;

  font-size:
    32px;
}

.plan-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    14px;

  margin-top:
    14px;
}

.plan-card {
  padding:
    20px 22px;
}

.plan-card strong {
  display:
    block;

  font-size:
    27px;

  margin-top:
    8px;
}

.plan-card.plus {
  border-color:
    rgba(139,92,246,.4);
}

.plan-card.unlimited {
  border-color:
    rgba(57,217,138,.35);
}

.panel {
  margin-top:
    20px;

  padding:
    22px;
}

.panel-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    20px;
}

.panel-head h2 {
  margin:
    0;

  font-size:
    19px;
}

.panel-head p {
  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size:
    13px;
}

.server-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        220px,
        1fr
      )
    );

  gap:
    12px;
}

.server-card {
  background:
    var(--surface-2);

  border:
    1px solid var(--border);

  border-radius:
    14px;

  padding:
    17px;
}

.server-head {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;
}

.server-name {
  font-weight:
    700;
}

.server-country {
  font-size:
    24px;
}

.server-load {
  margin-top:
    17px;

  display:
    flex;

  justify-content:
    space-between;

  color:
    var(--muted);

  font-size:
    13px;
}

.progress {
  width:
    100%;

  height:
    7px;

  border-radius:
    20px;

  background:
    #25252b;

  margin-top:
    9px;

  overflow:
    hidden;
}

.progress > div {
  height:
    100%;

  background:
    var(--accent);

  border-radius:
    inherit;
}

.server-xray {
  margin-top:
    13px;

  font-size:
    12px;

  color:
    var(--green);
}

.server-xray.bad {
  color:
    var(--red);
}


/* TABLE */

.table-wrap {
  overflow:
    auto;
}

table {
  width:
    100%;

  border-collapse:
    collapse;

  min-width:
    720px;
}

th,
td {
  border-bottom:
    1px solid var(--border);

  padding:
    13px 12px;

  text-align:
    left;

  white-space:
    nowrap;
}

th {
  color:
    var(--muted);

  font-weight:
    500;

  font-size:
    12px;
}

td {
  font-size:
    13px;
}


/* USER */

.search-row {
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  gap:
    10px;

  max-width:
    760px;
}

.user-grid {
  margin:
    22px 0;

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        190px,
        1fr
      )
    );

  gap:
    10px;
}

.user-item {
  background:
    var(--surface-2);

  border:
    1px solid var(--border);

  border-radius:
    12px;

  padding:
    13px;
}

.user-item span {
  display:
    block;

  color:
    var(--muted);

  font-size:
    11px;

  margin-bottom:
    5px;
}

.user-item strong {
  font-size:
    13px;

  word-break:
    break-all;
}

.plan-editor {
  padding:
    18px;

  background:
    var(--surface-2);

  border:
    1px solid var(--border);

  border-radius:
    14px;

  margin:
    20px 0;
}

.plan-editor h3 {
  margin-top:
    0;
}

.form-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr auto;

  gap:
    12px;

  align-items:
    end;
}

.form-grid label {
  color:
    var(--muted);

  font-size:
    12px;

  display:
    grid;

  gap:
    7px;
}

.error {
  margin-top:
    12px;

  color:
    var(--red);

  font-size:
    13px;
}

.message {
  color:
    var(--green);

  margin-top:
    12px;

  font-size:
    13px;
}


/* RESPONSIVE */

@media (
  max-width: 900px
) {
  .app {
    grid-template-columns:
      1fr;
  }

  .sidebar {
    position:
      static;

    width:
      auto;

    height:
      auto;

    border-right:
      0;

    border-bottom:
      1px solid var(--border);
  }

  nav {
    display:
      flex;

    overflow-x:
      auto;
  }

  .logout {
    margin-top:
      16px;
  }

  .stats-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

  .main {
    padding:
      22px;
  }
}

@media (
  max-width: 580px
) {
  .topbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .stats-grid,
  .plan-grid,
  .form-grid {
    grid-template-columns:
      1fr;
  }

  .search-row {
    grid-template-columns:
      1fr;
  }
}