* {
  box-sizing: border-box;
}

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

/* Root rem co giãn theo viewport → cả dashboard (mọi thứ dùng rem) scale tỉ lệ theo màn. */
html {
  font-size: var(--root-font);
}

body {
  overflow: auto;
  background:
    radial-gradient(circle at 50% 36%, var(--alpha-blue-00107212-28), transparent 34%),
    linear-gradient(180deg, var(--color-bg-top) 0%, var(--color-bg) 58%, var(--color-bg-bottom) 100%);
  color: var(--color-text);
  font-family: var(--font-base);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

canvas {
  display: block;
}

.dashboard-shell {
  position: relative;
  min-height: 100svh;
  padding: 0 var(--space-4) var(--space-4);
  isolation: isolate;
}

.dashboard-shell::before,
.dashboard-shell::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
}

.dashboard-shell::before {
  background-image:
    linear-gradient(var(--alpha-blue-20140255-09) 1px, transparent 1px),
    linear-gradient(90deg, var(--alpha-blue-20140255-09) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(900px) rotateX(58deg) translateY(22vh) scale(1.35);
  transform-origin: center top;
}

.dashboard-shell::after {
  z-index: -1;
  background: linear-gradient(90deg, var(--alpha-black-25), transparent 18%, transparent 82%, var(--alpha-black-25));
}

.u-cyan { color: var(--color-cyan); }
.u-mint { color: var(--color-mint); }
.u-yellow { color: var(--color-yellow); }
.u-orange { color: var(--color-orange); }
.u-danger { color: var(--color-danger); }
.u-blue { color: var(--color-blue); }