:root {
  --bg:#060a0c;
  --bg-soft:#091014;
  --panel:#0c1418;
  --panel-2:#101b20;
  --border:#1b2a31;

  --text:#f4f7f7;
  --muted:#76888f;
  --muted-2:#52656d;

  --green:#27e59a;
  --green-dark:#0fa66d;
  --green-soft:rgba(39,229,154,.11);

  --red:#ff6c7b;
  --red-soft:rgba(255,108,123,.10);

  --shadow:
    0 25px 70px rgba(0,0,0,.32);
}

* {
  box-sizing:border-box;
}

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

body {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 78% 0%,
      rgba(24,167,112,.09),
      transparent 32%
    ),
    var(--bg);

  color:var(--text);
}

button,
input {
  font:inherit;
}

button {
  cursor:pointer;
}

.hidden {
  display:none !important;
}


/* LOGIN */

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

  display:flex;
  align-items:center;
  justify-content:center;

  padding:28px;
}

.login-card {
  width:100%;
  max-width:440px;

  padding:38px;

  background:
    linear-gradient(
      145deg,
      rgba(15,24,28,.98),
      rgba(8,14,17,.98)
    );

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

  border-radius:26px;

  box-shadow:var(--shadow);
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark {
  width:45px;
  height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #19c880,
      #3bf0aa
    );

  color:#03110b;

  font-size:22px;
  font-weight:950;
}

.brand-copy strong {
  display:block;

  font-size:17px;

  letter-spacing:.08em;
}

.brand-copy span {
  display:block;

  margin-top:2px;

  color:var(--green);

  font-size:10px;
  font-weight:800;

  letter-spacing:.27em;
}

.login-copy {
  margin:40px 0 28px;
}

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

  font-size:10px;
  font-weight:850;

  letter-spacing:.22em;
}

.login-copy h1 {
  margin:11px 0 11px;

  font-size:34px;
  line-height:1.08;
}

.login-copy p,
.topbar p,
.section-head p {
  margin:0;

  color:var(--muted);
}

form {
  display:grid;
  gap:15px;
}

label {
  display:grid;
  gap:7px;

  color:#b8c4c8;

  font-size:12px;
  font-weight:650;
}

input {
  width:100%;

  padding:14px 15px;

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

  border-radius:12px;

  outline:none;

  background:#071014;
  color:#fff;
}

input:focus {
  border-color:
    rgba(39,229,154,.55);

  box-shadow:
    0 0 0 3px
    rgba(39,229,154,.07);
}

.btn {
  min-height:43px;

  padding:11px 15px;

  border:
    1px solid transparent;

  border-radius:12px;

  font-weight:800;
}

.btn.primary {
  margin-top:4px;

  background:
    linear-gradient(
      135deg,
      #20d98f,
      #3aeda9
    );

  color:#03120c;
}

.btn.secondary {
  background:#101a1f;
  color:#cbd5d8;

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

.btn.compact {
  min-height:auto;
}

.error {
  min-height:20px;

  margin-top:15px;

  color:#ff98a3;

  font-size:13px;
}


/* APP */

.app {
  min-height:100vh;

  display:grid;

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

.sidebar {
  position:sticky;

  top:0;

  height:100vh;

  padding:25px 17px;

  display:flex;
  flex-direction:column;

  background:
    rgba(5,10,12,.95);

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

.sidebar-nav {
  margin-top:37px;

  display:grid;
  gap:6px;
}

.nav {
  width:100%;

  padding:12px 13px;

  display:flex;
  align-items:center;
  gap:10px;

  border:
    1px solid transparent;

  border-radius:11px;

  background:transparent;

  color:#7e9198;

  text-align:left;

  font-size:13px;
  font-weight:650;
}

.nav.active {
  color:#dcfff0;

  background:var(--green-soft);

  border-color:
    rgba(39,229,154,.14);
}

.nav:disabled {
  cursor:not-allowed;
  opacity:.34;
}

.sidebar-bottom {
  margin-top:auto;

  padding-top:18px;

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

.user-name {
  color:#e5ecee;

  font-size:13px;
  font-weight:750;
}

.user-role {
  margin:3px 0 14px;

  color:var(--muted);

  font-size:11px;

  text-transform:uppercase;
}

.sidebar-bottom .btn {
  width:100%;
}

.main {
  min-width:0;

  padding:34px;
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.topbar h1 {
  margin:7px 0 4px;

  font-size:29px;
}

.stats {
  margin:32px 0;

  display:grid;

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

  gap:14px;
}

.stat-card {
  min-height:138px;

  padding:22px;

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

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #0e181c,
      #091115
    );
}

.stat-card span {
  color:#758890;

  font-size:10px;
  font-weight:800;

  letter-spacing:.14em;
}

.stat-card strong {
  display:block;

  margin:8px 0 2px;

  font-size:34px;
}

.stat-card small {
  color:var(--muted-2);
}

.stat-card.green strong {
  color:var(--green);
}

.devices-section {
  margin-top:10px;
}

.section-head {
  margin-bottom:16px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;
}

.section-head h2 {
  margin:0 0 5px;

  font-size:18px;
}

.section-head p,
.last-refresh {
  font-size:12px;
}

.last-refresh {
  color:var(--muted-2);
}

.device-grid {
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(310px,1fr)
    );

  gap:14px;
}

.device-card {
  padding:20px;

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

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      var(--panel-2),
      var(--panel)
    );

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.12);
}

.device-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;
}

.device-name {
  margin:0;

  font-size:16px;
}

.hostname {
  margin-top:4px;

  color:var(--muted-2);

  font-size:11px;
}

.status {
  flex:none;

  padding:6px 9px;

  border-radius:999px;

  font-size:10px;
  font-weight:850;

  letter-spacing:.05em;
}

.status.online {
  color:#8effd0;
  background:var(--green-soft);
}

.status.offline {
  color:#ff9eaa;
  background:var(--red-soft);
}

.device-info {
  margin-top:20px;

  display:grid;
  gap:10px;

  color:#82949b;

  font-size:12px;
}

.device-info strong {
  color:#d4dddf;
}

.device-actions {
  margin-top:20px;

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

  gap:8px;
}

.connect-btn {
  background:var(--green);
  color:#03110b;
}

.connect-btn:disabled {
  cursor:not-allowed;

  opacity:.38;
}

.details-btn {
  background:#121e23;
  color:#bfcacc;

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

.empty-card {
  grid-column:1/-1;

  padding:38px;

  border:
    1px dashed #23363e;

  border-radius:18px;

  text-align:center;

  color:var(--muted);

  background:
    rgba(12,20,24,.55);
}

.empty-card strong {
  display:block;

  margin-bottom:7px;

  color:#dfe7e9;
}


/* MOBILE */

@media(max-width:820px) {
  .app {
    display:block;
  }

  .sidebar {
    display:none;
  }

  .main {
    padding:22px 16px;
  }

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

  .stats .stat-card:first-child {
    grid-column:1/-1;
  }

  .topbar {
    align-items:flex-start;
  }
}

@media(max-width:520px) {
  .login-card {
    padding:27px 22px;
  }

  .login-copy h1 {
    font-size:29px;
  }

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

  .stats .stat-card:first-child {
    grid-column:auto;
  }

  .section-head {
    align-items:flex-start;
    flex-direction:column;
  }

  .device-grid {
    grid-template-columns:1fr;
  }
}