/* ================================================================
   SPLASH SCREEN — Sliding Door Effect
   ================================================================ */
.splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.splash-door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #fff;
    z-index: 1;
    transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}

.splash-door-left {
    left: 0;
    transform: translateX(0);
}

.splash-door-right {
    right: 0;
    transform: translateX(0);
}

.splash.splash-open .splash-door-left {
    transform: translateX(-100%);
}

.splash.splash-open .splash-door-right {
    transform: translateX(100%);
}

.splash-logo-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.splash.splash-fade-logo .splash-logo-wrap {
    opacity: 0;
    transform: scale(0.88);
}

.splash-logo {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.08));
    animation: splashPulse 1.6s ease-in-out;
}

@keyframes splashPulse {
    0%   { opacity: 0; transform: scale(0.7); }
    40%  { opacity: 1; transform: scale(1.04); }
    60%  { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}

/* ================================================================
   DESIGN SYSTEM — aligned with yns-ozturk.com
   ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Palette — extracted from personal site */
    --plum:         #2E3A63;
    --plum-dark:    #232C4E;
    --plum-light:   #4B5C92;
    --plum-soft:    rgba(46,58,99,0.08);
    --plum-mid:     rgba(46,58,99,0.15);
    /* Semantic alias for the brand primary (kept in sync with the scale above) */
    --primary:      #2E3A63;

    --bg-base:      #FFFFFF;
    --bg-warm:      #EEF1F7;
    --bg-cream:     #F6F8FC;
    --bg-peach:     #F3EEE0;
    --bg-dark:      #30302E;

    --border:       rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.16);

    --text-primary:   #1A1A1A;
    --text-secondary: #4A4A4A;
    --text-tertiary:  #888888;
    --text-on-plum:   #FFFFFF;

    /* Course accents — muted, academic tones */
    --c-plum:    #2E3A63;
    --c-slate:   #4A5568;
    --c-teal:    #2C7A7B;
    --c-amber:   #B7791F;
    --c-navy:    #2B4C7E;
    --c-wine:    #9B2C2C;

    /* Layout */
    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  14px;
    --radius-xl:  18px;
    --radius-full:9999px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
    --shadow:     0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg:  0 4px 24px rgba(0,0,0,0.08);
    --shadow-xl:  0 8px 32px rgba(0,0,0,0.1);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.25s;
    --nav-h: 72px;
    /* Device safe-area insets (notch / status bar / home indicator).
       Non-zero only on notched mobiles with viewport-fit=cover; 0 elsewhere. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    /* 'avenir-lt-w01_35-light1475496' was the Wix web-font name; that CDN sheet
       now 403s, so the family never resolved. Avenir is native on macOS/iOS and
       Nunito Sans (loaded from Google Fonts) covers Windows/Android. */
    font-family: 'Avenir', 'Nunito Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.65;
    min-height: 100vh;
    min-height: 100dvh;
    /* clip (not hidden) so position:sticky descendants keep working —
       'hidden' turns the body into a scroll container and silently
       disables sticky pinning. 'hidden' stays as the legacy fallback. */
    overflow-x: hidden;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--plum-mid); color: var(--text-primary); }

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: max(28px, var(--safe-left));
    padding-right: max(28px, var(--safe-right));
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    /* Fill behind the status bar/notch, but keep content below it */
    height: calc(var(--nav-h) + var(--safe-top));
    padding-top: var(--safe-top);
    box-sizing: border-box;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--dur) var(--ease);
}

.navbar.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }

.nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: max(28px, var(--safe-left));
    padding-right: max(28px, var(--safe-right));
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-mark {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.logo-label { display: flex; flex-direction: column; line-height: 1.25; }

.logo-name {
    font-family: 'Quicksand', 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.logo-sub {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 4px;
}

.nav-links a {
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--dur) var(--ease);
    letter-spacing: 0.2px;
}

.nav-links a:hover { color: var(--text-primary); background: var(--plum-soft); }
.nav-links a.active { color: var(--plum); background: var(--plum-soft); font-weight: 600; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    /* 44px minimum touch target (Apple/Android guideline) */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.nav-toggle span {
    width: 20px; height: 1.5px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: all var(--dur) var(--ease);
}

/* ================================================================
   PAGES
   ================================================================ */
.page {
    display: none;
    padding-top: calc(var(--nav-h) + var(--safe-top));
    min-height: 100vh;
    min-height: 100dvh;
}

.page.active {
    display: block;
    animation: pageIn 0.45s var(--ease);
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--border);
    /* Use dynamic viewport height (dvh) so the hero matches the *visible*
       area on mobile browsers, where the address bar makes 100vh taller
       than the screen and pushes content below the fold. vh is the fallback. */
    min-height: calc(100vh - var(--nav-h) - var(--safe-top));
    min-height: calc(100dvh - var(--nav-h) - var(--safe-top));
    display: flex;
    align-items: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
    background:
        radial-gradient(ellipse 60% 80% at 80% 20%, rgba(46,58,99,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 10% 80%, rgba(46,58,99,0.04) 0%, transparent 50%);
}

.hero-grid { display: none; }

.hero-content {
    position: relative;
    z-index: 1;
    padding: 72px 0 64px;
    max-width: 620px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    background: var(--plum);
    color: var(--text-on-plum);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-bottom: 24px;
}

.hero-title {
    font-family: 'Quicksand', 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 18px;
    overflow-wrap: break-word;
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.75;
    margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; }

.hero-stats {
    display: flex;
    align-items: center;
    gap: 28px;
}

.stat { display: flex; flex-direction: column; }

.stat-num {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--plum);
}

.stat-label { font-size: 0.75rem; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.3px; }
.stat-divider { width: 1px; height: 32px; background: var(--border); }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.btn svg { flex-shrink: 0; }

.btn-primary {
    background: var(--plum);
    color: var(--text-on-plum);
}

.btn-primary:hover {
    background: var(--plum-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46,58,99,0.25);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-hover);
}

.btn-ghost:hover {
    color: var(--plum);
    border-color: var(--plum);
    background: var(--plum-soft);
}

/* ================================================================
   SECTIONS
   ================================================================ */
.section { padding: 64px 0 72px; }

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
}

.section-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.section-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--plum);
    transition: opacity var(--dur) var(--ease);
}

.section-link:hover { opacity: 0.7; }

.page-header {
    text-align: center;
    padding: 52px 0 32px;
}

.page-title {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.page-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
}

/* ================================================================
   FILTERS
   ================================================================ */
.filter-bar {
    display: inline-flex;
    gap: 2px;
    justify-content: center;
    margin-bottom: 10px;
    padding: 2px;
    background: var(--bg-cream);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}

.filter-bar + .filter-bar {
    margin-left: 8px;
}

.page-header + .filter-bar,
.filter-bar:first-of-type {
    margin-left: 0;
}

.filter-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.filter-btn {
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.filter-btn:hover { color: var(--text-secondary); }

.filter-btn.active {
    background: var(--plum);
    color: var(--text-on-plum);
    box-shadow: var(--shadow-sm);
}

/* ================================================================
   COURSE CARDS
   ================================================================ */
.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding-bottom: 48px;
}

.course-card {
    background: var(--bg-base);
    border-radius: var(--radius-lg);
    padding: 26px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent);
    opacity: 0.6;
    transition: opacity var(--dur) var(--ease);
}

.course-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.course-card:hover::before { opacity: 1; }

/* Course card with hero background image */
.course-card.has-hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.course-card.has-hero-image::before {
    display: none;
}

.card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
    border-radius: var(--radius-lg);
    transition: background var(--dur) var(--ease);
}

.course-card.has-hero-image:hover .card-image-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.35) 100%);
}

.course-card.has-hero-image .card-top,
.course-card.has-hero-image .card-code,
.course-card.has-hero-image .card-title,
.course-card.has-hero-image .card-desc,
.course-card.has-hero-image .card-footer {
    position: relative;
    z-index: 2;
}

.course-card.has-hero-image .card-badge {
    background: #fff;
    color: #1a1a1a;
    font-weight: 700;
}

.course-card.has-hero-image .card-lock {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.course-card.has-hero-image .card-lock.unlocked {
    background: rgba(44,122,123,0.4);
    color: #fff;
}

.course-card.has-hero-image .card-code {
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.course-card.has-hero-image .card-title {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.course-card.has-hero-image .card-desc {
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.card-desc::-webkit-scrollbar { width: 5px; }
.card-desc::-webkit-scrollbar-thumb { background: rgba(27,34,64,0.3); border-radius: 3px; }
.card-desc::-webkit-scrollbar-track { background: transparent; }
.course-card.has-hero-image .card-desc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); }
.course-card.has-hero-image .card-desc { scrollbar-color: rgba(255,255,255,0.5) transparent; }

.course-card.has-hero-image .card-footer {
    border-top-color: rgba(255,255,255,0.15);
}

.course-card.has-hero-image .card-meta {
    color: rgba(255,255,255,0.75);
}

.course-card.has-hero-image .card-meta svg {
    opacity: 0.65;
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.card-badge.en { background: var(--plum-soft); color: var(--plum); }
.card-badge.tr { background: rgba(44,122,123,0.08); color: var(--c-teal); }

.card-lock {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    background: var(--bg-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: all var(--dur) var(--ease);
}

.card-lock.unlocked { color: var(--c-teal); background: rgba(44,122,123,0.08); }

.card-code {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.76rem;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-bottom: 5px;
    letter-spacing: 0.4px;
}

.card-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    color: var(--text-primary);
}

.card-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 18px;
    /* Scrollable instead of line-clamped: students can read the FULL course
       description on the card itself (scroll up/down) before entering. */
    max-height: 5.1em;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(27,34,64,0.35) transparent;
    flex: 1;
}

.card-footer {
    display: flex;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.card-meta svg { opacity: 0.45; }

/* ================================================================
   COURSE DETAIL — HERO
   ================================================================ */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 22px 0 14px;
    transition: color var(--dur) var(--ease);
}

.back-link:hover { color: var(--plum); }

.course-hero {
    background: var(--bg-warm);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 36px;
}

.course-hero.has-hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 44px;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    border: none;
}

.hero-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.45) 100%);
    z-index: 1;
}

.hero-content-inner {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

.course-hero.has-hero-image .card-badge {
    font-size: 0.72rem;
    padding: 4px 14px;
    background: #fff;
    color: #1a1a1a;
    font-weight: 700;
}
.course-hero.has-hero-image .card-code {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.course-hero.has-hero-image .card-title {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.course-hero.has-hero-image .card-desc {
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.course-hero.has-hero-image .registered-badge {
    color: #fff;
    background: rgba(255,255,255,0.15);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.course-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--card-accent, var(--plum));
    z-index: 3;
}

.course-hero .card-badge { font-size: 0.72rem; padding: 4px 14px; }
.course-hero .card-code  { font-size: 0.88rem; margin-bottom: 5px; margin-top: 12px; }

.course-hero .card-title {
    font-size: 1.7rem;
    margin-bottom: 12px;
}

.course-hero .card-desc {
    font-size: 0.95rem;
    max-width: 660px;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    margin-bottom: 0;
}

/* Course Hero Photo (round) */
.hero-photo {
    flex-shrink: 0;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    margin-right: 8px;
}

.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .course-hero {
        flex-direction: column;
        text-align: center;
    }
    .hero-photo {
        width: 140px;
        height: 140px;
        order: -1;
        margin-right: 0;
    }
    .course-hero .card-desc {
        max-width: 100%;
    }
}

/* ================================================================
   ANNOUNCEMENTS PANEL
   ================================================================ */
.ann-panel {
    background: var(--bg-cream);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    margin-bottom: 24px;
}
.ann-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--plum-deep);
}
.ann-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--plum-deep);
}
.ann-header svg {
    color: var(--gold);
    flex-shrink: 0;
}
/* Instructor form */
.ann-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--border-hover);
}
.ann-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.ann-input:focus {
    outline: none;
    border-color: var(--plum);
    box-shadow: 0 0 0 3px rgba(46, 58, 99, 0.12);
}
.ann-title-input {
    font-weight: 600;
}
.ann-body-input {
    resize: vertical;
    min-height: 60px;
}
.ann-publish-btn {
    padding: 8px 22px;
    background: #2E3A63;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}
.ann-publish-btn:hover {
    background: #232C4E;
}
/* Announcement items */
.ann-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ann-item {
    background: #fff;
    border: 1px solid #f3e8c0;
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow 0.2s;
}
.ann-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ann-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.ann-item-title {
    margin: 0 0 6px 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1a1a1a;
}
.ann-item-body {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.55;
    white-space: pre-line;
}
.ann-item-date {
    font-size: 0.78rem;
    color: #9ca3af;
    font-weight: 500;
}
.ann-delete-btn {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.ann-delete-btn:hover {
    opacity: 1;
}
.ann-empty {
    color: #9ca3af;
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
    padding: 8px 0;
}
.ann-show-all-btn {
    display: block;
    margin: 14px auto 0;
    padding: 6px 18px;
    background: transparent;
    color: var(--plum-deep);
    border: 1px solid var(--border-hover);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.ann-show-all-btn:hover {
    background: #fff7ed;
}

/* Announcement form — file attachment */
.ann-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ann-file-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px dashed var(--border-hover);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.ann-file-label:hover {
    border-color: var(--plum);
    color: var(--plum);
    background: var(--plum-soft);
}
.ann-file-input {
    display: none;
}
.ann-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.ann-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--plum-soft);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: var(--plum);
    font-weight: 500;
}
.ann-file-chip .ann-file-size {
    opacity: 0.7;
    font-weight: 400;
}
/* Announcement item — attached files */
.ann-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    background: #f8f5ff;
    border-radius: 8px;
    border: 1px solid rgba(46,58,99,0.1);
}
.ann-files-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--plum);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ann-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid rgba(46,58,99,0.15);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--plum);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.ann-file-link:hover {
    background: var(--plum);
    color: #fff;
    border-color: var(--plum);
}
.ann-file-link:hover svg { stroke: #fff; }
.ann-file-link .ann-file-size {
    opacity: 0.65;
    font-weight: 400;
    font-size: 0.72rem;
}

/* ================================================================
   WEEKLY UPLOAD — per-week file uploads (readings, lectures, videos)
   ================================================================ */
.wk-upload-btn-wrap {
    margin-top: 6px;
}
.wk-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px dashed var(--border-hover);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s;
}
.wk-upload-label:hover {
    border-color: var(--plum);
    color: var(--plum);
    background: var(--plum-soft);
}
.wk-upload-input {
    display: none;
}
.wk-upload-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(46,58,99,0.04);
    border-radius: 6px;
    border: 1px solid rgba(46,58,99,0.08);
}
.wk-upload-files-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--plum);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wk-upload-file {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.wk-upload-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #fff;
    border: 1px solid rgba(46,58,99,0.12);
    border-radius: 5px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--plum);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.wk-upload-link:hover {
    background: var(--plum);
    color: #fff;
    border-color: var(--plum);
}
.wk-upload-link:hover svg { stroke: #fff; }
.wk-upload-size {
    opacity: 0.6;
    font-weight: 400;
    font-size: 0.7rem;
}
.wk-upload-remove {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    margin-right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.55;
    transition: all 0.2s;
}
.wk-upload-remove:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.1);
    transform: scale(1.1);
}
.wk-upload-remove svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}
.week-section-header {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--plum);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 16px 0 10px 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.empty-state-msg {
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 24px;
}
.res-upload-wrap {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
}
.res-upload-label {
    padding: 8px 18px;
    font-size: 0.85rem;
}
.content-item-uploaded {
    background: rgba(46,58,99,0.03);
    border-left: 3px solid var(--plum);
}
.content-unpublished-note {
    color: #b45309;
    font-style: italic;
    font-size: 0.72rem;
}
.content-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.res-publish-btn {
    font-size: 0.72rem;
    padding: 4px 10px;
}
.res-remove-btn svg {
    width: 16px;
    height: 16px;
}
/* Static file hide/restore (instructor can remove existing course files) */
.static-file-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}
.static-toggle-btn {
    background: none;
    border: none;
    padding: 2px;
    margin-left: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #dc2626;
    opacity: 0.55;
    transition: all 0.2s;
    vertical-align: middle;
}
.static-toggle-btn svg {
    width: 14px;
    height: 14px;
}
.static-toggle-btn:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.1);
    transform: scale(1.1);
}
.static-toggle-btn.is-hidden {
    color: #059669;
}
.static-toggle-btn.is-hidden:hover {
    background: rgba(5, 150, 105, 0.1);
}
.static-hidden {
    opacity: 0.45;
}
.static-hidden a,
.static-hidden .content-title {
    text-decoration: line-through;
}
.static-file-wrap.static-hidden a {
    pointer-events: none;
}
/* ----- Resources drag-and-drop reordering ----- */
.res-drag-hint {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    margin: 0 0 10px 4px;
    font-style: italic;
}
.res-content-list .content-item[draggable="true"] {
    position: relative;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease), opacity 0.15s var(--ease);
}
.res-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-tertiary);
    cursor: grab;
    opacity: 0.5;
    margin-right: 4px;
    flex-shrink: 0;
    transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
}
.res-drag-handle:hover { opacity: 1; color: var(--plum-deep); }
.res-drag-handle:active { cursor: grabbing; }
.res-drag-handle svg { width: 14px; height: 14px; }
.res-content-list .content-item.res-dragging {
    opacity: 0.4;
    background: var(--plum-soft);
}
.res-content-list .content-item.res-drop-target.res-drop-before {
    box-shadow: 0 -2px 0 0 var(--plum-deep) inset, 0 -2px 0 0 var(--plum-deep);
}
.res-content-list .content-item.res-drop-target.res-drop-after {
    box-shadow: 0 2px 0 0 var(--plum-deep) inset, 0 2px 0 0 var(--plum-deep);
}
.wk-publish-btn {
    margin-left: auto;
    flex-shrink: 0;
}

/* ================================================================
   COURSE DETAIL — BODY (sidebar + main)
   ================================================================ */
.course-body {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: 24px;
    margin-bottom: 80px;
}

.course-main {
    min-width: 0;
}

.course-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + var(--safe-top) + 20px);
    align-self: start;
    /* The info panel can be taller than the screen (instructor, grading,
       textbooks). Cap it to the viewport and let it scroll internally so
       every section is reachable while it stays pinned. */
    max-height: calc(100vh - var(--nav-h) - var(--safe-top) - 40px);
    max-height: calc(100dvh - var(--nav-h) - var(--safe-top) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--plum-mid) transparent;
}
.course-sidebar::-webkit-scrollbar { width: 7px; }
.course-sidebar::-webkit-scrollbar-thumb { background: var(--plum-mid); border-radius: 4px; }
.course-sidebar::-webkit-scrollbar-thumb:hover { background: var(--plum-light); }
.course-sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar-card {
    background: var(--bg-cream);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 22px;
}

.sidebar-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    padding: 7px 0;
    font-size: 0.84rem;
    gap: 2px;
}

.sidebar-item:not(:last-child) { border-bottom: 1px solid var(--border); }

.sidebar-label { color: var(--text-tertiary); font-size: 0.78rem; }
.sidebar-value { font-weight: 600; color: var(--text-primary); }

.sidebar-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sidebar-section:last-child { border-bottom: none; margin-bottom: 0; }

.sidebar-section .sidebar-value a {
    color: var(--plum);
    text-decoration: none;
    font-weight: 600;
}
.sidebar-section .sidebar-value a:hover { text-decoration: underline; }

.sidebar-zoom .sidebar-value {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zoom-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff !important;
    background: var(--plum);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background var(--dur) var(--ease);
    width: fit-content;
}

.zoom-link:hover {
    background: var(--plum-deep);
    text-decoration: none !important;
}

.zoom-link svg {
    opacity: 0.9;
}

.zoom-id {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.sidebar-textbook {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
    font-weight: 700;
}
.sidebar-textbook a.textbook-link {
    color: var(--text-secondary);
    text-decoration: underline;
    text-decoration-color: rgba(0,0,0,0.15);
    text-underline-offset: 2px;
    transition: color 0.2s, text-decoration-color 0.2s;
}
.sidebar-textbook a.textbook-link:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}
.textbook-num {
    font-style: normal;
    font-weight: 800;
    color: var(--primary);
}

/* Hero Textbooks — on course home/detail page */
.hero-textbooks {
    margin-top: 18px;
    padding: 14px 18px;
    background: rgba(46, 58, 99, 0.06);
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
}
.hero-tb-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    margin-bottom: 8px;
}
.hero-tb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hero-tb-item {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.hero-tb-num {
    font-weight: 800;
    color: var(--primary);
    margin-right: 2px;
}
a.hero-tb-link {
    color: var(--text-secondary);
    text-decoration: underline;
    text-decoration-color: rgba(46, 58, 99, 0.25);
    text-underline-offset: 2px;
    transition: color 0.2s, text-decoration-color 0.2s;
    cursor: pointer;
}
a.hero-tb-link:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

.sidebar-topics { margin-top: 18px; }

.sidebar-topic {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.topic-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    min-width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ================================================================
   TABS
   ================================================================ */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: 12px 18px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color var(--dur) var(--ease);
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1.5px; left: 10px; right: 10px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--plum);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
}

.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--plum); font-weight: 600; }
.tab-btn.active::after { transform: scaleX(1); }

/* ================================================================
   CONTENT ITEMS
   ================================================================ */
.content-list { display: flex; flex-direction: column; gap: 8px; }

.content-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-base);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all var(--dur) var(--ease);
}

.content-item:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}

.content-icon {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.content-icon.pdf       { background: rgba(155,44,44,0.06); }
.content-icon.video     { background: rgba(46,58,99,0.06); }
.content-icon.link      { background: rgba(44,122,123,0.06); }
.content-icon.assignment{ background: rgba(183,121,31,0.06); }
.content-icon.slides    { background: rgba(43,76,126,0.06); }

.content-info { flex: 1; min-width: 0; }
.content-title { font-size: 0.87rem; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.content-meta  { font-size: 0.74rem; color: var(--text-tertiary); margin-top: 2px; }

.content-action {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.content-action:hover {
    border-color: var(--plum);
    color: var(--plum);
    background: var(--plum-soft);
}

/* Week rows in syllabus */
.week-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-base);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.week-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--plum);
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: var(--plum-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.week-info { flex: 1; }
.week-label { font-size: 0.72rem; color: var(--text-tertiary); font-weight: 500; }
.week-topic { font-size: 0.87rem; font-weight: 600; margin-top: 1px; color: var(--text-primary); }

.week-reading {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.week-reading svg { opacity: 0.5; width: 12px; height: 12px; }

.slides-admin {
    display: flex;
    align-items: center;
    gap: 10px;
}

.publish-btn {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--plum);
    background: transparent;
    color: var(--plum);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.publish-btn:hover {
    background: var(--plum-soft);
}

.publish-btn.published {
    background: var(--plum);
    color: #fff;
    border-color: var(--plum);
}

.publish-btn.published:hover {
    background: var(--c-wine);
    border-color: var(--c-wine);
}

.slides-link, .reading-link, .video-link {
    color: var(--plum);
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--dur) var(--ease);
}
.slides-link:hover, .reading-link:hover, .video-link:hover { opacity: 0.7; }

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

.reading-action-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.module-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--plum);
    background: var(--plum-soft);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-right: 4px;
    vertical-align: middle;
}

.reading-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-top: 6px;
}
.reading-badge.required { background: rgba(155,44,44,0.08); color: #9B2C2C; }
.reading-badge.suggested { background: rgba(44,122,123,0.08); color: #2C7A7B; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius);
    background: var(--bg-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.empty-icon svg { color: var(--text-tertiary); opacity: 0.35; }

.empty-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.empty-hint {
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

/* ================================================================
   ACCESS CODE MODAL
   ================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-overlay.open {
    display: flex;
    animation: overlayIn 0.2s var(--ease);
}

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    position: relative;
    animation: modalIn 0.3s var(--ease);
    box-shadow: var(--shadow-xl);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur) var(--ease);
}

.modal-close:hover { color: var(--text-primary); background: var(--bg-cream); }

.modal-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius);
    background: var(--plum-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--plum);
}

.modal-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.modal-desc {
    font-size: 0.87rem;
    color: var(--text-secondary);
    margin-bottom: 22px;
    line-height: 1.5;
}

.login-email {
    font-size: 0.8rem;
    color: var(--plum);
    font-weight: 600;
    margin-bottom: 18px;
    padding: 6px 12px;
    background: var(--plum-soft);
    border-radius: var(--radius);
    display: inline-block;
}

.auth-choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.auth-choice-btn {
    width: 100%;
    justify-content: center;
}

.modal-field { margin-bottom: 16px; }

.modal-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.modal-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--bg-cream);
    color: var(--text-primary);
    font-size: 0.88rem;
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.modal-input[type="email"],
.modal-input[type="text"],
.modal-input[type="password"] {
    font-family: inherit;
    letter-spacing: 0;
    font-size: 0.88rem;
}

.modal-input::placeholder {
    color: var(--text-tertiary);
    letter-spacing: 0;
    font-family: inherit;
}

.modal-input:focus {
    border-color: var(--plum);
    box-shadow: 0 0 0 3px var(--plum-soft);
}

.modal-input.error { border-color: var(--c-wine); }
.modal-input.error:focus { box-shadow: 0 0 0 3px rgba(155,44,44,0.1); }

.modal-error {
    font-size: 0.76rem;
    color: var(--c-wine);
    margin-top: 5px;
    display: none;
    line-height: 1.4;
}

.modal-error.show { display: block; animation: shake 0.35s var(--ease); }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.modal-submit { width: 100%; justify-content: center; padding: 12px; margin-top: 4px; }

/* Registered badge on course detail */
.registered-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: rgba(44,122,123,0.08);
    color: var(--c-teal);
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 16px;
}

.registered-badge svg { flex-shrink: 0; }

.logout-link {
    color: var(--c-wine);
    text-decoration: none;
    font-weight: 600;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--dur) var(--ease);
}
.logout-link:hover {
    background: rgba(155,44,44,0.1);
}
.course-hero.has-hero-image .logout-link {
    color: rgba(255,180,180,0.9);
}
.course-hero.has-hero-image .logout-link:hover {
    background: rgba(255,255,255,0.15);
}

.change-pw-link {
    color: #2E3A63;
    text-decoration: none;
    font-weight: 600;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--dur) var(--ease);
    font-size: 0.82rem;
}
.change-pw-link:hover {
    background: rgba(107,58,93,0.1);
}
.change-pw-link svg {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 2px;
}
.course-hero.has-hero-image .change-pw-link {
    color: rgba(255,220,240,0.9);
}
.course-hero.has-hero-image .change-pw-link:hover {
    background: rgba(255,255,255,0.15);
}

.modal-success {
    background: #dcfce7;
    color: #16a34a;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}

/* Forgot Password link in login modal */
.forgot-pw-wrap {
    text-align: center;
    margin-top: 12px;
}
.forgot-pw-link {
    color: #2E3A63;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.forgot-pw-link:hover {
    color: #232C4E;
    text-decoration: underline;
}

/* Reset Password student email display */
.reset-pw-student {
    background: #f3e8ee;
    color: #2E3A63;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: var(--radius-lg);
    display: inline-block;
    margin-bottom: 8px;
}

/* Reset Password button in Students tab */
.reset-pw-btn {
    background: #f3e8ee !important;
    color: #2E3A63 !important;
    border-color: #e5d4de !important;
}
.reset-pw-btn:hover {
    background: #e5d4de !important;
}

/* ================================================================
   ABOUT
   ================================================================ */
.about-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 44px;
    background: var(--bg-warm);
    border-radius: var(--radius-xl);
    padding: 44px;
    border: 1px solid var(--border);
    max-width: 860px;
    margin: 0 auto 80px;
}

.about-left { text-align: center; }

.about-avatar {
    width: 160px; height: 160px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
}

.about-left h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--text-primary);
}

.about-role {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.about-section { margin-bottom: 24px; }
.about-section:last-child { margin-bottom: 0; }

.about-section h3 {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.about-section p {
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.about-courses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.about-course-chip {
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 500;
    background: var(--bg-base);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.about-course-chip:hover {
    background: var(--plum);
    color: #fff;
    border-color: var(--plum);
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    background: var(--bg-cream);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-tertiary);
}

.footer-note { opacity: 0.6; }

/* ================================================================
   PDF VIEWER
   ================================================================ */
.pdf-viewer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

.pdf-viewer-overlay.open {
    display: flex;
}

.pdf-viewer {
    width: 90vw;
    height: 90vh;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.pdf-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-cream);
    border-bottom: 1px solid var(--border);
}

.pdf-viewer-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pdf-viewer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all var(--dur) var(--ease);
    /* 44px minimum target on every device, not just mobile */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pdf-viewer-close:hover {
    color: var(--text-primary);
    background: var(--border);
}

.pdf-viewer-frame {
    flex: 1;
    width: 100%;
    border: none;
}

/* ----- Page-info badge in the PDF header (canvas mode only) ----- */
.pdf-viewer-pageinfo {
    margin-left: auto;
    margin-right: 12px;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pdf-viewer-pageinfo:empty { display: none; }

/* ----- Canvas-based PDF viewer (used on phones, tablets, touch devices) -----
   Hidden by default. JS adds `.use-canvas` to .pdf-viewer when canvas mode
   is active; that toggles the iframe off and this container on. */
.pdf-viewer-canvas {
    display: none;
    flex: 1;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #4a4a4a;
    padding: 16px 8px;
    text-align: center;
    /* Block save-as-image and text-selection so the file stays read-only */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.pdf-viewer.use-canvas .pdf-viewer-frame { display: none; }
.pdf-viewer.use-canvas .pdf-viewer-canvas { display: block; }

.pdf-page-canvas {
    display: block;
    margin: 0 auto 12px;
    max-width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    /* Right-click "Save image as..." is blocked by oncontextmenu on the parent;
       this prevents long-press save on iOS */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}
.pdf-page-placeholder {
    display: block;
    margin: 0 auto 12px;
    width: min(94%, 800px);
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    color: #999;
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 32px 12px;
}
.pdf-viewer-loading {
    color: #eee;
    padding: 40px 16px;
    font-size: 0.9rem;
}
.pdf-viewer-error {
    color: #ffcccc;
    padding: 40px 16px;
    font-size: 0.9rem;
}

/* ================================================================
   VIDEO PLAYER MODAL
   ================================================================ */
.video-player-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
}

.video-player-overlay.open {
    display: flex;
}

.video-player {
    width: 80vw;
    max-width: 960px;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-cream);
    border-bottom: 1px solid var(--border);
}

.video-player-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.video-player-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all var(--dur) var(--ease);
    /* 44px minimum target on every device, not just mobile */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.video-player-close:hover {
    color: var(--text-primary);
    background: var(--border);
}

.video-player-element {
    width: 100%;
    max-height: 75vh;
    background: #000;
    outline: none;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
    .course-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .course-body { grid-template-columns: 1fr; }
    .course-sidebar { position: static; max-height: none; overflow-y: visible; }
    .about-card { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
    .nav-toggle { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: calc(var(--nav-h) + var(--safe-top));
        left: 0; right: 0;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(16px);
        flex-direction: column;
        padding: 10px 20px 18px;
        border-bottom: 1px solid var(--border);
    }

    .nav-links.open { display: flex; }

    .hero-content { padding: 44px 0 36px; }
    .hero-title { font-size: 1.8rem; }
    .hero-stats { gap: 18px; }
    .stat-num { font-size: 1.3rem; }

    .course-grid { grid-template-columns: 1fr; }
    .course-hero { padding: 26px; }
    .course-hero .card-title { font-size: 1.35rem; }

    .tabs { gap: 0; }
    .tab-btn { padding: 10px 12px; font-size: 0.78rem; }

    .modal { padding: 28px; }
    .footer-inner { flex-direction: column; gap: 4px; text-align: center; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .course-card { padding: 20px; }
    .card-title { font-size: 1.02rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
}

/* --- Course Evaluation Section --- */
.eval-section {
    text-align: center;
    padding: 48px 24px;
    max-width: 520px;
    margin: 0 auto;
}
.eval-icon {
    margin-bottom: 16px;
    color: #E6A817;
}
.eval-icon svg {
    width: 48px;
    height: 48px;
}
.eval-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.eval-desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}
.eval-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #E6A817;
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.eval-link:hover {
    background: #D49B15;
    transform: translateY(-1px);
}
.eval-link svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}
.eval-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.eval-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* --- Assignment Submission Form --- */
.submit-section {
    margin-top: 14px;
    padding: 16px;
    background: #f8fafc;
    border: 1px dashed var(--border);
    border-radius: 10px;
}
.submit-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.submit-header svg {
    width: 15px;
    height: 15px;
}
.submit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.submit-file-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.submit-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.submit-file-btn:hover {
    border-color: var(--primary);
    background: #faf5f9;
}
.submit-file-btn svg {
    width: 14px;
    height: 14px;
}
.submit-file-input {
    display: none;
}
.submit-file-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}
.submit-file-name.submit-error {
    color: #dc2626;
    font-style: normal;
}
.submit-send-btn {
    align-self: flex-start;
    padding: 9px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.submit-send-btn:hover:not(:disabled) {
    background: var(--primary-dark, #232C4E);
}
.submit-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.submit-status {
    font-size: 0.82rem;
    font-weight: 500;
    min-height: 1.2em;
}
.submit-status.submit-success {
    color: #16a34a;
}
.submit-status.submit-error {
    color: #dc2626;
}
.submit-admin-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 10px 14px;
    margin-top: 10px;
}
.submit-admin-note svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
/* Submission toggle (instructor) */
.submit-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.submit-toggle-status {
    font-weight: 600;
    font-size: 0.85rem;
}
.submit-toggle-status.open {
    color: #16a34a;
}
.submit-toggle-status.closed {
    color: #9ca3af;
}
.submit-toggle-btn {
    margin-left: auto;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid;
}
.submit-toggle-btn.closed {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}
.submit-toggle-btn.closed:hover {
    background: #15803d;
    border-color: #15803d;
}
.submit-toggle-btn.open {
    background: #fff;
    color: #dc2626;
    border-color: #fca5a5;
}
.submit-toggle-btn.open:hover {
    background: #fef2f2;
    border-color: #dc2626;
}
/* Submission closed note (student) */
.submit-closed-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #9ca3af;
    padding: 10px 14px;
    margin-top: 10px;
    font-style: italic;
}
.submit-closed-note svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #9ca3af;
}

/* --- Gradebook --- */
.gradebook-panel {
    padding: 24px;
}

/* Instructor Table View */
.gradebook-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
}
.gradebook-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 600px;
}
.gradebook-table th,
.gradebook-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
}
.gradebook-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    position: sticky;
    top: 0;
    z-index: 1;
}
.gb-student-col {
    text-align: left !important;
    min-width: 180px;
    font-weight: 500;
    color: #1f2937;
}
.gb-assign-col {
    min-width: 100px;
}
.gb-assign-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.gb-assign-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}
.gb-assign-pts {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 400;
}
.gb-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    font-size: 0.68rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    color: #6b7280;
}
.gb-publish-btn.published {
    background: #dcfce7;
    color: #16a34a;
    border-color: #86efac;
}
.gb-publish-btn:hover {
    transform: scale(1.05);
}
.gb-student-cell {
    text-align: left !important;
}
.gb-student-id {
    font-weight: 500;
    color: #1f2937;
    font-size: 0.82rem;
}
.gb-student-email {
    font-size: 0.72rem;
    color: #9ca3af;
}
.gb-grade-cell {
    padding: 6px 8px;
}
.gb-grade-input {
    width: 60px;
    padding: 5px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-align: center;
    font-size: 0.82rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.gb-grade-input:focus {
    outline: none;
    border-color: #2E3A63;
    box-shadow: 0 0 0 3px rgba(107, 58, 93, 0.1);
}
.gb-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.gb-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #2E3A63;
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.gb-save-btn:hover {
    background: #232C4E;
    transform: translateY(-1px);
}
.gb-save-status {
    font-size: 0.8rem;
    color: #16a34a;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
}
.gb-save-status.show {
    opacity: 1;
}

/* Student Gradebook View */
.gradebook-student {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gb-student-info {
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #6b7280;
}
.gb-student-grades {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gb-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: var(--radius-lg);
    border: 1px solid #f3f4f6;
    transition: box-shadow 0.2s;
}
.gb-student-row:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.gb-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gb-row-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}
.gb-row-pts {
    font-size: 0.72rem;
    color: #9ca3af;
}
.gb-row-grade {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gb-grade-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2E3A63;
    background: #f3e8ee;
    padding: 4px 12px;
    border-radius: 8px;
}
.gb-not-published {
    font-size: 0.78rem;
    color: #9ca3af;
    font-style: italic;
}
.gb-no-grade {
    font-size: 0.85rem;
    color: #d1d5db;
}

/* Gradebook Average Row (Instructor) */
.gb-avg-row {
    background: #f3e8ee;
    border-top: 2px solid #e5d4de;
}
.gb-avg-row td {
    font-weight: 700;
    color: #2E3A63;
    font-size: 0.85rem;
}
.gb-avg-label {
    font-style: italic;
}
.gb-avg-cell {
    text-align: center;
}

/* Student view average */
.gb-row-avg {
    color: #2E3A63;
    font-weight: 600;
    font-style: normal;
}

/* --- Students Panel (Instructor Only) --- */
.students-panel {
    padding: 24px;
}
.students-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.students-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.students-title svg {
    width: 18px;
    height: 18px;
}
.students-stats {
    display: flex;
    gap: 10px;
    align-items: center;
}
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}
.stat-badge svg {
    width: 12px;
    height: 12px;
}
.stat-approved {
    background: #dcfce7;
    color: #166534;
}
.stat-pending {
    background: #fef3c7;
    color: #92400e;
}
.approve-all-btn {
    margin-left: auto;
    padding: 8px 16px;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.approve-all-btn:hover {
    background: #15803d;
}
.students-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.students-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.students-table th {
    text-align: left;
    padding: 12px 14px;
    background: var(--bg-card);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.students-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.students-table tr:last-child td {
    border-bottom: none;
}
.student-row.row-pending {
    background: #fffbeb;
}
.student-row.row-approved {
    background: #f0fdf4;
}
.student-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}
.student-status.approved {
    background: #dcfce7;
    color: #166534;
}
.student-status.pending {
    background: #fef3c7;
    color: #92400e;
}
.student-status svg {
    width: 11px;
    height: 11px;
}
.student-actions {
    display: flex;
    gap: 6px;
}
.student-action-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.student-action-btn:hover {
    transform: translateY(-1px);
}
.student-action-btn.approve-btn {
    background: #16a34a;
    color: #fff;
}
.student-action-btn.approve-btn:hover {
    background: #15803d;
}
.student-action-btn.remove-btn {
    background: #fee2e2;
    color: #dc2626;
}
.student-action-btn.remove-btn:hover {
    background: #fecaca;
}

/* --- Pending Approval Modal --- */
.pending-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.pending-overlay.open {
    opacity: 1;
}
.pending-modal {
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.pending-icon {
    margin-bottom: 16px;
    color: #E6A817;
}
.pending-icon svg {
    width: 40px;
    height: 40px;
}
.pending-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.pending-msg {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}
.pending-ok-btn {
    padding: 10px 32px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.pending-ok-btn:hover {
    background: var(--primary-dark, #1a365d);
}

/* --- Reset All Students --- */
.students-reset-wrap {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed var(--border);
    text-align: right;
}
.reset-all-btn {
    padding: 10px 20px;
    background: #fff;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.reset-all-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* --- Reset Confirmation Modal --- */
.reset-confirm-modal {
    max-width: 440px;
}
.reset-icon {
    color: #dc2626;
}
.reset-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.reset-confirm-btn {
    padding: 10px 24px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.reset-confirm-btn:hover {
    background: #b91c1c;
}
.reset-cancel-btn {
    padding: 10px 24px;
    background: var(--bg-card, #f8f8f8);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.reset-cancel-btn:hover {
    background: var(--border);
}

@media (max-width: 768px) {
    .students-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .approve-all-btn {
        margin-left: 0;
    }
    .students-table {
        font-size: 0.8rem;
    }
    .students-table th,
    .students-table td {
        padding: 10px 8px;
    }
    .students-reset-wrap {
        text-align: center;
    }
}

/* ================================================================
   EMAIL NOTIFICATION TOAST
   ================================================================ */
.email-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    z-index: 99999;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    transform: translateY(20px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 420px;
}
.email-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.email-toast-success { background: #2d7d46; }
.email-toast-error   { background: #b33a3a; }
.email-toast-warning { background: #b37a1a; }
.email-toast-info    { background: #2E3A63; }
.email-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.email-toast-msg {
    line-height: 1.4;
}

/* ================================================================
   YNS-OZTURK.COM ECOSYSTEM ALIGNMENT
   Mirrors the typography & visual rhythm of yns-ozturk.com so the
   Course Portal reads as a continuation of the same site. The Wix
   personal portfolio uses Avenir Light W01 throughout, with ALL
   CAPS headings ("POLITICAL SCIENCE & INTERNATIONAL RELATIONS") in
   refined letter-spacing. We mirror that here.
   ================================================================ */
:root {
    --font-display: 'Avenir Heavy', 'Avenir Next', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-sans:    'Avenir', 'Avenir Next', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Avenir', 'Avenir Next', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --plum-deep:    #1B2240;
    --rule:         rgba(46,58,99,0.18);
    --gold:         #B7942A;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.7;
    letter-spacing: 0.01em;
    font-feature-settings: "kern", "liga";
}

/* ----- Navbar mirrors yns-ozturk.com (Avenir, uppercase nav) ----- */
.navbar { background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--border); }
.logo-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.96rem;
    letter-spacing: 0.02em;
    color: var(--plum-deep);
    text-transform: none;
}
.logo-sub {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-transform: none;
}
.nav-link,
.nav-links a {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.nav-link.active, .nav-link:hover,
.nav-links a.active, .nav-links a:hover { color: var(--plum-deep); }

/* ----- Hero — direct mirror of yns-ozturk.com bio layout ----- */
.hero {
    background:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 100%),
        var(--bg-warm);
}
.hero-content { max-width: 720px; padding: 88px 0 80px; }

.hero-badge {
    background: transparent;
    color: var(--text-tertiary);
    padding: 0 0 18px 0;
    margin-bottom: 28px;
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-style: normal;
    display: block;
    width: fit-content;
}

/* Hero title — same ALL CAPS Avenir treatment as
   "POLITICAL SCIENCE & INTERNATIONAL RELATIONS" on yns-ozturk.com */
.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.85rem, 3.6vw, 2.7rem);
    line-height: 1.18;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--plum-deep);
    margin-bottom: 28px;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.04rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.78;
    max-width: 580px;
    margin-bottom: 40px;
    letter-spacing: 0.01em;
}
.hero-greeting {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--plum-deep);
    letter-spacing: 0.02em;
    margin-right: 4px;
}

.hero-actions { gap: 14px; margin-bottom: 56px; }

.hero-stats { gap: 38px; padding-top: 32px; border-top: 1px solid var(--rule); }
.stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: 0.02em;
    color: var(--plum-deep);
}
.stat-label {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 4px;
}
.stat-divider { background: var(--rule); height: 38px; }

/* ----- Buttons — Avenir caps, like Wix theme CTAs ----- */
.btn {
    border-radius: 4px;
    padding: 13px 28px;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.btn-primary {
    background: var(--plum-deep);
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.btn-primary:hover { background: var(--plum); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(46,58,99,0.22); }
.btn-secondary, .btn-ghost {
    background: #fff;
    color: var(--plum-deep);
    border: 1px solid var(--rule);
}
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--plum); color: var(--plum-deep); background: #fff; }

/* ----- Page titles (Courses, About) — ALL CAPS Avenir ----- */
.page-title, .courses-title, .about-title,
[id$="-page"] > .container > h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--plum-deep);
    text-align: center;
}
.page-desc, .courses-subtitle, .about-subtitle, .page-header p {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

/* ----- Course cards — clean Wix theme styling ----- */
.course-card {
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.25s var(--ease);
}
.course-card:hover {
    border-color: var(--rule);
    box-shadow: 0 12px 32px rgba(46,58,99,0.14);
    transform: translateY(-3px);
}
.card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: none;
}
.card-code {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--plum-deep);
    text-transform: uppercase;
    font-weight: 700;
}
.card-badge {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 2px;
}
.card-desc { font-family: var(--font-body); font-weight: 300; line-height: 1.65; }

/* ----- Course-detail hero ----- */
.course-hero-badge, .lang-tag {
    font-family: var(--font-sans);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}

/* ----- Section titles & tabs ----- */
.tab-btn {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tab-btn.active { color: var(--plum-deep); }

/* Course detail sidebar headers */
.course-info-block h3,
.info-block-title {
    font-family: var(--font-display);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-tertiary);
    font-weight: 700;
    margin-bottom: 8px;
}

/* ----- Week items — Wix-style clean cards ----- */
.week-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--plum-deep);
    background: var(--plum-soft);
    letter-spacing: 0.02em;
}
.week-label {
    font-family: var(--font-sans);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.week-topic {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--plum-deep);
    letter-spacing: 0.01em;
    text-transform: none;
}
.week-reading {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}
.week-item {
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s var(--ease);
}
.week-item:hover { border-color: var(--rule); box-shadow: 0 2px 12px rgba(46,58,99,0.06); }

/* ----- Content list items ----- */
.content-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.96rem;
    letter-spacing: 0.015em;
    color: var(--text-primary);
}
.content-meta { font-family: var(--font-body); font-weight: 300; letter-spacing: 0.01em; }
.content-action {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 6px 14px;
}

/* ----- Modal refinement ----- */
.modal-title {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--plum-deep);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 1.1rem;
}
.modal-desc { font-family: var(--font-body); font-weight: 300; }
.modal-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ----- Announcement section ----- */
.announcements-title, .ann-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--plum-deep);
    letter-spacing: 0.02em;
}
.ann-body { font-family: var(--font-body); font-weight: 300; }

/* ----- Footer mirrors yns-ozturk.com institutional foot ----- */
.footer {
    background: var(--plum-deep);
    color: rgba(255,255,255,0.78);
    border-top: 4px solid var(--gold);
    padding: 36px 0 calc(32px + var(--safe-bottom));
}
.footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.footer-inner p:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.footer-note {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.58);
    opacity: 1;
    text-transform: none;
}
.footer-inner::before {
    content: "Recep Tayyip Erdoğan University · Faculty of Economics & Administrative Sciences · Department of International Relations";
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
}
.footer-inner::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    background: var(--gold);
    margin-top: 8px;
}

/* ----- About page — Wix layout cleanup ----- */
.about-section h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--plum-deep);
    margin-bottom: 12px;
}
.about-section p {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.78;
    letter-spacing: 0.01em;
}
.about-left h2, .about-left h2 a {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--plum-deep);
    letter-spacing: 0.02em;
    text-transform: none;
}
.about-role {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.about-course-chip {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: none;
}

/* ----- Filter & form controls ----- */
.filter-btn, .filter-bar button {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ----- Selection / focus polish ----- */
::selection { background: var(--plum-mid); color: var(--plum-deep); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--plum);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Small consistent spacing for week items */
.content-list .week-item + .week-item { margin-top: 14px; }

/* ----- Course detail hero card title (e.g. "Turkish Foreign Policy — I") ----- */
.course-hero .card-title,
#courseHero .card-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--plum-deep);
    text-transform: none;
}

/* ================================================================
   MOBILE & TABLET RESPONSIVENESS (overrides — keep last)
   Ensures the Course Portal is fully usable on phones (≤480px),
   small phones (≤380px), and tablets in portrait/landscape (≤1024px).
   ================================================================ */

/* ---- Global: prevent horizontal page scroll on any device ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}
img, svg, video, iframe { max-width: 100%; }

/* ---- iOS Safari: stop auto-zoom on form focus (needs ≥16px) ---- */
input, select, textarea {
    font-size: 16px;
}

/* ---- Touch-friendly tap targets everywhere ---- */
@media (pointer: coarse) {
    .btn,
    .tab-btn,
    .content-action,
    .pdf-view-link,
    .reading-link,
    .nav-link,
    .nav-links a,
    .ann-btn,
    .approve-all-btn,
    .reset-cancel-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Filter chips: comfortable 40px+ touch targets on touch devices
       (desktop keeps the slim pill look) */
    .filter-btn {
        min-height: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-flex;
        align-items: center;
    }
    /* Native tap highlight subdued (we keep our own :active styles) */
    a, button { -webkit-tap-highlight-color: rgba(63,31,62,0.12); }
}

/* ================================================================
   TABLET (≤1024px) — large phones in landscape & small tablets
   ================================================================ */
@media (max-width: 1024px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .course-body { grid-template-columns: 1fr; }
    .course-sidebar { position: static; max-height: none; overflow-y: visible; }
    .about-card { grid-template-columns: 1fr; gap: 28px; }
    .hero-stats { flex-wrap: wrap; }

    /* Tab bar: turn into horizontal scroll strip so many tabs all fit */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ================================================================
   PHONE (≤768px) — typical phones in portrait
   ================================================================ */
@media (max-width: 768px) {
    .container { padding-left: 16px; padding-right: 16px; }

    /* Hero: cap to the viewport with side gutters (the base 720px max-width
       overflows phones), tighter padding, smaller title, full-width CTAs */
    .hero-content { max-width: 100%; padding: 36px 22px 28px; }
    .hero-title { font-size: 1.65rem; }
    .hero-subtitle { max-width: 100%; }
    .hero-stats { gap: 14px 22px; }
    .stat-num { font-size: 1.25rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* Course grid: one column on phones */
    .course-grid { grid-template-columns: 1fr; gap: 16px; }
    .course-card { padding: 20px; }
    .course-hero { padding: 22px; flex-direction: column; text-align: center; }
    .course-hero .hero-photo { width: 130px; height: 130px; order: -1; margin-right: 0; }
    .course-hero .card-title { font-size: 1.25rem; }
    .course-hero .card-desc { max-width: 100%; font-size: 0.92rem; }

    /* Lecture/reading rows: let multi-PDF lists wrap to multiple lines */
    .week-reading,
    .static-file-wrap,
    .reading-link,
    .pdf-view-link {
        flex-wrap: wrap;
        word-break: break-word;
    }
    .static-file-wrap { display: inline-flex !important; }

    /* Sidebar: stack inner items cleanly */
    .sidebar-item { padding: 12px 0; }

    /* Modals (login, etc.) */
    .modal { padding: 22px; width: calc(100vw - 32px); max-width: 100%; }

    /* PDF & video viewers: full screen on small devices */
    .pdf-viewer,
    .video-player {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .pdf-viewer-header,
    .video-player-header { padding: 10px 14px; }
    .pdf-viewer-title,
    .video-player-title {
        font-size: 0.82rem;
        max-width: calc(100vw - 80px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pdf-viewer-close,
    .video-player-close {
        width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .video-player-element { max-height: calc(100vh - 60px); }

    /* Tables stay scrollable horizontally; ensure wrappers fill width */
    .gradebook-table-wrap,
    .students-table-wrap { -webkit-overflow-scrolling: touch; }

    /* Email toast: don't crowd the screen edges */
    .email-toast {
        left: 16px; right: 16px; bottom: 16px;
        max-width: none;
        font-size: 13px;
        padding: 12px 16px;
    }

    /* Footer */
    .footer-inner { flex-direction: column; gap: 6px; text-align: center; }
}

/* ================================================================
   SMALL PHONE (≤480px) — iPhone SE / older Android
   ================================================================ */
@media (max-width: 480px) {
    :root { --nav-h: 60px; }
    .container { padding-left: 14px; padding-right: 14px; }

    .hero-title { font-size: 1.55rem; line-height: 1.25; }
    .hero-subtitle { font-size: 0.92rem; }

    .course-card { padding: 18px; }
    .card-title { font-size: 1rem; }
    .card-desc { font-size: 0.88rem; }

    .tab-btn { padding: 9px 11px; font-size: 0.74rem; }

    .sidebar-value, .sidebar-textbook { font-size: 0.88rem; }
    .ann-panel { padding: 18px 18px; }
    .ann-header h3 { font-size: 1.02rem; }

    /* Logo block in navbar: shrink subtitle so it doesn't wrap */
    .logo-name { font-size: 0.88rem; }
    .logo-sub  { font-size: 0.6rem;  letter-spacing: 0.06em; }

    /* Course meta chips (level / weeks / language) wrap nicely */
    .course-meta, .course-tags { flex-wrap: wrap; gap: 6px; }
}

/* ================================================================
   TINY PHONE (≤380px) — last-ditch tightening
   ================================================================ */
@media (max-width: 380px) {
    .hero-content { padding-left: 18px; padding-right: 18px; }
    .hero-title { font-size: 1.4rem; }
    .stat-num { font-size: 1.1rem; }
    .course-hero .hero-photo { width: 110px; height: 110px; }
    .tab-btn { padding: 8px 9px; font-size: 0.7rem; }
}

/* ================================================================
   LANDSCAPE PHONE — keep PDF viewer usable when device is rotated
   ================================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .pdf-viewer,
    .video-player { width: 100vw; height: 100vh; border-radius: 0; }
    .hero-content { padding: 24px 0 18px; }
}

/* ================================================================
   PROFESSIONAL POLISH — smooth micro-interactions & focus states
   (kept last so it refines earlier rules)
   ================================================================ */

/* Consistent, subtle motion on interactive elements */
.btn, .tab-btn, .content-action, .pdf-view-link, .reading-link,
.filter-btn, .course-card, .zoom-link, .week-item, .content-item,
.static-file-wrap a, .modal-close, .nav-link, .nav-links a {
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

/* Keyboard focus — visible, on-brand gold ring (accessibility + polish) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}
/* elements that manage their own focus ring shouldn't double up */
.ann-input:focus-visible, .modal input:focus-visible { outline: none; }

/* Course cards: refined lift */
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

/* Week rows: gentle, professional hover affordance */
.week-item:hover {
    border-color: var(--plum-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.week-item:hover .week-num { background: var(--plum-mid); }

/* Resource / content rows */
.content-item:hover { border-color: var(--plum-light); }

/* Reading & action links: crisp hover */
.reading-link:hover, .pdf-view-link:hover, .content-action:hover { color: var(--plum-deep); }

/* Tabs: subtle hover before active */
.tab-btn:hover { color: var(--plum-deep); }

/* Buttons: honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ---- Refinement pass 2 ---- */

/* Desktop: show ALL course tabs (they were clipped past the container with the
   scrollbar hidden — Gradebook/Students were invisible). Wrap to a second row
   on wide screens; the ≤1024px scroll-strip behavior is unchanged. */
@media (min-width: 1025px) {
    .tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* Course materials read as tactile "chips" instead of bare text links —
   students immediately see slides/readings/videos are clickable. */
.slides-link, .reading-link, .video-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    background: var(--plum-soft);
    border: 1px solid rgba(46,58,99,0.14);
    border-radius: var(--radius-full);
    color: var(--plum);
    font-weight: 600;
    line-height: 1.6;
}
.slides-link:hover, .reading-link:hover, .video-link:hover {
    opacity: 1;
    background: var(--plum-mid);
    border-color: rgba(46,58,99,0.3);
    color: var(--plum-deep);
}
.week-reading { flex-wrap: wrap; row-gap: 5px; }

/* Refined page headers: a small gold rule under COURSES / ABOUT titles */
.page-header .page-title::after {
    content: '';
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--gold);
    margin: 14px auto 0;
}

/* Empty state when course filters match nothing */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 20px;
    color: var(--text-tertiary);
}
.no-results svg { opacity: 0.45; margin-bottom: 14px; }
.no-results p { font-size: 0.98rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 4px; }
.no-results .no-results-sub { font-size: 0.86rem; font-weight: 400; color: var(--text-tertiary); }

/* ================================================================
   ANTI-SLOP REFINEMENTS (redesign-skill audit, 2026-08-24)
   ================================================================ */

/* Shadows tinted with the brand navy instead of generic pure black —
   surfaces read as lit within the same world, not pasted on. */
:root {
    --shadow-sm:  0 1px 3px rgba(27,34,64,0.07);
    --shadow:     0 2px 12px rgba(27,34,64,0.07);
    --shadow-lg:  0 4px 24px rgba(27,34,64,0.10);
    --shadow-xl:  0 8px 32px rgba(27,34,64,0.13);
}
.navbar.scrolled { box-shadow: 0 1px 8px rgba(27,34,64,0.08); }

/* Physical pressed feedback on interactive elements */
.btn:active, .filter-btn:active, .tab-btn:active,
.content-action:active, .ann-publish-btn:active, .zoom-link:active {
    transform: scale(0.98);
}
.course-card:active { transform: translateY(-2px) scale(0.995); }

/* Orphan control: balanced headings, tidy paragraphs */
.hero-title, .page-title, .card-title, .eval-title, .modal-title { text-wrap: balance; }
.hero-subtitle, .page-desc, .card-desc, .eval-desc { text-wrap: pretty; }

/* Data surfaces use tabular figures so columns of numbers align */
.gradebook-table, .students-table, .gb-row-pts, .stat-num, .week-num {
    font-variant-numeric: tabular-nums;
}

/* Skip-to-content link — hidden until keyboard focus */
.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 300;
    padding: 10px 18px;
    background: var(--plum-deep);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 0; }
#main-content:focus { outline: none; }

/* Course cards cascade in with a slight stagger instead of mounting at once */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.course-grid .course-card { animation: cardIn 0.38s var(--ease) backwards; }
.course-grid .course-card:nth-child(1) { animation-delay: 0.02s; }
.course-grid .course-card:nth-child(2) { animation-delay: 0.06s; }
.course-grid .course-card:nth-child(3) { animation-delay: 0.10s; }
.course-grid .course-card:nth-child(4) { animation-delay: 0.14s; }
.course-grid .course-card:nth-child(5) { animation-delay: 0.18s; }
.course-grid .course-card:nth-child(6) { animation-delay: 0.22s; }

/* ============================================================
   Read-only document viewer hardening
   All PDFs render as canvases (no browser PDF toolbar anywhere);
   block selection of rendered pages and keep viewer content out
   of any print output.
   ============================================================ */
.pdf-viewer-canvas,
.pdf-page-canvas {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
@media print {
    #pdfViewerModal,
    #videoPlayerModal {
        display: none !important;
    }
}

/* ================================================================
   HOME HERO — editorial refresh (2026-08-27)
   Two-column academic layout: lede + live course index.
   Layered navy/gold ground with fine grain for depth; sentence-case
   display type; primary action paired with a text link (no ghost).
   ================================================================ */

.hero-bg {
    opacity: 1;
    background:
        radial-gradient(ellipse 70% 60% at 78% 12%, rgba(46,58,99,0.10) 0%, transparent 62%),
        radial-gradient(ellipse 55% 55% at 6% 88%, rgba(46,58,99,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 92% 78%, rgba(183,148,42,0.07) 0%, transparent 60%);
}
/* Fine grain breaks the flatness of a pure gradient ground */
.hero-grid {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Full container width (overrides the old 620px single-column cap), while
   keeping .container's horizontal padding and centring. */
/* .hero is a flex container: the child must claim the full line, otherwise it
   shrink-wraps to its content and the auto margins centre it. */
.hero-content { width: 100%; max-width: 1140px; padding-top: 64px; padding-bottom: 72px; }

.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

/* ── Lede ────────────────────────────────────────────────── */
.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--plum-light);
    margin: 0 0 22px;
    padding-top: 16px;
    position: relative;
}
.hero-eyebrow::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 46px; height: 2px;
    background: var(--gold, #B7942A);
}
.hero-lede { max-width: 46rem; }
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.08;
    /* sentence case + negative tracking (overrides the legacy all-caps rule) */
    text-transform: none;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0 0 20px;
    text-wrap: balance;
}
.hero-subtitle {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--text-secondary);
    max-width: 54ch;
    margin: 0 0 34px;
    text-wrap: pretty;
}
.hero-actions { align-items: center; gap: 22px; margin-bottom: 0; }

/* Text link instead of a second button — less visual noise */
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--plum);
    text-decoration: none;
    padding: 10px 2px;
    border-bottom: 1px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-link svg { transition: transform var(--dur) var(--ease); }
.hero-link:hover { color: var(--plum-deep, var(--plum-dark)); border-bottom-color: var(--gold, #B7942A); }
.hero-link:hover svg { transform: translate(2px, -2px); }
.hero-link:active { transform: translateY(1px); }

/* ── Staggered entry (transform/opacity only) ────────────── */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.hero-eyebrow, .hero-title, .hero-subtitle, .hero-actions {
    animation: heroRise 0.62s var(--ease) both;
}
.hero-title    { animation-delay: 0.05s; }
.hero-subtitle { animation-delay: 0.10s; }
.hero-actions  { animation-delay: 0.15s; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    /* vertical only — keep the container's horizontal padding intact */
    .hero-content { padding-top: 44px; padding-bottom: 52px;
                    padding-left: max(22px, var(--safe-left)); padding-right: max(22px, var(--safe-right)); }
    .hero-subtitle { max-width: 60ch; }
}
@media (max-width: 560px) {
    .hero-actions { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow, .hero-title, .hero-subtitle, .hero-actions { animation: none; }
    .hero-link:hover svg { transform: none; }
}