@layer galaxy {

  /* Keep page wrappers transparent so animated galaxy remains visible behind cards. */
  html[data-oc-theme="galaxy"] #container,
  html[data-oc-theme="galaxy"] #main,
  html[data-oc-theme="galaxy"] #content,
  html[data-oc-theme="galaxy"] #content-main,
  html[data-oc-theme="galaxy"] #changelist {
    background: transparent;
    box-shadow: none;
  }

  /* Glass surfaces for Galaxy content cards. */
  html[data-oc-theme="galaxy"] #changelist-filter,
  html[data-oc-theme="galaxy"] .module,
  html[data-oc-theme="galaxy"] fieldset.module,
  html[data-oc-theme="galaxy"] .inline-group,
  html[data-oc-theme="galaxy"] .inline-related,
  html[data-oc-theme="galaxy"] .results,
  html[data-oc-theme="galaxy"] .changelist-form,
  html[data-oc-theme="galaxy"] .changelist-form-container,
  html[data-oc-theme="galaxy"] .paginator,
  html[data-oc-theme="galaxy"] .actions {
    background: rgba(8, 12, 24, .42);
    border-color: var(--oc-border-strong);
    box-shadow: var(--oc-shadow-2, 0 12px 34px rgba(0, 0, 0, .34)), inset 0 0 0 1px rgba(255, 255, 255, .02);
    backdrop-filter: blur(12px) saturate(1.25);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
  }

  html[data-oc-theme="galaxy"] #header {
    /* Django admin #header still renders via --header-* vars; this is a visual fallback. */
    background: rgba(8, 10, 18, .94);
    border-bottom: 1px solid var(--oc-border);
    color: var(--oc-ink);
    backdrop-filter: blur(8px);
  }

  html[data-oc-theme="galaxy"] #result_list tbody td,
  html[data-oc-theme="galaxy"] #result_list tbody th {
    background: rgba(8, 11, 22, .34);
    color: var(--oc-ink);
    border-bottom: 1px solid var(--oc-border-weak);
  }

  html[data-oc-theme="galaxy"] #result_list tbody tr:nth-child(even) td,
  html[data-oc-theme="galaxy"] #result_list tbody tr:nth-child(even) th {
    background: rgba(10, 14, 26, .44);
  }

  html[data-oc-theme="galaxy"] #result_list thead th {
    background: linear-gradient(90deg, rgba(125, 211, 252, .20), rgba(167, 139, 250, .16), rgba(52, 211, 153, .14));
    color: rgba(255, 255, 255, .88);
    border-bottom: 1px solid var(--oc-border-strong);
  }

  /* Galaxy UI - Clean & Modern */
  html[data-oc-theme="galaxy"] .button,
  html[data-oc-theme="galaxy"] .submit-row input,
  html[data-oc-theme="galaxy"] .submit-row a,
  html[data-oc-theme="galaxy"] .oc-table-btn {
    border-radius: var(--oc-radius-m, 10px);
    border: 1px solid var(--oc-border-strong, rgba(255, 255, 255, .16));
    background: rgba(255, 255, 255, .06);
    color: var(--oc-ink);
    font-weight: 800;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }

  html[data-oc-theme="galaxy"] .button:hover,
  html[data-oc-theme="galaxy"] .submit-row input:hover,
  html[data-oc-theme="galaxy"] .submit-row a:hover,
  html[data-oc-theme="galaxy"] .oc-table-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(90, 220, 255, .35);
    box-shadow: var(--oc-shadow-3, 0 16px 40px rgba(0, 0, 0, .40));
  }

  html[data-oc-theme="galaxy"] .changelist-filter h2,
  html[data-oc-theme="galaxy"] .module caption,
  html[data-oc-theme="galaxy"] .module h2,
  html[data-oc-theme="galaxy"] .module h3 {
    background: linear-gradient(90deg, rgba(90, 220, 255, .12), rgba(255, 90, 200, .10), rgba(110, 255, 190, .10));
    border: 1px solid var(--oc-border);
    color: var(--oc-ink);
  }

  html[data-oc-theme="galaxy"] table thead th {
    background: linear-gradient(90deg, rgba(125, 211, 252, .14), rgba(167, 139, 250, .11), rgba(52, 211, 153, .10));
    color: rgba(255, 255, 255, .84);
    border-bottom: 1px solid var(--oc-border-strong);
    letter-spacing: .08em;
  }

  html[data-oc-theme="galaxy"] table tbody td {
    background: rgba(8, 11, 22, .34);
    border-bottom: 1px solid var(--oc-border-weak);
  }

  html[data-oc-theme="galaxy"] table tbody tr:hover td {
    background: var(--oc-table-row-hover-bg);
  }

  html[data-oc-theme="galaxy"] #changelist .results,
  html[data-oc-theme="galaxy"] #changelist table {
    background: rgba(8, 12, 24, .36);
    border: 1px solid var(--oc-border-strong);
    border-radius: var(--oc-radius-l, 14px);
  }

  html[data-oc-theme="galaxy"] .paginator,
  html[data-oc-theme="galaxy"] .actions,
  html[data-oc-theme="galaxy"] .changelist-form {
    border-radius: var(--oc-radius-l, 14px);
    border: 1px solid var(--oc-border-strong);
    background: rgba(8, 11, 22, .40);
    box-shadow: var(--oc-shadow-2, 0 12px 34px rgba(0, 0, 0, .34));
  }

  /* Galaxy background injection */
  #oc-galaxy-bg {
    position: fixed;
    inset: -14%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: none;
    background:
      radial-gradient(1200px 800px at 30% 10%, rgba(90, 220, 255, .08), transparent 60%),
      radial-gradient(1000px 700px at 75% 0%, rgba(255, 90, 200, .08), transparent 60%),
      radial-gradient(900px 700px at 50% 85%, rgba(110, 255, 190, .06), transparent 60%),
      radial-gradient(1300px 900px at 50% 50%, rgba(255, 255, 255, .03), transparent 65%),
      linear-gradient(180deg, #05060f 0%, #060817 55%, #04050e 100%);
  }

  html[data-oc-theme="galaxy"] #oc-galaxy-bg {
    display: block;
  }

  html[data-oc-theme="galaxy"] #container {
    position: relative;
    z-index: 1;
  }

  #oc-galaxy-bg .stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .95;
    transform: translate3d(0, 0, 0);
  }

  #oc-galaxy-bg::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: conic-gradient(from 220deg at 52% 38%, rgba(255, 255, 255, .06), transparent 18%, rgba(90, 220, 255, .06), transparent 44%, rgba(255, 90, 200, .05), transparent 70%, rgba(110, 255, 190, .05), transparent 92%, rgba(255, 255, 255, .05));
    filter: blur(70px) saturate(1.35);
    opacity: .55;
    mix-blend-mode: screen;
    animation: oc-swirl 70s linear infinite;
    transform-origin: 52% 38%;
  }

  #oc-galaxy-bg::after {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(900px 700px at 50% 35%, rgba(0, 0, 0, .08), rgba(0, 0, 0, .52)), radial-gradient(1200px 900px at 50% 50%, transparent 35%, rgba(0, 0, 0, .68));
  }

  #oc-galaxy-bg .fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  #oc-galaxy-bg .fx.noise {
    opacity: .08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size: 260px 260px;
    animation: oc-noise 1.8s steps(6) infinite;
  }

  #oc-galaxy-bg .fx.scanlines {
    opacity: .10;
    mix-blend-mode: overlay;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .08) 0px, rgba(255, 255, 255, .08) 1px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0) 6px);
    animation: oc-scan 7s linear infinite;
  }

  #oc-galaxy-bg .fx.grid {
    opacity: .14;
    mix-blend-mode: screen;
    background-image: linear-gradient(rgba(90, 220, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 90, 200, .12) 1px, transparent 1px);
    background-size: 84px 84px;
    transform: perspective(900px) rotateX(62deg) translateY(140px) scale(1.15);
    transform-origin: 50% 60%;
    filter: blur(.15px);
    mask-image: radial-gradient(900px 700px at 50% 55%, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));
    animation: oc-grid 18s linear infinite;
  }

  #oc-galaxy-bg .blob {
    position: absolute;
    width: 980px;
    height: 760px;
    border-radius: 999px;
    filter: blur(78px) saturate(1.35);
    opacity: .80;
    will-change: transform;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
  }

  #oc-galaxy-bg .b1 {
    background: rgba(255, 90, 200, .36);
    top: -260px;
    left: -360px;
    animation: oc-drift1 36s ease-in-out infinite alternate;
  }

  #oc-galaxy-bg .b2 {
    background: rgba(90, 220, 255, .26);
    top: -300px;
    right: -380px;
    animation: oc-drift2 42s ease-in-out infinite alternate;
  }

  #oc-galaxy-bg .b3 {
    background: rgba(110, 255, 190, .18);
    bottom: -380px;
    left: -260px;
    animation: oc-drift3 48s ease-in-out infinite alternate;
  }

  #oc-galaxy-bg .b4 {
    background: rgba(255, 214, 110, .10);
    bottom: -420px;
    right: -260px;
    animation: oc-drift4 54s ease-in-out infinite alternate;
  }

  html[data-oc-theme="galaxy"] #oc-galaxy-bg.paused .blob,
  html[data-oc-theme="galaxy"] #oc-galaxy-bg.paused::before,
  html[data-oc-theme="galaxy"] #oc-galaxy-bg.paused .fx {
    animation: none;
  }

  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects .fx.noise,
  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects .fx.scanlines {
    display: none;
  }

  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects::before,
  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects .fx.grid,
  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects .blob {
    animation: none;
  }

  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects::before {
    opacity: .32;
  }

  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects .fx.grid {
    opacity: .08;
  }

  html[data-oc-theme="galaxy"] #oc-galaxy-bg.low-effects .blob {
    opacity: .52;
    filter: blur(72px) saturate(1.05);
    will-change: auto;
  }

  @media (prefers-reduced-motion: reduce) {

    #oc-galaxy-bg .blob,
    #oc-galaxy-bg::before,
    #oc-galaxy-bg .fx {
      animation: none;
    }
  }

  @keyframes oc-swirl {
    from {
      transform: rotate(0deg) scale(1.02);
    }

    to {
      transform: rotate(360deg) scale(1.02);
    }
  }

  @keyframes oc-noise {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 260px -260px;
    }
  }

  @keyframes oc-scan {
    0% {
      transform: translateY(-8%);
    }

    100% {
      transform: translateY(8%);
    }
  }

  @keyframes oc-grid {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 0 260px;
    }
  }

  @keyframes oc-drift1 {
    0% {
      transform: translate3d(0, 0, 0) scale(1.05);
    }

    50% {
      transform: translate3d(170px, 95px, 0) scale(1.12);
    }

    100% {
      transform: translate3d(70px, 155px, 0) scale(1.08);
    }
  }

  @keyframes oc-drift2 {
    0% {
      transform: translate3d(0, 0, 0) scale(1.03);
    }

    50% {
      transform: translate3d(-190px, 110px, 0) scale(1.12);
    }

    100% {
      transform: translate3d(-85px, 170px, 0) scale(1.06);
    }
  }

  @keyframes oc-drift3 {
    0% {
      transform: translate3d(0, 0, 0) scale(1.06);
    }

    50% {
      transform: translate3d(160px, -80px, 0) scale(1.14);
    }

    100% {
      transform: translate3d(90px, -140px, 0) scale(1.08);
    }
  }

  @keyframes oc-drift4 {
    0% {
      transform: translate3d(0, 0, 0) scale(1.04);
    }

    50% {
      transform: translate3d(-150px, -70px, 0) scale(1.10);
    }

    100% {
      transform: translate3d(-70px, -120px, 0) scale(1.06);
    }
  }
}