/* oaf ai — studio upgrades (loaded last) */
:root { --x-grad: linear-gradient(120deg, #FF7A59 0%, #FF4F8B 48%, #7C6CFF 100%); --x-ease: cubic-bezier(.22, 1, .36, 1); }
html { scroll-behavior: smooth; }

/* images fade in instead of popping */
#feed .tile img { opacity: 0; transition: opacity .55s var(--x-ease), transform .8s var(--x-ease), filter .4s !important; }
#feed .tile img.x-in { opacity: 1; }
#feed .tile.is-fresh { animation: x-reveal .7s var(--x-ease) both; }
@keyframes x-reveal { from { opacity: 0; transform: scale(.96); filter: blur(10px) saturate(1.4); } to { opacity: 1; transform: none; filter: none; } }

/* rendering tiles: glow, stage text and progress */
#feed .tile.is-pending { position: relative; overflow: hidden; isolation: isolate; }
#feed .tile.is-pending .x-glow {
  position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255,122,89,.0), rgba(255,79,139,.35), rgba(124,108,255,.35), rgba(255,122,89,.0) 70%);
  filter: blur(40px); animation: x-spin 6s linear infinite; opacity: .55;
}
@keyframes x-spin { to { transform: rotate(1turn); } }
#feed .tile.is-pending .x-stage {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 12px; letter-spacing: .02em;
  color: rgba(255,255,255,.75); animation: x-pulse 1.8s ease-in-out infinite;
}
@keyframes x-pulse { 50% { opacity: .45; } }
#feed .tile.is-pending .x-prog { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
#feed .tile.is-pending .x-prog i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, .03)); background: var(--x-grad); transition: transform .45s linear; box-shadow: 0 0 12px rgba(255,79,139,.6); }
#feed .tile.is-pending .pending-label { padding-bottom: 18px; }

/* generate button while sending */
#generate.is-busy { pointer-events: none; }
#generate.is-busy > span:first-child::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: x-spin .7s linear infinite; }

/* composer extras */
.x-tools { display: contents; }
.x-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; color: inherit; }
.x-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ex-btn { background: linear-gradient(120deg, rgba(255,122,89,.18), rgba(124,108,255,.18)); border-color: rgba(255,79,139,.45); }
.composer-main { position: relative; }
.x-count { position: absolute; right: 12px; bottom: -18px; font-size: 11px; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; pointer-events: none; }
.x-count.is-over { color: #ff6b6b; }
@media (max-width: 640px) { .x-hide-sm { display: none; } }

/* history popover */
.hist-pop { position: fixed; z-index: 60; width: min(380px, calc(100vw - 24px)); max-height: 50vh; overflow: auto; padding: 8px; border-radius: 18px; background: rgba(16,14,34,.96); border: 1px solid rgba(153,144,221,.25); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); backdrop-filter: blur(18px); animation: x-pop .22s var(--x-ease); }
@keyframes x-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.hist-h { padding: 6px 10px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); }
.hist-pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; }
.hist-pop button:hover { background: rgba(255,255,255,.06); }
.hist-pop p { padding: 8px 12px; margin: 0; font-size: 13px; }

/* Explore sheet */
dialog.explore { width: min(1080px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; display: none; flex-direction: column; border-radius: 26px; }
dialog.explore[open] { display: flex; animation: x-pop .3s var(--x-ease); }
.ex-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 8px; }
.ex-head h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; background: var(--x-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ex-head p { margin: 4px 0 0; font-size: 13.5px; }
.ex-tabs { display: flex; gap: 6px; padding: 8px 24px 14px; overflow-x: auto; scrollbar-width: none; }
.ex-tabs::-webkit-scrollbar { display: none; }
.ex-tabs button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(153,144,221,.25); background: rgba(255,255,255,.03); color: rgba(255,255,255,.75); font: inherit; font-size: 13px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ex-tabs button:hover { color: #fff; border-color: rgba(255,79,139,.5); }
.ex-tabs button.is-on { background: var(--x-grad); color: #fff; border-color: transparent; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 4px 24px 28px; overflow: auto; }
.ex-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(153,144,221,.18); background: rgba(255,255,255,.03); color: inherit; font: inherit; cursor: pointer; animation: x-rise .5s var(--x-ease) both; animation-delay: var(--d); transition: transform .35s var(--x-ease), border-color .3s, box-shadow .35s; }
@keyframes x-rise { from { opacity: 0; transform: translateY(14px); } }
.ex-card:hover { transform: translateY(-4px); border-color: rgba(255,79,139,.5); box-shadow: 0 24px 50px -24px rgba(255,79,139,.55); }
.ex-art { position: relative; display: grid; place-items: center; height: 130px; background:
  radial-gradient(120% 90% at 20% 10%, var(--c1), transparent 60%),
  radial-gradient(120% 90% at 90% 100%, var(--c2), transparent 60%),
  linear-gradient(var(--a), #16142B, #0A0818); overflow: hidden; }
.ex-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s var(--x-ease); }
.ex-card:hover .ex-art::after { transform: translateX(100%); }
.ex-ratio { height: 70%; max-width: 60%; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.7); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); }
.ex-tag { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: rgba(0,0,0,.35); color: #fff; }
.ex-txt { display: grid; gap: 3px; padding: 12px 14px 14px; }
.ex-txt b { font-weight: 600; font-size: 14.5px; }
.ex-txt small { font-size: 12.5px; color: rgba(255,255,255,.6); }
.ex-use { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff; color: #16142B; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s var(--x-ease); }
.ex-card:hover .ex-use, .ex-card:focus-visible .ex-use { opacity: 1; transform: none; }
@media (max-width: 640px) {
  dialog.explore { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .ex-head, .ex-tabs, .ex-grid { padding-left: 16px; padding-right: 16px; }
  .ex-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ex-art { height: 100px; }
  .ex-use { opacity: 1; transform: none; }
}

.x-vid-ex { display: inline-flex; align-items: center; gap: 6px; }
.x-vid-ex svg, .x-animate svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.x-animate svg { fill: currentColor; stroke: none; }

/* viewer: arrows and slide */
.viewer-img { position: relative; }
.x-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,8,24,.55); backdrop-filter: blur(10px); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .0; transition: opacity .25s, background .2s, transform .2s var(--x-ease); z-index: 2; }
.x-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-prev { left: 14px; } .x-next { right: 14px; }
.viewer-img:hover .x-nav, .x-nav:focus-visible { opacity: 1; }
.x-nav:hover { background: rgba(255,79,139,.6); transform: scale(1.06); }
@media (hover: none) { .x-nav { opacity: .85; width: 38px; height: 38px; } }
#viewer-img.x-slide-l { animation: x-sl .38s var(--x-ease); }
#viewer-img.x-slide-r { animation: x-sr .38s var(--x-ease); }
@keyframes x-sl { from { opacity: .2; transform: translateX(40px); } }
@keyframes x-sr { from { opacity: .2; transform: translateX(-40px); } }

/* Explore photos + super-admin editing */
.ex-art.has-img { background: #16142B; }
.ex-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s var(--x-ease), transform .9s var(--x-ease); }
.ex-art img.x-in { opacity: 1; transform: none; }
.ex-card:hover .ex-art img { transform: scale(1.06); }
.ex-art.has-img .ex-tag { z-index: 1; backdrop-filter: blur(6px); }
.ex-art.has-img::before { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(10,8,24,.55)); z-index: 1; pointer-events: none; }
.ex-art { height: 150px; }
.ex-use { z-index: 2; }
.ex-card.is-off { opacity: .5; }
.ex-edit { position: absolute; top: 8px; right: 52px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(10,8,24,.7); color: #fff; cursor: pointer; }
.ex-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ex-edit:hover { background: #FF4F8B; }
.ex-add .ex-art { display: grid; place-items: center; background: rgba(255,255,255,.03); border-bottom: 1px dashed rgba(153,144,221,.3); }
.ex-add .ex-art b { font-size: 40px; font-weight: 300; color: rgba(255,255,255,.6); }
dialog.ex-editor { width: min(560px, calc(100vw - 24px)); }
.exe { display: grid; gap: 12px; padding: 4px; }
.exe h3 { margin: 0; font-size: 20px; }
.exe label { display: grid; gap: 5px; font-size: 12.5px; color: rgba(255,255,255,.65); }
.exe input:not([type=checkbox]), .exe select, .exe textarea { width: 100%; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(153,144,221,.25); background: rgba(0,0,0,.25); color: #fff; font: inherit; font-size: 14px; }
.exe textarea { resize: vertical; line-height: 1.45; }
.exe-row { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 10px; }
.exe-photo { grid-template-columns: 160px 1fr; align-items: center; cursor: pointer; }
.exe-img { display: grid; place-items: center; width: 160px; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px dashed rgba(153,144,221,.3); font-size: 12px; }
.exe-img img { width: 100%; height: 100%; object-fit: cover; }
.exe-photo .btn-ghost { justify-self: start; }
.exe-chk { display: flex !important; align-items: center; gap: 8px; color: #fff !important; font-size: 14px !important; }
.exe-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
@media (max-width: 640px) { .exe-row { grid-template-columns: 1fr 1fr; } .exe-photo { grid-template-columns: 1fr; } .ex-art { height: 110px; } }

@media (prefers-reduced-motion: reduce) {
  #feed .tile img, .ex-card, .hist-pop, dialog.explore[open], #feed .tile.is-fresh, #viewer-img { animation: none !important; transition: none !important; }
  #feed .tile.is-pending .x-glow, #feed .tile.is-pending .x-stage { animation: none; }
}

.ex-card > * { flex: none; }
.ex-grid { align-content: start; grid-auto-rows: max-content; }
dialog.explore { background: #100E22; }

/* Looks (free colour grades) */
dialog.looks { width: min(1240px, calc(100vw - 20px)); height: min(820px, calc(100dvh - 20px)); max-width: none; max-height: none; padding: 0; border: 1px solid rgba(153,144,221,.22); border-radius: 24px; background: #0B0919; color: #fff; overflow: hidden; }
dialog.looks[open] { display: grid; grid-template-columns: 1fr 340px; animation: x-pop .3s var(--x-ease); }
dialog.looks::backdrop { background: rgba(5,4,14,.75); backdrop-filter: blur(6px); }
.lk-stage { position: relative; display: grid; place-items: center; padding: 18px; min-height: 0; background: radial-gradient(80% 60% at 50% 40%, rgba(124,108,255,.08), transparent 70%), #07060F; }
.lk-canvas { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); cursor: zoom-in; touch-action: none; }
.lk-hold { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.75); pointer-events: none; }
.lk-busy { position: absolute; top: 16px; left: 50%; translate: -50% 0; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255,79,139,.85); }
dialog.looks.is-loading .lk-stage::after { content: "Loading…"; color: rgba(255,255,255,.6); }
.lk-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid rgba(153,144,221,.15); background: #100E22; }
.lk-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 16px 8px; }
.lk-top h3 { margin: 0; font-size: 20px; background: var(--x-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lk-top p { margin: 2px 0 0; font-size: 12.5px; }
.lk-list { flex: 1; overflow: auto; padding: 4px 16px 8px; }
.lk-g > span { display: block; margin: 10px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.lk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lk-chip { display: grid; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.lk-chip canvas { width: 100%; aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; background: #1a1830; transition: border-color .2s, transform .25s var(--x-ease); }
.lk-chip:hover canvas { transform: translateY(-2px); }
.lk-chip.is-on canvas { border-color: #FF4F8B; box-shadow: 0 0 0 3px rgba(255,79,139,.25); }
.lk-chip b { font-size: 11.5px; font-weight: 500; line-height: 1.2; color: rgba(255,255,255,.8); }
.lk-chip.is-on b { color: #fff; }
.lk-ctrls { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(153,144,221,.15); }
.lk-ctrls label { display: grid; grid-template-columns: 70px 1fr 32px; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.lk-ctrls output { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.5); font-size: 12px; }
.lk-ctrls input[type=range] { width: 100%; accent-color: #FF4F8B; }
.lk-ctrls .lk-chk { display: flex; gap: 8px; }
.lk-foot { display: flex; gap: 8px; padding: 12px 16px 16px; }
.lk-foot button { flex: 1; justify-content: center; }
.x-looks { display: inline-flex; align-items: center; gap: 6px; }
.x-looks svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.x-looks small { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(52,195,160,.18); color: #5ee0bd; }
@media (max-width: 760px) {
  dialog.looks { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  dialog.looks[open] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42dvh) minmax(0, 1fr); }
  .lk-side { border-left: 0; border-top: 1px solid rgba(153,144,221,.15); }
  .lk-row { grid-template-columns: repeat(4, 1fr); }
  .lk-stage { padding: 10px; }
}

/* homepage editor */
body.cms-on #landing [contenteditable="true"] { outline: 1px dashed rgba(255,79,139,.0); outline-offset: 4px; border-radius: 6px; transition: outline-color .2s, background .2s; cursor: text; }
body.cms-on #landing [contenteditable="true"]:hover { outline-color: rgba(255,79,139,.7); background: rgba(255,79,139,.06); }
body.cms-on #landing [contenteditable="true"]:focus { outline: 2px solid #FF4F8B; background: rgba(255,79,139,.08); }
body.cms-on #landing .cms-media { cursor: pointer; outline: 2px dashed rgba(124,108,255,.0); outline-offset: -2px; transition: outline-color .2s, filter .2s; }
body.cms-on #landing .cms-media:hover { outline-color: rgba(124,108,255,.9); filter: brightness(1.08); }
body.cms-on #landing .cms-busy { opacity: .45; animation: x-pulse 1s infinite; }
body.cms-on { padding-bottom: 84px; }
.cms-bar { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(980px, calc(100vw - 24px)); padding: 10px 12px 10px 18px; border-radius: 18px; background: rgba(16,14,34,.94); border: 1px solid rgba(255,79,139,.4); box-shadow: 0 30px 80px -20px rgba(0,0,0,.85); backdrop-filter: blur(18px); animation: x-pop .3s var(--x-ease); }
.cms-bar[hidden] { display: none; }
.cms-l { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.cms-hint { color: rgba(255,255,255,.6); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF4F8B; box-shadow: 0 0 0 4px rgba(255,79,139,.25); animation: x-pulse 1.6s infinite; flex: none; }
.cms-r { display: flex; gap: 8px; flex: none; }
.cms-pop { position: fixed; z-index: 95; left: 50%; bottom: 96px; translate: -50% 0; width: min(560px, calc(100vw - 24px)); padding: 16px; border-radius: 18px; background: rgba(16,14,34,.97); border: 1px solid rgba(153,144,221,.3); box-shadow: 0 30px 80px -20px rgba(0,0,0,.85); display: grid; gap: 10px; }
.cms-pop[hidden] { display: none; }
.cms-pop p { margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }
.cms-pop textarea { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid rgba(153,144,221,.25); background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 13.5px; line-height: 1.5; }
.cms-pop div { display: flex; justify-content: flex-end; gap: 8px; }
.cell-visual.has-media { position: relative; overflow: hidden; }
.cell-visual .cms-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .cms-hint { display: none; } .cms-bar { bottom: 10px; } #cms-demo, #cms-reset { display: none; } }