:root {
    --color-bg: #f5f6fa;
    --color-surface: #ffffff;
    --color-border: #e1e4ea;
    --color-text: #1f2430;
    --color-text-muted: #6b7280;
    --color-primary: #1a7a41;
    --color-primary-dark: #125c30;
    --color-danger: #d64545;
    --color-danger-dark: #b93a3a;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.07);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

a { color: var(--color-primary); }

img { max-width: 100%; display: block; }

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.site-header .brand {
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.site-header nav a {
    margin-left: 14px;
    text-decoration: none;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.site-header nav a:hover { color: var(--color-primary); }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.container-wide {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-pad { padding: 20px; }

h1, h2, h3 { margin-top: 0; }

.muted { color: var(--color-text-muted); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

.btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); color: #fff; }

.btn-sm { padding: 5px 10px; font-size: 0.82rem; }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.form-group .hint { color: var(--color-text-muted); font-size: 0.82rem; margin-top: 4px; }

input[type=text], input[type=password], input[type=file], textarea, select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    color: var(--color-text);
}

textarea { resize: vertical; min-height: 90px; }

.flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}
.flash-success { background: #e6f6ec; color: #1a7a3d; border: 1px solid #b8e6c8; }
.flash-error { background: #fbe9e9; color: #a02323; border: 1px solid #f2c1c1; }

table.list-table { width: 100%; border-collapse: collapse; }
table.list-table th, table.list-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
    vertical-align: middle;
}
table.list-table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
table.list-table tr:last-child td { border-bottom: none; }

.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-card { width: 100%; max-width: 380px; }

/* --- Student chapter viewer --- */

.chapter-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 18px 20px;
}

body.is-embed {
    background: var(--color-surface);
}
body.is-embed .chapter-header { padding-top: 12px; }
body.is-embed .viewer-layout { padding-top: 12px; }
.chapter-header h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
.chapter-header .chapter-desc { color: var(--color-text-muted); font-size: 0.92rem; margin: 0 0 8px; }

.pres-tabs {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pres-tabs a {
    padding: 0 0 10px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.pres-tabs a:hover { color: var(--color-text); }
.pres-tabs a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.viewer-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

@media (max-width: 900px) {
    .viewer-layout {
        padding: 14px;
        gap: 14px;
    }
}

.slide-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.slide-stage {
    position: relative;
    background: #14161c;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    touch-action: pan-y;
}

.slide-stage img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
}

.slide-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 22, 28, 0.55);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.slide-nav-btn:hover { background: rgba(20, 22, 28, 0.8); }
.slide-nav-btn.prev { left: 12px; }
.slide-nav-btn.next { right: 12px; }
.slide-nav-btn[disabled] { opacity: 0.25; cursor: not-allowed; }

.slide-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    gap: 10px;
    flex-wrap: wrap;
}

.slide-counter { font-size: 0.88rem; color: var(--color-text-muted); white-space: nowrap; }

.resource-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 16px 14px;
}

.resource-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}
.resource-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.resource-btn-filled {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.resource-btn-filled:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.resource-btn-outline {
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.resource-btn-outline:hover { background: rgba(26, 122, 65, 0.08); }

.resource-btn-ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
.resource-btn-ghost:hover { border-color: var(--color-text-muted); color: var(--color-text); }

.slide-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}
.slide-thumbs img {
    height: 54px;
    width: auto;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.7;
}
.slide-thumbs img.active { border-color: var(--color-primary); opacity: 1; }
.slide-thumbs img:hover { opacity: 1; }

.sidebar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
/* Only Vocabulary or only Notes has content for this slide — don't leave
   the other grid column sitting empty. */
.sidebar-row.single-panel {
    grid-template-columns: 1fr;
}

@media (max-width: 700px) {
    .sidebar-row {
        grid-template-columns: 1fr;
    }
}

/* On wide screens there's room to put the slide and the vocab/notes
   side by side again, so the slide doesn't sit alone above a lot of
   empty horizontal space. The two panels are merged into one seamless
   column (no gap, shared border) so it doesn't feel like two floating
   cards competing with the slide for attention. */
@media (min-width: 1300px) {
    .viewer-layout {
        flex-direction: row;
        align-items: stretch;
    }
    .slide-panel {
        /* Cap the slide to roughly what a 16:9 image looks like at a
           comfortable viewing height, instead of letting it flex-grow
           to fill the row — past a certain size it would only be able
           to grow taller than fits on screen, and go back to
           letterboxing. The freed-up width goes to the sidebar instead. */
        flex: 0 1 auto;
        width: min(100%, calc(78vh * 16 / 9));
        max-width: 1400px;
    }
    .sidebar-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 0%;
        min-width: 320px;
        gap: 0;
    }
    .sidebar-row .sidebar-panel {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        border-radius: 0;
    }
    .sidebar-row .sidebar-panel:first-child {
        border-radius: var(--radius) var(--radius) 0 0;
    }
    .sidebar-row .sidebar-panel:last-child {
        border-radius: 0 0 var(--radius) var(--radius);
        border-top: none;
    }
    /* Neither slide has both Vocabulary and Notes — the one that's left
       should look like its own standalone card, not "half of a pair". */
    .sidebar-row .sidebar-panel.solo {
        border-radius: var(--radius);
        border-top: 1px solid var(--color-border);
    }
    /* Nothing to show at all — let the slide use the full row instead of
       being capped to leave room for an empty sidebar. */
    .viewer-layout.no-sidebar .slide-panel {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
    }
    .sidebar-row .sidebar-panel-body {
        flex: 1 1 auto;
        max-height: none;
        overflow-y: auto;
    }
}

.sidebar-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.sidebar-panel h2 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    padding: 14px 16px 10px;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}
.sidebar-panel-body {
    padding: 14px 16px;
    max-height: 45vh;
    overflow-y: auto;
}

.vocab-item { margin-bottom: 12px; }
.vocab-item:last-child { margin-bottom: 0; }
.vocab-term { font-weight: 700; color: var(--color-text); }
.vocab-def { margin: 2px 0 0; color: var(--color-text); }

.notes-body p { margin: 0 0 12px; }
.notes-body p:last-child { margin-bottom: 0; }

/* Zoom modal */
.zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 15, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.zoom-overlay.open { display: flex; }
.zoom-overlay img {
    max-width: 100%;
    max-height: 100%;
    touch-action: pinch-zoom pan-x pan-y;
}
.zoom-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 1;
}

/* Guided notes modal: a scrollable stack of pages rather than one
   centered, zoomable image. */
.guided-notes-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: 60px 20px 40px;
}
.guided-notes-pages {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.guided-notes-pages img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    /* No context menu affordance beyond what any browser already allows
       on an <img> — this is a deterrent, not real DRM. */
    -webkit-touch-callout: none;
}

.chapter-list { list-style: none; padding: 0; margin: 0; }
.chapter-list li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.chapter-list a { text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.chapter-list .meta { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 4px; }

/* --- Admin: slide editor --- */

.admin-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .admin-grid { grid-template-columns: 1fr; }
}

.slide-list { display: flex; flex-direction: column; gap: 8px; }
.slide-list-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.slide-list-item.active { border-color: var(--color-primary); background: #eef1fd; }
.slide-list-item img { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.slide-list-item .slide-list-meta { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--color-text-muted); }
.slide-list-item .reorder-btns { display: flex; flex-direction: column; gap: 2px; }
.slide-list-item .reorder-btns button {
    border: none; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 0.8rem; padding: 0 4px;
}
.slide-list-item .reorder-btns button:hover { color: var(--color-primary); }

.vocab-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 8px;
    margin-bottom: 8px;
    align-items: start;
}
@media (max-width: 600px) {
    .vocab-row { grid-template-columns: 1fr; }
}

.dropzone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 30px 16px;
    text-align: center;
    color: var(--color-text-muted);
    cursor: pointer;
}
.dropzone.dragover { border-color: var(--color-primary); color: var(--color-primary); background: #eef1fd; }

.save-status { font-size: 0.85rem; color: var(--color-text-muted); }
.save-status.saved { color: #1a7a3d; }
.save-status.error { color: var(--color-danger); }

.breadcrumb { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--color-text-muted); }