/* Lumina Marketing Mini UI — Vibrant / Shine Edition
   Drop-in replacement for lmm-ui.css (same selectors, upgraded palette + contrast)
*/
.lmm{
  /* Core palette */
  --bg:#070812;                  /* deep night */
  --bg2:#0a0c1c;                 /* secondary night */
  --fg:#f5f6ff;                  /* high-contrast text */
  --muted:#b7b9d9;               /* readable muted */
  --muted2:#8c90b8;

  /* Surfaces */
  --card:rgba(255,255,255,.07);
  --card2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.14);
  --stroke2:rgba(255,255,255,.10);
  --glow:rgba(255,255,255,.20);

  /* Accents (shine) */
  --acc1:#8b5cf6;                /* electric violet */
  --acc2:#22d3ee;                /* neon cyan */
  --acc3:#f97316;                /* hot orange */
  --gold1:#d6b46a;
  --gold2:#fff1cc;

  /* Radii */
  --r:18px;

  /* Typography */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Global */
.lmm *{box-sizing:border-box}
.lmm a{color:inherit}
.lmm ::selection{background:rgba(34,211,238,.25)}
.lmm :focus-visible{
  outline:2px solid rgba(34,211,238,.65);
  outline-offset:2px;
}

/* Shell */
.lmm-shell{
  max-width:1100px;
  margin:20px auto;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(1200px 680px at 10% -15%, rgba(139,92,246,.55), transparent 55%),
    radial-gradient(900px 640px at 115% 10%, rgba(34,211,238,.40), transparent 62%),
    radial-gradient(700px 520px at 70% 120%, rgba(249,115,22,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--bg), var(--bg2));
  border:1px solid var(--stroke);
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  position:relative;
  overflow:hidden;
}

/* subtle shine film */
.lmm-shell::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(800px 320px at 80% 30%, rgba(255,255,255,.06), transparent 62%);
  pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:.9;
}

/* Header */
.lmm-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;position:relative}
.lmm-brand{display:flex;align-items:center;gap:12px}
.lmm-logo{
  width:44px;height:44px;border-radius:16px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,241,204,1), rgba(214,180,106,.92) 55%, rgba(139,92,246,.35) 100%);
  box-shadow:
    0 12px 32px rgba(214,180,106,.22),
    0 0 0 1px rgba(255,255,255,.14) inset;
}
.lmm-title{
  color:var(--fg);
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.lmm-subtitle{color:var(--muted);font-size:12px;margin-top:2px}
.lmm-credit{
  padding:10px 12px;border-radius:16px;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
  border:1px solid var(--stroke2);
  box-shadow:0 10px 26px rgba(0,0,0,.40);
}
.lmm-credit-label{color:var(--muted2);font-size:11px}
.lmm-credit-value{color:var(--fg);font-weight:800;font-size:16px;margin-top:2px;text-shadow:0 1px 0 rgba(0,0,0,.35)}

/* Stepper */
.lmm-stepper{display:flex;gap:10px;margin:8px 0 16px;position:relative}
.lmm-step{
  flex:1;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--muted);
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
}
.lmm-step::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.10), transparent 65%);
  transform:translateX(-60%);
  transition:transform .55s ease;
  pointer-events:none;
  opacity:.9;
}
.lmm-step:hover::before{transform:translateX(60%)}
.lmm-step:hover{border-color:rgba(34,211,238,.35);box-shadow:0 12px 26px rgba(0,0,0,.35)}
.lmm-step:disabled{opacity:.55;cursor:not-allowed}
.lmm-step--active{
  color:var(--fg);
  background:
    linear-gradient(90deg, rgba(139,92,246,.30), rgba(34,211,238,.22)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.20);
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  transform:translateY(-1px);
}

/* Grid */
.lmm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.lmm-grid{grid-template-columns:1fr}}

/* Cards */
.lmm-card{
  border-radius:var(--r);
  padding:14px;
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(0,0,0,.22);
  border:1px solid var(--stroke2);
  box-shadow:
    0 18px 40px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
}

/* gradient rim + glossy top */
.lmm-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(800px 260px at 15% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(90deg, rgba(139,92,246,.20), rgba(34,211,238,.14), rgba(249,115,22,.10));
  opacity:.85;
  pointer-events:none;
  mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  -webkit-mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  padding:1px;
  box-sizing:border-box;
  border-radius:var(--r);
}

.lmm-card-title{
  color:var(--fg);
  font-weight:800;
  margin-bottom:10px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Fields */
.lmm-field{margin-bottom:12px}
.lmm-field label{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}

.lmm-field input[type=file],
.lmm-field select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color:var(--fg);
  outline:none;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}

.lmm-field input[type=file]::file-selector-button{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(90deg, rgba(139,92,246,.30), rgba(34,211,238,.22));
  color:var(--fg);
  border-radius:12px;
  padding:6px 10px;
  margin-right:10px;
  cursor:pointer;
}

.lmm-field select option{color:#111}

/* Tabs */
.lmm-tabs{display:flex;gap:10px;margin-bottom:10px}
.lmm-tab{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.lmm-tab:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.35);box-shadow:0 12px 24px rgba(0,0,0,.30)}
.lmm-tab--active{
  color:var(--fg);
  background:
    linear-gradient(90deg, rgba(214,180,106,.32), rgba(255,241,204,.16));
  border-color:rgba(255,255,255,.18);
  text-shadow:0 1px 0 rgba(0,0,0,.30);
}

/* Background library */
.lmm-bg-library{display:flex;gap:10px;flex-wrap:wrap}
.lmm-bg-item{
  width:84px;height:84px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  background:rgba(255,255,255,.04);
}
.lmm-bg-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.14), transparent 65%);
  transform:translateX(-60%);
  transition:transform .55s ease;
  pointer-events:none;
  opacity:.85;
}
.lmm-bg-item:hover{
  transform:translateY(-2px) rotateX(3deg) rotateY(-3deg);
  border-color:rgba(34,211,238,.35);
  box-shadow:0 18px 34px rgba(0,0,0,.40);
}
.lmm-bg-item:hover::before{transform:translateX(60%)}
.lmm-bg-item img{width:100%;height:100%;object-fit:cover}
.lmm-bg-item--selected::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(255,241,204,.92);
  border-radius:16px;
  box-shadow:
    0 0 0 3px rgba(214,180,106,.22),
    0 0 26px rgba(255,241,204,.14);
}

/* Actions */
.lmm-actions{display:flex;gap:10px;align-items:center;margin-top:8px}

/* Buttons */
.lmm-btn{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  position:relative;
  overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.lmm-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18), transparent 65%);
  transform:translateX(-60%);
  transition:transform .55s ease;
  pointer-events:none;
  opacity:.85;
}
.lmm-btn:hover::before{transform:translateX(60%)}
.lmm-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(0,0,0,.42);border-color:rgba(255,255,255,.18);filter:saturate(1.12)}
.lmm-btn:active{transform:translateY(0px) scale(.99)}

.lmm-btn-primary{
  background:
    linear-gradient(90deg, rgba(139,92,246,.98), rgba(34,211,238,.92));
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 16px 30px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.lmm-btn-primary:hover{
  box-shadow:
    0 18px 34px rgba(0,0,0,.44),
    0 0 38px rgba(34,211,238,.12),
    0 0 38px rgba(139,92,246,.10);
}
.lmm-btn-ghost{
  background:transparent;
  color:var(--muted);
  border-color:rgba(255,255,255,.10);
  text-shadow:none;
}
.lmm-btn-ghost:hover{color:var(--fg);border-color:rgba(34,211,238,.28)}

/* Help / Notice */
.lmm-help{color:var(--muted);font-size:12px;margin-top:6px}
.lmm-notice{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,241,204,.22);
  background:
    linear-gradient(90deg, rgba(214,180,106,.18), rgba(255,241,204,.08));
  color:rgba(255,241,204,.95);
  font-size:12px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Utility */
.lmm-hide{display:none !important}

/* Preview */
.lmm-preview{
  width:100%;
  aspect-ratio:1/1;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.18);
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(139,92,246,.18), transparent 62%),
    radial-gradient(600px 240px at 80% 10%, rgba(34,211,238,.14), transparent 62%),
    rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.lmm-preview-img,.lmm-preview-video{width:100%;height:100%;object-fit:cover}

/* Skeleton shimmer */
.lmm-skeleton{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  animation:lmm-shimmer 1.2s infinite;
}
@keyframes lmm-shimmer{0%{transform:translateX(-50%)}100%{transform:translateX(50%)}}

/* Themes (swap only variables; everything else stays the same)
   Apply by adding class on the wrapper: <div class="lmm lmm-theme-studio">...
*/
.lmm-theme-studio{
  --bg:#060a14;
  --bg2:#0a1024;
  --acc1:#22d3ee;
  --acc2:#8b5cf6;
  --acc3:#f59e0b;
  --gold1:#d1b06a;
  --gold2:#fff3d0;
}
.lmm-theme-craft{
  --bg:#0e0708;
  --bg2:#140b10;
  --acc1:#f97316;
  --acc2:#22c55e;
  --acc3:#ec4899;
  --gold1:#ddb971;
  --gold2:#fff1d2;
}
.lmm-theme-royal{
  --bg:#070611;
  --bg2:#0c0820;
  --acc1:#a855f7;
  --acc2:#06b6d4;
  --acc3:#fb7185;
  --gold1:#d8b56a;
  --gold2:#fff1cc;
}