* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #111;
}

header {
    background: #111;
    color: white;
    padding: 20px;
}

header h2 {
    margin: 0 0 20px;
}

nav {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

nav a {
    color: white;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

nav .welcome {
    color: #90ee90;
    margin-left: auto;
}

nav form {
    display: inline;
    margin: 0;
}

nav button {
    border: none;
    background: #cc2929;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

nav button:hover {
    background: #a91f1f;
}
.hero {
    text-align: center;
    padding: 100px 30px;
}

.hero h1 {
    font-size: 56px;
    margin: 0;
}

.hero > p {
    margin-top: 35px;
}

.cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}

.card {
    background: white;
    width: 250px;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.admin-layout {
    min-height: calc(100vh - 120px);
    display: flex;
}

.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #1b1b1b;
    color: white;
    padding: 30px 20px;
}

.admin-sidebar h2 {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 22px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.admin-nav a,
.admin-nav span {
    display: block;
    padding: 12px 14px;
    border-radius: 6px;
    color: white;
    text-decoration: none;
}

.admin-nav a:hover {
    background: #333;
    text-decoration: none;
}

.admin-nav a.active {
    background: #4f46e5;
    color: white;
    font-weight: bold;
}

.admin-nav span {
    color: #888;
    cursor: not-allowed;
}

.admin-content {
    flex: 1;
    min-width: 0;
    padding: 40px;
    background: #f5f5f5;
}

.admin-content-inner {
    max-width: 1100px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 760px) {
    .admin-layout {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
    }

    .admin-content {
        padding: 20px;
    }
}

/* =========================
   Admin Dashboard
========================= */

.admin-dashboard-header {
    margin-bottom: 28px;
}

.admin-dashboard-header h1 {
    margin: 0 0 8px;
    font-size: 30px;
    color: #1f2937;
}

.admin-dashboard-header p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.admin-dashboard-card {
    display: block;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    text-decoration: none;
    color: #1f2937;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}

.admin-dashboard-card-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #eef2ff;
    font-size: 24px;
}

.admin-dashboard-card h2 {
    margin: 0 0 8px;
    font-size: 19px;
}

.admin-dashboard-card p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

/* 页面标题栏 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.page-header h1 {
    margin: 0;
}

.btn-primary {
    display: inline-block;
    background: #4f46e5;
    color: white;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #4338ca;
    text-decoration: none;
}

/* 后台课程表格 */

.admin-table-wrapper {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.admin-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.admin-table td {
    color: #334155;
    font-size: 14px;
}

.admin-table tbody tr:hover {
    background: #f8fafc;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-actions form {
    margin: 0;
}

.btn-edit,
.btn-delete {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.btn-edit {
    background: #eef2ff;
    color: #4338ca;
}

.btn-edit:hover {
    background: #e0e7ff;
}

.btn-delete {
    border: none;
    background: #fef2f2;
    color: #dc2626;
}

.btn-delete:hover {
    background: #fee2e2;
}

/* ==============================
   课程中心
============================== */

.courses-page {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

.courses-heading {
    margin-bottom: 32px;
}

.courses-heading h1 {
    margin: 0 0 10px;
    font-size: 36px;
}

.courses-heading p {
    margin: 0;
    color: #666;
    font-size: 16px;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.course-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.course-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #f2f2f2;
}

.course-card-content {
    padding: 22px;
}

.course-labels {
    margin-bottom: 14px;
}

.vip-label,
.free-label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.vip-label {
    color: #8a5800;
    background: #fff1c7;
}

.free-label {
    color: #176b3a;
    background: #dcf6e8;
}

.course-card-content h2 {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.4;
}

.course-card-content p {
    min-height: 48px;
    margin: 0 0 20px;
    overflow: hidden;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.course-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: #111;
    border-radius: 8px;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.course-link:hover {
    background: #333;
    transform: translateY(-1px);
}

.empty-state {
    padding: 60px 30px;
    text-align: center;
    background: #f7f7f7;
    border-radius: 14px;
}

/* 平板 */
@media (max-width: 900px) {
    .course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 手机 */
@media (max-width: 600px) {
    .courses-page {
        width: min(100% - 24px, 1200px);
        padding-top: 30px;
    }

    .courses-heading h1 {
        font-size: 30px;
    }

    .course-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* 后台课程封面 */

.admin-course-cover {

    width: 80px;

    height: 45px;

    object-fit: cover;

    border-radius: 8px;

    display: block;

}

.admin-course-cover.placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f2f2f2;

    color: #999;

    font-size: 12px;

}

/* 课程表单 */

.course-form {
    max-width: 760px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #111;
}

.form-group small {
    display: block;
    margin-top: 8px;
    color: #777;
    line-height: 1.5;
}

.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}


/* 封面上传与预览 */

.cover-upload-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 2px dashed #cfcfcf;
    border-radius: 12px;
    background: #f7f7f7;
    cursor: pointer;
}

.cover-upload-box:hover {
    border-color: #888;
    background: #f2f2f2;
}

.cover-upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cover-preview {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #666;
    text-align: center;
}

.cover-placeholder strong {
    color: #222;
    font-size: 17px;
}

.cover-placeholder span {
    font-size: 14px;
}

.is-hidden {
    display: none;
}

/* ===========================
   Course Detail
=========================== */

.course-detail-page{

    max-width:1000px;

    margin:60px auto;

    padding:20px;

}

.course-detail-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.course-detail-cover{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

}

.course-detail-body{

    padding:40px;

}

.course-detail-body h1{

    margin:20px 0;

    font-size:40px;

}

.course-description{

    color:#666;

    line-height:1.8;

    font-size:18px;

}

.course-detail-body hr{

    margin:40px 0;

    border:none;

    border-top:1px solid #eee;

}

.course-detail-body h2{

    margin-bottom:20px;

}

.course-detail-body .btn-primary{

    display:inline-block;

    margin-top:40px;

}

.form-group select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.form-group select:focus {
    outline: none;
    border-color: #111;
}
.zip-upload-progress {
    margin-top: 14px;
}

.zip-progress-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    background: #e8e8e8;
    border-radius: 999px;
}

.zip-progress-bar {
    width: 0;
    height: 100%;
    background: #111;
    border-radius: inherit;
    transition: width 0.2s ease;
}

.zip-upload-progress p {
    margin: 8px 0 0;
    font-size: 14px;
}

/* 首页布局优化 */

.home-page {
    background: #f6f7fb;
}

.home-page .hero {
    min-height: auto;
    padding: 110px 24px 90px;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(79, 70, 229, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f7fb 100%
        );
}

.home-page .hero-content {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.home-page .hero-content h1 {
    margin: 18px 0 20px;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.home-page .hero-content > p:not(.eyebrow) {
    max-width: 680px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.7;
    color: #555;
}

.home-page .eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #6257e8;
}

.home-page .hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.home-page .home-section {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 72px 0;
}

.home-page .home-section + .home-section {
    border-top: 1px solid #e5e7eb;
}

.home-page .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 30px;
}

.home-page .section-heading h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.home-page .course-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.home-page .course-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.home-page .course-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.10);
}

.home-page .course-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.home-page .course-cover.placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: #eceef5;
    color: #777;
}

.home-page .course-card-content {
    padding: 24px;
}

.home-page .course-card-content h3 {
    margin: 12px 0;
    font-size: 24px;
    line-height: 1.3;
}

.home-page .course-card-content h3 a {
    color: inherit;
    text-decoration: none;
}

.home-page .course-card-content > p {
    color: #666;
    line-height: 1.7;
}

.home-page .course-category {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #6257e8;
}

.home-page .cards {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.home-page .card {
    padding: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.05);
}

.home-page .card h3 {
    margin-top: 0;
    font-size: 24px;
}

.home-page .empty-state {
    width: min(900px, calc(100% - 48px));
    margin: 70px auto;
}

@media (max-width: 800px) {
    .home-page .hero {
        padding: 80px 20px 64px;
    }

    .home-page .hero-content h1 {
        font-size: 44px;
    }

    .home-page .hero-content > p:not(.eyebrow) {
        font-size: 17px;
    }

    .home-page .home-section {
        width: min(100% - 32px, 1180px);
        padding: 54px 0;
    }

    .home-page .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-page .section-heading h2 {
        font-size: 30px;
    }

    .home-page .cards {
        grid-template-columns: 1fr;
    }
}

/* 课程详情页 */

.course-detail-page {
    background: #f6f7fb;
}

.course-detail-hero {
    padding: 90px 24px;
    background:
        radial-gradient(
            circle at top left,
            rgba(79, 70, 229, 0.12),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f7fb 100%
        );
}

.course-detail-container {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.course-detail-container.narrow {
    width: min(1050px, 100%);
}

.course-detail-hero .course-detail-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, 0.9fr);
    align-items: center;
    gap: 64px;
}

.course-detail-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.course-category-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ece9ff;
    color: #5548d9;
    font-size: 13px;
    font-weight: 800;
}

.course-detail-copy h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.course-detail-description {
    max-width: 720px;
    margin: 26px 0 0;
    color: #5f6368;
    font-size: 20px;
    line-height: 1.75;
}

.course-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 30px;
    color: #666;
    font-size: 14px;
}

.course-detail-meta strong {
    color: #222;
}

.course-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid #d6d8df;
    border-radius: 10px;
    background: #fff;
    color: #222;
    font-weight: 700;
    text-decoration: none;
}

.course-access-message {
    padding: 15px 18px;
    border: 1px solid #f0caca;
    border-radius: 12px;
    background: #fff3f3;
    color: #a33;
    font-weight: 700;
}

.course-detail-media {
    min-width: 0;
}

.course-detail-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 22px;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.16);
}

.course-detail-cover.placeholder {
    display: grid;
    place-items: center;
    background: #e8eaf2;
    color: #777;
}

.course-detail-section {
    padding: 80px 24px 100px;
}

.course-detail-section h2 {
    margin: 0;
    font-size: 38px;
    letter-spacing: -0.03em;
}

.course-overview-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.course-overview-card {
    padding: 30px;
    border: 1px solid #e4e6ec;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.05);
}

.course-overview-card h3 {
    margin: 0 0 12px;
    font-size: 22px;
}

.course-overview-card p {
    margin: 0;
    color: #666;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .course-detail-hero {
        padding: 64px 20px;
    }

    .course-detail-hero .course-detail-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .course-detail-media {
        order: -1;
    }

    .course-overview-grid {
        grid-template-columns: 1fr;
    }
}

/* 课程目录 */

.course-catalog-section {
    padding: 0 24px 110px;
    background: #f6f7fb;
}

.course-catalog-section h2 {
    margin: 0;
    font-size: 38px;
    letter-spacing: -0.03em;
}

.course-catalog-summary {
    margin: 14px 0 32px;
    color: #666;
}

.course-catalog {
    display: grid;
    gap: 18px;
}

.catalog-part {
    overflow: hidden;
    border: 1px solid #e1e4eb;
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.04);
}

.catalog-part summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    cursor: pointer;
    list-style: none;
}

.catalog-part summary::-webkit-details-marker {
    display: none;
}

.catalog-part summary span {
    color: #6257e8;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.catalog-part summary strong {
    font-size: 19px;
}

.catalog-part-content {
    padding: 0 24px 24px;
    border-top: 1px solid #edf0f4;
}

.catalog-module {
    padding-top: 24px;
}

.catalog-module h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.catalog-lessons {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-lessons li {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid #edf0f4;
}

.catalog-lessons li:first-child {
    border-top: 0;
}

.catalog-lessons p {
    margin: 7px 0 0;
    color: #70737a;
    line-height: 1.6;
}

.catalog-lesson-meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.catalog-lesson-meta span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #f0f1f5;
    color: #555;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .catalog-lessons li {
        flex-direction: column;
    }

    .catalog-lesson-meta {
        flex-wrap: wrap;
    }
}

/* 学习页面 */

.study-body {
    margin: 0;
    background: #f4f5f8;
    overflow: hidden;
}

.study-shell {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    height: 100vh;
}

.study-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100vh;
    overflow: hidden;
    background: #111318;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.study-sidebar-header {
    padding: 24px 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.study-back-link {
    display: inline-block;
    margin-bottom: 18px;
    color: #aeb4c0;
    text-decoration: none;
    font-size: 13px;
}

.study-sidebar-header h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
}

.study-catalog {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px 40px;
    -webkit-overflow-scrolling: touch;
}

.study-empty {
    padding: 12px;
    color: #aeb4c0;
}

.study-part {
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
}

.study-part summary {
    padding: 14px 14px;
    cursor: pointer;
    list-style: none;
}

.study-part summary::-webkit-details-marker {
    display: none;
}

.study-part summary span {
    display: block;
    margin-bottom: 5px;
    color: #8f97a7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.study-part summary strong {
    display: block;
    font-size: 14px;
    line-height: 1.45;
}

.study-part-content {
    padding: 0 8px 10px;
}

.study-module {
    margin-bottom: 14px;
}

.study-module h2 {
    margin: 8px 8px 10px;
    color: #8f97a7;
    font-size: 12px;
    font-weight: 700;
}

.study-lessons {
    display: grid;
    gap: 5px;
}

.study-lesson-button {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #e5e7eb;
    text-align: left;
    cursor: pointer;
}

.study-lesson-button:hover,
.study-lesson-button.active {
    background: rgba(99, 88, 255, 0.18);
}

.study-lesson-number {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #aeb4c0;
    font-size: 11px;
    font-weight: 800;
}

.study-lesson-text {
    min-width: 0;
}

.study-lesson-text strong {
    display: block;
    font-size: 13px;
    line-height: 1.45;
}

.study-lesson-text small {
    display: block;
    margin-top: 4px;
    color: #8f97a7;
    font-size: 11px;
}

.study-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100vh;
}

.study-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid #e4e6ec;
}

.study-topbar-label {
    margin: 0 0 3px;
    color: #8a8f98;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.study-topbar strong {
    font-size: 15px;
}

.study-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.study-open-original,
.study-ai-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}

.study-open-original {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d8dbe3;
    background: #fff;
    color: #222;
    text-decoration: none;
}

.study-ai-button {
    border: 0;
    background: #6758ff;
    color: #fff;
    opacity: 0.55;
}

.study-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.study-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
    overflow: auto;
}

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

    .study-sidebar {
        display: none;
    }
}

/* 学习页面 Concept */

.study-concepts {
    display: grid;
    gap: 3px;
    margin: 4px 0 10px 34px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.08);
}

.study-concept-button {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #aeb4c0;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}

.study-concept-button:hover,
.study-concept-button.active {
    background: rgba(99, 88, 255, 0.16);
    color: #fff;
}

.study-concept-number {
    flex: 0 0 auto;
    color: #777f8e;
    font-size: 10px;
    font-weight: 800;
    padding-top: 2px;
}

.study-concept-button.active .study-concept-number {
    color: #aaa2ff;
}

.study-catalog::-webkit-scrollbar {
    width: 7px;
}

.study-catalog::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
}

.study-catalog::-webkit-scrollbar-track {
    background: transparent;
}

/* 学习进度 */

.study-progress {
    margin-top: 18px;
}

.study-progress-info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #aeb4c0;
    font-size: 12px;
}

.study-progress-info strong {
    color: #fff;
}

.study-progress-track {
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
}

.study-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: #7068ff;
    transition: width 0.2s ease;
}

.study-progress p {
    margin: 7px 0 0;
    color: #777f8e;
    font-size: 11px;
}

.study-complete-button {
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    background: #15171c;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.study-complete-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.study-concept-button.completed {
    color: #c9c6ff;
}

.study-concept-button.completed
.study-concept-number {
    color: #8179ff;
}

.study-next-button {
    padding: 10px 15px;
    border: 1px solid #d8dbe2;
    border-radius: 9px;
    background: #fff;
    color: #111318;
    cursor: pointer;
    font-weight: 700;
}

.study-next-button:hover:not(:disabled) {
    background: #f3f4f7;
}

.study-next-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.course-card-progress {
    margin: 18px 0 14px;
}

.course-card-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 7px;
    font-size: 13px;
}

.course-card-progress-header span {
    color: #666;
}

.course-card-progress-header strong {
    color: #111;
}

.course-card-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eceef2;
}

.course-card-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: #6157f5;
}

.course-card-progress p {
    margin: 7px 0 0;
    color: #777;
    font-size: 12px;
}

/* Dashboard */

.dashboard-page {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 64px 0 90px;
}

.dashboard-heading {
    margin-bottom: 34px;
}

.dashboard-heading h1 {
    margin: 8px 0 10px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
}

.dashboard-heading > p:last-child {
    margin: 0;
    color: #666;
}

.dashboard-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.dashboard-stat-card {
    padding: 24px;
    border: 1px solid #e4e5e8;
    border-radius: 16px;
    background: #fff;
}

.dashboard-stat-card span {
    display: block;
    margin-bottom: 14px;
    color: #777;
    font-size: 13px;
}

.dashboard-stat-card strong {
    display: block;
    font-size: 34px;
    line-height: 1;
}

.dashboard-stat-card small {
    display: block;
    margin-top: 8px;
    color: #888;
}

.dashboard-progress-card,
.dashboard-account-card {
    margin-top: 24px;
    padding: 30px;
    border: 1px solid #e4e5e8;
    border-radius: 18px;
    background: #fff;
}

.dashboard-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.dashboard-progress-header h2,
.dashboard-account-card h2 {
    margin: 6px 0 0;
}

.dashboard-progress-header > strong {
    font-size: 32px;
}

.dashboard-progress-track {
    height: 8px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 999px;
    background: #eceef2;
}

.dashboard-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: #6157f5;
}

.dashboard-progress-card > p {
    margin: 10px 0 0;
    color: #777;
    font-size: 13px;
}

.dashboard-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}

.dashboard-account-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.dashboard-account-grid > div {
    padding: 18px;
    border-radius: 12px;
    background: #f5f6f8;
}

.dashboard-account-grid span {
    display: block;
    margin-bottom: 6px;
    color: #777;
    font-size: 12px;
}

.dashboard-account-grid strong {
    word-break: break-word;
}

@media (max-width: 850px) {
    .dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .dashboard-page {
        width: min(
            100% - 28px,
            1180px
        );
        padding-top: 36px;
    }

    .dashboard-stats,
    .dashboard-account-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-progress-header {
        align-items: flex-start;
    }

    .dashboard-actions {
        flex-direction: column;
    }
}

.study-current-concept {
    margin: 4px 0 0;
    color: #777;
    font-size: 13px;
    font-weight: 500;
}

/* Study AI Assistant */

.study-ai-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;

    width: min(420px, 100vw);
    height: 100vh;

    background: #ffffff;
    border-left: 1px solid #e4e5e8;

    box-shadow:
        -12px 0 40px
        rgba(0, 0, 0, 0.12);

    transform: translateX(100%);
    transition:
        transform 0.22s ease;
}

.study-ai-panel.open {
    transform: translateX(0);
}

.study-ai-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    padding: 22px;

    border-bottom:
        1px solid #eceef2;
}

.study-ai-label {
    margin: 0 0 6px;

    color: #777;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.study-ai-header h2 {
    margin: 0;

    font-size: 22px;
}

.study-ai-context {
    margin: 8px 0 0;

    color: #777;

    font-size: 12px;
    line-height: 1.5;
}

.study-ai-context span {
    color: #222;
    font-weight: 600;
}

.study-ai-close {
    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 10px;

    background: #f3f4f6;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

.study-ai-quick-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    padding: 16px 18px;

    border-bottom:
        1px solid #eceef2;
}

.study-ai-quick-button {
    padding: 10px 12px;

    border: 1px solid #dedfe3;
    border-radius: 10px;

    background: #fff;

    font-size: 13px;

    cursor: pointer;
}

.study-ai-messages {
    flex: 1;

    overflow-y: auto;

    padding: 18px;

    background: #f7f8fa;
}

.study-ai-empty {
    padding: 24px;

    border-radius: 14px;

    background: #fff;

    color: #666;
}

.study-ai-empty strong {
    display: block;

    margin-bottom: 8px;

    color: #111;
}

.study-ai-empty p {
    margin: 0;

    line-height: 1.6;
}

.study-ai-message {
    max-width: 88%;

    margin-bottom: 12px;

    padding: 12px 14px;

    border-radius: 14px;

    line-height: 1.6;

    white-space: pre-wrap;
    word-break: break-word;
}

.study-ai-message.user {
    margin-left: auto;

    background: #111;
    color: #fff;
}

.study-ai-message.assistant {
    margin-right: auto;

    background: #fff;

    border:
        1px solid #e4e5e8;
}

.study-ai-form {
    padding: 16px;

    border-top:
        1px solid #eceef2;

    background: #fff;
}

.study-ai-form textarea {
    width: 100%;

    box-sizing: border-box;

    resize: vertical;

    min-height: 84px;
    max-height: 180px;

    padding: 12px;

    border:
        1px solid #d8d9dd;
    border-radius: 12px;

    font: inherit;

    outline: none;
}

.study-ai-form textarea:focus {
    border-color: #777;
}

.study-ai-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-top: 10px;
}

.study-ai-form-footer span {
    color: #888;
    font-size: 12px;
}

.study-ai-send-button {
    padding: 10px 18px;

    border: 0;
    border-radius: 10px;

    background: #111;
    color: #fff;

    font-weight: 700;

    cursor: pointer;
}

@media (max-width: 600px) {
    .study-ai-panel {
        width: 100%;
    }
}

.study-ai-usage {
    margin: 8px 0 0;
    color: #666;
    font-size: 12px;
    line-height: 1.6;
}

.study-ai-usage strong {
    color: #111;
}

.study-ai-usage span {
    margin-left: 10px;
}

/* =========================
   My Courses
========================= */

.my-courses-page {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 64px 0 80px;
}

.my-courses-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
}

.my-courses-header h1 {
    margin: 8px 0 12px;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
}

.my-courses-header > div > p:last-child {
    margin: 0;
    color: #666;
    font-size: 17px;
}

.my-courses-back {
    flex-shrink: 0;
    color: #111;
    text-decoration: none;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
}

.my-courses-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(320px, 420px));
    gap: 28px;
    justify-content: start;
}

.my-course-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 20px;
}

.my-course-cover-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f3f3;
}

.my-course-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-course-cover-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #888;
}

.my-course-content {
    padding: 24px;
}

.my-course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    color: #777;
    font-size: 13px;
    font-weight: 600;
}

.my-course-content h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}

.my-course-content h2 a {
    color: #111;
    text-decoration: none;
}

.my-course-description {
    margin: 14px 0 24px;
    color: #666;
    line-height: 1.7;
}

.my-course-progress {
    padding-top: 20px;
    border-top: 1px solid #ededed;
}

.my-course-progress-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 14px;
}

.my-course-progress-track {
    height: 8px;
    overflow: hidden;
    background: #eceef3;
    border-radius: 999px;
}

.my-course-progress-bar {
    height: 100%;
    background: #4f46f5;
    border-radius: inherit;
}

.my-course-progress > p {
    margin: 10px 0 0;
    color: #777;
    font-size: 13px;
}

.my-course-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}

.my-course-detail-link {
    color: #555;
    font-weight: 600;
    text-decoration: none;
}

.my-course-detail-link:hover,
.my-courses-back:hover {
    color: #000;
}

@media (max-width: 700px) {
    .my-courses-page {
        width: min(100% - 28px, 1200px);
        padding-top: 36px;
    }

    .my-courses-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .my-courses-grid {
        grid-template-columns: 1fr;
    }

    .my-course-content {
        padding: 20px;
    }

    .my-course-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .my-course-actions .btn-primary,
    .my-course-detail-link {
        text-align: center;
    }
}

/* =========================
   Admin User Access
========================= */

.access-page {
    padding: 42px;
}

.access-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.access-page-header h1 {
    margin: 6px 0 8px;
    font-size: 34px;
}

.access-page-description {
    margin: 0;
    color: #6b7280;
}

.access-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 1px solid #d9d9df;
    border-radius: 10px;
    color: #111;
    text-decoration: none;
    font-weight: 600;
    background: #fff;
}

.access-user-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.access-user-avatar {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.access-user-info {
    flex: 1;
}

.access-user-info span {
    color: #6b7280;
    font-size: 13px;
}

.access-user-info h2 {
    margin: 4px 0;
    font-size: 22px;
}

.access-user-info p {
    margin: 0;
    color: #6b7280;
}

.access-user-count {
    text-align: right;
}

.access-user-count strong {
    display: block;
    font-size: 30px;
}

.access-user-count span {
    color: #6b7280;
    font-size: 13px;
}

.access-course-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.access-section-header {
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.access-section-header h2 {
    margin: 0 0 4px;
}

.access-section-header p {
    margin: 0;
    color: #6b7280;
}

.access-course-list {
    display: flex;
    flex-direction: column;
}

.access-course-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-bottom: 1px solid #eceef2;
}

.access-course-item:last-child {
    border-bottom: 0;
}

.access-course-item.is-granted {
    background: #fafaff;
}

.access-course-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.access-course-status {
    width: 72px;
    flex-shrink: 0;
}

.access-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.access-status.granted {
    color: #166534;
    background: #dcfce7;
}

.access-status.pending {
    color: #6b7280;
    background: #f3f4f6;
}

.access-course-info h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.access-course-info p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.access-course-info code {
    margin-left: 8px;
    color: #374151;
}

.access-course-action form {
    margin: 0;
}

.access-grant-button,
.access-revoke-button {
    min-width: 104px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.access-grant-button {
    border: 0;
    background: #4f46e5;
    color: #fff;
}

.access-revoke-button {
    border: 1px solid #fecaca;
    background: #fff;
    color: #dc2626;
}

@media (max-width: 760px) {
    .access-page {
        padding: 24px 18px;
    }

    .access-page-header {
        flex-direction: column;
    }

    .access-user-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .access-user-count {
        width: 100%;
        text-align: left;
    }

    .access-course-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .access-course-main {
        align-items: flex-start;
    }

    .access-course-action {
        width: 100%;
    }

    .access-grant-button,
    .access-revoke-button {
        width: 100%;
    }
}
/* =========================
   Purchase / Order
========================= */

.course-purchase-box {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
}

.course-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.course-price span {
    color: #777;
    font-size: 13px;
}

.course-price strong {
    font-size: 30px;
    line-height: 1;
}

.course-purchase-box form {
    margin: 0;
}

.order-page {
    width: min(
        760px,
        calc(100% - 32px)
    );
    margin: 0 auto;
    padding: 64px 0 100px;
}

.order-card {
    padding: 36px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
}

.order-card h1 {
    margin: 8px 0 24px;
    font-size: 36px;
}

.order-number {
    padding-bottom: 20px;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.order-items {
    padding: 12px 0;
}

.order-item {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}

.order-item p {
    margin: 6px 0 0;
    color: #777;
    font-size: 13px;
}

.order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
}

.order-total strong {
    font-size: 30px;
}

.order-status {
    padding: 16px;
    background: #f5f5f7;
    border-radius: 12px;
}

.order-payment-placeholder {
    margin-top: 24px;
    padding: 24px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
}

.order-payment-placeholder h2 {
    margin-top: 0;
}

.order-payment-placeholder p {
    margin-bottom: 0;
    color: #6b7280;
    line-height: 1.7;
}

/* =========================
   Admin Ebook Form
========================= */

.admin-form {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 600;
}

.admin-form input[type="text"],
.admin-form input[type="url"],
.admin-form input[type="file"],
.admin-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d9dce3;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

.admin-form textarea {
    resize: vertical;
    min-height: 140px;
}

.admin-form label:has(textarea),
.admin-form label:has(input[name="ebook_file"]),
.admin-form label:has(input[name="cover"]),
.admin-form label:has(input[name="baidu_url"]),
.admin-form label:has(input[name="baidu_code"]) {
    grid-column: 1 / -1;
}

.admin-form label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
}

.admin-form button {
    width: fit-content;
}

@media (max-width: 800px) {
    .admin-form {
        grid-template-columns: 1fr;
    }

    .admin-form label {
        grid-column: 1;
    }
}

/* =========================
   Ebook Library
========================= */

.ebook-library-page {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 64px 0 96px;
}

.ebook-library-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

.ebook-library-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1;
}

.ebook-library-hero > div > p:last-child {
    margin: 0;
    max-width: 620px;
    color: #666;
    font-size: 17px;
    line-height: 1.7;
}

.ebook-library-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(220px, 1fr));
    gap: 36px 28px;
}

.ebook-library-card {
    min-width: 0;
}

.ebook-library-cover-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    background: #f2f2f2;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}

.ebook-library-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.25s ease;
}

.ebook-library-card:hover
.ebook-library-cover {
    transform: scale(1.025);
}

.ebook-library-cover-placeholder {
    width: 100%;
    height: 100%;
    padding: 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #161616;
    color: #fff;
}

.ebook-library-cover-placeholder span {
    font-size: 12px;
    letter-spacing: 0.14em;
    opacity: 0.6;
}

.ebook-library-cover-placeholder strong {
    font-size: 24px;
    line-height: 1.35;
}

.ebook-library-cover-placeholder small {
    opacity: 0.65;
}

.ebook-library-content {
    padding-top: 18px;
}

.ebook-library-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #777;
    font-size: 13px;
    font-weight: 600;
}

.ebook-owned-label {
    color: #111;
}

.ebook-library-content h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
}

.ebook-library-content h2 a {
    color: #111;
    text-decoration: none;
}

.ebook-library-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0 18px;
    color: #666;
    line-height: 1.7;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ebook-library-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 700px) {
    .ebook-library-page {
        width: min(100% - 28px, 1280px);
        padding-top: 36px;
    }

    .ebook-library-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .ebook-library-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }

    .ebook-library-content h2 {
        font-size: 17px;
    }

    .ebook-library-description {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ebook-library-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================
   Ebook Detail
========================= */

.ebook-detail-page {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 64px 0 96px;
}

.ebook-detail-hero {
    background: #fff;
    border-radius: 22px;
    padding: 48px;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.07);
}

.ebook-detail-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 64px;
    align-items: start;
}

.ebook-detail-copy h1 {
    margin: 12px 0 18px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.08;
}

.ebook-detail-description {
    margin: 0 0 24px;
    max-width: 680px;
    color: #666;
    font-size: 17px;
    line-height: 1.75;
}

.ebook-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 28px;
    color: #555;
}

.ebook-detail-meta span {
    padding-right: 18px;
    border-right: 1px solid #ddd;
}

.ebook-detail-meta span:last-child {
    border-right: 0;
}

.ebook-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.ebook-price {
    width: 100%;
    margin-bottom: 4px;
    font-size: 34px;
    font-weight: 800;
    color: #111;
}

.ebook-owned-badge {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f0f0f0;
    font-size: 14px;
    font-weight: 700;
}

.ebook-detail-media {
    width: 100%;
}

.ebook-detail-cover {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 18px;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.12);
}

.ebook-detail-cover-placeholder {
    aspect-ratio: 3 / 4;
    padding: 28px;
    box-sizing: border-box;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #161616;
    color: #fff;
}

.ebook-baidu-code {
    margin-top: 18px;
    color: #555;
}

@media (max-width: 860px) {
    .ebook-detail-container {
        grid-template-columns: 1fr;
    }

    .ebook-detail-media {
        max-width: 420px;
        order: -1;
    }

    .ebook-detail-hero {
        padding: 28px;
    }
}

@media (max-width: 560px) {
    .ebook-detail-page {
        width: min(100% - 28px, 1180px);
        padding-top: 32px;
    }

    .ebook-detail-copy h1 {
        font-size: 38px;
    }

    .ebook-price {
        font-size: 28px;
    }
}

/* =========================
   Admin Ebook Library
========================= */

.ebook-library-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 20px 0 24px;
    color: #777;
}

.ebook-library-breadcrumb a {
    color: #111;
    text-decoration: none;
    font-weight: 600;
}

.ebook-library-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.ebook-library-search input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 46px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    font: inherit;
}

.ebook-library-search-info {
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f5f5f5;
    color: #555;
}

@media (max-width: 700px) {
    .ebook-library-search {
        align-items: stretch;
        flex-direction: column;
    }
}

.ebook-source-path {
    margin-top: 6px;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
}

/* =========================
   Ebook Library Status
========================= */

.ebook-library-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 120px;
}

.ebook-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ebook-status-badge.muted {
    background: #f0f0f0;
    color: #666;
}

.ebook-source-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
}

.ebook-copy-path {
    padding: 2px 7px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.ebook-copy-path:hover {
    border-color: #999;
    color: #111;
}

/* =========================
   Ebook Edit
========================= */

.admin-form > h2 {
    margin: 34px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.admin-form > h2:first-child {
    margin-top: 0;
}

.ebook-original-info {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0 20px;
}

.ebook-original-info > div {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}

.ebook-original-info span {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font-size: 12px;
}

.ebook-original-info strong {
    font-size: 14px;
}

.ebook-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

@media (max-width: 760px) {
    .ebook-original-info {
        grid-template-columns: 1fr;
    }
}

/* Ebook edit sections must span full form width */

.admin-form > h2 {
    grid-column: 1 / -1;
}

.ebook-original-info {
    grid-column: 1 / -1;
}

.ebook-edit-actions {
    grid-column: 1 / -1;
}
.admin-form label:has(
    textarea[name="description"]
),
.admin-form label:has(
    textarea[name="baidu_share"]
),
.admin-form label:has(
    textarea[name="admin_note"]
) {
    grid-column: 1 / -1;
}

.admin-form label:has(
    input[readonly]
) {
    grid-column: 1 / -1;
}

.ebook-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
}

.ebook-status-filters a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #e1e3e8;
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.ebook-status-filters a:hover {
    border-color: #aaa;
    color: #111;
}

.ebook-status-filters a.active {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.inline-form {
    display: inline;
    margin: 0;
}

.ebook-product-info {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #555;
    font-size: 12px;
    white-space: nowrap;
}

.ebook-bulk-form .table-actions {
    white-space: nowrap;
}

.ebook-bulk-form .table-actions .inline-form {
    display: inline-block;
    margin: 0;
}

.ebook-bulk-form .table-actions .btn-edit {
    white-space: nowrap;
}

.ebook-duplicate-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff3cd;
    color: #8a5a00;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ebook-record-id {
    display: inline-block;
    margin-left: 6px;
    color: #888;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
/* 课程管理：发布状态 */
.course-status-published,
.course-status-unpublished {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.course-status-published {
    background: #eaf7ef;
    color: #1f7a43;
}

.course-status-unpublished {
    background: #f1f3f5;
    color: #6b7280;
}

/* 课程管理：发布 / 下架按钮 */
.btn-publish,
.btn-unpublish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.btn-publish {
    background: #22c55e;
    color: #ffffff;
}

.btn-publish:hover {
    background: #dff1e6;
}

.btn-unpublish {
    background: #f59e0b;
    color: #ffffff;
}

.btn-unpublish:hover {
    background: #ffe9c7;
}

/* 课程管理：辅助信息 */
.course-admin-slug {
    margin-top: 5px;
    color: #8a94a6;
    font-size: 12px;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.course-admin-category {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.course-admin-number {
    display: inline-flex;
    min-width: 28px;
    justify-content: center;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
}

/* 课程管理：表格细节优化 */
.course-admin-slug {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table th:nth-child(6),
.admin-table th:nth-child(7),
.admin-table td:nth-child(6),
.admin-table td:nth-child(7) {
    text-align: center;
}

.course-admin-number {
    color: #64748b;
}

/* 课程管理：筛选栏 */
.course-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.course-filter-search {
    flex: 1 1 260px;
}

.course-filter-bar input,
.course-filter-bar select {
    height: 38px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font-size: 13px;
}

.course-filter-bar input {
    width: 100%;
    padding: 0 12px;
}

.course-filter-bar select {
    min-width: 120px;
    padding: 0 30px 0 10px;
}

.course-filter-reset {
    height: 38px;
    padding: 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
}

.course-filter-reset:hover {
    background: #f8fafc;
}

.course-filter-count {
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

/* 课程管理：预览按钮 */
.btn-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.btn-preview:hover {
    background: #e5e7eb;
}

/* 管理员课程预览提示 */
.admin-preview-banner {
    padding: 12px 20px;
}

.admin-preview-banner-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 11px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.admin-preview-banner strong {
    white-space: nowrap;
}

.admin-preview-banner.is-unpublished
.admin-preview-banner-inner {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.admin-preview-banner.is-published
.admin-preview-banner-inner {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #166534;
}

/* 课程管理：直接学习按钮 */
.btn-study {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.btn-study:hover {
    background: #bae6fd;
}

/* 学习页：管理员未发布课程提示 */
.study-admin-preview {
    margin: 14px 18px 0;
    padding: 10px 14px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.study-admin-preview strong {
    white-space: nowrap;
}

/* 课程管理：操作结果提示 */
.course-admin-alert {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.course-admin-alert strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.course-admin-alert ul {
    margin: 6px 0 0 20px;
    padding: 0;
}

.course-admin-alert.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.course-admin-alert.is-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

/* ==============================
   课程永久删除确认
============================== */

.delete-confirm-page {
    max-width: 980px;
    margin: 0 auto;
}

.delete-confirm-header {
    margin-bottom: 22px;
}

.delete-confirm-back {
    display: inline-block;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 13px;
    text-decoration: none;
}

.delete-confirm-header h1 {
    margin: 0 0 8px;
}

.delete-confirm-header p {
    margin: 0;
    color: #64748b;
}

.delete-course-card {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.delete-course-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.delete-course-title strong {
    font-size: 20px;
}

.delete-course-title span {
    color: #94a3b8;
    font-size: 12px;
}

.delete-course-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin: 0;
}

.delete-course-meta > div {
    margin: 0;
}

.delete-course-meta .is-wide {
    grid-column: 1 / -1;
}

.delete-course-meta dt {
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 12px;
}

.delete-course-meta dd {
    margin: 0;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.delete-course-path {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    word-break: break-all;
}

.delete-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.delete-stat-card {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.delete-stat-card span,
.delete-stat-card small {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.delete-stat-card strong {
    display: block;
    margin: 5px 0;
    color: #0f172a;
    font-size: 24px;
}

.delete-stat-card.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.delete-stat-card.is-danger strong {
    color: #b91c1c;
}

.delete-blocked-alert,
.delete-danger-zone {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
}

.delete-blocked-alert {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.delete-danger-zone {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.delete-blocked-alert strong,
.delete-danger-zone strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.delete-blocked-alert p,
.delete-danger-zone p {
    margin: 0 0 14px;
    line-height: 1.6;
}

.delete-confirm-button {
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.delete-confirm-button:hover {
    background: #b91c1c;
}

@media (max-width: 760px) {
    .delete-course-meta,
    .delete-stat-grid {
        grid-template-columns: 1fr;
    }

    .delete-course-meta .is-wide {
        grid-column: auto;
    }
}


/* =========================================================
   Admin Ebook Manager
   ========================================================= */

.admin-ebook-subtitle {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}


.admin-ebook-filter-panel {
    margin-bottom: 22px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}


.admin-ebook-search-row {
    display: flex;
    gap: 10px;
}


.admin-ebook-search-input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    outline: none;
}


.admin-ebook-search-input:focus {
    border-color: #6366f1;
    box-shadow:
        0 0 0 3px
        rgba(99, 102, 241, 0.12);
}


.admin-ebook-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}


.ebook-filter-chip {
    appearance: none;
    border: 1px solid #d8dee9;
    border-radius: 999px;
    padding: 7px 12px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
}


.ebook-filter-chip:hover {
    background: #f8fafc;
}


.ebook-filter-chip.active {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}


.ebook-filter-divider {
    width: 1px;
    height: 24px;
    margin: 0 3px;
    background: #e2e8f0;
}


.admin-ebook-result-info {
    margin-top: 14px;
    color: #64748b;
    font-size: 13px;
}


.admin-ebook-title-cell {
    min-width: 240px;
}


.ebook-admin-meta {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 12px;
}


.ebook-admin-slug {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    word-break: break-all;
}


.ebook-admin-badge {
    display: inline-block;
    margin: 2px 2px 2px 0;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 11px;
    white-space: nowrap;
}


.ebook-admin-badge.is-file {
    background: #e0f2fe;
    color: #0369a1;
}


.ebook-admin-badge.is-cloud {
    background: #ede9fe;
    color: #6d28d9;
}


.ebook-admin-badge.is-product {
    background: #fef3c7;
    color: #92400e;
}


.ebook-admin-badge.is-published {
    background: #dcfce7;
    color: #166534;
}


.ebook-admin-badge.is-master {
    background: #fff7ed;
    color: #9a3412;
}


.ebook-admin-badge.is-duplicate {
    background: #fef3c7;
    color: #92400e;
}


.ebook-admin-badge.is-muted {
    background: #f1f5f9;
    color: #64748b;
}


.ebook-admin-price {
    margin-bottom: 3px;
    font-weight: 700;
}


.ebook-admin-actions {
    min-width: 170px;
}


.ebook-admin-actions form {
    display: inline;
    margin: 0;
}


.admin-ebook-empty-result {
    padding: 38px;
    text-align: center;
    color: #64748b;
}


.ebook-admin-row[hidden] {
    display: none;
}


@media (max-width: 1100px) {

    .ebook-filter-divider {
        display: none;
    }

    .admin-ebook-search-row {
        flex-direction: column;
    }
}


/* =========================================================
   Ebook Delete Confirm
   ========================================================= */

.ebook-delete-confirm-page {
    max-width: 1100px;
}


.ebook-delete-back {
    display: inline-block;
    margin-bottom: 16px;
    color: #64748b;
    text-decoration: none;
}


.ebook-delete-header {
    margin-bottom: 24px;
}


.ebook-delete-header h1 {
    margin: 0 0 8px;
    font-size: 32px;
}


.ebook-delete-header p {
    margin: 0;
    color: #64748b;
}


.ebook-delete-book-card {
    padding: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}


.ebook-delete-book-card h2 {
    margin: 0 0 20px;
}


.ebook-delete-id {
    margin-left: 8px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}


.ebook-delete-meta-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px 30px;
}


.ebook-delete-meta-grid div {
    min-width: 0;
}


.ebook-delete-meta-grid span,
.ebook-delete-file-path span,
.ebook-delete-stat span {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 13px;
}


.ebook-delete-meta-grid strong {
    color: #334155;
}


.ebook-delete-file-path {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}


.ebook-delete-file-path code {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    word-break: break-all;
}


.ebook-delete-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}


.ebook-delete-stat {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #fff;
}


.ebook-delete-stat strong {
    display: block;
    font-size: 26px;
    color: #0f172a;
}


.ebook-delete-stat small {
    color: #64748b;
}


.ebook-delete-stat.is-danger {
    border-color: #fecaca;
    background: #fff7f7;
}


.ebook-delete-stat.is-danger strong {
    color: #dc2626;
}


.ebook-delete-blocked {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid #fdba74;
    border-radius: 14px;
    background: #fff7ed;
    color: #9a3412;
}


.ebook-delete-blocked h3 {
    margin: 0 0 10px;
}


.ebook-delete-blocked p {
    margin: 6px 0;
}


.ebook-delete-blocked .btn-secondary {
    display: inline-block;
    margin-top: 14px;
}


.ebook-delete-danger-zone {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fff5f5;
    color: #991b1b;
}


.ebook-delete-danger-zone h3 {
    margin: 0 0 8px;
}


.ebook-delete-danger-zone p {
    margin: 0 0 16px;
}


.ebook-delete-permanent-button {
    border: 0;
    border-radius: 9px;
    padding: 11px 16px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}


.ebook-delete-permanent-button:hover {
    background: #b91c1c;
}


@media (max-width: 900px) {

    .ebook-delete-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ebook-delete-meta-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Ebook Server Pagination
   ========================================================= */

.ebook-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
}


.ebook-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    text-decoration: none;
    font-size: 13px;
}


.ebook-page-button:hover {
    background: #f8fafc;
}


.ebook-page-button.active {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}


.ebook-page-ellipsis {
    color: #94a3b8;
    padding: 0 3px;
}


/* =========================================================
   Admin Ebook Access
   ========================================================= */

.access-ebook-section {
    margin-top: 28px;
}

.access-ebook-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.access-ebook-search input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

.access-ebook-search input:focus {
    outline: none;
    border-color: #64748b;
}

.access-ebook-reset {
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
}

.access-ebook-reset:hover {
    text-decoration: underline;
}

.access-ebook-hint {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 13px;
}

.access-ebook-empty {
    padding: 28px 18px;
    border: 1px dashed #dbe2ea;
    border-radius: 12px;
    color: #64748b;
    text-align: center;
}

@media (max-width: 720px) {
    .access-ebook-search {
        align-items: stretch;
        flex-direction: column;
    }

    .access-ebook-search .access-grant-button {
        width: 100%;
    }
}

/* ===== Cart ===== */

.cart-page {
    padding: 48px 24px 80px;
}

.cart-container {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.cart-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.cart-heading h1 {
    margin: 6px 0 8px;
}

.cart-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        320px;
    gap: 28px;
    align-items: start;
}

.cart-items {
    display: grid;
    gap: 14px;
}

.cart-item {
    border: 1px solid
        rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    padding: 22px;
    background: #fff;
}

.cart-item-main {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.cart-item h2 {
    margin: 8px 0;
    font-size: 19px;
}

.cart-item h2 a {
    color: inherit;
    text-decoration: none;
}

.cart-item-type {
    font-size: 12px;
    opacity: 0.55;
}

.cart-item-side {
    min-width: 110px;
    text-align: right;
}

.cart-item-price {
    display: block;
    font-size: 20px;
    margin-bottom: 16px;
}

.cart-remove-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.6;
}

.cart-item-warning {
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.65;
}

.cart-summary {
    position: sticky;
    top: 24px;
    border: 1px solid
        rgba(0, 0, 0, 0.10);
    border-radius: 18px;
    padding: 24px;
    background: #fff;
}

.cart-summary h2 {
    margin-top: 0;
}

.cart-summary-row,
.cart-summary-total {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.cart-summary-row {
    padding: 14px 0;
}

.cart-summary-total {
    border-top: 1px solid
        rgba(0, 0, 0, 0.10);
    padding: 20px 0;
    font-size: 20px;
}

.cart-summary .btn-primary {
    width: 100%;
}

.cart-summary-note {
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.55;
    margin-bottom: 0;
}

.cart-empty {
    padding: 70px 24px;
    text-align: center;
    border: 1px dashed
        rgba(0, 0, 0, 0.16);
    border-radius: 18px;
}

@media (
    max-width: 800px
) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-summary {
        position: static;
    }

    .cart-item-main {
        flex-direction: column;
    }

    .cart-item-side {
        text-align: left;
    }
}