/* Componentry shader underneath existing dashboard content. */
#app .dev-root .desk :is(.metric,.completion-card).has-metric-gradient {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(160,204,242,.3);
  background: linear-gradient(130deg,#000814,#001d3d 65%,#167a9d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 12px 30px rgba(0,0,0,.22);
}
#app .dev-root .desk .metric.metric-gradient-yellow {
  border-color: rgba(240,212,129,.34);
  background: linear-gradient(130deg,#140f02,#594414 65%,#efd16a);
}
#app .dev-root .desk .completion-card.metric-gradient-green {
  border-color:rgba(119,228,176,.32);
  background:linear-gradient(130deg,#02110c,#0b422d 65%,#64dca2);
}
#app .dev-root .desk .completion-card.metric-gradient-red {
  border-color:rgba(239,146,163,.32);
  background:linear-gradient(130deg,#18070d,#571727 65%,#ed798a);
}
#app .dev-root .desk .has-metric-gradient > .metric-gradient-canvas {
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
#app .dev-root .desk .has-metric-gradient::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg,rgba(0,0,0,.28),transparent 85%),linear-gradient(180deg,rgba(255,255,255,.045),transparent 45%,rgba(0,0,0,.12));
}
#app .dev-root .desk .has-metric-gradient::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMCCgkGBAVJOAVJAAAASklEQVQ4y2NgGAWjYBSMglEwCgY/YGRgZBQUYmJiZGQEkYwMjIyMgoKCjIyMIJKBgRFIMjIyAklGRkYGRkFBYEcwMDIyMjAOUQAA1I4HwVwZAkYAAAAASUVORK5CYII=");
  background-size:200px; opacity:.1;
}
#app .dev-root .desk .has-metric-gradient > :not(.metric-gradient-canvas) { position:relative; z-index:2; }
#app .dev-root .desk .has-metric-gradient :is(.metric-label,.metric-foot) { color:rgba(255,255,255,.85); text-shadow:0 1px 5px rgba(0,0,0,.6); }
#app .dev-root .desk .has-metric-gradient > strong { color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55); }
#app .dev-root .desk .metric-gradient-yellow .metric-icon { color:#fff0b7; background:rgba(255,231,152,.15); }
#app .dev-root .desk .completion-card.has-metric-gradient > :is(span,small) { color:rgba(255,255,255,.85); text-shadow:0 1px 5px rgba(0,0,0,.6); }
/* Componentry Pixel Canvas beneath the live duration, with pointer tracking on the card. */
#app .dev-root .desk .metric-online.has-pixel-canvas {
  position:relative; isolation:isolate; overflow:hidden;
  background:#080c12; border-color:rgba(135,160,196,.3);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.22);
}
#app .dev-root .desk .metric-online > .online-pixel-canvas {
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
#app .dev-root .desk .has-pixel-canvas > :not(.online-pixel-canvas):not(.metric-label) { position:relative; z-index:1; }
#app .dev-root .desk .has-pixel-canvas > .metric-label { z-index:2; color:#eaf2fa; text-shadow:0 1px 7px #000; }
/* Large count-up typography: the number owns roughly two thirds of card height. */
#app .dev-root .desk :is(.metric-projects,.metric-spending) {
  display:grid; grid-template-rows:16px minmax(0,1fr) 12px; align-items:center;
  padding:7px 16px !important; gap:0;
}
#app .dev-root .desk :is(.metric-projects,.metric-spending) > .metric-icon { display:none; }
#app .dev-root .desk :is(.metric-projects,.metric-spending) > .metric-label { margin:0; font-size:12px; line-height:16px; }
#app .dev-root .desk :is(.metric-projects,.metric-spending) > .metric-foot { margin:0; font-size:10px; line-height:12px; }
#app .dev-root .desk .completion-card {
  display:grid; grid-template-rows:12px minmax(0,1fr) 10px;
  padding:4px 14px !important; align-items:center; gap:0;
}
#app .dev-root .desk .completion-card > span { font-size:11px; line-height:12px; }
#app .dev-root .desk .completion-card > small { margin:0; font-size:9px; line-height:10px; }
#app .dev-root .desk :is(.metric,.completion-card) > .metric-odometer {
  display:flex; align-items:center; width:100%; min-width:0; height:100%; margin:0;
  font-family:Inter,"Noto Sans SC",system-ui,sans-serif;
  font-size:var(--odometer-size,64px) !important; font-weight:700;
  line-height:1 !important; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:#fff; white-space:nowrap; text-shadow:0 2px 12px rgba(0,0,0,.4);
}