:root {
       --bg: #0b1220; /* deep navy */
       --fg: #e6edf6; /* near-white */
       --muted: #9db0cf;
       --brand: #5cc8ff; /* hopeful cyan */
       --accent: #ffd166; /* warm gold */
       --card: #11192b;
       --border: #1e2a44;
       --success: #34d399;
       --danger: #ef4444;
   }

   * {
       box-sizing: border-box
   }

   html, body {
       margin: 0;
       padding: 0;
       background: var(--bg);
       color: var(--fg);
       font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
   }

   a {
       color: var(--brand);
       text-decoration: none
   }

       a:hover {
           text-decoration: underline
       }

   .container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 24px
   }

   header {
       position: sticky;
       top: 0;
       z-index: 50;
       background: linear-gradient(180deg,rgba(11,18,32,.95),rgba(11,18,32,.75));
       backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--border)
   }

   .nav {
       display: flex;
       align-items: center;
       gap: 16px;
       justify-content: space-between
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
       font-weight: 800;
       letter-spacing: .3px
   }

       .brand .dot {
           width: 10px;
           height: 10px;
           border-radius: 999px;
           background: var(--accent);
           box-shadow: 0 0 24px var(--accent)
       }

   .menu {
       display: flex;
       gap: 14px;
       flex-wrap: wrap
   }

       .menu a {
           padding: 8px 12px;
           border: 1px solid transparent;
           border-radius: 12px
       }

           .menu a[aria-current="page"], .menu a:hover {
               border-color: var(--border);
               background: rgba(255,255,255,.03)
           }

   .hero {
       padding: 56px 0;
       display: grid;
       grid-template-columns: 1.1fr .9fr;
       gap: 28px
   }

   @media (max-width: 900px) {
       .hero {
           grid-template-columns: 1fr
       }
   }

   h1 {
       font-size: clamp(28px,3.5vw,40px);
       line-height: 1.1;
       margin: 0 0 12px
   }

   .lead {
       color: var(--muted);
       font-size: clamp(14px,2vw,17px)
   }

   .card {
       background: var(--card);
       border: 1px solid var(--border);
       border-radius: 18px;
       padding: 18px
   }

       .card + .card {
           margin-top: 16px
       }

   .tag {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       border: 1px solid var(--border);
       border-radius: 999px;
       padding: 6px 10px;
       color: var(--muted);
       font-size: 12px
   }

   .verse-card {
       position: relative;
       overflow: hidden
   }

   .verse-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px
   }

   .ref {
       font-weight: 700;
       color: var(--accent)
   }

   .lang-switch {
       display: flex;
       gap: 8px
   }

       .lang-switch button {
           background: transparent;
           border: 1px solid var(--border);
           color: var(--fg);
           padding: 6px 10px;
           border-radius: 999px;
           cursor: pointer
       }

           .lang-switch button[aria-pressed="true"] {
               background: rgba(255,255,255,.06)
           }

   .verse-text {
       font-size: clamp(18px,2.2vw,22px);
       line-height: 1.5;
       margin: 10px 0 8px
   }

   .hook {
       font-weight: 600;
       color: var(--muted);
       margin-bottom: 8px
   }

   .actions {
       display: flex;
       gap: 8px;
       flex-wrap: wrap
   }

   .btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 10px 14px;
       border-radius: 12px;
       border: 1px solid var(--border);
       background: #0e182b;
       cursor: pointer
   }

       .btn.primary {
           background: linear-gradient(180deg,#1e88e5,#2563eb);
           border-color: transparent;
           color: #fff
       }

   .grid {
       display: grid;
       gap: 16px
   }

       .grid.cols-3 {
           grid-template-columns: repeat(3,1fr)
       }

       .grid.cols-2 {
           grid-template-columns: repeat(2,1fr)
       }

   @media (max-width: 900px) {
       .grid.cols-3, .grid.cols-2 {
           grid-template-columns: 1fr
       }
   }

   .media {
       position: relative;
       aspect-ratio: 16/9;
       border-radius: 16px;
       overflow: hidden;
       border: 1px solid var(--border)
   }

       .media iframe, .media img, .media audio {
           width: 100%;
           height: 100%
       }

       .media img {
           object-fit: cover
       }

   .section-title {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin: 10px 0 8px
   }

   .list {
       display: grid;
       gap: 12px
   }

   .footer {
       border-top: 1px solid var(--border);
       margin-top: 24px;
       padding: 24px 0;
       color: var(--muted);
       font-size: 14px
   }

   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0,0,0,0);
       white-space: nowrap;
       border: 0
   }

   /* Toast (copy/share feedback) */
   .toast {
       position: fixed;
       inset: auto 16px 16px auto;
       background: var(--card);
       border: 1px solid var(--border);
       padding: 10px 14px;
       border-radius: 12px;
       opacity: 0;
       transform: translateY(8px);
       transition: .25s
   }

       .toast.show {
           opacity: 1;
           transform: none
       }


.book-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

    .book-selector button {
        background-color: #d1d5db;
        color: #4b5563;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        margin-right: 0.5rem;
    }

        .book-selector button.active,
        .book-selector button:hover {
            background-color: #3b82f6;
            color: #ffffff;
        }
/*from index*/

.tiles-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tile {
    flex: 1 1 24%;
    box-sizing: border-box;
    background: #0b1220;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s;
}

    .tile:hover {
        transform: scale(1.02);
    }

    .tile span {
        display: block;
        margin: 10px 0;
        font-size: 16px;
        color: #ffffff;
    }

    .tile .image.fit {
        display: block;
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
    }

    .tile img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .tile {
        flex: 1 1 48%;
    }
}

@media (max-width: 480px) {
    .tile {
        flex: 1 1 100%;
    }
}

.lang-switch {
    display: flex;
    justify-content: space-between; /* Left-right alignment */
    align-items: center; /* Vertically centered */
    gap: 10px; /* Optional spacing */
}

.buttons {
    display: flex;
    gap: 6px; /* Space between buttons */
}

.small-btn {
    padding: 5px 12px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    background-color: #3498db;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
}

    .small-btn:hover {
        background-color: #2980b9;
    }