/* ===== सबै रचनाहरू: book jasto card ===== */
:root{ --book-ratio: 3/4; }   /* book ko aakar: 2/3 lamo, 1/1 chauko */

#allCards{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px 18px;
  overflow:visible;
  align-items:start;
}

/* Purano card ko sabai design hataune, aafno book matra dekhaune */
#allCards > *{
  display:block !important;
  position:relative;
  width:auto !important;height:auto !important;min-width:0;
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;margin:0 !important;overflow:visible !important;
  cursor:pointer;
}
#allCards > *::before,
#allCards > *::after{display:none !important}
#allCards > * > :not(.bk-book){display:none !important}

/* Book */
.bk-book{display:block;width:100%}
.bk-cover-box{
  position:relative;width:100%;
  aspect-ratio:var(--book-ratio);
  overflow:hidden;background:#2a2a2a;
  border-radius:3px 12px 12px 3px;
  box-shadow:9px 14px 18px -8px rgba(60,40,20,.55), 0 3px 0 rgba(0,0,0,.10);
  transition:transform .15s ease, box-shadow .15s ease;
}
.bk-book:active .bk-cover-box{
  transform:translateY(3px) scale(.98);
  box-shadow:4px 6px 8px -4px rgba(60,40,20,.5), 0 1px 0 rgba(0,0,0,.10);
}

/* Photo pura dekhinchha (title katdaina), pachhadi tira dhundhalo photo */
.bk-cover-box .bk-bg{
  position:absolute;inset:-12%;width:124%;height:124%;
  object-fit:cover;filter:blur(16px) brightness(.85);
}
.bk-cover-box .bk-img{
  position:absolute;left:0;right:0;top:50%;
  width:100%;height:auto;transform:translateY(-50%);
  display:block;
}

/* Book ko spine (bayan tira) */
.bk-cover-box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(0,0,0,.42) 0, rgba(0,0,0,.08) 5%,
    rgba(255,255,255,.30) 6%, rgba(255,255,255,0) 10%);
}

/* Talo ma vidha ko naam */
.bk-label{
  display:block;text-align:center;margin-top:12px;
  font-size:16px;font-weight:600;line-height:1.3;
  color:#e8710a;letter-spacing:0;text-transform:none;
}

/* ===== Alag book cover (admin le app bata halne) ===== */
.bk-cover-box .bk-full{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* ===== कार्ड माथिको ⋮ (kebab): सम्पादन + मेटाउनुस् — native र थप दुवै रचनामा,
   admin लगइन + सम्पादन मोड चालू हुँदा मात्र देखिने; "View as" मा लुक्ने ===== */
.bk-kebab-wrap{ position:absolute;right:8px;top:8px;z-index:4; display:none; }
body.spg-admin.spg-edit-mode .bk-admin-only.bk-kebab-wrap{ display:block; }
body.spg-view-as .bk-kebab-wrap{ display:none!important; }
.bk-kebab{
  width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(0,0,0,.62);color:#fff;font-size:19px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.bk-kebab-menu{
  position:absolute;right:0;top:42px;min-width:150px;
  background:#fff;color:#1a1a2e;border-radius:12px;overflow:hidden;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  display:none;flex-direction:column;
}
[data-theme="dark"] .bk-kebab-menu{ background:#2a2438;color:#eee; }
.bk-kebab-menu.open{ display:flex; }
.bk-kebab-menu button{
  display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;
  padding:11px 14px;font-size:14.5px;text-align:left;cursor:pointer;color:inherit;font-family:inherit;
}
.bk-kebab-menu button + button{ border-top:1px solid rgba(0,0,0,.08); }
[data-theme="dark"] .bk-kebab-menu button + button{ border-top-color:rgba(255,255,255,.1); }
.bk-kebab-menu .bk-kebab-danger{ color:#d32f2f; }

/* Vidha ko talo ma शीर्षक — lamo bhaye pani sabai ko akshar ustai (sano nahune),
   lamo title 2 line samma wrap huncha (teesro line bhaye ... dekhincha) */
.bk-label{margin-top:10px;}
.bk-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-align:center;margin-top:3px;
  font-size:13px!important;font-weight:400;line-height:1.5;
  color:#5b5566;opacity:.95;
  white-space:normal;
}
[data-theme="dark"] .bk-title{color:#c9c4d6}

/* Photo nabhaeko wa custom cover khulna nasakeko book ko lagi */
.bk-cover-box.bk-noimg{
  background:linear-gradient(150deg,#2a2440,#4a3a1a);
  display:flex;align-items:center;justify-content:center;
}
.bk-fallback{font-size:64px;opacity:.55;filter:grayscale(.2)}

/* ===== Kavita/lekh padhne page: PDF/Photo download jastai "kitab ko panna" look ===== */
#poemModal .modal-content{background:#faf6f0}
[data-theme="dark"] #poemModal .modal-content{background:#221d30}

#modalBody{
  max-width:640px;margin:0 auto;padding:22px 26px 40px;
  font-family:"Tiro Devanagari Hindi","Noto Sans Devanagari",serif;
}

/* Cover photo: PDF/photo ma jasto gol kunа sahit, mathi matra */
.poem-cover-large{
  border-radius:16px;overflow:hidden;
  box-shadow:0 10px 22px -10px rgba(60,40,20,.4);
  margin-bottom:26px;
}
.poem-cover-large img{display:block;width:100%;height:auto}

/* शीर्षक: PDF/photo jasto bold, ekdam simple */
.poem-title-large{
  font-family:"Tiro Devanagari Hindi","Noto Sans Devanagari",serif;
  font-weight:700;font-size:30px;line-height:1.35;
  color:#1a1a2e;text-align:left;margin:0 0 18px;
}
[data-theme="dark"] .poem-title-large{color:#f2ecff}

/* Meta chip (विधा, मिनेट, मिति) लाई सानो, हल्का, शीर्षक मुनि */
.poem-title-large + *{margin-bottom:10px}

/* Curly quote / quote-bubble card हटाएर सिधा पानाको रूपमा */
#modalBody .quote-mark,
#modalBody [class*="quote-icon"],
#modalBody [class*="quote-mark"]{display:none!important}
#modalBody .poem-content,
#modalBody [class*="quote"]{
  background:transparent!important;box-shadow:none!important;
  border-radius:0!important;padding:0!important;margin:0!important;
}

/* पतलो सुनौलो विभाजक रेखा, शीर्षक र पाठको बीचमा */
.poem-title-large{
  border-bottom:1px solid rgba(232,196,122,.55);
  padding-bottom:18px;
}

/* पाठ: सफा, पढ्न सजिलो */
.poem-content{
  font-family:"Tiro Devanagari Hindi","Noto Sans Devanagari",serif;
  color:#2a2438;line-height:2.1;text-align:left;
  white-space:pre-line;margin-top:22px;
}
[data-theme="dark"] .poem-content{color:#e7e1f2}

/* ===== लेख/कविता पढ्ने पेजका ६ डिजाइन (admin ✏️ बाट छान्न मिल्ने) ===== */

/* कार्ड: सेतो कार्डमा शीर्षक र पाठ, फोटो माथि अलग */
#poemModal.ae-design-card #modalBody{padding:18px 18px 40px}
#poemModal.ae-design-card .poem-title-large{
  background:#fff;border-radius:18px 18px 0 0;padding:24px 24px 14px;margin:0;
  border-bottom:0;box-shadow:0 10px 24px -16px rgba(0,0,0,.3);
}
#poemModal.ae-design-card .poem-content{
  background:#fff;border-radius:0 0 18px 18px;padding:4px 24px 28px;margin-top:0;
  box-shadow:0 10px 24px -16px rgba(0,0,0,.3);
}
[data-theme="dark"] #poemModal.ae-design-card .poem-title-large,
[data-theme="dark"] #poemModal.ae-design-card .poem-content{background:#2a2438;color:#eee}

/* म्यागजिन: ठूलो bold शीर्षक, मोटो तल्लो रेखा */
#poemModal.ae-design-magazine .poem-title-large{
  font-family:"Playfair Display",serif;font-size:32px;letter-spacing:.3px;
  border-bottom:4px solid #1a1a2e;padding-bottom:12px;
}
[data-theme="dark"] #poemModal.ae-design-magazine .poem-title-large{border-color:#e8c47a}
#poemModal.ae-design-magazine .poem-content{font-size:19px;line-height:2}
#poemModal.ae-design-magazine .poem-cover-large{border-radius:4px}

/* डार्क: जहिले पनि गाढा पृष्ठभूमि, सुनौलो अक्षर — रातमा पढ्न सजिलो */
#poemModal.ae-design-dark .modal-content{background:#171224!important}
#poemModal.ae-design-dark .poem-title-large{color:#f3d98b;border-color:rgba(243,217,139,.4)}
#poemModal.ae-design-dark .poem-content{color:#ddd3f0}
#poemModal.ae-design-dark .modal-back,
#poemModal.ae-design-dark .icon-btn{color:#f3d98b}

/* मिनिमल: फोटो लुकाएर सिधा, सफा पाठ */
#poemModal.ae-design-minimal .poem-cover-large{display:none}
#poemModal.ae-design-minimal #modalBody{max-width:540px}
#poemModal.ae-design-minimal .poem-title-large{
  font-weight:600;font-size:23px;border:0;padding-bottom:4px;
}
#poemModal.ae-design-minimal .poem-content{
  font-family:"Noto Sans Devanagari",sans-serif;line-height:2.15;
}

/* पुरानो पाना: हल्का खैरो कागज, तेर्सो अक्षर, बीचमा मिल्ने */
#poemModal.ae-design-vintage .modal-content{background:#f1e6cf}
#poemModal.ae-design-vintage .poem-title-large{
  font-style:italic;text-align:center;border:0;color:#4a3414;
}
#poemModal.ae-design-vintage .poem-content{
  font-style:italic;text-align:center;color:#4a3414;
}
#poemModal.ae-design-vintage .poem-cover-large{filter:sepia(.35) contrast(1.05)}

/* =========================================================
   ⋮ मेनु: स्टाइलिश लुक (blur, shadow, animation) + auto-close
   ========================================================= */
#dropdownMenu{
  border-radius:16px !important;
  overflow:hidden;
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.4), 0 2px 10px -4px rgba(0,0,0,.25);
  animation:spMenuIn .16s ease;
}
@keyframes spMenuIn{ from{opacity:0;transform:translateY(-6px) scale(.98)} to{opacity:1;transform:none} }

/* =========================================================
   तल्लो नेभिगेसन: अलि सानो, शीशा जस्तो (glass), स्क्रोलमा लुक्ने/देखिने
   ========================================================= */
.bottom-nav{
  padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px)) !important;
  background:rgba(245,240,236,.82) !important;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 -6px 20px -10px rgba(0,0,0,.28);
  border-top:1px solid rgba(0,0,0,.05);
  transition:transform .28s ease;
}
[data-theme="dark"] .bottom-nav{
  background:rgba(28,24,40,.82) !important;
  border-top-color:rgba(255,255,255,.07);
}
.bottom-nav .nav-item{ padding:2px 0 !important; }
.bottom-nav .nav-icon,
.bottom-nav .nav-svg,
.bottom-nav .nav-item svg{ width:26px !important; height:26px !important; }
.bottom-nav .nav-label{ font-size:10.5px !important; margin-top:1px !important; }
.bottom-nav.nav-hidden{
  transform:translateY(110%);
}

/* =========================================================
   कविता/लेख पढ्ने पेज: edit/print/save हरू ⋮ भित्र मात्र
   ========================================================= */
#poemModal .modal-actions #bookmarkBtn,
#poemModal .modal-actions [onclick="window.print()"]{ display:none !important; }
.pm-admin-only{ display:none; }
body.spg-admin .pm-admin-only{ display:flex !important; }
body.spg-view-as .pm-admin-only{ display:none !important; }

/* =========================================================
   "View as" (अरुले देख्ने गरी हेर्नुस्) चालू हुँदा admin UI लुकाउने
   ========================================================= */
body.spg-view-as #spMenuSettings,
body.spg-view-as #spMenuEditMode,
body.spg-view-as #spMenuAddPost{ display:none !important; }