/* ======================================================
   DASHBOARD · MAGIC MODULES
   Scope: body[data-page="dashboard"]
   Modules: Code Showcase · Terminal · Live UI Playground
   ------------------------------------------------------
   Bygger på samma tokens som dashboard.css. Ingen ny färg-
   palett — bara mer rörelse och mer "labb-känsla".
   ====================================================== */

/* ------------------------------------------------------
   SHARED TOKENS (scoped)
   ------------------------------------------------------ */
body[data-page="dashboard"]{
  --magic-mono: ui-monospace, SFMono-Regular, "JetBrains Mono",
                Menlo, Consolas, "Liberation Mono", monospace;

  /* Syntax highlight palette (works against dark) */
  --tok-bg:          rgba(8, 10, 22, 0.78);
  --tok-bg-2:        rgba(14, 16, 32, 0.82);
  --tok-fg:          #e8ebff;
  --tok-muted:       #7d83a8;
  --tok-keyword:     #ff8ad4;
  --tok-string:      #ffd166;
  --tok-number:      #9bf2c2;
  --tok-comment:     #5a6592;
  --tok-fn:          #8fb4ff;
  --tok-type:        #c9a8ff;
  --tok-punct:       #b6bdd6;
  --tok-property:    #b9e8ff;
  --tok-tag:         #ff9ad6;
  --tok-attr:        #c9a8ff;

  --magic-line:      rgba(255,255,255,0.06);
  --magic-line-soft: rgba(255,255,255,0.04);
  --magic-glow:      0 30px 80px -20px rgba(123, 108, 255, 0.45),
                     0 18px 40px rgba(0,0,0,0.55);
}

/* ------------------------------------------------------
   MAGIC SECTION WRAPPER
   ------------------------------------------------------ */
body[data-page="dashboard"] .dash-magic{
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

body[data-page="dashboard"] .dash-magic-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 1100px){
  body[data-page="dashboard"] .dash-magic-row{
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   CODE SHOWCASE
   ====================================================== */

body[data-page="dashboard"] .dash-codeshow{
  position: relative;
  overflow: hidden;
}

body[data-page="dashboard"] .dash-codeshow::after{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at 85% 0%,
    rgba(255, 91, 189, 0.10),
    rgba(123, 108, 255, 0.08) 40%,
    transparent 70%
  );
  z-index: 0;
}

body[data-page="dashboard"] .dash-codeshow > *{ position: relative; z-index: 1; }

body[data-page="dashboard"] .dash-codeshow-head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

body[data-page="dashboard"] .dash-codeshow-title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-page="dashboard"] .dash-codeshow-subtitle{
  margin: 0;
  opacity: 0.78;
  max-width: 56ch;
  line-height: 1.5;
}

/* Tabs */
body[data-page="dashboard"] .dash-codeshow-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--magic-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}

body[data-page="dashboard"] .dash-codeshow-tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 7px 14px;
  border-radius: 999px;
  font: 600 0.82rem/1 var(--magic-mono);
  letter-spacing: 0.01em;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 160ms ease, background 200ms ease, transform 160ms ease;
}

body[data-page="dashboard"] .dash-codeshow-tab:hover{ opacity: 1; }

body[data-page="dashboard"] .dash-codeshow-tab.is-active{
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 91, 189, 0.22),
    rgba(123, 108, 255, 0.22)
  );
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Stage */
body[data-page="dashboard"] .dash-codeshow-stage{
  border: 1px solid var(--magic-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--tok-bg-2), var(--tok-bg));
  overflow: hidden;
  box-shadow: var(--magic-glow);
}

body[data-page="dashboard"] .dash-codeshow-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--magic-line-soft);
  background: rgba(0,0,0,0.18);
}

body[data-page="dashboard"] .dash-codeshow-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
body[data-page="dashboard"] .dash-codeshow-dot--r{ background: #ff5f56; }
body[data-page="dashboard"] .dash-codeshow-dot--y{ background: #ffbd2e; }
body[data-page="dashboard"] .dash-codeshow-dot--g{ background: #27c93f; }

body[data-page="dashboard"] .dash-codeshow-filename{
  margin-left: 8px;
  font: 500 0.78rem/1 var(--magic-mono);
  color: var(--tok-muted);
}

body[data-page="dashboard"] .dash-codeshow-copy{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: 600 0.78rem/1 var(--magic-mono);

  appearance: none;
  border: 1px solid var(--magic-line);
  background: rgba(255,255,255,0.03);
  color: inherit;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}

body[data-page="dashboard"] .dash-codeshow-copy:hover{
  opacity: 1;
  border-color: rgba(168, 85, 247, 0.35);
}

body[data-page="dashboard"] .dash-codeshow-copy.is-copied{
  border-color: rgba(155, 242, 194, 0.55);
  color: #9bf2c2;
}

body[data-page="dashboard"] .dash-codeshow-pre{
  margin: 0;
  padding: 18px 18px 16px;
  overflow-x: auto;
  font: 500 0.88rem/1.6 var(--magic-mono);
  color: var(--tok-fg);
  white-space: pre;
  tab-size: 2;
  /* Stable height while typing — avoids layout dance */
  min-height: 240px;
}

body[data-page="dashboard"] .dash-codeshow-code{
  display: block;
}

/* Caret while typing */
body[data-page="dashboard"] .dash-codeshow-caret{
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -2px;
  background: linear-gradient(180deg, #ff8ad4, #b388ff);
  border-radius: 1px;
  animation: dashMagicCaret 0.95s steps(1, end) infinite;
}

@keyframes dashMagicCaret{
  50% { opacity: 0; }
}

body[data-page="dashboard"] .dash-codeshow-note{
  margin: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--magic-line-soft);
  font: 500 0.85rem/1.5 var(--magic-mono);
  color: var(--tok-muted);
}

/* Syntax tokens */
body[data-page="dashboard"] .tok-keyword { color: var(--tok-keyword); font-weight: 600; }
body[data-page="dashboard"] .tok-string  { color: var(--tok-string);  }
body[data-page="dashboard"] .tok-number  { color: var(--tok-number);  }
body[data-page="dashboard"] .tok-comment { color: var(--tok-comment); font-style: italic; }
body[data-page="dashboard"] .tok-fn      { color: var(--tok-fn); }
body[data-page="dashboard"] .tok-type    { color: var(--tok-type); }
body[data-page="dashboard"] .tok-punct   { color: var(--tok-punct); }
body[data-page="dashboard"] .tok-property{ color: var(--tok-property); }
body[data-page="dashboard"] .tok-variable{ color: #ffd9f1; }
body[data-page="dashboard"] .tok-tag     { color: var(--tok-tag); }
body[data-page="dashboard"] .tok-attr    { color: var(--tok-attr); }
body[data-page="dashboard"] .tok-builtin { color: #9bf2c2; }
body[data-page="dashboard"] .tok-operator{ color: #b388ff; }


/* ======================================================
   TERMINAL
   ====================================================== */

body[data-page="dashboard"] .dash-terminal{
  position: relative;
  overflow: hidden;
}

body[data-page="dashboard"] .dash-terminal-head{
  margin-bottom: 12px;
}

body[data-page="dashboard"] .dash-terminal-titlebar{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  margin-bottom: 12px;
  border: 1px solid var(--magic-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font: 500 0.75rem/1 var(--magic-mono);
  color: var(--tok-muted);
}

body[data-page="dashboard"] .dash-terminal-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}
body[data-page="dashboard"] .dash-terminal-dot--r{ background: #ff5f56; }
body[data-page="dashboard"] .dash-terminal-dot--y{ background: #ffbd2e; }
body[data-page="dashboard"] .dash-terminal-dot--g{ background: #27c93f; }

body[data-page="dashboard"] .dash-terminal-tabname{
  margin-left: 4px;
}

body[data-page="dashboard"] .dash-terminal-title{
  margin: 0 0 4px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-page="dashboard"] .dash-terminal-subtitle{
  margin: 0;
  opacity: 0.78;
  line-height: 1.5;
}

body[data-page="dashboard"] .dash-terminal-subtitle code{
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid var(--magic-line);
  background: rgba(0,0,0,0.30);
  font: 600 0.82em/1 var(--magic-mono);
  color: #ffd9f1;
}

/* Screen */
body[data-page="dashboard"] .dash-terminal-screen{
  margin-top: 14px;
  padding: 14px 14px 4px;
  min-height: 220px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;

  border: 1px solid var(--magic-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, var(--tok-bg-2), var(--tok-bg));
  box-shadow: var(--magic-glow);

  font: 500 0.84rem/1.55 var(--magic-mono);
  color: var(--tok-fg);
  scroll-behavior: smooth;
}

body[data-page="dashboard"] .dash-terminal-screen:focus-visible{
  outline: 2px solid rgba(168, 85, 247, 0.55);
  outline-offset: 2px;
}

body[data-page="dashboard"] .dash-terminal-line{
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="dashboard"] .dash-terminal-line + .dash-terminal-line{
  margin-top: 2px;
}

body[data-page="dashboard"] .dash-terminal-line--echo{
  color: #ffd9f1;
}

body[data-page="dashboard"] .dash-terminal-line--ok{ color: #9bf2c2; }
body[data-page="dashboard"] .dash-terminal-line--warn{ color: #ffd166; }
body[data-page="dashboard"] .dash-terminal-line--err{ color: #ff7d8a; }
body[data-page="dashboard"] .dash-terminal-line--muted{ color: var(--tok-muted); }
body[data-page="dashboard"] .dash-terminal-line--accent{
  background: linear-gradient(90deg, #ff8ad4, #b388ff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 700;
}

body[data-page="dashboard"] .dash-terminal-line a{
  color: #b9e8ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Input row */
body[data-page="dashboard"] .dash-terminal-form{
  position: relative;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border: 1px solid var(--magic-line);
  border-radius: 999px;
  background: rgba(0,0,0,0.30);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body[data-page="dashboard"] .dash-terminal-form:focus-within{
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 0 4px rgba(123, 108, 255, 0.10);
}

body[data-page="dashboard"] .dash-terminal-prompt{
  display: inline-flex;
  align-items: center;
  gap: 0;
  font: 600 0.84rem/1 var(--magic-mono);
  white-space: nowrap;
}

body[data-page="dashboard"] .dash-terminal-prompt-user{ color: #9bf2c2; }
body[data-page="dashboard"] .dash-terminal-prompt-host{ color: #b9e8ff; }
body[data-page="dashboard"] .dash-terminal-prompt-path{ color: var(--tok-keyword); }
body[data-page="dashboard"] .dash-terminal-prompt-sep{ color: var(--tok-muted); }
body[data-page="dashboard"] .dash-terminal-prompt-glyph{
  margin-left: 6px;
  color: var(--tok-keyword);
}

body[data-page="dashboard"] .dash-terminal-input{
  flex: 1 1 auto;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tok-fg);
  font: 500 0.88rem/1 var(--magic-mono);
  padding: 0;
  caret-color: #ff8ad4;
}

body[data-page="dashboard"] .dash-terminal-input::placeholder{
  color: var(--tok-muted);
  opacity: 0.7;
}

body[data-page="dashboard"] .dash-terminal-cursor{
  width: 8px;
  height: 1.05em;
  background: linear-gradient(180deg, #ff8ad4, #b388ff);
  border-radius: 1px;
  animation: dashMagicCaret 0.95s steps(1, end) infinite;
}


/* ======================================================
   LIVE UI PLAYGROUND
   ====================================================== */

body[data-page="dashboard"] .dash-playground{
  /* Tokens som drivs av reglagen */
  --pg-radius: 22px;
  --pg-glow:   0.38;
  --pg-blur:   14px;
  --pg-hue:    288;
  --pg-tilt:   6deg;
}

body[data-page="dashboard"] .dash-playground-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body[data-page="dashboard"] .dash-playground-title{
  margin: 0 0 4px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-page="dashboard"] .dash-playground-subtitle{
  margin: 0;
  opacity: 0.78;
  max-width: 60ch;
  line-height: 1.5;
}

body[data-page="dashboard"] .dash-playground-badge{
  flex: 0 0 auto;
  font: 700 0.72rem/1 var(--magic-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(123, 108, 255, 0.10);
  color: #d6c8ff;
}

body[data-page="dashboard"] .dash-playground-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1100px){
  body[data-page="dashboard"] .dash-playground-grid{
    grid-template-columns: 1fr;
  }
}

/* Stage */
body[data-page="dashboard"] .dash-playground-stage{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--magic-line-soft);
  background:
    radial-gradient(
      600px circle at 50% 0%,
      hsla(var(--pg-hue), 90%, 70%, calc(var(--pg-glow) * 0.45)),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.10));
  overflow: hidden;
  isolation: isolate;

  perspective: 1200px;
  perspective-origin: 50% 30%;
}

body[data-page="dashboard"] .dash-playground-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}

/* The live preview card */
body[data-page="dashboard"] .dash-playground-card{
  position: relative;
  z-index: 1;
  width: min(300px, 88%);
  padding: 24px;
  border-radius: var(--pg-radius);

  background:
    linear-gradient(
      180deg,
      hsla(var(--pg-hue), 70%, 65%, 0.18),
      hsla(calc(var(--pg-hue) - 50), 70%, 60%, 0.10)
    ),
    rgba(255,255,255,0.04);

  border: 1px solid hsla(var(--pg-hue), 70%, 75%, 0.28);
  backdrop-filter: blur(var(--pg-blur));
  -webkit-backdrop-filter: blur(var(--pg-blur));

  box-shadow:
    0 30px 60px -20px hsla(var(--pg-hue), 80%, 50%, calc(var(--pg-glow) * 0.7)),
    inset 0 1px 0 rgba(255,255,255,0.18);

  transform: rotateX(calc(var(--pg-tilt) * 0.28)) rotateY(calc(var(--pg-tilt) * -0.28));
  transform-style: flat;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1),
              border-radius 240ms ease,
              box-shadow 240ms ease,
              backdrop-filter 240ms ease;
}

body[data-page="dashboard"] .dash-playground-card-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

body[data-page="dashboard"] .dash-playground-card-logo{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-family: var(--magic-mono);
  background: hsla(var(--pg-hue), 80%, 70%, 0.20);
  border: 1px solid hsla(var(--pg-hue), 80%, 80%, 0.35);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

body[data-page="dashboard"] .dash-playground-card-tag{
  font: 700 0.72rem/1 var(--magic-mono);
  letter-spacing: 0.04em;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.30);
  opacity: 0.9;
}

body[data-page="dashboard"] .dash-playground-card-title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

body[data-page="dashboard"] .dash-playground-card-desc{
  margin: 0 0 16px;
  opacity: 0.85;
  line-height: 1.5;
  font-size: 0.92rem;
}

body[data-page="dashboard"] .dash-playground-card-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="dashboard"] .dash-playground-card-price{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

body[data-page="dashboard"] .dash-playground-card-currency{
  font: 600 0.75rem/1 var(--magic-mono);
  opacity: 0.7;
}

body[data-page="dashboard"] .dash-playground-card-amount{
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(
    135deg,
    hsl(var(--pg-hue), 90%, 80%),
    hsl(calc(var(--pg-hue) - 60), 90%, 70%)
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

body[data-page="dashboard"] .dash-playground-card-period{
  font-size: 0.78rem;
  opacity: 0.65;
}

body[data-page="dashboard"] .dash-playground-card-cta{
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 999px;
  color: #0a0712;
  background: linear-gradient(
    135deg,
    hsl(var(--pg-hue), 90%, 78%),
    hsl(calc(var(--pg-hue) - 50), 90%, 70%)
  );
  box-shadow: 0 12px 30px hsla(var(--pg-hue), 80%, 50%, 0.45);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

body[data-page="dashboard"] .dash-playground-card-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 36px hsla(var(--pg-hue), 80%, 50%, 0.55);
}

/* Controls */
body[data-page="dashboard"] .dash-playground-controls{
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--magic-line);
  background: rgba(255,255,255,0.02);
}

body[data-page="dashboard"] .dash-playground-ctrl{
  display: grid;
  gap: 6px;
}

body[data-page="dashboard"] .dash-playground-ctrl-label{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 600 0.82rem/1 var(--magic-mono);
}

body[data-page="dashboard"] .dash-playground-ctrl-label > span:first-child{
  flex: 1 1 auto;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.70rem;
  opacity: 0.7;
}

body[data-page="dashboard"] .dash-playground-ctrl-label output{
  color: #ffd9f1;
  font-weight: 700;
}

/* Range slider — tries to look identical across browsers */
body[data-page="dashboard"] .dash-playground-ctrl input[type="range"]{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #ff5bbd, #7b6cff);
  border-radius: 999px;
  outline: 0;
  cursor: pointer;
}

body[data-page="dashboard"] .dash-playground-ctrl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #b388ff;
  box-shadow: 0 6px 16px rgba(123, 108, 255, 0.55);
  transition: transform 120ms ease;
}

body[data-page="dashboard"] .dash-playground-ctrl input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #b388ff;
  box-shadow: 0 6px 16px rgba(123, 108, 255, 0.55);
}

body[data-page="dashboard"] .dash-playground-ctrl input[type="range"]:hover::-webkit-slider-thumb{
  transform: scale(1.10);
}

body[data-page="dashboard"] .dash-playground-actions{
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

body[data-page="dashboard"] .dash-playground-action{
  appearance: none;
  cursor: pointer;
  font: 700 0.78rem/1 var(--magic-mono);
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--magic-line);
  background: rgba(255,255,255,0.03);
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

body[data-page="dashboard"] .dash-playground-action:hover{
  border-color: rgba(168, 85, 247, 0.40);
  transform: translateY(-1px);
}

body[data-page="dashboard"] .dash-playground-action--primary{
  background: linear-gradient(135deg, rgba(255, 91, 189, 0.20), rgba(123, 108, 255, 0.20));
  border-color: rgba(168, 85, 247, 0.45);
}

body[data-page="dashboard"] .dash-playground-action.is-copied{
  border-color: rgba(155, 242, 194, 0.55);
  color: #9bf2c2;
}

body[data-page="dashboard"] .dash-playground-output{
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--magic-line);
  background: linear-gradient(180deg, var(--tok-bg-2), var(--tok-bg));
  font: 500 0.78rem/1.55 var(--magic-mono);
  color: var(--tok-fg);
  overflow-x: auto;
  white-space: pre;
}


/* ======================================================
   REDUCED MOTION
   ====================================================== */
@media (prefers-reduced-motion: reduce){
  body[data-page="dashboard"] .dash-codeshow-caret,
  body[data-page="dashboard"] .dash-terminal-cursor{
    animation: none !important;
  }

  body[data-page="dashboard"] .dash-playground-card{
    transition: none !important;
  }
}