:root {
  color-scheme: dark;

  --bg: #07070b;
  --bg-soft: #0a0910;

  --surface: #0d0d14;
  --surface-2: #11111b;
  --surface-3: #151522;

  --line: #232238;
  --line-soft: #1a1928;

  --text: #f6f3ff;
  --text-soft: #c9c3dc;
  --muted: #817b96;
  --muted-2: #5f5a72;

  --violet: #7c4dff;
  --violet-strong: #914dff;
  --violet-soft: #b59cff;
  --violet-dark: #3b1c82;

  --green: #59e8a3;
  --red: #ff7b8d;

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

  background: var(--bg);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 74% -12%,
      rgba(124, 77, 255, .18),
      transparent 30%
    ),
    radial-gradient(
      circle at 102% 32%,
      rgba(75, 35, 180, .10),
      transparent 30%
    ),
    var(--bg);

  color: var(--text);
}

button,
input {
  font: inherit;
}

/* =========================================================
   DESKTOP VIEWPORT LOCK
   Overview must fit in one window.
   ========================================================= */

.shell {
  width: 100%;
  height: 100dvh;

  display: grid;

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

  overflow: hidden;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  position: relative;

  height: 100dvh;

  display: flex;
  flex-direction: column;

  padding:
    17px
    12px
    12px;

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

  background:
    linear-gradient(
      180deg,
      rgba(12, 10, 19, .98),
      rgba(7, 7, 12, .99)
    );

  overflow: hidden;
}

.sidebar::before {
  content: "";

  position: absolute;

  width: 210px;
  height: 210px;

  left: -85px;
  top: -80px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(124, 77, 255, .18),
      transparent 68%
    );

  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    3px
    6px
    19px;
}

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

  display: grid;
  place-items: center;

  border:
    1px solid rgba(
      155,
      115,
      255,
      .72
    );

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      #6e39e8,
      #251151
    );

  box-shadow:
    0 0 22px
    rgba(124, 77, 255, .20);

  color: #fff;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 15px;
  font-weight: 800;
}

.brand-copy strong {
  display: block;

  font-size: 12px;
  letter-spacing: .09em;
}

.brand-copy span {
  display: block;

  margin-top: 2px;

  color: #81789d;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 7px;
  letter-spacing: .12em;
}

.main-nav {
  display: grid;
  gap: 5px;
}

.main-nav button {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 38px;

  padding:
    8px
    11px;

  border:
    1px solid transparent;

  border-radius: 8px;

  color: #8d879d;

  background: transparent;

  text-align: left;

  cursor: default;
}

.main-nav button.active {
  color: #f8f5ff;

  border-color:
    rgba(
      133,
      83,
      255,
      .70
    );

  background:
    linear-gradient(
      90deg,
      rgba(105, 54, 224, .38),
      rgba(48, 26, 91, .26)
    );

  box-shadow:
    inset 3px 0 0
      var(--violet),
    0 0 20px
      rgba(111, 64, 240, .07);
}

.main-nav button:disabled {
  opacity: .45;
}

.nav-icon {
  width: 18px;

  color: var(--violet-soft);

  font-family: monospace;

  text-align: center;
}

.sidebar-context {
  margin-top: auto;

  padding: 12px;

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

  border-radius: 9px;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(124, 77, 255, .18),
      transparent 55%
    ),
    rgba(14, 13, 22, .8);
}

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

.context-label {
  color: var(--violet-soft);

  font-family: monospace;

  font-size: 7px;
  letter-spacing: .14em;
}

.sidebar-context strong {
  margin-top: 7px;

  color: #d9d0fb;

  font-size: 11px;
  font-weight: 550;
}

.sidebar-context > span:last-child {
  margin-top: 4px;

  color: var(--muted);

  font-size: 8px;
}

.sidebar-footer {
  margin-top: 10px;
}

.observer-state {
  padding: 5px 4px 8px;

  color: #6f687e;

  font-family: monospace;

  font-size: 8px;
  letter-spacing: .07em;
}

.pulse {
  display: inline-block;

  width: 6px;
  height: 6px;

  margin-right: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 10px
    rgba(89, 232, 163, .55);
}

.logout-form button {
  width: 100%;

  min-height: 31px;

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

  gap: 7px;

  border:
    1px solid #29263b;

  border-radius: 7px;

  background: #0d0c14;

  color: #777086;

  font-family: monospace;

  font-size: 8px;
  letter-spacing: .08em;

  cursor: pointer;
}

.logout-form button:hover {
  color: #d4c9f8;

  border-color:
    rgba(
      124,
      77,
      255,
      .55
    );

  background:
    rgba(
      124,
      77,
      255,
      .08
    );
}

/* =========================================================
   MAIN / FIT VIEWPORT
   ========================================================= */

.dashboard {
  position: relative;

  width: 100%;
  height: 100dvh;

  padding:
    15px
    18px
    9px;

  display: grid;

  grid-template-rows:
    auto
    92px
    minmax(0, 1fr)
    minmax(0, .88fr)
    auto;

  gap: 8px;

  overflow: hidden;
}

.dashboard::before {
  content: "";

  position: absolute;

  right: -110px;
  top: -180px;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(126, 76, 255, .13),
      rgba(49, 22, 122, .05) 38%,
      transparent 69%
    );

  pointer-events: none;
}

.topbar {
  position: relative;
  z-index: 1;

  min-height: 51px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1,
h2 {
  margin: 0;
}

h1 {
  margin-top: 2px;

  color: #fbf9ff;

  font-size: 27px;
  line-height: 1;

  font-weight: 590;
  letter-spacing: -.035em;
}

h2 {
  margin-top: 2px;

  color: #f0ecfa;

  font-size: 14px;
  line-height: 1.1;

  font-weight: 570;
}

.eyebrow {
  color: #8779ae;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 7px;

  letter-spacing: .16em;
}

.topbar-status {
  display: flex;
  align-items: center;

  gap: 7px;
}

.context-chip,
.panel-chip,
.badge {
  border-radius: 6px;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 7px;

  letter-spacing: .08em;
}

.context-chip {
  padding: 6px 8px;

  border:
    1px solid #2e2942;

  color: #8f83a7;

  background:
    rgba(17, 15, 26, .75);
}

.badge {
  padding: 6px 9px;

  border:
    1px solid #302a43;

  color: #8d859a;

  background: #0e0d14;
}

.badge.healthy {
  color: var(--green);

  border-color:
    rgba(89, 232, 163, .32);

  background:
    rgba(24, 88, 60, .10);
}

.badge.danger {
  color: var(--red);

  border-color:
    rgba(255, 123, 141, .35);

  background:
    rgba(100, 28, 43, .13);
}

/* =========================================================
   METRICS
   ========================================================= */

.metric-grid {
  min-height: 0;

  display: grid;

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

  gap: 8px;
}

.metric {
  min-width: 0;
  height: 92px;

  position: relative;

  padding:
    11px
    13px;

  overflow: hidden;

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

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 17, 28, .97),
      rgba(11, 10, 17, .98)
    );
}

.metric::after {
  content: "";

  position: absolute;

  right: -24px;
  bottom: -35px;

  width: 105px;
  height: 105px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(125, 72, 255, .13),
      transparent 67%
    );
}

.metric-top {
  display: flex;
  align-items: center;

  gap: 8px;
}

.metric-icon {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(139, 91, 255, .44);

  border-radius: 6px;

  color: var(--violet-soft);

  background:
    rgba(105, 55, 220, .15);

  font-family: monospace;
  font-size: 10px;
}

.metric-label {
  color: #9890aa;

  font-size: 9px;
}

.metric strong {
  display: block;

  margin-top: 5px;

  color: #f8f5ff;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 20px;

  font-weight: 550;

  letter-spacing: -.02em;
}

.metric small {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #6d667c;

  font-size: 7px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================================
   PANELS
   ========================================================= */

.content-grid {
  min-height: 0;

  display: grid;

  gap: 8px;
}

.primary-grid {
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(330px, .9fr);
}

.secondary-grid {
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, .95fr);
}

.panel {
  min-width: 0;
  min-height: 0;

  height: 100%;

  padding:
    11px
    13px;

  overflow: hidden;

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

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 14, 23, .98),
      rgba(10, 9, 15, .98)
    );
}

.panel:hover {
  border-color:
    rgba(
      124,
      77,
      255,
      .34
    );
}

.panel-head {
  min-height: 37px;

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

  padding-bottom: 8px;

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

.panel-chip {
  padding: 5px 7px;

  border:
    1px solid
    rgba(124, 77, 255, .28);

  color: #9d8bc7;

  background:
    rgba(124, 77, 255, .07);
}

/* =========================================================
   ASSET TABLE
   ========================================================= */

.assets-table,
.kv-table {
  min-height: 0;
}

.asset-row {
  min-height: 34px;

  display: grid;

  grid-template-columns:
    minmax(115px, .5fr)
    minmax(330px, 1.15fr);

  align-items: center;

  gap: 12px;

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

.asset-row:last-child {
  border-bottom: 0;
}

.asset-name {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}

.asset-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--violet);

  box-shadow:
    0 0 8px
    rgba(124, 77, 255, .45);
}

.asset-name strong {
  overflow: hidden;

  color: #e8e2f6;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 8px;

  font-weight: 560;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.tf-list {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(38px, 1fr)
    );

  gap: 4px;
}

.tf {
  min-width: 0;

  padding:
    3px
    5px;

  border:
    1px solid #26233a;

  border-radius: 5px;

  background:
    #10101a;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;
}

.tf small {
  display: block;

  color: #756d89;

  font-size: 6px;
}

.tf b {
  display: block;

  margin-top: 1px;

  color: #ded8ee;

  font-size: 7px;

  font-weight: 550;
}

/* =========================================================
   KEY / VALUE
   ========================================================= */

.kv {
  min-height: 29px;

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

  gap: 12px;

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

.kv:last-child {
  border-bottom: 0;
}

.kv span {
  min-width: 0;

  color: #797287;

  font-size: 8px;
}

.kv strong {
  max-width: 64%;

  overflow: hidden;

  color: #ddd7ec;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 7px;

  font-weight: 550;

  text-align: right;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.kv strong.ok {
  color: var(--green);
}

.kv strong.bad {
  color: var(--red);
}

/* =========================================================
   FOOTER
   ========================================================= */

.dashboard-footer {
  min-height: 12px;

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

  padding: 0 1px;

  color: #4f4960;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 6px;

  letter-spacing: .07em;
}

/* =========================================================
   LOGIN — SAME DA
   ========================================================= */

.login-body {
  width: 100vw;
  height: 100dvh;

  overflow: hidden;
}

.login-stage {
  position: relative;

  width: 100vw;
  height: 100dvh;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(124, 77, 255, .19),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 90%,
      rgba(70, 32, 166, .10),
      transparent 34%
    ),
    #07070b;
}

.login-grid {
  position: absolute;
  inset: 0;

  opacity: .14;

  background-image:
    linear-gradient(
      rgba(132, 98, 220, .10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(132, 98, 220, .10) 1px,
      transparent 1px
    );

  background-size:
    52px
    52px;

  mask-image:
    radial-gradient(
      circle at center,
      black,
      transparent 72%
    );
}

.login-card {
  position: relative;
  z-index: 1;

  width:
    min(
      420px,
      calc(100vw - 36px)
    );

  padding: 30px;

  border:
    1px solid
    rgba(124, 77, 255, .30);

  border-radius: 13px;

  background:
    linear-gradient(
      155deg,
      rgba(18, 16, 28, .98),
      rgba(9, 8, 14, .99)
    );

  box-shadow:
    0 30px 100px
      rgba(0, 0, 0, .52),
    0 0 70px
      rgba(105, 55, 220, .08);
}

.login-brand {
  display: flex;
  align-items: center;

  gap: 11px;

  padding-bottom: 28px;
}

.login-mark {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(159, 116, 255, .75);

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      #743bec,
      #281055
    );

  color: #fff;

  font-family: monospace;

  font-size: 15px;

  font-weight: 700;
}

.login-brand strong {
  display: block;

  font-size: 12px;

  letter-spacing: .11em;
}

.login-brand span {
  display: block;

  margin-top: 2px;

  color: #756c8f;

  font-family: monospace;

  font-size: 7px;

  letter-spacing: .11em;
}

.login-label {
  color: var(--violet-soft);

  font-family: monospace;

  font-size: 7px;

  letter-spacing: .16em;
}

.login-title {
  margin-top: 6px;

  color: #faf8ff;

  font-size: 29px;
}

.login-copy {
  margin:
    7px
    0
    0;

  color: #7f778e;

  font-size: 10px;
}

.login-online {
  margin-top: 22px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(89, 232, 163, .22);

  border-radius: 7px;

  background:
    rgba(24, 88, 60, .08);

  color: var(--green);

  font-family: monospace;

  font-size: 8px;

  letter-spacing: .08em;
}

.login-status {
  margin-top: 10px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(255, 123, 141, .30);

  border-radius: 7px;

  background:
    rgba(100, 28, 43, .12);

  color: #ff9eab;

  font-family: monospace;

  font-size: 8px;
}

.login-form {
  margin-top: 24px;
}

.login-form label {
  display: block;

  margin-bottom: 7px;

  color: #857b99;

  font-family: monospace;

  font-size: 7px;

  letter-spacing: .11em;
}

.login-form input {
  width: 100%;
  height: 43px;

  padding:
    0
    12px;

  border:
    1px solid #302a46;

  border-radius: 7px;

  outline: none;

  background: #09080e;

  color: #f4f0ff;

  font-family: monospace;

  font-size: 13px;
}

.login-form input:focus {
  border-color:
    rgba(139, 91, 255, .85);

  box-shadow:
    0 0 0 3px
    rgba(124, 77, 255, .10);
}

.login-form button {
  width: 100%;
  height: 43px;

  margin-top: 11px;

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

  padding:
    0
    13px;

  border:
    1px solid
    rgba(145, 82, 255, .65);

  border-radius: 7px;

  background:
    linear-gradient(
      90deg,
      #5e2bc8,
      #7a3bf1
    );

  color: #fff;

  font-family: monospace;

  font-size: 8px;

  letter-spacing: .09em;

  cursor: pointer;
}

.login-form button:hover {
  filter: brightness(1.08);

  box-shadow:
    0 0 24px
    rgba(124, 77, 255, .17);
}

.login-footer {
  margin-top: 23px;

  padding-top: 13px;

  display: flex;
  justify-content: space-between;

  border-top:
    1px solid #211d30;

  color: #5c546d;

  font-family: monospace;

  font-size: 6px;

  letter-spacing: .09em;
}

/* =========================================================
   SHORT DESKTOP HEIGHT
   ========================================================= */

@media (max-height: 760px) and (min-width: 1051px) {

  .dashboard {
    padding:
      10px
      14px
      6px;

    grid-template-rows:
      auto
      82px
      minmax(0, 1fr)
      minmax(0, .82fr)
      auto;

    gap: 6px;
  }

  .topbar {
    min-height: 43px;
  }

  h1 {
    font-size: 23px;
  }

  .metric {
    height: 82px;

    padding:
      9px
      11px;
  }

  .metric strong {
    font-size: 17px;
  }

  .panel {
    padding:
      8px
      10px;
  }

  .panel-head {
    min-height: 32px;

    padding-bottom: 6px;
  }

  .asset-row {
    min-height: 29px;
  }

  .kv {
    min-height: 25px;
  }

  .sidebar {
    padding-top: 11px;
  }

  .sidebar-context {
    padding: 9px;
  }

  .main-nav button {
    min-height: 34px;
  }
}

/* =========================================================
   NARROW VIEWPORT FALLBACK
   Desktop remains fit-to-window.
   ========================================================= */

@media (max-width: 1050px) {

  body {
    overflow: auto;
  }

  .shell {
    height: auto;

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

    overflow: visible;
  }

  .sidebar {
    height: 100vh;
  }

  .dashboard {
    height: auto;
    min-height: 100vh;

    overflow: visible;

    grid-template-rows: auto;
  }

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

  .content-grid,
  .primary-grid,
  .secondary-grid {
    grid-template-columns: 1fr;
  }

  .panel {
    min-height: 220px;
  }
}

/* =========================================================
   QUANT READABILITY PASS V1
   Larger typography without breaking desktop fit.
   ========================================================= */

.main-nav button {
  font-size: 12px;
}

.brand-copy strong {
  font-size: 13px;
}

.brand-copy span {
  font-size: 8px;
}

.eyebrow {
  font-size: 8px;
}

h1 {
  font-size: 29px;
}

h2 {
  font-size: 15px;
}

.context-chip,
.panel-chip,
.badge {
  font-size: 8px;
}

.metric-label {
  font-size: 10px;
}

.metric strong {
  font-size: 22px;
}

.metric small {
  font-size: 8px;
}

.asset-name strong {
  font-size: 9px;
}

.tf small {
  font-size: 7px;
}

.tf b {
  font-size: 9px;
}

.kv span {
  font-size: 9px;
}

.kv strong {
  font-size: 8px;
}

.context-label {
  font-size: 8px;
}

.sidebar-context strong {
  font-size: 12px;
}

.sidebar-context > span:last-child {
  font-size: 9px;
}

.observer-state {
  font-size: 9px;
}

.logout-form button {
  font-size: 9px;
}

.dashboard-footer {
  font-size: 7px;
}

@media (max-height: 760px) and (min-width: 1051px) {

  h1 {
    font-size: 25px;
  }

  h2 {
    font-size: 14px;
  }

  .metric-label {
    font-size: 9px;
  }

  .metric strong {
    font-size: 19px;
  }

  .metric small {
    font-size: 7px;
  }

  .asset-name strong {
    font-size: 8px;
  }

  .tf b {
    font-size: 8px;
  }

  .kv span {
    font-size: 8px;
  }

  .kv strong {
    font-size: 7px;
  }
}