:root {
    --ink: #071b43;
    --primary: #382bd8
}

.btn-primary {
    background: #382bd8;
    border-color: #382bd8
}

.member-shell {
    min-height: 100vh;
    background: #f6f8fc
}

.member-nav {
    background: linear-gradient(180deg, #071b43, #03122d);
    min-height: 100vh;
    color: #fff
}

.member-brand {
    font-weight: 800;
    font-size: 1.05rem
}

.member-nav .nav-link {
    color: #dce7ff;
    padding: .75rem .9rem;
    border-radius: 9px;
    margin: .2rem 0
}

.member-nav .nav-link.active,
.member-nav .nav-link:hover {
    background: #253ad9;
    color: #fff
}

.member-top {
    background: #fff;
    border-bottom: 1px solid #e7ebf2
}

.plan-card,
.subject-card {
    border-radius: 12px;
    border: 1px solid #e4e8f0;
    background: #fff
}

.subject-card {
    transition: transform .15s, box-shadow .15s
}

.subject-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.2rem rgba(20, 37, 68, .09)
}

.subject-icon {
    height: 42px;
    width: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: #edf0ff
}

.reader-page {
    margin: 0;
    background: #101828;
    font-family: Arial, sans-serif;
    user-select: none
}

.reader-app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #101828
}

.reader-toolbar {
    height: 58px;
    flex: none;
    background: #071b43;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 16px
}

.reader-back {
    color: #dce7ff;
    text-decoration: none
}

.reader-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.reader-title small {
    display: block;
    color: #9eacd0;
    font-size: 11px;
    margin-top: 3px
}

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

.reader-badge {
    font-size: 12px;
    padding: 5px 9px;
    background: #173f2b;
    color: #b7f7d0;
    border-radius: 99px
}

.reader-control {
    height: 34px;
    width: 36px;
    border: 1px solid #516084;
    border-radius: 7px;
    background: #15284f;
    color: #fff;
    font-size: 19px;
    cursor: pointer
}

.reader-notice {
    flex: none;
    padding: 8px 18px;
    background: #fff6d9;
    color: #745600;
    font-size: 12px;
    text-align: center
}

.reader-pages {
    flex: 1;
    overflow: auto;
    padding: 24px;
    background: #253045
}

.page-wrap {
    position: relative;
    max-width: 920px;
    margin: 0 auto 22px;
    box-shadow: 0 8px 25px #0008;
    line-height: 0
}

.page-wrap img {
    width: 100%;
    display: block;
    pointer-events: none
}

.page-watermark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #17255455;
    font-size: clamp(16px, 2vw, 28px);
    font-weight: bold;
    transform: rotate(-32deg);
    pointer-events: none
}

.reader-app:fullscreen {
    height: 100vh
}

.reader-app:fullscreen .reader-pages {
    padding: 0
}

.reader-app:fullscreen .reader-notice {
    display: none
}

@media(max-width:600px) {

    .reader-back span,
    .reader-badge {
        display: none
    }

    .reader-toolbar {
        padding: 0 12px
    }

    .reader-title {
        text-align: left
    }

    .reader-pages {
        padding: 8px
    }

    .page-wrap {
        margin-bottom: 10px
    }
}