/* ============================================
   MeraPrompt (meraprompt.in) — Design Tokens
   Palette: warm cream base, magenta/indigo gradient primary,
   amber + teal accents. Refined, premium-playful energy.
   Display: Fredoka (rounded, friendly). Body: Plus Jakarta Sans.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --cream: #FFFAF4;
  --cream-deep: #FFF2E4;
  --card: #FFFFFF;
  --ink: #1B1230;
  --ink-soft: #524C66;
  --pink: #E63888;
  --pink-deep: #C41F6C;
  --violet: #6D28D9;
  --violet-deep: #4C1D95;
  --yellow: #F5A623;
  --teal: #0FB8B8;
  --coral: #FF6B5B;
  --border: #F0E4FA;
  --border-strong: #E1D0F2;

  --grad-primary: linear-gradient(135deg, var(--pink) 0%, var(--violet) 100%);
  --grad-warm: linear-gradient(135deg, #F5A623 0%, #E63888 100%);
  --grad-cool: linear-gradient(135deg, #0FB8B8 0%, #6D28D9 100%);

  --shadow-sm: 0 2px 8px rgba(27, 18, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(27, 18, 48, 0.10);
  --shadow-lg: 0 20px 48px rgba(124, 58, 237, 0.16);
  --shadow-pink: 0 10px 28px rgba(255, 61, 119, 0.28);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}

:focus-visible{
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: 6px;
}

.container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ===== Bunting (mela flags) — the signature motif ===== */
.bunting{
  display:flex;
  justify-content:center;
  gap:2px;
  pointer-events:none;
  user-select:none;
}
.bunting .flag{
  width:0;
  height:0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 20px solid var(--pink);
  transform: rotate(180deg);
  opacity:.9;
}
.bunting .flag:nth-child(4n+1){ border-top-color: var(--pink); }
.bunting .flag:nth-child(4n+2){ border-top-color: var(--yellow); }
.bunting .flag:nth-child(4n+3){ border-top-color: var(--teal); }
.bunting .flag:nth-child(4n){ border-top-color: var(--violet); }

/* ===== Top announcement strip ===== */
.topstrip{
  background: var(--ink);
  color:#fff;
  text-align:center;
  font-size: 13px;
  font-weight:600;
  letter-spacing: .02em;
  padding: 8px 16px;
}
.topstrip span{ color: var(--yellow); }

/* ===== Navbar ===== */
.navbar{
  position: sticky;
  top:0;
  z-index: 200;
  background: rgba(255,249,241,0.98);
  border-bottom: 1px solid var(--border);
}
.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 72px;
  gap: 20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size: 21px;
  color: var(--ink);
  flex-shrink:0;
}
.brand .mark{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow: var(--shadow-pink);
  flex-shrink:0;
}
.brand .mark svg{ width:20px; height:20px; }

/* Desktop nav links: simple inline row */
.nav-links{
  display:flex;
  align-items:center;
  gap: 26px;
  font-weight:600;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-left: auto;
}
.nav-links a:hover{ color: var(--pink-deep); }
.nav-links a.active{ color: var(--ink); }

.nav-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

/* Hamburger — hidden on desktop, shown on mobile */
.menu-toggle{
  display:none;
  width:42px; height:42px; border-radius:12px;
  background:#fff; border:1.5px solid var(--border-strong);
  align-items:center; justify-content:center;
  font-size:19px; color:var(--ink); flex-shrink:0;
}

/* ===== Mobile nav (single source of truth — no duplicate rules elsewhere) ===== */
.nav-overlay{
  display:none;
  position:fixed;
  top:72px; left:0; right:0; bottom:0;
  background: rgba(27,18,48,0.35);
  z-index: 198;
}
.nav-overlay.open{ display:block; }

@media (max-width: 860px){
  .nav-links{
    display: none;
    position: fixed;
    top: 72px; left:0; right:0;
    max-height: calc(100vh - 72px);
    margin-left: 0;
    background:#fff;
    flex-direction:column; align-items:stretch;
    gap:0; padding: 6px 24px 16px;
    overflow-y:auto;
    z-index: 199;
    box-shadow: 0 16px 32px rgba(27,18,48,0.18);
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; padding:14px 2px; border-bottom:1px solid var(--border); font-size:16px; }
  .menu-toggle{ display:flex; }
}

/* ===== Hero search bar (prominent, replaces the old cramped navbar search) ===== */
.hero-search{
  max-width: 560px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 22px;
  box-shadow: var(--shadow-md);
  margin: 28px 0 0;
}
.hero-search input{
  border:none; outline:none; flex:1; background:transparent;
  font-size:15px; color:var(--ink); min-width:0;
}
.hero-search button{
  flex-shrink:0;
  border:none; border-radius: var(--radius-pill);
  background: var(--grad-primary);
  color:#fff; font-weight:700; font-size:14px;
  padding: 12px 22px;
  box-shadow: var(--shadow-pink);
}
@media (max-width: 480px){
  .hero-search{ padding:6px 6px 6px 16px; }
  .hero-search button{ padding:10px 16px; font-size:13px; }
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14.5px;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-pink);
}
.btn-primary:hover{ box-shadow: 0 14px 32px rgba(255,61,119,0.38); transform: translateY(-2px); }
.btn-ghost{
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover{ border-color: var(--violet); color: var(--violet); }
.btn-dark{
  background: var(--ink);
  color: #fff;
}
.btn-dark:hover{ opacity:.88; }
.btn-sm{ padding: 8px 16px; font-size: 13px; }
.btn-block{ width:100%; }
.btn-icon{
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft);
}
.btn-icon:hover{ border-color: var(--pink); color: var(--pink); }

/* ===== Chips / tags ===== */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background:#fff;
  border: 1.5px solid var(--border-strong);
  font-weight:600;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: all .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.chip:hover{ border-color: var(--violet); color: var(--violet); }
.chip.active{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}
.badge-teal{ background: rgba(20,201,201,.14); color:#0E8F8F; }
.badge-violet{ background: rgba(124,58,237,.12); color: var(--violet-deep); }
.badge-yellow{ background: rgba(255,201,60,.22); color:#946200; }
.badge-pink{ background: rgba(255,61,119,.12); color: var(--pink-deep); }

/* ===== Tool flag (signature element on cards) ===== */
.tool-flag{
  position:absolute;
  top:0; left:18px;
  padding: 7px 12px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color:#fff;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  z-index: 2;
  letter-spacing:.01em;
}
.tool-flag.gpt{ background: #10A37F; }
.tool-flag.mj{ background: var(--ink); }
.tool-flag.gemini{ background: var(--violet); }
.tool-flag.dalle{ background: var(--pink); }

/* ===== Section heading pattern ===== */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color: var(--pink-deep);
  margin-bottom:10px;
}
.eyebrow::before{ content:''; width:18px; height:3px; border-radius:2px; background: var(--grad-warm); }
.section-title{ font-size: clamp(26px,3.4vw,38px); }
.section-sub{ color: var(--ink-soft); font-size:15.5px; max-width:520px; margin-top:8px; }

/* ===== Prompt Card ===== */
.card{
  position:relative;
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform: translateY(-6px) rotate(-.4deg);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.card-media{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  background: var(--grad-cool);
}
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.card:hover .card-media img{ transform: scale(1.06); }
.card-media .save-btn{
  position:absolute; top:12px; right:12px;
  width:36px;height:36px;border-radius:50%;
  background: rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  color: var(--ink); font-size:16px; z-index:3;
  box-shadow: var(--shadow-sm);
}
.card-media .save-btn:hover{ color: var(--pink); }
.card-body{ padding: 16px 18px 18px; }
.card-title{ font-family:'Plus Jakarta Sans'; font-weight:700; font-size:15.5px; margin-bottom:6px; }
.card-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}
.card-creator{ display:flex; align-items:center; gap:8px; font-weight:600; }
.avatar{
  width:26px;height:26px;border-radius:50%;
  background: var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:800; flex-shrink:0;
}
.avatar.lg{ width:88px; height:88px; font-size:32px; border:4px solid #fff; box-shadow: var(--shadow-md); }
.card-stats{ display:flex; align-items:center; gap:12px; }

/* grid */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1080px){ .grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px){ .grid{ grid-template-columns: repeat(2,1fr); gap:14px; } }
@media (max-width: 480px){ .grid{ grid-template-columns: 1fr 1fr; } }

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 860px){ .grid-3{ grid-template-columns: repeat(2,1fr); gap:16px; } }
@media (max-width: 560px){ .grid-3{ grid-template-columns: 1fr; gap:14px; } }

.icon-card{ text-align:center; }
.icon-card .icon-box{ margin-left:auto; margin-right:auto; }

/* ===== Blobs / decorative ===== */
.blob{
  position:absolute; border-radius:50%;
  filter: blur(60px);
  opacity:.5;
  z-index:0;
}

/* ===== Footer ===== */
footer{
  background: var(--ink);
  color: #C9BFDE;
  margin-top: 100px;
  padding: 64px 0 28px;
}
footer .container{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
footer h4{ color:#fff; font-family:'Plus Jakarta Sans'; font-size:14px; margin-bottom:16px; letter-spacing:.02em; }
footer a{ color:#C9BFDE; font-size:14px; display:block; margin-bottom:10px; transition:color .15s; }
footer a:hover{ color: var(--yellow); }
.footer-bottom{
  max-width:1240px; margin: 40px auto 0; padding: 22px 28px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:#8B81A3; flex-wrap:wrap; gap:10px;
}

/* ===== Utility ===== */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-center{text-align:center}
.flex{display:flex}
.hide-mobile{ }
@media (max-width: 900px){
  .hide-mobile{ display:none !important; }
  footer .container{ grid-template-columns: 1fr 1fr; }
}

/* ===== Page hero shared ===== */
.page-hero{
  padding: 52px 0 36px;
  position:relative;
}
.page-hero h1{ font-size: clamp(30px,4vw,44px); }

/* Hero content centered on all devices */
.page-hero .container{ text-align:center; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ margin-left:auto; margin-right:auto; }
.page-hero .section-sub{ margin-left:auto; margin-right:auto; }
.page-hero .hero-search{ margin-left:auto; margin-right:auto; }
.page-hero div[style*="display:flex"][style*="gap:14px"]{ justify-content:center; }
.page-hero div[style*="gap:30px"]{ justify-content:center; }

/* ===== Forms ===== */
.field{ margin-bottom: 18px; }
.field label{ display:block; font-weight:700; font-size:13.5px; margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background:#fff;
  font-size:14.5px;
  color: var(--ink);
  outline:none;
  transition: border-color .15s ease;
}
.field input:focus, .field textarea:focus{ border-color: var(--violet); }
.field textarea{ resize: vertical; min-height:110px; }

/* ===== Card footer stats + quick copy ===== */
.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.icon-stats{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.icon-stats span{ display:flex; align-items:center; gap:4px; }
.copy-chip{
  display:flex; align-items:center; gap:5px;
  background: var(--cream-deep); color: var(--pink-deep);
  padding:6px 12px; border-radius: var(--radius-pill);
  font-size:12px; font-weight:800; border:none;
  transition: all .15s ease;
}
.copy-chip:hover{ background: var(--grad-primary); color:#fff; }

/* ===== Category tiles ===== */
.cat-tile{
  position:relative; border-radius: var(--radius-md); overflow:hidden;
  padding: 26px 20px; color:#fff; min-height:132px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-tile:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cat-tile .icon{ font-size:26px; margin-bottom:8px; }
.cat-tile .count{ font-size:12.5px; opacity:.85; font-weight:600; }
.cat-tile h4{ font-family:'Plus Jakarta Sans'; font-size:16.5px; font-weight:800; }

/* ===== WhatsApp / Telegram community band ===== */
.social-band{
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  background:#fff; border:1.5px solid var(--border-strong); border-radius: var(--radius-md);
}
.social-band .ico{
  width:48px;height:48px;border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff;
}

/* ===== FAQ ===== */
.faq-item{ border-bottom:1px solid var(--border); padding:20px 0; }
.faq-item summary{
  cursor:pointer; font-weight:700; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:22px; color:var(--pink); flex-shrink:0; transition: transform .2s ease; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ color:var(--ink-soft); font-size:14.5px; margin-top:12px; line-height:1.7; }

/* ===== Article / SEO content ===== */
.article{ max-width:820px; }
.article p{ color:var(--ink-soft); font-size:15.5px; line-height:1.85; margin:0 0 16px; }
.article h2{ font-size:26px; margin-top:52px; margin-bottom:14px; }
.article h3{ font-size:19px; margin-top:28px; margin-bottom:10px; }
.article ul{ margin:0 0 16px; padding-left:0; }
.article ul li{
  color:var(--ink-soft); font-size:15px; padding-left:28px; position:relative; margin-bottom:10px;
}
.article ul li::before{ content:'👉'; position:absolute; left:0; }

/* ===== Auth tabs ===== */
.auth-tab{
  flex:1; padding:10px; border:none; border-radius:var(--radius-pill);
  font-weight:700; font-size:14px; background:transparent; color:var(--ink-soft);
  transition: all .15s ease;
}
.auth-tab.active{ background:var(--ink); color:#fff; }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== Category strip (sticky sub-nav under navbar) ===== */
.cat-strip{
  position: sticky;
  top: 72px;
  z-index: 90;
  background: rgba(255,249,241,0.98);
  border-bottom: 1px solid var(--border);
}
.cat-strip .container{ display:flex; gap:10px; padding-top:12px; padding-bottom:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (min-width: 641px){
  .cat-strip .container{ justify-content:center; }
}
@media (max-width: 640px){
  .cat-strip{ position: static; }
}

/* ===== Floating hero mockup cards ===== */
.hero-float{
  position:absolute;
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border: 5px solid #fff;
}
.hero-float img{ width:100%; height:100%; object-fit:cover; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform: translateY(-14px) rotate(var(--rot,0deg)); }
}
.hero-float{ animation: floaty 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .hero-float{ animation:none; } }

/* ===== Testimonial ===== */
.testimonial{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 26px; position:relative;
}
.testimonial .quote-mark{
  font-family:'Fredoka'; font-size:52px; line-height:1; color: var(--yellow);
  position:absolute; top:10px; right:20px; opacity:.7;
}
.testimonial p{ font-size:14.5px; color: var(--ink-soft); line-height:1.65; }
.testimonial .who{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.testimonial .who .name{ font-weight:700; font-size:13.5px; }
.testimonial .who .role{ font-size:12px; color: var(--ink-soft); }
.stars{ color: var(--yellow); letter-spacing:2px; font-size:14px; }

/* ===== FAQ accordion ===== */
.faq-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary{
  padding: 18px 22px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-size: 22px;
  color: var(--pink);
  flex-shrink:0;
  transition: transform .2s ease;
  font-family:'Fredoka';
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-body{
  padding: 0 22px 20px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height:1.7;
}

/* ===== Article / long-form content ===== */
.article{ max-width: 780px; }
.article h2{ font-size: clamp(22px,2.6vw,28px); margin-bottom:14px; }
.article h3{ font-size:18px; margin: 22px 0 10px; }
.article p{ color: var(--ink-soft); font-size:15px; line-height:1.8; margin: 0 0 14px; }
.article ul{ margin: 0 0 16px; padding-left: 0; }
.article ul li{
  list-style:none; position:relative; padding-left:28px; margin-bottom:10px;
  color: var(--ink-soft); font-size:15px; line-height:1.6;
}
.article ul li::before{ content:'✅'; position:absolute; left:0; top:0; font-size:13px; }

/* ===== Category intro card (for SEO category pages) ===== */
.category-hero{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 34px 30px;
  margin-bottom: 40px;
}
.category-hero p{ color: var(--ink-soft); font-size:15px; line-height:1.75; margin:0 0 12px; }
.category-hero p:last-child{ margin-bottom:0; }
.category-hero strong{ color: var(--ink); }

/* ===== Legal / prose pages ===== */
.prose{ max-width: 800px; }
.prose h2{ font-size:22px; margin: 34px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color: var(--ink-soft); font-size:15px; line-height:1.8; margin:0 0 14px; }
.prose ul{ margin:0 0 16px; }
.prose ul li{ list-style:disc; margin-left:22px; color:var(--ink-soft); font-size:15px; line-height:1.7; margin-bottom:8px; }
.prose a{ color: var(--violet); font-weight:600; text-decoration:underline; }

@media (max-width: 640px){
  .container{ padding: 0 18px; }
  .page-hero{ padding-top:20px; }
  footer .container{ grid-template-columns: 1fr !important; gap:28px; }
  .card-media{ aspect-ratio: 4/5; }

}

/* toast */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(120%);
  background: var(--ink); color:#fff; padding:14px 24px; border-radius: var(--radius-pill);
  font-weight:700; font-size:14px; box-shadow: var(--shadow-lg); z-index:999;
  transition: transform .3s ease;
  display:flex; align-items:center; gap:10px;
}
#toast.show{ transform: translateX(-50%) translateY(0); }