@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --accent:#a855f7;
  --bg0:#080614;
  --bg1:#0f0a1f;

  --text: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.54);

  --danger:#ff4d4d;
  --ok:#37d67a;

  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.09);
  --surface3: rgba(0,0,0,.18);
  --border: rgba(255,255,255,.14);
  --border2: rgba(255,255,255,.22);

  --shadow0: 0 1px 0 rgba(255,255,255,.06) inset;
  --shadow1: 0 18px 70px rgba(0,0,0,.55);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  --fs:1;
  --tiltX: 0;
  --tiltY: 0;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Sora','Space Grotesk','Segoe UI Variable','Segoe UI','Helvetica Neue',sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 700px at 18% 10%, rgba(168,85,247,.28), transparent 58%),
    radial-gradient(820px 640px at 92% 20%, rgba(99,102,241,.24), transparent 56%),
    radial-gradient(900px 700px at 60% 92%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  opacity: .35;
  mix-blend-mode: overlay;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background: radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.45));
  opacity: .9;
}

.bg-anim{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 520px at 16% 12%, rgba(168,85,247,.18), transparent 58%),
    radial-gradient(840px 520px at 82% 18%, rgba(56,189,248,.12), transparent 60%),
    linear-gradient(125deg, rgba(168,85,247,.14), rgba(99,102,241,.12), rgba(56,189,248,.10));
  background-size: 220% 220%;
  animation: bgShift 20s ease-in-out infinite, glowPulse 9s ease-in-out infinite;
  opacity:.88;
  mix-blend-mode: screen;
  filter: saturate(1.05) blur(0.2px);
}

@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes glowPulse{
  0%,100%{opacity:.82; filter: saturate(1) blur(0.2px)}
  50%{opacity:.98; filter: saturate(1.08) blur(0.4px)}
}

.app{
  position:relative;
  height:100%;
  padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bot)) calc(16px + var(--safe-left));
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width: 1120px;
  margin: 0 auto;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(480px 120px at 30% 10%, rgba(168,85,247,.08), transparent 65%), rgba(0,0,0,.18);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow0), 0 20px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.statusDot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.35);display:inline-block}
.statusDot.ok{background: #37d67a; box-shadow:0 0 0 6px rgba(55,214,122,.15)}
.statusDot.off{background: #ff4d4d; box-shadow:0 0 0 6px rgba(255,77,77,.12)}
.pill.status{gap:6px}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  user-select:none;
}
.brand .title{
  font-weight:950;
  letter-spacing:-.03em;
  font-size: calc(22px * var(--fs));
}
.brand .subtitle{
  font-size: calc(12px * var(--fs));
  color:var(--muted);
  text-transform: none;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  border-radius:var(--r-pill);
  box-shadow: var(--shadow0), var(--shadow1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:9px 11px;
  border-radius: var(--r-sm);
  font-weight:900;
  letter-spacing:-.01em;
  cursor:pointer;
  user-select:none;
  transition: transform 120ms ease, background 200ms ease, border-color 200ms ease, filter 200ms ease;
}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(168,85,247,.18)}

@media (hover:hover){
  .btn:hover{border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.085)}
}
.btn.primary{
  border-color: rgba(168,85,247,.55);
  background: linear-gradient(180deg, rgba(168,85,247,.98), rgba(99,102,241,.82));
  color: rgba(10,6,18,.98);
  filter: saturate(1.03);
}
.btn.danger{background: rgba(255,77,77,.12); border-color: rgba(255,77,77,.35)}

.btn.link{
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding:10px 8px;
}

.card{
  flex:1;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow0), var(--shadow1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
  position:relative;
}

.chrome{
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow0), var(--shadow1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.entryShell{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:16px;
  align-items:stretch;
}

@media (max-width: 840px){
  .entryShell{grid-template-columns: 1fr;}
}

.entryHero{
  height:100%;
  padding: 18px 18px 20px 18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background:
    radial-gradient(420px 240px at 12% 10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(520px 260px at 88% 12%, rgba(56,189,248,.12), transparent 60%),
    rgba(0,0,0,.24);
  box-shadow: var(--shadow0), var(--shadow1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius: var(--r-pill);
  border:1px solid rgba(255,255,255,.16);
  color: var(--muted);
  background: rgba(255,255,255,.06);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform: uppercase;
  width: fit-content;
}

.heroChips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.heroChip{
  padding:8px 12px;
  border-radius: var(--r-pill);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight:800;
  letter-spacing:-.01em;
}

.sparkGrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:10px}
.sparkCard{
  padding:12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(140deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  box-shadow: var(--shadow0);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sparkCard .label{color: var(--muted); font-size:12px; text-transform: uppercase; letter-spacing:.1em; font-weight:800}
.sparkCard .value{font-weight:900; letter-spacing:-.03em; font-size:18px}

.entryPanel{
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow0), var(--shadow1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.entryPanel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(420px 220px at 80% 0%, rgba(168,85,247,.16), transparent 60%);
  opacity:.7;
}
.entryPanel > *{position:relative}

.footerHint{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size:12px;
  padding: 0 2px;
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(800px 380px at 12% 6%, rgba(168,85,247,.26), transparent 55%),
    radial-gradient(700px 340px at 92% 20%, rgba(99,102,241,.22), transparent 55%);
  opacity:.55;
  mix-blend-mode: screen;
}

.screen{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:14px;
  gap:12px;
}

.screenEntry,
.screenAuth{
  justify-content:center;
}

.screenAdmin{
  justify-content:flex-start;
}

.hero{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 6px 2px;
}
.heroTitle{
  font-size: calc(30px * var(--fs));
  font-weight: 980;
  letter-spacing: -.05em;
  line-height: 1.03;
}
.heroSub{
  color: var(--muted);
  font-size: calc(13px * var(--fs));
  line-height: 1.5;
}

.formCard{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow0), var(--shadow1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

label{font-size:12px; color: var(--muted); font-weight:800; letter-spacing:.02em}
input, textarea, select{
  width:100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 12px 12px;
  outline:none;
  font-size: 16px;
}
input:focus, textarea:focus, select:focus{border-color: rgba(168,85,247,.52); box-shadow: 0 0 0 3px rgba(168,85,247,.16)}
textarea{min-height: 120px; resize: vertical}

.row{display:flex; gap:10px}
.row > *{flex:1}

@media (max-width: 420px){
  .row{flex-direction:column}
}

.hint{color:var(--muted); font-size:12px; line-height:1.45}
.error{color: var(--danger); font-size:13px; font-weight:700}
.ok{color: var(--ok); font-size:13px; font-weight:700}

/* Wrapped player */
.player{
  height:100%;
  position:relative;
  overflow:hidden;
  touch-action: pan-y;
  background:
    radial-gradient(900px 700px at 20% 10%, rgba(168,85,247,.20), transparent 58%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
}

.slides{
  height:100%;
  width:100%;
  position:relative;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(calc(var(--tiltY) * 1deg)) rotateY(calc(var(--tiltX) * 1deg));
  transition: transform 320ms ease;
}

.slide{
  position:absolute;
  inset:0;
  padding: 22px 18px 52px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  opacity:0;
  transform: translateY(28px) scale(.96) rotateX(6deg);
  filter: blur(6px) saturate(.92);
  transition:
    opacity 520ms ease,
    transform 780ms cubic-bezier(.16,.9,.18,1),
    filter 760ms ease;
  will-change: transform, opacity, filter;
}

.slide::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(700px 420px at 16% 18%, rgba(168,85,247,.22), transparent 62%),
    radial-gradient(700px 420px at 88% 22%, rgba(99,102,241,.20), transparent 62%);
  opacity:.75;
  mix-blend-mode: screen;
}
.slide > *{position:relative}

.slide.active{
  opacity:1;
  transform: translateY(0px) scale(1) rotateX(0deg);
  filter: blur(0) saturate(1.02);
}

.slide.entering{opacity:0; transform: translateY(44px) scale(.94) rotateX(8deg); filter: blur(10px) saturate(.9)}
.slide.exiting{opacity:0; transform: translateY(-32px) scale(.94) rotateX(-6deg); filter: blur(8px) saturate(.9)}

.slide.exit-up{opacity:0; transform: translateY(-22px) scale(.985)}
.slide.exit-down{opacity:0; transform: translateY(22px) scale(.985)}

.kicker{font-size: calc(12px * var(--fs)); letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.66)}
.h1{font-size: calc(40px * var(--fs)); font-weight:950; letter-spacing:-.045em; line-height:1.02}
.h2{font-size: calc(26px * var(--fs)); font-weight:950; letter-spacing:-.035em; line-height:1.1}
.p{font-size: calc(16px * var(--fs)); color: rgba(255,255,255,.84); line-height:1.5}

.labels{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-size: calc(12px * var(--fs));
  font-weight:950;
}

.stat{
  font-size: calc(58px * var(--fs));
  font-weight:1000;
  letter-spacing:-.05em;
  line-height:1;
}
.stat .suffix{font-size: calc(18px * var(--fs)); font-weight:900; letter-spacing:-.02em; color: rgba(255,255,255,.78); margin-left:8px}

.grid3{display:grid; grid-template-columns: 1fr; gap:10px}
@media (min-width: 520px){
  .grid3{grid-template-columns: 1fr 1fr 1fr}
}

.mini{
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.20));
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow0);
}
.mini .v{font-size: calc(30px * var(--fs)); font-weight:1000; letter-spacing:-.04em}
.mini .l{font-size: calc(12px * var(--fs)); color: rgba(255,255,255,.75); font-weight:800; letter-spacing:.08em; text-transform:uppercase}

/* Editor preview layout */
.editorShell{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:12px; align-items:start}
@media (max-width: 920px){.editorShell{grid-template-columns:1fr}}
.editorLeft{display:flex; flex-direction:column; gap:12px}
.editorRight{border:1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.22)); border-radius:18px; padding:12px; box-shadow: var(--shadow0), var(--shadow1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-height: 70vh; overflow:auto}
.previewHeader{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px}
.previewScroller{display:flex; flex-direction:column; gap:10px}
.previewCard{border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(0,0,0,.18)); box-shadow: var(--shadow0)}
.previewCard .meta{display:flex; justify-content:space-between; align-items:center; color: var(--muted); font-size:12px; margin-bottom:6px}
.previewCard .headline{font-weight:900; font-size:18px; letter-spacing:-.03em; margin-bottom:6px}
.previewCard .sub{color: var(--muted); font-size:13px; margin-bottom:6px}
.previewChips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.previewChip{padding:6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); font-size:11px; font-weight:800; color: var(--muted)}
.previewStat{font-size:28px; font-weight:1000; letter-spacing:-.04em}
.previewStatsGrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:8px}
.previewImg{width:100%; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16)}
.previewImg img{width:100%; display:block}

/* Admin shell */
.adminHeader{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.2)); box-shadow: var(--shadow0), var(--shadow1)}
.headerActions .btn{flex:0 0 auto}
.adminBody{display:grid; grid-template-columns: 220px 1fr; gap:12px; height:100%; min-height:0}
@media(max-width: 960px){.adminBody{grid-template-columns: 1fr}}
.adminSidebar{display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(0,0,0,.18)); box-shadow: var(--shadow0)}
.adminWorkspace{border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.2)); box-shadow: var(--shadow0), var(--shadow1); overflow:auto}
.wrapCard{border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(0,0,0,.18)); display:flex; flex-direction:column; gap:8px; box-shadow: var(--shadow0)}
.wrapMeta{display:flex; flex-direction:column; gap:2px}
.wrapTitle{font-weight:900; letter-spacing:-.02em}

/* 3-column editor */
.editorGrid{display:grid; grid-template-columns: 240px minmax(320px, 1fr) 320px; gap:12px; height:100%; min-height:0}
@media(max-width: 1120px){.editorGrid{grid-template-columns: 200px 1fr 280px}}
@media(max-width: 900px){.editorGrid{grid-template-columns:1fr; grid-template-rows:auto;}}
.editorColumn{border:1px solid rgba(255,255,255,.12); border-radius:16px; background: linear-gradient(155deg, rgba(255,255,255,.05), rgba(0,0,0,.2)); box-shadow: var(--shadow0); padding:10px; display:flex; flex-direction:column; gap:10px; min-height:0}
.slideListCol{overflow:auto}
.slideNav{display:flex; flex-direction:column; gap:8px}
.slideNavItem{border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px; background: rgba(255,255,255,.04); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; transition: border 160ms ease, background 160ms ease}
.slideNavItem.active{border-color: rgba(168,85,247,.45); background: linear-gradient(150deg, rgba(168,85,247,.16), rgba(0,0,0,.2))}
.slideNavLabel{font-weight:900; letter-spacing:-.02em}
.slideNavMeta{display:flex; flex-direction:column; gap:2px}
.canvasCol{gap:10px}
.liveCanvas{border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:12px; background: rgba(0,0,0,.22); min-height:300px; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden}
.liveCanvas.mobile{aspect-ratio: 9/16; max-width: 420px; margin: 0 auto}
.inspectorCol{gap:10px; overflow:auto}
.animPicker{display:flex; flex-direction:column; gap:8px}
.animGrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:8px}
.slideNav .dragHandle{display:none}

.wrapCard .row .btn{flex:1}

.imgWrap{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow0), var(--shadow1);
  position:relative;
}
.imgWrap img{
  width:100%;
  height:auto;
  display:block;
  opacity:0;
  transform: scale(1.04) translateY(10px);
  transition: opacity 440ms ease, transform 980ms cubic-bezier(.16,.9,.18,1);
  will-change: transform, opacity;
}
.imgWrap img.loaded{
  opacity:1;
  transform: scale(1);
}

.progress{
  position:absolute;
  left:0; right:0;
  bottom: calc(10px + var(--safe-bot));
  display:flex;
  justify-content:center;
  gap:8px;
  pointer-events:none;
}
.progress::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: min(360px, calc(100% - 28px));
  height: 28px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow0), var(--shadow1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .95;
  animation: floatPulse 4.8s ease-in-out infinite;
}
.dot{
  width:7px; height:7px;
  border-radius:999px;
  background: rgba(255,255,255,.25);
  transform: scale(.9);
  transition: transform 240ms ease, background 240ms ease;
}
.dot{position:relative; z-index:1}
.dot.active{background: rgba(255,255,255,.92); transform: scale(1.25)}

.overlayTop{
  position:absolute;
  left: 0; right: 0; top: 0;
  padding: calc(10px + var(--safe-top)) 12px 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  pointer-events:none;
}
.overlayTop .pill{pointer-events:auto}
.overlayTop .pill{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
}

.overlayTop .btn{
  padding: 9px 11px;
  border-radius: var(--r-sm);
}

.stagger > span{
  display:inline-block;
  opacity:0;
  transform: translateY(16px) rotate(0.001deg);
  animation: stIn 650ms cubic-bezier(.2,.85,.2,1) forwards;
  will-change: transform, opacity;
}
@keyframes stIn{
  to{opacity:1; transform: translateY(0px)}
}

@keyframes revealUp{
  0%{opacity:0; transform: translateY(26px) scale(.96); filter: blur(6px)}
  55%{filter: blur(0px)}
  100%{opacity:1; transform: translateY(0px) scale(1); filter: blur(0px)}
}

@keyframes floatPulse{
  0%,100%{transform: translateY(0px)}
  50%{transform: translateY(-6px)}
}

/* Admin dashboard */
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tabs{
  padding: 6px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  box-shadow: var(--shadow0);
}
.tab{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  font-weight:900;
  font-size: 13px;
  letter-spacing:-.01em;
  user-select:none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.tab.active{background: linear-gradient(160deg, rgba(168,85,247,.20), rgba(99,102,241,.18)); border-color: rgba(168,85,247,.45); color: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(0,0,0,.35)}
@media (hover:hover){
  .tab:hover{background: rgba(255,255,255,.095); border-color: rgba(255,255,255,.22)}
}

.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.tr{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
}

.listItem{
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(155deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  border-radius: 14px;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow: var(--shadow0);
}
@media (hover:hover){
  .listItem:hover{border-color: rgba(168,85,247,.30); background: linear-gradient(155deg, rgba(168,85,247,.08), rgba(0,0,0,.18))}
}
.listItem .meta{display:flex; flex-direction:column; gap:2px}
.listItem .meta .k{font-weight:1000; letter-spacing:-.02em}
.listItem .meta .s{font-size:12px; color: rgba(255,255,255,.75)}

.dragHandle{
  padding: 8px 10px;
  border-radius: 12px;
  border:1px dashed rgba(255,255,255,.22);
  color: rgba(255,255,255,.78);
  font-weight:900;
  user-select:none;
}

.slideEditorItem{
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(0,0,0,.20));
  border-radius: 14px;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mutedSmall{font-size:12px; color: rgba(255,255,255,.7)}

@media (min-width: 900px){
  .app{max-width: 1120px; margin: 0 auto}
  .screen{padding:20px}
}