:root,
.dark {
  --background: 230 42% 7%;
  --foreground: 210 42% 98%;
  --card: 228 38% 11%;
  --primary: 184 96% 55%;
  --accent: 42 96% 62%;
  --destructive: 348 89% 62%;
  --border: 224 28% 24%;
  --muted-foreground: 215 28% 70%;
}

body {
  background:
    linear-gradient(135deg, rgba(18, 28, 56, .98), rgba(9, 12, 27, .98) 42%, rgba(16, 26, 42, .98)),
    linear-gradient(90deg, rgba(34, 211, 238, .07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(250, 204, 21, .045) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
}

.glass-card,
.glass-card-elevated {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
    linear-gradient(90deg, rgba(34, 211, 238, .09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(168, 85, 247, .075) 1px, transparent 1px),
    rgba(13, 20, 38, .88) !important;
  background-size: auto, 22px 22px, 22px 22px, auto;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.glass-card:hover {
  border-color: rgba(34, 211, 238, .48) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .36), 0 0 0 1px rgba(34, 211, 238, .12);
}

main .grid.grid-cols-2 > .glass-card:nth-child(1) {
  background: linear-gradient(135deg, rgba(14, 165, 233, .28), rgba(13, 20, 38, .9)) !important;
}

main .grid.grid-cols-2 > .glass-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(13, 20, 38, .9)) !important;
}

main .grid.grid-cols-2 > .glass-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(250, 204, 21, .25), rgba(13, 20, 38, .9)) !important;
}

main .grid.grid-cols-2 > .glass-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(244, 63, 94, .24), rgba(13, 20, 38, .9)) !important;
}

main .grid.grid-cols-7 {
  gap: .45rem !important;
}

main .grid.grid-cols-7 button.glass-card {
  min-height: clamp(58px, 10vw, 92px);
  border-radius: 10px !important;
  color: #f8fafc;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

main .grid.grid-cols-7 button.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 44%),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: auto, 14px 14px, 14px 14px;
}

main .grid.grid-cols-7 button.glass-card:nth-child(7n+1) {
  background: linear-gradient(135deg, rgba(244, 63, 94, .42), rgba(127, 29, 29, .32)) !important;
}

main .grid.grid-cols-7 button.glass-card:nth-child(7n+2) {
  background: linear-gradient(135deg, rgba(249, 115, 22, .42), rgba(120, 53, 15, .32)) !important;
}

main .grid.grid-cols-7 button.glass-card:nth-child(7n+3) {
  background: linear-gradient(135deg, rgba(234, 179, 8, .42), rgba(113, 63, 18, .32)) !important;
}

main .grid.grid-cols-7 button.glass-card:nth-child(7n+4) {
  background: linear-gradient(135deg, rgba(34, 197, 94, .42), rgba(20, 83, 45, .32)) !important;
}

main .grid.grid-cols-7 button.glass-card:nth-child(7n+5) {
  background: linear-gradient(135deg, rgba(20, 184, 166, .42), rgba(19, 78, 74, .32)) !important;
}

main .grid.grid-cols-7 button.glass-card:nth-child(7n+6) {
  background: linear-gradient(135deg, rgba(59, 130, 246, .42), rgba(30, 58, 138, .32)) !important;
}

main .grid.grid-cols-7 button.glass-card:nth-child(7n) {
  background: linear-gradient(135deg, rgba(168, 85, 247, .42), rgba(88, 28, 135, .32)) !important;
}

main .grid.grid-cols-7 button.opacity-30 {
  opacity: .68 !important;
}

main .grid.grid-cols-7 button span:first-child {
  background: rgba(2, 6, 23, .38);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  color: #fff !important;
  display: inline-flex;
  min-width: 1.45rem;
  justify-content: center;
  padding: .12rem .35rem;
}

main .grid.grid-cols-7 button.ring-1,
main .grid.grid-cols-7 button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .82);
  outline-offset: 2px;
}

main .grid.grid-cols-7 button:hover {
  transform: translateY(-1px);
}

aside,
nav + button,
.fixed.bottom-0 {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(13, 20, 38, .98)),
    linear-gradient(90deg, rgba(34, 211, 238, .08) 1px, transparent 1px);
  background-size: auto, 24px 24px;
  border-color: rgba(148, 163, 184, .22) !important;
}

@media (max-width: 640px) {
  main .grid.grid-cols-7 {
    gap: .35rem !important;
  }

  main .grid.grid-cols-7 button.glass-card {
    min-height: 56px;
    padding: .45rem !important;
  }
}