/* Shared live specimens: used by Admin audio and the Magic Styles library. */
.magic-glass-panel {
  --magic-glass-ink: #202936;
  --magic-glass-muted: #526071;
  --magic-glass-line: rgba(61, 75, 92, .14);
  --magic-glass-focus: #263bd4;
  box-sizing: border-box;
  border: 1px solid var(--magic-glass-line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 48%, rgba(111, 124, 140, .035));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 1px 0 1px rgba(255, 255, 255, .75), inset 0 -1px 2px rgba(61, 75, 92, .06), 0 4px 16px rgba(32, 41, 54, .055);
  color: var(--magic-glass-ink);
}
.magic-glass-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--magic-glass-line);
  border-radius: 999px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 60%, rgba(111, 124, 140, .045));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 1px rgba(61, 75, 92, .035), 0 2px 6px rgba(32, 41, 54, .035);
  color: var(--magic-glass-ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: background .16s ease, border-color .16s ease;
}
button.magic-glass-chip, a.magic-glass-chip { cursor: pointer; }
button.magic-glass-chip:hover, a.magic-glass-chip:hover { background: rgba(255, 255, 255, .5); border-color: rgba(61, 75, 92, .3); }
.magic-glass-chip[aria-expanded="true"], button.magic-glass-chip:active { background: rgba(111, 124, 140, .1); border-color: rgba(61, 75, 92, .45); box-shadow: inset 0 1px 3px rgba(32, 41, 54, .08), 0 1px 0 rgba(255, 255, 255, .9); }
.magic-glass-chip:focus-visible { outline: 3px solid var(--magic-glass-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .magic-glass-chip { transition: none; }
}
@media (forced-colors: active) {
  .magic-glass-panel, .magic-glass-chip { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .magic-glass-chip:focus-visible { outline-color: Highlight; }
}
.audio-admin-chapter { display: grid; gap: 8px; min-height: 124px; padding: 17px; border: 1px solid #d5e1f0; border-radius: 18px; background: #fff; color: #17233a; font: inherit; text-decoration: none; text-align: left; cursor: pointer; box-shadow: 0 8px 25px rgba(28, 56, 92, .07); transition: transform .16s ease, border-color .16s ease; }
.audio-admin-chapter:hover { transform: translateY(-2px); border-color: #6797e9; }
.audio-admin-chapter:focus-visible { outline: 3px solid #263bd4; outline-offset: 4px; }
.audio-admin-chapter:active { transform: translateY(0); }
.audio-admin-chapter strong { font-size: 1.03rem; line-height: 1.3; }
.audio-admin-chapter small { color: #5d7592; font-weight: 700; }
.audio-admin-progress { height: 7px; margin-top: auto; overflow: hidden; border-radius: 999px; background: #e8eef5; }
.audio-admin-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #77d39a, #20a56b); transition: width .25s ease; }

.magic-glow-card {
  --magic-glow-lilac: #c4b5fd;
  --magic-glow-rose: #fbcfe8;
  --magic-glow-mint: #a7f3d0;
  position: relative;
  isolation: isolate;
  border-color: var(--magic-glow-lilac);
}
.magic-glow-card::before,
.magic-glow-card::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.magic-glow-card::before {
  z-index: -2;
  inset: -3px;
  background: linear-gradient(115deg, var(--magic-glow-lilac), var(--magic-glow-rose), var(--magic-glow-mint), var(--magic-glow-lilac));
  background-size: 250% 250%;
  filter: blur(9px);
  opacity: .6;
  animation: magic-soft-glow 9s ease-in-out infinite;
}
.magic-glow-card::after {
  z-index: -1;
  inset: 0;
  background: #fff;
}
.magic-glow-card > strong { padding-inline-end: 42px; }
.magic-sparkle {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(100% 100% at 50% 0%, #a78bfa 0%, #8b5cf6 60%, #6d28d9 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 4px 12px rgba(124, 58, 237, .22);
  pointer-events: none;
}
.magic-sparkle::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("/icons/magic-sparkles.svg") center / contain no-repeat;
}
@keyframes magic-soft-glow {
  0%, 100% { background-position: 0% 50%; opacity: .5; }
  50% { background-position: 100% 50%; opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .magic-glow-card::before { animation: none; opacity: .55; }
  .audio-admin-chapter, .audio-admin-progress i { transition: none; }
  .audio-admin-chapter:hover { transform: none; }
}
@media (forced-colors: active) {
  .magic-glow-card::before, .magic-glow-card::after { display: none; }
  .audio-admin-chapter { border-color: ButtonText; }
  .audio-admin-chapter:focus-visible { outline-color: Highlight; }
  .audio-admin-progress { background: Canvas; border: 1px solid CanvasText; }
  .audio-admin-progress i { background: Highlight; }
  .magic-sparkle { forced-color-adjust: none; }
}