/* T-044 (owner-approved demo 2026-11-08): grain backgrounds for the admin panel + creator dashboard
   (from docs/bg-themes, owner-approved 2026-10-15). Linked by templates/base.html + templates/creator_portal.html.
   Light = blue -> lavender -> grey-teal under white cards; Dark = Midnight / Plum / Ocean under
   frosted cards. Chosen by html[data-grain=sky|midnight|plum|ocean]; no data-grain = Beige (today's Light). 3 colour states cross-fade (36 s) + 2 drifting blobs + film grain. No filter:blur on big layers. */
.grain-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.grain-bg i{display:block}
html:not([data-grain]) .grain-bg{display:none}                       /* Beige = today's Light, no texture */
.grain-bg .st{position:absolute;inset:-15%;opacity:0;animation:grainFade 36s ease-in-out infinite}
.grain-bg .s1{animation-delay:0s}.grain-bg .s2{animation-delay:-24s}.grain-bg .s3{animation-delay:-12s}
@keyframes grainFade{0%{opacity:0}8%,33%{opacity:1}41%,100%{opacity:0}}
.grain-bg .blob{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.grain-bg .b1{width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;animation:grainD1 28s ease-in-out infinite alternate}
.grain-bg .b2{width:60vmax;height:60vmax;right:-20vmax;bottom:-25vmax;animation:grainD2 32s ease-in-out infinite alternate}
@keyframes grainD1{to{transform:translate(18vmax,14vmax) scale(1.1)}}
@keyframes grainD2{to{transform:translate(-16vmax,-12vmax) scale(1.08)}}
.grain-bg .veil{position:absolute;inset:0}
.grain-bg .grain{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.grain-bg .grain2{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>")}
@media(prefers-reduced-motion:reduce){.grain-bg .st,.grain-bg .blob{animation:none}.grain-bg .s1{opacity:1}}
html[data-grain] body::before{display:none!important}              /* the old Glass blobs (panel + creator dashboard) */
html[data-grain="sky"] body{background:#9fb2e6!important}
html:is([data-grain="midnight"],[data-grain="plum"],[data-grain="ocean"]) body{background:#0b0c1a!important}

/* ---------- Light · Sky (the texture Light; Light · Beige = today's look from panel.css) ---------- */
html[data-grain="sky"] .grain-bg .s1{background:radial-gradient(60% 55% at 15% 85%,#8a8ff0 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#3d8ee0 0%,transparent 72%),radial-gradient(70% 70% at 40% 35%,#3f63c8 0%,transparent 75%),linear-gradient(135deg,#3a55b8,#4a8fd8)}
html[data-grain="sky"] .grain-bg .s2{background:radial-gradient(60% 60% at 20% 70%,#8e8ff2 0%,transparent 70%),radial-gradient(55% 55% at 80% 30%,#7a5fb8 0%,transparent 72%),radial-gradient(65% 65% at 60% 85%,#7f9ae6 0%,transparent 75%),linear-gradient(135deg,#8186ea,#74619f)}
html[data-grain="sky"] .grain-bg .s3{background:radial-gradient(60% 60% at 10% 40%,#5f6f8c 0%,transparent 70%),radial-gradient(55% 55% at 75% 25%,#a7b3c9 0%,transparent 72%),radial-gradient(70% 65% at 85% 85%,#5f9fc6 0%,transparent 75%),linear-gradient(135deg,#76839c,#8fb0c8)}
html[data-grain="sky"] .grain-bg .b1{background:radial-gradient(circle,rgba(170,160,255,.55),transparent 65%)}
html[data-grain="sky"] .grain-bg .b2{background:radial-gradient(circle,rgba(80,160,230,.5),transparent 65%)}
html[data-grain="sky"] .grain-bg .veil{background:rgba(246,248,255,.36)}   /* pastel: dark text stays readable */
html[data-grain="sky"] .grain-bg .grain{opacity:.3;mix-blend-mode:overlay}
html[data-grain="sky"] .grain-bg .grain2{opacity:.1}
html[data-grain="sky"] .sidebar{background:rgba(255,255,255,.62)!important;border-right-color:rgba(255,255,255,.7)!important;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
html[data-grain="sky"] .sidebar .brand{border-bottom-color:rgba(15,23,42,.08)}
html[data-grain="sky"] .sidebar a.menu:hover{background:rgba(255,255,255,.7)}
/* topbar SOLID (owner 2026-11-08): see-through, it showed the cards scrolling under it as smudges */
html[data-grain="sky"] .topbar{background:#e8ecfa!important;border-bottom:1px solid rgba(15,23,42,.08)!important;
  backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---------- Dark: Midnight (default) / Plum / Ocean ---------- */
html[data-grain="midnight"] .grain-bg .s1{background:radial-gradient(60% 55% at 15% 85%,#3b3f9e 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#1f4fa8 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#2a2d7a 0%,transparent 75%),linear-gradient(135deg,#0d1030,#16285e)}
html[data-grain="midnight"] .grain-bg .s2{background:radial-gradient(60% 55% at 15% 85%,#5a3fa0 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#2b2f8a 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#3b5cc0 0%,transparent 75%),linear-gradient(135deg,#120d2e,#2a1d55)}
html[data-grain="midnight"] .grain-bg .s3{background:radial-gradient(60% 55% at 15% 85%,#1f5f8a 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#2e3c6e 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#3a4fa0 0%,transparent 75%),linear-gradient(135deg,#0b1a2e,#182a4a)}
html[data-grain="midnight"] .grain-bg .b1{background:radial-gradient(circle,rgba(110,100,255,.35),transparent 65%)}
html[data-grain="midnight"] .grain-bg .b2{background:radial-gradient(circle,rgba(40,120,220,.35),transparent 65%)}
html[data-grain="plum"] .grain-bg .s1{background:radial-gradient(60% 55% at 15% 85%,#6b2f8f 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#9b3f8a 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#3f2a7a 0%,transparent 75%),linear-gradient(135deg,#160a24,#3a1440)}
html[data-grain="plum"] .grain-bg .s2{background:radial-gradient(60% 55% at 15% 85%,#8a3a6b 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#5a2f9a 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#b04a6a 0%,transparent 75%),linear-gradient(135deg,#1e0c20,#3a1236)}
html[data-grain="plum"] .grain-bg .s3{background:radial-gradient(60% 55% at 15% 85%,#4a2a8a 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#7a3aa0 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#2f3a8a 0%,transparent 75%),linear-gradient(135deg,#120c2a,#2a1650)}
html[data-grain="plum"] .grain-bg .b1{background:radial-gradient(circle,rgba(200,80,180,.3),transparent 65%)}
html[data-grain="plum"] .grain-bg .b2{background:radial-gradient(circle,rgba(110,70,220,.32),transparent 65%)}
html[data-grain="ocean"] .grain-bg .s1{background:radial-gradient(60% 55% at 15% 85%,#0f6a7a 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#1a4f8a 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#0d3f5a 0%,transparent 75%),linear-gradient(135deg,#06161e,#0c2a3a)}
html[data-grain="ocean"] .grain-bg .s2{background:radial-gradient(60% 55% at 15% 85%,#1a7a6a 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#0f5f8a 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#2a4a8a 0%,transparent 75%),linear-gradient(135deg,#071a1a,#0c2836)}
html[data-grain="ocean"] .grain-bg .s3{background:radial-gradient(60% 55% at 15% 85%,#2a5a9a 0%,transparent 70%),radial-gradient(55% 60% at 85% 20%,#0f7a8a 0%,transparent 72%),radial-gradient(70% 70% at 45% 40%,#1a3a6a 0%,transparent 75%),linear-gradient(135deg,#081424,#10283e)}
html[data-grain="ocean"] .grain-bg .b1{background:radial-gradient(circle,rgba(30,180,190,.28),transparent 65%)}
html[data-grain="ocean"] .grain-bg .b2{background:radial-gradient(circle,rgba(40,110,220,.3),transparent 65%)}
html:is([data-grain="midnight"],[data-grain="plum"],[data-grain="ocean"]) .grain-bg .grain{opacity:.32;mix-blend-mode:soft-light}
/* solid topbar per colour (close to the see-through sidebar's look; nothing shows through it) */
html[data-grain="midnight"] .topbar{background:#151a3a!important}
html[data-grain="plum"] .topbar{background:#22132e!important}
html[data-grain="ocean"] .topbar{background:#0c2232!important}
html:is([data-grain="midnight"],[data-grain="plum"],[data-grain="ocean"]) .grain-bg .grain2{opacity:.1}

/* theme menu: a colour dot per choice */
.theme-opt .tdot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px;border:1px solid rgba(127,127,127,.35)}
.theme-opt .tdot.beige{background:#f5efe4}
.theme-opt .tdot.sky{background:linear-gradient(135deg,#8a8ff0,#4a8fd8 60%,#a7b3c9)}
.theme-opt .tdot.midnight{background:linear-gradient(135deg,#16285e,#3b3f9e)}
.theme-opt .tdot.plum{background:linear-gradient(135deg,#3a1440,#9b3f8a)}
.theme-opt .tdot.ocean{background:linear-gradient(135deg,#0c2a3a,#0f7a8a)}

/* menus must be readable over the page (Glass had 50% see-through menus) */
html[data-theme="glass"] .dropdown-menu{background:rgba(14,17,34,.95)!important;border-color:rgba(255,255,255,.14)!important;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 16px 40px rgba(0,0,0,.45)}
html[data-theme="glass"] .dropdown-header{color:#929fb8}