@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    :root {
      --glass-bg: rgba(255,255,255,0.72);
      --glass-border: rgba(200,200,200,0.5);
      --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.12);
      --shadow-hover: 0 30px 60px -16px rgba(0,0,0,0.18);
      --heart-on: #e05555;
      --heart-off: #c8c8c8;
    }

    * { margin:0; padding:0; box-sizing:border-box; }

    body {
      background: #f5f5f7;
      color: #1e1e2a;
      line-height: 1.5;
      font-family: 'Inter', system-ui, sans-serif;
      overflow-x: hidden;
    }

    #bgCanvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

    .max-w-fhd {
      position: relative; z-index: 1;
      max-width: 1600px; margin: auto;
      padding: 2rem 2rem 4rem;
    }

    .section-title {
      font-size: 2.5rem; font-weight: 300;
      letter-spacing: -0.02em; margin-bottom: 2rem;
      border-left: 8px solid #d1d1d1; padding-left: 1.5rem; color: #2d2d2d;
    }

    /* about */
    .about-section {
      background: var(--glass-bg);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      padding: 3rem 3.5rem; border-radius: 48px;
      margin: 4rem 0 2rem;
      box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.9);
      border: 1px solid var(--glass-border);
    }
    .about-section p {
      font-size: 1.5rem; font-weight: 400; max-width: 90%;
      background: rgba(240,240,240,0.7); padding: 1.8rem;
      border-radius: 40px; line-height: 1.6; color: #202020;
      border: 1px solid #b0b0b0;
    }

    /* FAQ */
    .faq-section { margin: 5rem 0; }
    .faq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 2rem; margin-top: 2rem;
    }
    .faq-card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-radius: 40px; padding: 2rem 2.2rem;
      box-shadow: var(--shadow-soft);
      border: 2px solid var(--glass-border);
      transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
      cursor: pointer; position: relative; overflow: hidden;
    }
    .faq-card:hover { border-color:#a0a0a0; box-shadow:var(--shadow-hover); transform:translateY(-6px) scale(1.01); }
    .faq-card[open] { background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(244,244,246,.9)); border-color:#7a7a7a; box-shadow:0 30px 50px -18px #4f4f4f; }
    .faq-card summary { font-weight:600; font-size:1.4rem; color:#2d2d2d; display:flex; align-items:center; gap:14px; list-style:none; cursor:pointer; }
    .faq-card summary::-webkit-details-marker { display:none; }
    .faq-card summary::before { content:"✨"; font-size:1.8rem; transition:transform .4s ease; display:inline-block; margin-right:8px; color:#b0b0b0; }
    .faq-card[open] summary::before { transform:rotate(180deg) scale(1.2); color:#4b4b4b; }
    .faq-card .faq-answer { margin-top:1.5rem; margin-left:.8rem; padding:1rem 0 1rem 2rem; font-size:1.1rem; color:#2e2e2e; border-left:4px solid #c7c7c7; background:rgba(249,249,252,.8); border-radius:0 20px 20px 0; }

    /* sponsor */
    .sponsor-strip {
      width:100%; height:140px; border-radius:70px;
      background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      margin:5rem auto; display:flex; align-items:center; justify-content:center;
      border:2px solid var(--glass-border);
      transition:border .2s,box-shadow .2s;
      font-size:1.5rem; font-weight:350; color:#3a3a3a; letter-spacing:2px; text-align:center; padding:0 3rem;
    }
    .sponsor-strip:hover { border:2px solid #2b2b2b; box-shadow:0 0 0 3px rgba(0,0,0,.02); }

    /* testimonials grid */
    .testimonials-area {
      margin:5rem 0 2rem;
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:2rem; width:100%;
    }

    /* base card */
    .testimonial-card {
      background:var(--glass-bg);
      backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
      border-radius:32px; padding:1.6rem 1.8rem 1.4rem;
      box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.85);
      border:1.5px solid var(--glass-border);
      transition:all .25s cubic-bezier(.25,.8,.25,1);
      font-size:1rem; cursor:default;
      display:flex; flex-direction:column; height:fit-content;
      line-height:1.5; position:relative;
    }
    .testimonial-card:hover { border-color:#a0a0a0; box-shadow:var(--shadow-hover),inset 0 1px 0 rgba(255,255,255,.95); transform:translateY(-4px); }

    .card-review-text { flex:1; font-size:.97rem; color:#2a2a2a; line-height:1.6; }

    .card-footer {
      margin-top:1.2rem; border-top:2px dashed #d0d0d0; padding-top:.8rem;
      display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem;
    }
    .card-meta { display:flex; flex-direction:column; align-items:flex-end; flex:1; min-width:0; }
    .testimonial-card .author { font-weight:700; font-size:1.05rem; color:#3b3b3b; text-align:right; word-break:break-word; }
    .testimonial-card .role   { font-size:.82rem; color:#5f5f5f; text-align:right; }

    /* heart */
    .heart-btn {
      background:none; border:none; cursor:pointer; padding:4px 2px;
      display:flex; flex-direction:column; align-items:center; gap:2px;
      flex-shrink:0; transition:transform .15s;
    }
    .heart-btn:hover { transform:scale(1.15); }
    .heart-btn:active { transform:scale(.9); }
    .heart-icon { font-size:1.35rem; line-height:1; transition:color .25s,transform .35s cubic-bezier(.34,1.56,.64,1); color:var(--heart-off); display:block; }
    .heart-btn.liked .heart-icon { color:var(--heart-on); transform:scale(1.25); }
    .heart-count { font-size:.72rem; font-weight:600; color:#888; line-height:1; transition:color .25s; }
    .heart-btn.liked .heart-count { color:var(--heart-on); }

    @keyframes heartBurst {
      0%{transform:scale(1)} 30%{transform:scale(1.55)} 60%{transform:scale(.9)} 100%{transform:scale(1.25)}
    }
    .heart-btn.burst .heart-icon { animation:heartBurst .4s cubic-bezier(.34,1.56,.64,1) forwards; }

    /* user badge + edit */
    .user-card-badge {
      position:absolute; top:12px; right:14px;
      background:rgba(240,240,240,.85); backdrop-filter:blur(8px);
      border:1px solid #ddd; border-radius:50px;
      padding:3px 10px; font-size:.7rem; font-weight:600;
      color:#666; letter-spacing:.04em; text-transform:uppercase;
    }
    .edit-btn {
      display:inline-flex; align-items:center; gap:5px;
      background:rgba(240,240,240,.9); border:1.5px solid #d8d8d8;
      border-radius:20px; padding:5px 12px; font-size:.78rem;
      font-weight:600; color:#444; cursor:pointer; margin-top:.8rem;
      transition:all .2s; align-self:flex-end; font-family:inherit;
    }
    .edit-btn:hover { background:#ececec; border-color:#aaa; color:#111; transform:scale(1.03); }
    .edit-btn svg { width:13px; height:13px; }

    /* ADD YOURS */
    .add-yours-card {
      background:linear-gradient(135deg,#FFF6E3,#fff9f0);
      border:2px solid #d0b88a;
      display:flex; align-items:center; justify-content:center;
      text-align:center; font-size:1.8rem; font-weight:600;
      color:#2e2e2e; cursor:pointer; transition:all .25s;
      min-height:280px;
      box-shadow:0 10px 30px -12px rgba(180,150,100,.3);
    }
    .add-yours-card:hover { background:linear-gradient(135deg,#ffeed5,#fff3e0); border-color:#a6895f; transform:scale(1.02) translateY(-4px); box-shadow:0 20px 40px -12px rgba(150,120,80,.3); }
    .add-yours-card span { display:block; font-size:2rem; line-height:1.2; }
    .add-yours-card small { font-size:.9rem; font-weight:300; display:block; margin-top:.8rem; color:#5e4f36; }

    /* loading skeleton */
    .skeleton-card {
      background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 32px;
      min-height: 180px;
      border: 1.5px solid #e5e5e5;
    }
    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* entrance */
    @keyframes cardSlideIn { from{opacity:0;transform:translateY(30px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
    .new-entry { animation:cardSlideIn .5s cubic-bezier(.34,1.3,.64,1) forwards; }
    .highlight-ring { border-color:#a0a0a0!important; box-shadow:0 0 0 4px rgba(160,160,160,.25),var(--shadow-hover)!important; }

    /* toast */
    .toast {
      position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px);
      background:#2d2d2d; color:#fff; padding:.7rem 1.6rem;
      border-radius:50px; font-size:.9rem; font-weight:500;
      z-index:2000; opacity:0; transition:all .3s ease;
      white-space:nowrap; pointer-events:none;
    }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    /* modal overlay */
    .modal-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,.4);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      z-index:1000; display:flex; align-items:center; justify-content:center;
      padding:1rem; opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .modal-overlay.active { opacity:1; pointer-events:all; }

    .modal-box {
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
      border-radius:40px; padding:2.8rem 3rem; width:100%; max-width:560px;
      box-shadow:0 40px 80px -20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.9);
      border:1.5px solid rgba(210,210,210,.7);
      transform:scale(.92) translateY(20px);
      transition:transform .38s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
      opacity:0; max-height:90vh; overflow-y:auto;
    }
    .modal-overlay.active .modal-box { transform:scale(1) translateY(0); opacity:1; }

    .modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
    .modal-title  { font-size:1.7rem; font-weight:600; color:#2d2d2d; letter-spacing:-.02em; }
    .modal-close  {
      width:40px; height:40px; border-radius:50%;
      border:1.5px solid #ddd; background:rgba(245,245,245,.8);
      cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
      transition:.2s; color:#555; flex-shrink:0;
    }
    .modal-close:hover { background:#e8e8e8; border-color:#aaa; color:#111; }

    .form-group   { margin-bottom:1.4rem; }
    .form-label   { display:block; font-size:.82rem; font-weight:700; color:#555; margin-bottom:.5rem; letter-spacing:.06em; text-transform:uppercase; }
    .form-input, .form-textarea {
      width:100%; padding:.9rem 1.2rem; border-radius:18px;
      border:1.5px solid #e0e0e0; background:rgba(250,250,250,.8);
      font-size:1rem; color:#1e1e2a; font-family:inherit;
      transition:border-color .2s,box-shadow .2s,background .2s;
      outline:none; resize:none;
    }
    .form-input:focus,.form-textarea:focus { border-color:#999; background:#fff; box-shadow:0 4px 16px -6px rgba(0,0,0,.1); }
    .form-input.error,.form-textarea.error { border-color:#e07070; background:#fff8f8; }
    .form-textarea { min-height:130px; line-height:1.55; }

    .char-counter { text-align:right; font-size:.78rem; color:#999; margin-top:.3rem; transition:color .2s; }
    .char-counter.warning { color:#c07030; }
    .char-counter.danger  { color:#c03030; font-weight:700; }

    .field-error { font-size:.8rem; color:#c03030; margin-top:.4rem; display:none; padding-left:.3rem; }
    .field-error.visible { display:block; }

    .btn-submit {
      width:100%; padding:1rem; border-radius:22px; border:none;
      background:#2d2d2d; color:#fff; font-size:1.05rem; font-weight:600;
      font-family:inherit; cursor:pointer;
      transition:background .2s,transform .15s,box-shadow .2s;
      margin-top:.4rem; letter-spacing:.02em;
    }
    .btn-submit:hover:not(:disabled) { background:#111; transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(0,0,0,.28); }
    .btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }

    .success-message { text-align:center; padding:2rem 1rem; display:none; }
    .success-message.visible { display:block; }
    .success-icon { font-size:3.5rem; margin-bottom:1rem; }
    .success-text { font-size:1.3rem; font-weight:600; color:#2d2d2d; margin-bottom:.5rem; }
    .success-sub  { font-size:.92rem; color:#777; }

    .footnote { margin-top:4rem; text-align:center; color:#5e5e5e; font-size:.9rem; }

    /* error banner */
    .api-error-banner {
      background:#fff3f3; border:1.5px solid #f0c0c0;
      border-radius:20px; padding:1rem 1.5rem;
      color:#a03030; font-size:.9rem; margin-bottom:1.5rem;
      display:none;
    }
    .api-error-banner.visible { display:block; }

    /* responsive */
    @media(max-width:1700px){ .testimonials-area{grid-template-columns:repeat(4,1fr)} .faq-grid{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))} }
    @media(max-width:1300px){ .testimonials-area{grid-template-columns:repeat(3,1fr)} .section-title{font-size:2.2rem} }
    @media(max-width:800px) { .testimonials-area{grid-template-columns:repeat(2,1fr)} .about-section p{font-size:1.2rem;max-width:100%} }
    @media(max-width:600px) { .modal-box{padding:2rem 1.5rem;border-radius:28px} .modal-title{font-size:1.4rem} }
    @media(max-width:380px) { .modal-box{padding:1.6rem 1.2rem} .testimonials-area{grid-template-columns:1fr} }
    /* ============================================================
   JokeBot — responsive.css
   Har device ke liye alag media queries
   Link karo: <link rel="stylesheet" href="responsive.css">
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   1. LARGE DESKTOP  (1700px+)
   Default styles already handle this — koi change nahi
══════════════════════════════════════════════════════════════ */
@media (min-width: 1700px) {
  .testimonials-area {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════
   2. DESKTOP / LAPTOP  (1300px – 1699px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1699px) {
  .testimonials-area {
    grid-template-columns: repeat(4, 1fr);
  }
  .faq-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════
   3. SMALL LAPTOP / LARGE TABLET  (1024px – 1299px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1299px) {
  .testimonials-area {
    grid-template-columns: repeat(3, 1fr);
  }

  .section-title {
    font-size: 2.1rem;
  }

  .faq-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .about-section {
    padding: 2.5rem 2.8rem;
  }

  .about-section p {
    font-size: 1.3rem;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   4. TABLET  (768px – 1023px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .max-w-fhd {
    padding: 1.5rem 1.5rem 3rem;
  }

  .section-title {
    font-size: 1.9rem;
    padding-left: 1.2rem;
    border-left-width: 6px;
  }

  /* about */
  .about-section {
    padding: 2rem 2rem;
    border-radius: 36px;
    margin: 2.5rem 0 1.5rem;
  }
  .about-section p {
    font-size: 1.15rem;
    padding: 1.3rem;
    border-radius: 28px;
    max-width: 100%;
  }

  /* FAQ */
  .faq-section {
    margin: 3rem 0;
  }
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .faq-card {
    border-radius: 28px;
    padding: 1.5rem 1.8rem;
  }
  .faq-card summary {
    font-size: 1.15rem;
  }
  .faq-card summary::before {
    font-size: 1.4rem;
  }

  /* sponsor */
  .sponsor-strip {
    height: 100px;
    font-size: 1.1rem;
    border-radius: 50px;
    margin: 3rem auto;
    letter-spacing: 1px;
    padding: 0 2rem;
  }

  /* testimonials */
  .testimonials-area {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
    margin: 3rem 0 1.5rem;
  }

  .testimonial-card {
    border-radius: 26px;
    padding: 1.4rem 1.5rem 1.2rem;
  }

  .add-yours-card {
    min-height: 200px;
    font-size: 1.5rem;
  }
  .add-yours-card span {
    font-size: 1.6rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   5. MOBILE LARGE  (480px – 767px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .max-w-fhd {
    padding: 1rem 1rem 3rem;
  }

  .section-title {
    font-size: 1.6rem;
    padding-left: 1rem;
    border-left-width: 5px;
    margin-bottom: 1.2rem;
  }

  /* about */
  .about-section {
    padding: 1.5rem 1.3rem;
    border-radius: 28px;
    margin: 1.5rem 0 1rem;
  }
  .about-section p {
    font-size: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    line-height: 1.55;
  }

  /* FAQ */
  .faq-section {
    margin: 2.5rem 0;
  }
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .faq-card {
    border-radius: 22px;
    padding: 1.2rem 1.3rem;
  }
  .faq-card summary {
    font-size: 1rem;
    gap: 8px;
  }
  .faq-card summary::before {
    font-size: 1.2rem;
    margin-right: 4px;
  }
  .faq-card .faq-answer {
    font-size: 0.95rem;
    padding: 0.8rem 0 0.8rem 1.2rem;
    margin-top: 1rem;
    margin-left: 0.4rem;
  }

  /* sponsor */
  .sponsor-strip {
    height: 80px;
    font-size: 0.85rem;
    border-radius: 40px;
    margin: 2rem auto;
    letter-spacing: 0.5px;
    padding: 0 1.5rem;
  }

  /* testimonials — 1 column on mobile */
  .testimonials-area {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin: 2rem 0 1rem;
  }

  .testimonial-card {
    border-radius: 22px;
    padding: 1.3rem 1.4rem 1.1rem;
    font-size: 0.95rem;
  }

  .card-footer {
    margin-top: 1rem;
    padding-top: 0.7rem;
  }

  .testimonial-card .author {
    font-size: 0.95rem;
  }
  .testimonial-card .role {
    font-size: 0.78rem;
  }

  .heart-icon  { font-size: 1.2rem; }
  .heart-count { font-size: 0.68rem; }

  .add-yours-card {
    min-height: 160px;
    font-size: 1.3rem;
    border-radius: 22px;
  }
  .add-yours-card span  { font-size: 1.4rem; }
  .add-yours-card small { font-size: 0.82rem; margin-top: 0.5rem; }

  .user-card-badge {
    font-size: 0.62rem;
    padding: 2px 8px;
    top: 10px;
    right: 10px;
  }

  .edit-btn {
    font-size: 0.74rem;
    padding: 5px 10px;
  }

  /* modal */
  .modal-overlay {
    align-items: flex-end;   /* bottom sheet on mobile */
    padding: 0;
  }
  .modal-box {
    border-radius: 32px 32px 0 0;
    padding: 2rem 1.5rem 2.5rem;
    max-height: 92vh;
    width: 100%;
    max-width: 100%;
  }
  .modal-title  { font-size: 1.3rem; }
  .modal-close  { width: 36px; height: 36px; font-size: 1rem; }

  .form-input, .form-textarea {
    font-size: 0.95rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
  }
  .form-label { font-size: 0.76rem; }
  .form-textarea { min-height: 110px; }

  .btn-submit {
    font-size: 1rem;
    padding: 0.9rem;
    border-radius: 18px;
    /* touch-friendly */
    min-height: 48px;
  }

  /* toast */
  .toast {
    bottom: 1.2rem;
    font-size: 0.82rem;
    padding: 0.6rem 1.2rem;
    max-width: 90vw;
    white-space: normal;
    text-align: center;
  }

  .footnote {
    margin-top: 2rem;
    font-size: 0.82rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   6. MOBILE SMALL  (320px – 479px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  .max-w-fhd {
    padding: 0.8rem 0.8rem 2.5rem;
  }

  .section-title {
    font-size: 1.35rem;
    padding-left: 0.8rem;
    border-left-width: 4px;
  }

  .about-section {
    padding: 1.2rem 1rem;
    border-radius: 22px;
    margin: 1.2rem 0 0.8rem;
  }
  .about-section p {
    font-size: 0.92rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
  }

  .faq-card {
    border-radius: 18px;
    padding: 1rem 1.1rem;
  }
  .faq-card summary {
    font-size: 0.92rem;
  }

  .sponsor-strip {
    height: 70px;
    font-size: 0.75rem;
    border-radius: 35px;
    letter-spacing: 0;
    padding: 0 1rem;
  }

  .testimonial-card {
    border-radius: 18px;
    padding: 1.1rem 1.2rem 1rem;
    font-size: 0.9rem;
  }

  .testimonial-card .author { font-size: 0.88rem; }
  .testimonial-card .role   { font-size: 0.74rem; }

  .add-yours-card {
    min-height: 130px;
    font-size: 1.1rem;
  }
  .add-yours-card span { font-size: 1.2rem; }

  .modal-box {
    padding: 1.6rem 1.1rem 2rem;
    border-radius: 24px 24px 0 0;
  }
  .modal-title { font-size: 1.15rem; }

  .form-input, .form-textarea {
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
  }
  .form-textarea { min-height: 100px; }

  .btn-submit {
    font-size: 0.95rem;
    padding: 0.85rem;
    min-height: 46px;
  }
}

/* ══════════════════════════════════════════════════════════════
   7. TOUCH DEVICES — hover effects disable karo
   (mobile pe hover stuck rehta hai)
══════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .faq-card:hover,
  .testimonial-card:hover,
  .add-yours-card:hover,
  .btn-submit:hover,
  .edit-btn:hover,
  .heart-btn:hover,
  .sponsor-strip:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
  }

  /* Add yours pe tap feedback */
  .add-yours-card:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #ffeed5, #fff3e0);
  }

  /* Buttons tap feedback */
  .btn-submit:active {
    background: #111;
    transform: scale(0.98);
  }

  .edit-btn:active {
    background: #e0e0e0;
    transform: scale(0.97);
  }
}

/* ══════════════════════════════════════════════════════════════
   8. LANDSCAPE MOBILE  (height 480px se kam)
   Jab phone sideways ho
══════════════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  .modal-overlay {
    align-items: center;
    padding: 0.5rem;
  }
  .modal-box {
    border-radius: 24px;
    max-height: 95vh;
    padding: 1.2rem 1.5rem 1.5rem;
    max-width: 540px;
  }
  .form-textarea {
    min-height: 80px;
  }
  .modal-header {
    margin-bottom: 1rem;
  }
  .form-group {
    margin-bottom: 0.9rem;
  }
}