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

    body{
      font-family:"Poppins",sans-serif;
      min-height:100vh;
      position:relative;
      overflow-x:hidden;
      /* animated gradient base */
      background:linear-gradient(-45deg,#ff8ac9,#ffe3ec,#a5b4fc,#7dd3fc);
      background-size:400% 400%;
      animation:bgMove 18s ease-in-out infinite;
      color:#111827;
    }

    @keyframes bgMove{
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }

    /* floating gradient blobs */
    .blob{
      position:fixed;
      border-radius:60% 40% 30% 70% / 60% 50% 70% 40%;
      filter:blur(22px);
      opacity:.35;
      mix-blend-mode:screen;
      pointer-events:none;
      z-index:0;
    }
    .blob.b1{
      width:260px;height:260px;
      background:radial-gradient(circle at 30% 20%,#f472b6,#6366f1);
      top:-80px;left:-60px;
      animation:blobFloat1 20s ease-in-out infinite alternate;
    }
    .blob.b2{
      width:220px;height:220px;
      background:radial-gradient(circle at 10% 0%,#22c55e,#06b6d4);
      bottom:-60px;right:-40px;
      animation:blobFloat2 22s ease-in-out infinite alternate;
    }
    .blob.b3{
      width:180px;height:180px;
      background:radial-gradient(circle at 0% 0%,#fbbf24,#f97316);
      top:45%;left:70%;
      animation:blobFloat3 24s ease-in-out infinite alternate;
    }

    @keyframes blobFloat1{
      0%{transform:translate(0,0) scale(1);}
      100%{transform:translate(40px,50px) scale(1.15);}
    }
    @keyframes blobFloat2{
      0%{transform:translate(0,0) scale(1);}
      100%{transform:translate(-40px,-40px) scale(1.12);}
    }
    @keyframes blobFloat3{
      0%{transform:translate(0,0) scale(1);}
      100%{transform:translate(-20px,30px) scale(1.2);}
    }

    /* main content sits above blobs */
    .page{
      position:relative;
      z-index:1;
    }

    .navbar{
      background:rgba(15,23,42,.92);
      padding:10px 18px;
      color:#fff;
      box-shadow:0 8px 20px rgba(15,23,42,.55);
      position:sticky;
      top:0;
      z-index:5;
      backdrop-filter:blur(12px);
    }
    .navbar h1{
      font-size:1.6rem;
      letter-spacing:.06em;
    }

    .container{
      padding:18px 14px 80px;
      display:flex;
      flex-wrap:wrap;
      gap:18px;
    }

    .book-container{
      width:300px;
      padding:14px 14px 12px;
      background:rgba(15,23,42,.96);
      color:white;
      border-radius:14px;
      display:inline-block;
      vertical-align:top;
      box-shadow:0 16px 35px rgba(15,23,42,.65);
      position:relative;
      overflow:hidden;
      transform:translateY(10px);
      opacity:0;
      animation:cardIn .45s ease-out forwards;
      transition:transform .18s ease,box-shadow .18s ease;
    }
    .book-container::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:radial-gradient(circle at top,#f472b6,transparent 55%);
      opacity:.18;
      pointer-events:none;
    }

    .book-container h2{
      color:#fb8cbc;
      font-size:1.15rem;
      margin-bottom:2px;
    }
    .book-container h5,
    .book-container h4{
      font-size:.8rem;
      color:#e5e7eb;
      margin-bottom:6px;
      font-weight:500;
    }
    .book-container p{
      font-size:.8rem;
      line-height:1.4;
      color:#e5e7eb;
      max-height:120px;
      overflow:auto;
    }

    .book-container button{
      background:linear-gradient(135deg,#f97373,#fb3d6b);
      color:#111827;
      padding:7px 16px;
      border:none;
      border-radius:999px;
      margin-top:10px;
      font-size:.8rem;
      font-weight:500;
      cursor:pointer;
      box-shadow:0 8px 18px rgba(248,113,113,.45);
      transition:transform .12s,box-shadow .12s,filter .12s;
    }

    .book-container:hover{
      transform:translateY(-4px);
      box-shadow:0 20px 40px rgba(15,23,42,.8);
    }
    .book-container button:hover{
      transform:translateY(-1px);
      filter:brightness(1.05);
    }
    .book-container button:active{
      transform:translateY(1px);
      box-shadow:0 4px 12px rgba(248,113,113,.4);
    }

    @keyframes cardIn{
      from{transform:translateY(18px) scale(.97);opacity:0;}
      to{transform:translateY(0) scale(1);opacity:1;}
    }

    /* Add button */
    .addbtn{
      background:linear-gradient(135deg,#f973b8,#fb7185);
      color:#111827;
      border-radius:999px;
      padding:16px 22px;
      font-size:28px;
      border:none;
      position:fixed;
      bottom:26px;
      right:26px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 18px 35px rgba(244,114,182,.7);
      transition:transform .14s,box-shadow .14s;
      z-index:3;
    }
    .addbtn:hover{
      transform:translateY(-3px) scale(1.05) rotate(4deg);
      box-shadow:0 24px 45px rgba(244,114,182,.9);
    }
    .addbtn:active{
      transform:translateY(1px) scale(.97);
      box-shadow:0 10px 24px rgba(244,114,182,.7);
    }

    /* Overlay & popup */
    .overlay{
      background-color:#020617;
      opacity:0;
      position:fixed;
      inset:0;
      z-index:1;
      display:none;
      animation:fadeIn .25s forwards;
    }

    .addpopup{
      background:linear-gradient(135deg,#f973b8,#fb7185);
      width:min(460px,90%);
      padding:26px 22px 20px;
      z-index:2;
      position:fixed;
      border-radius:18px;
      left:50%;
      top:50%;
      transform:translate(-50%,-45%) scale(.95);
      display:none;
      box-shadow:0 24px 55px rgba(15,23,42,.9);
      animation:popupIn .35s ease-out forwards;
    }
    .addpopup h2{
      margin-bottom:8px;
      color:#111827;
      letter-spacing:.04em;
    }
    .addpopup form{margin-top:6px;}

    .addpopup input,
    .addpopup textarea{
      background:rgba(249,250,251,.6);
      width:100%;
      margin:6px 0;
      padding:7px 8px;
      font-size:.9rem;
      border-radius:10px;
      border:1px solid rgba(15,23,42,.55);
      outline:none;
      transition:border .16s,box-shadow .16s,background .16s;
    }
    .addpopup input::placeholder,
    .addpopup textarea::placeholder{
      color:#4b5563;
    }
    .addpopup input:focus,
    .addpopup textarea:focus{
      background:#fff;
      box-shadow:0 0 0 1px rgba(15,23,42,.9);
    }
    .addpopup textarea{
      min-height:90px;
      resize:vertical;
    }

    .addpopup button{
      background:#111827;
      color:#f9fafb;
      padding:6px 14px;
      border:none;
      border-radius:999px;
      font-size:.85rem;
      margin-right:8px;
      margin-top:8px;
      cursor:pointer;
      transition:transform .12s,background .12s;
    }
    #cancel-pop-up{
      background:transparent;
      border:1px solid #111827;
      color:#111827;
    }
    .addpopup button:hover{transform:translateY(-1px);}
    .addpopup button:active{transform:translateY(1px) scale(.97);}

    @keyframes fadeIn{
      from{opacity:0;}
      to{opacity:.78;}
    }
    @keyframes popupIn{
      from{opacity:0;transform:translate(-50%,-38%) scale(.92);}
      to{opacity:1;transform:translate(-50%,-50%) scale(1);}
    }

    /* responsive */
    @media (max-width:768px){
      .container{justify-content:center;}
      .book-container{width:100%;max-width:360px;}
    }
    @media (max-width:480px){
      .navbar h1{font-size:1.3rem;}
      .addbtn{
        padding:14px 20px;
        font-size:24px;
        bottom:18px;
        right:18px;
      }
      .container{padding:14px 10px 70px;}
    }