#dashboard {
  width: min(1120px, calc(100% - 44px));
  margin-inline: auto;
}

#dashboard .dash-head {
  align-items: end;
  margin-bottom: 25px;
}

#dashboard .dash-head h2 {
  max-width: 720px;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.045em;
}

#dashboard .dash-head p { max-width: 540px; }

#dashboard .category-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 13px;
  align-items: stretch;
}

.category-tile {
  --tile-glow: rgba(48, 102, 230, .18);
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 154px;
  grid-column: span 4;
  overflow: hidden;
  align-items: end;
  padding: clamp(17px, 2.3vw, 27px);
  border: 1px solid rgba(184, 204, 242, .18);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 82% 24%, var(--tile-glow), transparent 48%),
    linear-gradient(135deg, rgba(26, 34, 50, .96), rgba(11, 15, 23, .98));
  color: #f6f8fc;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 34px rgba(0,0,0,.12);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.category-tile::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, rgba(5,8,14,.03) 15%, rgba(5,8,14,.7) 100%);
  content: "";
}

.category-tile:hover,
.category-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(101, 160, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.23), 0 0 28px rgba(45,109,255,.1);
}

.category-tile:focus-visible { outline: 2px solid #65a0ff; outline-offset: 3px; }
.category-featured { min-height: clamp(235px, 31vw, 340px); grid-column: span 7; }
.category-featured + .category-featured { grid-column: span 5; }
.category-accent { --tile-glow: rgba(35, 104, 255, .35); border-color: rgba(73, 132, 255, .42); }

.category-copy { position: relative; z-index: 2; display: grid; gap: 7px; max-width: 74%; }
.category-kicker { color: #9dbdff; font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.category-copy strong { font-size: clamp(20px, 2.4vw, 29px); line-height: 1.04; letter-spacing: -.04em; overflow-wrap: anywhere; }
.category-featured .category-copy strong { font-size: clamp(30px, 4vw, 48px); }
.category-note { color: rgba(226, 232, 243, .72); font-size: 12px; line-height: 1.4; }
.category-arrow { position: absolute; z-index: 2; top: 16px; right: 18px; color: rgba(233,240,255,.8); font-size: 18px; transition: transform 220ms ease; }
.category-tile:hover .category-arrow { transform: translate(2px, -2px); }

.category-art { position: absolute; z-index: 1; top: 5%; right: 2%; width: 54%; height: 90%; display: grid; place-items: center; opacity: .82; pointer-events: none; }
.category-art svg { width: 100%; height: 100%; overflow: visible; fill: rgba(170,190,230,.09); stroke: rgba(185,207,255,.56); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 12px 24px rgba(0,0,0,.32)); transform: rotate(-8deg); transition: transform 400ms ease, opacity 220ms ease; }
.category-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.34)); transform: rotate(-7deg) scale(1.04); transition: transform 400ms ease; }
.category-tile:hover .category-art img { transform: rotate(-3deg) scale(1.09); }
.category-tile:hover .category-art svg { transform: rotate(-4deg) scale(1.045); opacity: 1; }
.category-featured .category-art { top: -4%; right: 0; width: 62%; height: 104%; }
.category-featured .category-art svg { stroke-width: 1.05; }
.category-art-shirt { right: 1%; width: 42%; }
.category-art-shirt svg { transform: rotate(7deg); }
.category-art-cap,.category-art-bag { width: 46%; }
.category-art-spark,.category-art-star { width: 47%; opacity: .84; }
.category-art-spark svg,.category-art-star svg { fill: rgba(74,132,255,.1); stroke: rgba(127,171,255,.75); }

.light #dashboard .category-tile {
  border-color: rgba(65,82,111,.18);
  background: radial-gradient(ellipse at 82% 24%, rgba(64,113,220,.12), transparent 48%), linear-gradient(135deg, rgba(242,245,251,.98), rgba(222,230,243,.97));
  color: #111722;
}
.light .category-tile::before { background: linear-gradient(110deg, rgba(250,251,253,.04) 18%, rgba(220,229,242,.5) 100%); }
.light .category-kicker { color: #2863c8; }
.light .category-note,.light .category-arrow { color: rgba(36,49,70,.72); }
.light .category-art svg { fill: rgba(59,92,153,.08); stroke: rgba(55,83,133,.44); }
.light .category-art img { filter: drop-shadow(0 12px 22px rgba(13,24,43,.25)); }

@media (max-width: 720px) {
  #dashboard { width: min(100% - 28px, 600px); }
  #dashboard .category-grid { gap: 10px; }
  .category-tile { grid-column: span 6; min-height: 145px; border-radius: 16px; padding: 16px; }
  .category-featured,.category-featured + .category-featured { grid-column: span 6; min-height: 215px; }
  .category-featured .category-copy strong { font-size: clamp(32px, 8vw, 42px); }
  .category-copy { max-width: 78%; }
  .category-art { width: 53%; right: -2%; }
}

@media (max-width: 420px) {
  #dashboard { width: calc(100% - 22px); }
  #dashboard .dash-head { align-items: start; gap: 10px; flex-direction: column; }
  #dashboard .category-grid { gap: 8px; }
  .category-tile { min-height: 132px; grid-column: span 6; padding: 13px; }
  .category-featured,.category-featured + .category-featured { min-height: 185px; }
  .category-copy { max-width: 82%; gap: 5px; }
  .category-copy strong { font-size: 20px; }
  .category-featured .category-copy strong { font-size: 31px; }
  .category-kicker { font-size: 8px; letter-spacing: .14em; }
  .category-note { font-size: 10px; }
  .category-art { width: 58%; right: -7%; }
}

@media (prefers-reduced-motion: reduce) {
  .category-tile,.category-art svg,.category-art img,.category-arrow { transition: none !important; }
}