/* Sora Logo Generator — modern, minimal, animated */
.slg-wrap { --bg:#0b0f14; --fg:#e8f0ff; --muted:#90a4b8; --accent:#6aa8ff; --card:#0f141b; --ring:#1f6fff; color:var(--fg); }
.slg-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background: linear-gradient(180deg, #0b0f14, #0a0d12); padding: 32px; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.slg-headline h2 { font-size: 34px; margin: 0 0 8px; letter-spacing: .2px; }
.slg-headline p { margin: 0; color: var(--muted); }
.pulse-dot { width: 10px; height: 10px; background: var(--accent); display: inline-block; border-radius: 999px; box-shadow: 0 0 0 0 rgba(106,168,255,.8); animation: pulse 2s infinite; vertical-align: middle; margin-right: 8px; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(106,168,255,.7);} 70%{box-shadow:0 0 0 12px rgba(106,168,255,0);} 100%{box-shadow:0 0 0 0 rgba(106,168,255,0);} }

.slg-input-wrap { display:flex; gap:10px; margin-top:18px; background: var(--card); padding: 12px; border-radius: 16px; border:1px solid rgba(255,255,255,.06); align-items:center; }
.slg-input { flex:1; background: transparent; border:0; outline:none; color:var(--fg); font-size:16px; padding: 10px; }
.slg-input:focus { outline: none; }
.slg-generate { position: relative; overflow:hidden; border:0; background: linear-gradient(135deg, #5c8cff, #43e7f0); color:#061123; font-weight:700; padding: 12px 18px; border-radius: 12px; cursor:pointer; transform: translateZ(0); }
.slg-generate .ripple { position:absolute; inset:0; background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.5), transparent 40%); opacity:0; transition: opacity .4s; }
.slg-generate:active .ripple { opacity:1; transition:none; }

.slg-tips { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.slg-tips .chip { background: rgba(255,255,255,.06); color: var(--fg); padding:6px 10px; border-radius: 999px; font-size: 12px; cursor:pointer; border:1px solid rgba(255,255,255,.08); }
.slg-tips .chip:hover { background: rgba(255,255,255,.1); }

.slg-stage { margin-top:24px; background: radial-gradient(1200px 400px at 20% -10%, rgba(74, 110, 255, .15), transparent), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); border-radius: 18px; padding: 24px; position: relative; overflow:hidden; }
.builder { min-height: 340px; display:grid; place-items:center; position: relative; }
.sparkles { position:absolute; inset:0; pointer-events:none; background: radial-gradient(800px 200px at 80% 10%, rgba(67,231,240,.08), transparent), radial-gradient(600px 200px at 20% 90%, rgba(92,140,255,.08), transparent); filter: blur(12px); mix-blend-mode: screen; animation: shimmer 6s linear infinite; }
@keyframes shimmer { 0%{transform:translateX(-3%)} 50%{transform:translateX(3%)} 100%{transform:translateX(-3%)} }

.loader { position: absolute; bottom: 24px; width: 160px; display:flex; gap:6px; opacity:0; transform: translateY(8px); transition: all .4s ease; }
.loading .loader { opacity:1; transform: translateY(0); }
.loader .bar { flex:1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow:hidden; }
.loader .bar::after { content:""; display:block; height: 100%; width: 0%; background: linear-gradient(90deg, #5c8cff, #43e7f0); animation: load 2.4s infinite; }
.loader .bar:nth-child(2)::after { animation-delay: .2s; }
.loader .bar:nth-child(3)::after { animation-delay: .4s; }
@keyframes load { 0%{width:0%} 50%{width:95%} 100%{width:0%} }

.result.hidden { display:none; }
.result .logo-img { max-width: 80%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.06); animation: pop .6s ease both; }
@keyframes pop { 0%{transform: scale(.96); opacity:0} 100%{transform: scale(1); opacity:1} }
.actions { display:flex; gap:10px; margin-top: 16px; justify-content:center; }
.btn { background: rgba(255,255,255,.1); padding: 10px 14px; border-radius: 10px; color: var(--fg); text-decoration:none; border:1px solid rgba(255,255,255,.12); }
.btn:hover { background: rgba(255,255,255,.16); }

.slg-mylogos, .slg-gallery { margin-top: 28px; }
.slg-mylogos h3, .slg-gallery h3 { margin: 0 0 12px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; }
.card { background: var(--card); padding:8px; border-radius: 14px; border:1px solid rgba(255,255,255,.06); }
.card img { width:100%; height:auto; display:block; border-radius: 10px; }
.card figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Admin preview tweaks */
.slg-admin-wrap .slg-wrap { margin-top:16px; }