@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

:root{
    --bg:          #111215;
    --surface:     #1a1c20;
    --border:      #2a2d32;
    --hover:       #22252a;
    --text:        #e4e4e7;
    --text-dim:    #8b8d94;
    --accent:      #667eea;
    --accent-hover:#7b93ff;
    --btn-bg:      #4a6478;
    --shadow:      0 2px 8px rgba(0,0,0,0.3);
}

html{ line-height: 1.5; }

body{
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

a{ color: inherit; text-decoration: none; }

/* ── HIDE SIDEBAR (legacy) ──────────────────────────────── */
#sidebar{ display: none !important; }

/* ── TOP NAV BAR ────────────────────────────────────────── */
.page-topbar{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 50;
}

.page-topbar .back-btn{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.45rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-decoration: none;
}

.page-topbar .back-btn:hover{
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(102,126,234,0.08);
}

.page-topbar .back-btn svg{
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-topbar .page-title{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* ── MAIN CONTENT AREA ──────────────────────────────────── */
main{
    padding: 0;
    overflow-y: auto;
}

/* ── BOOK WRAPPER (course pages) ────────────────────────── */
#bookWrapper{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem 4rem;

    > a{ display: none; }  /* hide old link */

    h2{
        position: static;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border);
    }

    ul{
        list-style: none;
    }
}

#sub-wrapper{
    width: 100%;
    display: grid;
    align-items: center;
    gap: 0.5rem;
}

/* ── ACCORDION BUTTONS ──────────────────────────────────── */
.units-btn{
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    padding: 14px 18px;
    transition: all 0.2s;
    box-shadow: var(--shadow);
    letter-spacing: 0.01em;
}

.units-btn:hover{
    background: var(--hover);
    border-color: var(--accent);
}

#bookWrapper .units-btn.active{
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── UNIT GRIDS (accordion content) ─────────────────────── */
#sub-wrapper .units{
    display: grid;
    grid-template-rows: 0fr;
    transition: .3s ease-in-out;

    > div{
        overflow: hidden;

        > div{
            width: 100%;
            margin: 0;
            background: rgba(102,126,234,0.12);
            border: 1px solid rgba(102,126,234,0.2);
            border-top: none;
            display: grid;
            gap: 6px;
            padding: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        }

        li{
            background: var(--surface);
            text-align: center;
            border-radius: 8px;
            border: 1px solid var(--border);
            transition: all 0.2s;

            a{
                text-decoration: none;
                color: var(--text);
                font-weight: 500;
                font-size: 0.85rem;

                > div{
                    padding: 8px 6px;
                }
            }
        }

        li:hover{
            background: var(--accent);
            border-color: var(--accent);
            transform: translateY(-2px);

            a{ color: #fff; }
        }
    }
}

#sub-wrapper .units.show{
    grid-template-rows: 1fr;
}

/* ── AUDIO PLAYER (generic) ─────────────────────────────── */
.audio-player{
    width: 320px;
    font-family: sans-serif;
}

#audio-title{
    margin-bottom: 8px;
}

#progress{
    flex: 1;
    width: 100%;
    margin-top: 10px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width: 640px){
    .page-topbar{
        padding: 0.85rem 1.25rem;
    }

    #bookWrapper{
        padding: 1.5rem 1.25rem 3rem;

        h2{
            font-size: 1.25rem;
            margin-bottom: 1.5rem;
        }
    }
}