/* ROBOAIBHARAT™ Studio — store, prompts and surprise-link maker */
:root { --script: "Dancing Script", cursive; --fun: "Baloo 2", var(--font); }

/* ---------- Cover art themes (used when no image is uploaded) ---------- */
.cover { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 1; color: #fff; display: flex; align-items: flex-end;
  padding: 16px; isolation: isolate; background: var(--cv, linear-gradient(135deg,#ff5f8f,#c2185b)); }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px),
                    radial-gradient(circle at 70% 60%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
                    radial-gradient(circle at 40% 80%, rgba(255,255,255,.35) 0 1px, transparent 2px);
  background-size: 60px 60px, 44px 44px, 30px 30px; }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.45)); }
.cover .emoji { position: absolute; top: 50%; left: 50%; font-size: clamp(3rem, 9vw, 4.6rem); transform: translate(-50%,-62%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.c-card:hover .cover .emoji, .cover:hover .emoji { transform: translate(-50%,-68%) scale(1.12) rotate(-6deg); }
.cover .cover-title { font-family: var(--script); font-size: 1.45rem; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.cover img.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.t-rose     { --cv: linear-gradient(135deg,#ff7aa2,#d81b60 55%,#880e4f); }
.t-royal    { --cv: radial-gradient(circle at 50% 30%,#b8862b 0,#7a0f2e 45%,#3d0717); }
.t-starry   { --cv: radial-gradient(circle at 70% 20%,#4a3aa8 0,#1a1554 45%,#070b24); }
.t-marigold { --cv: linear-gradient(135deg,#ffd54f,#ff9800 50%,#e65100); }
.t-diya     { --cv: radial-gradient(circle at 50% 75%,#ffb74d 0,#d84315 30%,#3b0d3f 75%); }
.t-holi     { --cv: conic-gradient(from 30deg,#ff4081,#ffea00,#00e5ff,#76ff03,#d500f9,#ff4081); }
.t-moon     { --cv: radial-gradient(circle at 75% 25%,#fff8e1 0 6%,#1b5e7a 7%,#0d2b45 70%); }
.t-snow     { --cv: linear-gradient(160deg,#0f5132,#14532d 50%,#9f1239); }
.t-rakhi    { --cv: linear-gradient(135deg,#ff9933,#ff5e62 55%,#c2185b); }
.t-sunshine { --cv: linear-gradient(135deg,#ffe259,#ffa751 45%,#26c6da); }
.t-ocean    { --cv: linear-gradient(135deg,#4fc3f7,#0277bd 55%,#004d40); }
.t-vintage  { --cv: linear-gradient(135deg,#f3d9a4,#c48b4a 55%,#6d3b1a); }
.t-pastel   { --cv: linear-gradient(135deg,#fbc2eb,#c3a6f0 50%,#8fb8f5); }
.t-party    { --cv: linear-gradient(135deg,#f06292,#ab47bc 50%,#4527a0); }
.t-forest   { --cv: linear-gradient(135deg,#aed581,#43a047 50%,#1b5e20); }
.t-rain     { --cv: linear-gradient(160deg,#a1c4fd,#6f86d6 60%,#48c6ef); }

/* ---------- Studio hero ---------- */
.studio-hero { position: relative; overflow: hidden; color: #fff; padding: 64px 0 72px;
  background: radial-gradient(1200px 600px at 10% -10%, #ff4d8d55, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, #7c4dff66, transparent 60%),
              radial-gradient(700px 500px at 50% 120%, #ff980055, transparent 60%), #140a2e; }
.studio-hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); }
.studio-hero h1 .script { font-family: var(--script); font-weight: 700; color: #ffb3cd; font-size: 1.15em; }
.studio-hero .lead { color: #e7defc; font-size: 1.15rem; max-width: 560px; }
.studio-hero .btn { background: #ff3d7f; }
.studio-hero .btn-ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.hero-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 920px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.floaters span { position: absolute; font-size: 2rem; opacity: .5; animation: floatUp 12s linear infinite; pointer-events: none; }
@keyframes floatUp { from { transform: translateY(40px) rotate(0); opacity: 0; } 10% { opacity: .55; } to { transform: translateY(-520px) rotate(25deg); opacity: 0; } }

/* Occasion finder */
.finder { background: rgba(255,255,255,.96); color: var(--ink); border-radius: 22px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.finder h3 { font-family: var(--fun); font-size: 1.3rem; margin-bottom: 4px; }
.finder .step-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #d6336c; margin: 14px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 13px; font: inherit; font-size: .9rem; cursor: pointer;
  color: var(--ink); transition: transform .15s, border-color .15s, background .15s; }
.chip:hover { transform: translateY(-2px); border-color: #d6336c; }
.chip.on { background: #d6336c; border-color: #d6336c; color: #fff; }
.finder-results { margin-top: 16px; display: grid; gap: 10px; }
.finder-results a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #fff5f8; color: var(--ink); animation: pop .35s both; }
.finder-results a:hover { text-decoration: none; background: #ffe3ec; }
.finder-results .mini { width: 52px; height: 52px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.6rem; background: var(--cv); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* Festival countdown strip */
.fest-strip { background: linear-gradient(90deg,#3b0d3f,#b3470b,#3b0d3f); background-size: 200% 100%; animation: shimmer 8s linear infinite; color: #fff; }
.fest-strip .container { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; text-align: center; }
.fest-strip strong { font-family: var(--fun); font-size: 1.15rem; }
.fest-strip .btn { background: #ffb300; color: #3b0d3f; }
@keyframes shimmer { to { background-position: 200% 0; } }

/* Section headings */
.s-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.s-head h2 { margin: 0; }
.s-head .kick { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #d6336c; margin-bottom: 4px; }

/* Horizontal rail on mobile, grid on desktop */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 720px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: visible; margin: 0; padding-inline: 0; } }

/* Creation card */
.c-card { background: var(--card); border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 10px; display: flex;
  flex-direction: column; transition: transform .25s, box-shadow .25s; color: var(--ink); }
.c-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,18,58,.14); }
.c-card a.c-link { color: inherit; }
.c-card a.c-link:hover { text-decoration: none; }
.c-body { padding: 12px 6px 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.c-body h3 { font-size: 1.02rem; margin: 0; }
.c-body .tag { font-size: .85rem; color: var(--ink-soft); }
.c-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.c-price { font-weight: 700; }
.c-price small { font-weight: 500; color: var(--muted); }
.kind-badge { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.countdown-badge { position: absolute; top: 12px; right: 12px; background: #ffb300; color: #3b0d3f; padding: 4px 10px; border-radius: 99px; font-size: .75rem; font-weight: 800; }
.play-btn { position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: #d6336c;
  font-size: 1.1rem; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.25); display: grid; place-items: center; transition: transform .2s; }
.play-btn:hover { transform: scale(1.08); }
.play-btn.playing { background: #d6336c; color: #fff; }
.eq { display: none; gap: 3px; align-items: flex-end; height: 18px; position: absolute; left: 14px; bottom: 16px; }
.playing-card .eq { display: flex; }
.eq i { width: 4px; background: #fff; border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s; } .eq i:nth-child(3) { animation-delay: .4s; } .eq i:nth-child(4) { animation-delay: .1s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 18px; } }
.like-btn { border: 0; background: #fff0f5; color: #d6336c; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.like-btn.liked { background: #d6336c; color: #fff; }
.like-btn.burst { animation: burst .5s; }
@keyframes burst { 30% { transform: scale(1.3); } 60% { transform: scale(.9); } }

/* Filters */
.filter-bar { display: grid; gap: 12px; margin-bottom: 24px; }
.filter-bar .chips a.chip { text-decoration: none; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; }

/* Creation detail */
.detail-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.detail-grid .cover { aspect-ratio: 1; }
.detail-grid .cover .cover-title { font-size: 2.2rem; }
.lyrics { font-family: var(--fun); white-space: pre-line; background: #fff7fa; border-left: 4px solid #d6336c; border-radius: 12px; padding: 16px 18px; font-size: 1.05rem; line-height: 1.7; }
.sample-player { width: 100%; margin-top: 12px; border-radius: 14px; }
.sample-soon { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--accent-soft); color: #a61e4d; font-weight: 600; font-size: .92rem; }
.get-list { list-style: none; padding: 0; margin: 0 0 16px; }
.get-list li { padding: 7px 0 7px 28px; position: relative; }
.get-list li::before { content: "✨"; position: absolute; left: 0; }
.buy-box { position: sticky; top: 90px; }

/* How it works */
.steps3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: s; }
.steps3 > div { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; position: relative; }
.steps3 > div::before { counter-increment: s; content: counter(s); position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; border-radius: 50%;
  background: #d6336c; color: #fff; display: grid; place-items: center; font-weight: 800; }

/* Prompt cards */
.p-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.p-card .cover { border-radius: 0; aspect-ratio: 16/10; }
.p-card .cover .emoji { font-size: 3rem; }
.p-card .p-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p-card h3 { font-size: 1rem; margin: 0; }
.p-card h3 a { color: var(--ink); }
.p-card .snippet { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--ink-soft); background: #f6f5fb; border-radius: 10px; padding: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.p-card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.copy-btn { border: 0; border-radius: 10px; padding: 8px 14px; background: #d6336c; color: #fff; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
.copy-btn.done { background: var(--green); }
.hot { color: #e8590c; font-weight: 700; font-size: .78rem; }

/* Surprise teaser on home */
.surprise-teaser { background: radial-gradient(800px 400px at 0% 0%, #ffd6e5, transparent 60%), radial-gradient(800px 400px at 100% 100%, #e5dbff, transparent 60%), #fff;
  border-radius: 28px; padding: 32px; display: grid; gap: 28px; align-items: center; border: 1px solid #f7d2e0; }
@media (min-width: 900px) { .surprise-teaser { grid-template-columns: 1fr 320px; padding: 44px; } }
.type-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 18px 0; }
.type-tile { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 10px 12px; border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .92rem; transition: transform .15s; }
.type-tile:hover { text-decoration: none; transform: translateY(-2px); border-color: #d6336c; }
.type-tile span { font-size: 1.4rem; }

/* Phone mockup (live preview) */
.phone { width: 280px; max-width: 100%; margin: 0 auto; aspect-ratio: 9/18.5; border-radius: 42px; padding: 12px; background: #111; box-shadow: 0 30px 70px rgba(40,0,60,.35), inset 0 0 0 2px #333; position: relative; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 80px; height: 20px; border-radius: 12px; background: #000; z-index: 3; }
.phone .screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 24px 18px; color: #fff; background: var(--cv); transition: background .5s; }
.phone .screen .p-emoji { font-size: 3.4rem; animation: bob 2.4s ease-in-out infinite; }
.phone .screen .p-to { font-family: var(--script); font-size: 1.6rem; margin: 6px 0; }
.phone .screen .p-q { font-family: var(--fun); font-weight: 700; font-size: 1.2rem; line-height: 1.25; margin: 10px 0 16px; }
.phone .p-btns { display: flex; gap: 10px; position: relative; min-height: 44px; width: 100%; justify-content: center; }
.phone .p-btns button { border: 0; border-radius: 99px; padding: 10px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.phone .p-yes { background: #fff; color: #d6336c; }
.phone .p-no { background: rgba(255,255,255,.25); color: #fff; transition: transform .25s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* Wizard */
.wizard { display: grid; gap: 32px; align-items: start; }
@media (min-width: 980px) { .wizard { grid-template-columns: 1fr 320px; } .wizard .preview-col { position: sticky; top: 90px; } }
.w-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.w-steps i { flex: 1; height: 6px; border-radius: 99px; background: var(--line); transition: background .3s; }
.w-steps i.on { background: #d6336c; }
.w-panel { display: none; animation: pop .3s both; }
.w-panel.on { display: block; }
.w-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); }
.w-card h2 { font-family: var(--fun); font-size: 1.5rem; }
.type-pick { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.type-pick label { cursor: pointer; border-radius: 18px; padding: 14px; color: #fff; background: var(--cv); min-height: 118px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: transform .2s, box-shadow .2s; }
.type-pick label:hover { transform: translateY(-3px); }
.type-pick input { position: absolute; opacity: 0; }
.type-pick label:has(input:checked) { outline: 3px solid #14123a; outline-offset: 3px; }
.type-pick .tp-emoji { font-size: 2rem; }
.type-pick .tp-name { font-family: var(--fun); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.type-pick .tp-pitch { font-size: .75rem; opacity: .9; line-height: 1.3; }
.type-pick .tp-18 { position: absolute; top: 10px; right: 10px; font-size: .65rem; font-weight: 800; background: rgba(0,0,0,.3); padding: 2px 7px; border-radius: 99px; }
.w-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.w-note { font-size: .82rem; color: var(--muted); }
.w-alert { background: #fff4e5; color: #8a4b00; padding: 10px 14px; border-radius: 12px; font-size: .9rem; margin: 10px 0; display: none; }
.w-alert.on { display: block; }
.chip-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radios label { cursor: pointer; }
.chip-radios input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radios span { display: inline-block; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 14px; font-size: .9rem; transition: all .15s; }
.chip-radios input:checked + span { background: #d6336c; color: #fff; border-color: #d6336c; }
.chip-radios label.hide { display: none; }
.form-row .count { float: right; font-weight: 400; color: var(--muted); font-size: .8rem; }

/* Manage / share page */
.share-box { display: flex; gap: 8px; flex-wrap: wrap; }
.share-box input { flex: 1 1 240px; padding: 12px 14px; border-radius: 12px; border: 2px dashed #d6336c; font: inherit; font-weight: 600; background: #fff7fa; color: var(--ink); }
.btn-wa { background: #25d366 !important; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 10px 0 10px 34px; position: relative; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; left: 8px; top: 14px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.timeline li.done { color: var(--ink); }
.timeline li.done::before { background: #d6336c; border-color: #d6336c; }
.answer-card { background: #fff7fa; border-radius: 16px; padding: 16px 18px; margin-bottom: 10px; }
.answer-card .q { font-size: .85rem; color: var(--muted); }
.answer-card .a { font-family: var(--fun); font-size: 1.15rem; font-weight: 600; }
.big-answer { font-family: var(--fun); font-size: 2rem; font-weight: 800; color: #d6336c; }
.confetti-lite { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* Customise form */
.drop { border: 2px dashed #f0a6c0; border-radius: 16px; padding: 22px; text-align: center; background: #fff7fa; cursor: pointer; transition: background .2s; }
.drop:hover, .drop.over { background: #ffe3ec; }
.drop input { display: none; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 12px; }
.thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.form-grid { display: grid; gap: 0 16px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.form-row.check label { display: flex; gap: 10px; font-weight: 500; align-items: flex-start; }
.form-row.check input { margin-top: 4px; }