body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f5f5f5;
}
#container {
    max-width: 900px;
    margin: 2em auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px #0002;
    padding: 2em 2em 3em 2em;
}
#searchForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
    gap: 0.7em;
}
#searchBox {
    width: 100%;
    max-width: 350px;
    padding: 0.5em 1em;
    font-size: 1.08em;
    border-radius: 8px;
    border: 1px solid #bbb;
    background: #fafbfc;
    box-sizing: border-box;
    margin-bottom: 0.2em;
}
#searchForm button {
    padding: 0.5em 1.2em;
    font-size: 1.08em;
    border-radius: 8px;
    border: 1px solid #888;
    background: #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.2em;
    width: 100%;
    max-width: 150px;
}
#searchForm button:hover {
    background: #e0e0e0;
}
#searchBox, #searchForm button {
    margin-left: 0;
    margin-right: 0;
}
#results {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2em;
}
#results .searching-message {
    text-align: center;
    width: 100%;
    font-size: 1.1em;
    color: #555;
    margin: 2em 0;
    display: block;
}
.book {
    display: grid;
    grid-template-areas:
        "cover-cell title-cell author-cell details-modern actions-cell";
    grid-template-columns: 60px 2fr 1.5fr 2fr 90px;
    align-items: center;
    border: 1px solid #ccc;
    padding: 1.5em 1.5em 1.2em 1.5em;
    margin-bottom: 1.5em;
    background: #fafafa;
    border-radius: 14px;
    box-shadow: 0 2px 8px #0001;
    gap: 1.2em;
    width: 100%;
    max-width: 900px;
}
.cell { display: flex; align-items: center; }
.cover-cell { grid-area: cover-cell; justify-content: center; }
.cover-cell img { max-width: 60px; max-height: 90px; border-radius: 6px; box-shadow: 0 2px 8px #0002; }
.title-cell { grid-area: title-cell; font-weight: bold; font-size: 1.18em; }
.author-cell { grid-area: author-cell; color: #555; font-size: 1em; }
.details-modern { 
    grid-area: details-modern; 
    display: flex; 
    flex-direction: column; 
    gap: 0.5em; 
    align-items: flex-start;
    width: 100%;
}
.details-row {
    display: flex;
    gap: 0.7em;
    width: 100%;
}
.lang-chip, .pub-chip, .isbn-chip, .pages-chip, .size-chip {
    display: inline-block;
    background: #e8eaf6;
    color: #283593;
    border-radius: 16px;
    padding: 0.25em 0.9em;
    font-size: 0.98em;
    font-weight: 500;
    margin-bottom: 2px;
    letter-spacing: 0.01em;
    text-align: center;
}
.pub-chip { background: #e3f2fd; color: #1565c0; }
.isbn-chip { background: #f3e5f5; color: #6a1b9a; }
.pages-chip { background: #e0f2f1; color: #00695c; }
.size-chip { background: #fff3e0; color: #ef6c00; }
.actions-cell { grid-area: actions-cell; justify-content: center; }
.actions-cell button {
    padding: 0.5em 1.2em;
    font-size: 1em;
    border-radius: 20px;
    border: none;
    background: linear-gradient(90deg, #42a5f5 0%, #478ed1 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px #0001;
    transition: background 0.2s, box-shadow 0.2s;
}
.actions-cell button:hover {
    background: linear-gradient(90deg, #1976d2 0%, #1565c0 100%);
    box-shadow: 0 4px 16px #0002;
}
#email-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5em;
}
#emailForm, #emailDisplay {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}
#emailLabel {
    font-weight: bold;
    white-space: nowrap;
    font-size: 0.75em;
}
#emailBox {
    max-width: 150px;
    padding: 0.22em 0.5em;
    font-size: 0.75em;
    border-radius: 6px;
    border: 1px solid #bbb;
    background: #fafbfc;
    box-sizing: border-box;
}
#saveEmailBtn, #changeEmailBtn {
    padding: 0.15em 0.5em;
    font-size: 0.85em;
    border-radius: 6px;
    border: 1px solid #888;
    background: #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 0;
    /* identical styling for both buttons */
}
#saveEmailBtn:hover, #changeEmailBtn:hover {
    background: #e0e0e0;
}
@media (max-width: 700px) {
    #emailLabel {
        font-size: 0.98em;
    }
    #emailBox, #saveEmailBtn, #changeEmailBtn {
        font-size: 0.98em;
        padding: 0.35em 0.5em;
        max-width: 50vw;
        margin-left: 0;
        margin-right: 0;
    }
    #emailBox {
        width: 100%;
        min-width: 0;
    }
}

/* Desktop: center content and use half width */
@media (min-width: 1000px) {
    #container {
        max-width: 700px;
    }
    #results {
        align-items: center;
    }
    .book {
        max-width: 600px;
    }
}

/* Mobile styles */
@media (max-width: 700px) {
    #container {
        max-width: 100vw;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 1em 0.2em 2em 0.2em;
    }
    #searchForm {
        flex-direction: column;
        align-items: center;
        gap: 0.7em;
        margin-bottom: 1.2em;
    }
    #searchBox, #searchForm button {
        font-size: 1.08em;
        padding: 0.7em 0.7em;
        max-width: 90vw;
    }
    #searchBox {
        width: 100%;
        min-width: 0;
    }
    #results {
        margin-top: 1em;
        align-items: stretch;
    }
    .book {
        grid-template-areas:
            "cover-cell"
            "title-cell"
            "author-cell"
            "details-modern"
            "actions-cell";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 0.7em;
        max-width: 98vw;
        width: 100%;
        font-size: 1.15em;
        padding: 1.2em 0.7em;
        text-align: center;
        justify-items: center;
        box-sizing: border-box;
    }
    .cover-cell img { max-width: 130px; max-height: 200px; }
    .title-cell { font-size: 1.3em; }
    .author-cell { font-size: 1.1em; }
    .details-modern {
        align-items: center;
        font-size: 1.08em;
        width: 100%;
    }
    .details-row {
        justify-content: center;
        gap: 0.7em;
        width: 100%;
    }
    .actions-cell button {
        font-size: 0.95em;
        padding: 0.7em 1.2em;
    }
    #email-section {
        margin-bottom: 1em;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    #emailForm, #emailDisplay {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5em;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
        font-size: 0.75em;
    }
    #emailLabel {
        font-size: 0.95em;
    }
    #emailBox, #saveEmailBtn, #changeEmailBtn {
        font-size: 1em;
        padding: 0.5em 0.7em;
        max-width: 50vw;
        margin-left: 0;
        margin-right: 0;
    }
    #emailBox {
        width: 100%;
        min-width: 0;
    }
}
#type-selection {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    margin: 0.2em 0 0.2em 0;
    padding: 0.5em 1.2em;
    border-radius: 12px;
    font-size: 1.08em;
    font-weight: 500;
    width: 100%;
    max-width: 350px;
}
#type-selection label {
    display: flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
    padding: 0.2em 0.7em;
    border-radius: 6px;
    transition: background 0.2s;
}
#type-selection input[type="radio"] {
    accent-color: #42a5f5;
    margin-right: 0.3em;
}
#type-selection label:hover {
    background: #e3f2fd;
}
@media (max-width: 700px) {
    #type-selection {
        flex-direction: row;
        font-size: 1.08em;
        gap: 0.7em;
        padding: 0.5em 0.2em;
    }
    #type-selection label {
        padding: 0.2em 0.3em;
        font-size: 1em;
    }
}
.book.audiobook .author-cell,
.book.audiobook .pub-chip,
.book.audiobook .isbn-chip,
.book.audiobook .pages-chip {
    display: none !important;
}
.book.audiobook .magnet-link {
    display: inline-block;
    margin-right: 1em;
    padding: 0.4em 1em;
    background: #e8eaf6;
    color: #283593;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
}
.book.audiobook .magnet-link:hover {
    background: #c5cae9;
}
.book.audiobook {
    display: grid;
    grid-template-areas:
        "cover-cell title-cell actions-cell"
        "cover-cell details-modern actions-cell";
    grid-template-columns: 180px 1fr 90px;
    grid-template-rows: auto 1fr;
    min-height: 200px;
    align-items: stretch;
}
.book.audiobook .actions-cell {
    grid-area: actions-cell;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}
.book.audiobook .cover-cell {
    grid-area: cover-cell;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.book.audiobook .audiobook-cover {
    max-width: 180px;
    max-height: 270px;
    border-radius: 10px;
    box-shadow: 0 2px 12px #0002;
}
.book.audiobook .audiobook-title-cell {
    grid-area: title-cell;
    font-size: 1.6em;
    font-weight: bold;
    align-items: flex-end;
    margin-bottom: 0.2em;
    padding-top: 0.2em;
    padding-left: 0.5em;
}
.book.audiobook .audiobook-details {
    grid-area: details-modern;
    flex-direction: column;
    align-items: flex-start;
    width: auto;         /* Change from 100% to auto */
    padding-left: 0.5em;
    margin-top: 0.2em;
}
.book.audiobook .audiobook-row-top {
    display: flex;
    gap: 1em;
    margin-bottom: 0.5em;
    justify-content: center; /* Horizontally center the chips */
    width: 100%;
}
.book.audiobook .audiobook-row-bottom {
    display: flex;
    gap: 1em;
}
.book.audiobook .lang-chip,
.book.audiobook .size-chip,
.book.audiobook .format-chip,
.book.audiobook .bitrate-chip {
    font-size: 1.08em;
    font-weight: 500;
    border-radius: 16px;
    padding: 0.25em 0.9em;
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}
.book.audiobook .lang-chip { background: #e8eaf6; color: #283593; }
.book.audiobook .size-chip { background: #fff3e0; color: #ef6c00; }
.book.audiobook .format-chip { background: #e0f2f1; color: #00695c; }
.book.audiobook .bitrate-chip { background: #f3e5f5; color: #6a1b9a; }
.book.audiobook .actions-cell {
    grid-area: actions-cell;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
}
.book.audiobook .send-btn {
    margin-top: 0;
}
@media (max-width: 700px) {
    .book.audiobook {
        grid-template-areas:
            "cover-cell"
            "title-cell"
            "details-modern"
            "actions-cell";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        min-height: unset;
    }
    .book.audiobook .audiobook-cover {
        max-width: 90vw;
        max-height: 50vw;
    }
    .book.audiobook .audiobook-title-cell {
        font-size: 1.2em;
        padding-left: 0;
    }
    .book.audiobook .audiobook-details {
        padding-left: 0;
    }
}
.cover-cell img,
.book.audiobook .audiobook-cover {
    height: 180px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 2px 12px #0002;
}
.book.audiobook .details-row {
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: auto;
}
/* --- Desktop ebook card layout to match audiobooks --- */
@media (min-width: 700px) {
  .book:not(.audiobook) {
    display: grid;
    grid-template-areas:
      "cover-cell title-cell actions-cell"
      "cover-cell details-modern actions-cell";
    grid-template-columns: 180px 1fr 90px;
    grid-template-rows: auto 1fr;
    min-height: 200px;
    align-items: stretch;
    max-width: 700px;
    gap: 1.2em;
    padding: 1.5em 1.5em 1.2em 1.5em;
    background: #fafafa;
    border-radius: 14px;
    box-shadow: 0 2px 8px #0001;
    border: 1px solid #ccc;
    margin-bottom: 1.5em;
    width: 100%;
  }
  .book:not(.audiobook) .cover-cell {
    grid-area: cover-cell;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .book:not(.audiobook) .cover-cell img {
    height: 180px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 2px 12px #0002;
  }
  .book:not(.audiobook) .title-cell {
    grid-area: title-cell;
    font-size: 1.6em;
    font-weight: bold;
    align-items: flex-end;
    margin-bottom: 0.2em;
    padding-top: 0.2em;
    padding-left: 0.5em;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
  .book:not(.audiobook) .author-cell {
    display: none !important; /* Hide author row, can be added to details if desired */
  }
  .book:not(.audiobook) .details-modern {
    grid-area: details-modern;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    padding-left: 0.5em;
    margin-top: 0.2em;
    gap: 0.5em;
  }
  .book:not(.audiobook) .details-row {
    display: flex;
    gap: 1em;
    width: 100%;
  }
  .book:not(.audiobook) .actions-cell {
    grid-area: actions-cell;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
  }
  .book:not(.audiobook) .actions-cell button {
    font-size: 1em;
    padding: 0.5em 1.2em;
    border-radius: 20px;
    border: none;
    background: linear-gradient(90deg, #42a5f5 0%, #478ed1 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px #0001;
    transition: background 0.2s, box-shadow 0.2s;
    margin-top: 0;
  }
  .book:not(.audiobook) .actions-cell button:hover {
    background: linear-gradient(90deg, #1976d2 0%, #1565c0 100%);
    box-shadow: 0 4px 16px #0002;
  }
}