.annotation-menu-content.collapsed {
    display: none !important;
}
/* =====================================================
   ONLINE COURSE PLATFORM - TURKUAZ + TURUNCU TEMA
   Akademik Web Sitesi ile Uyumlu
   ===================================================== */

/* =====================================================
   PAGE TRANSITION ANIMATIONS
   ===================================================== */
@keyframes pageSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px);
    }
}

@keyframes pageSlideIn {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.page-transition-out {
    animation: pageSlideOut 0.4s ease-out forwards;
}

.page-transition-in {
    animation: pageSlideIn 0.4s ease-out forwards;
}

/* Transition overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 168, 168, 0.95), rgba(26, 35, 126, 0.95));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.page-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition-overlay .loader {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.page-transition-overlay .next-topic-preview {
    color: white;
    font-size: 1.2rem;
    margin-top: 20px;
    text-align: center;
    max-width: 80%;
}

:root {
    /* Turkuaz Ana Renk Paleti */
    --primary-turquoise: #00a8a8;
    --primary-dark: #008080;
    --primary-light: #00d4d4;

    /* Turuncu Aksan Renkleri */
    --accent-orange: #FF6B35;
    --accent-orange-light: #FF8C5A;
    --accent-orange-dark: #E85A2A;

    /* Gradyanlar */
    --accent-gradient: linear-gradient(135deg, #00a8a8 0%, #00d4d4 50%, #4dd0e1 100%);
    --orange-gradient: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
    --mixed-gradient: linear-gradient(90deg, #00a8a8, #FF6B35);

    /* Açık Tema Arka Plan */
    --bg-light: #f0f9ff;
    --bg-lighter: #e8f5f5;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 168, 168, 0.2);

    /* Metin Renkleri */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #888888;

    /* Sidebar */
    --sidebar-bg: linear-gradient(180deg, #006666 0%, #008080 50%, #00a8a8 100%);
    --sidebar-header-bg: linear-gradient(135deg, #004d4d 0%, #006666 100%);
    --sidebar-hover: rgba(255, 107, 53, 0.2);

    --font-size-base: 16px;
    --sidebar-width: 25vw;
    --sidebar-resizer-width: 8px;
    --right-sidebar-width: 50px;
}

/* =====================================================
   SCROLLBAR - Custom Styling
   ===================================================== */
::-webkit-scrollbar {
    width: 6px;
    /* Slightly thinner */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 168, 168, 0.3);
    /* Low opacity turquoise */
    border-radius: 3px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 168, 168, 0.6);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark Mode Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* =====================================================
   KOYU TEMA - Dark Mode
   ===================================================== */
html[data-theme="dark"] {
    /* Neutral Zinc - Clean Dark Gray (No blue tint) */
    --bg-light: #18181b;
    --bg-lighter: #27272a;
    --bg-card: rgba(24, 24, 27, 0.95);
    --bg-card-hover: rgba(39, 39, 42, 0.98);
    --glass-bg: rgba(24, 24, 27, 0.9);
    --glass-border: rgba(0, 168, 168, 0.3);

    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;

    /* Reverting Sidebar to Original Dark Turquoise/Greenish Theme */
    --sidebar-bg: linear-gradient(180deg, #0a1a1a 0%, #0f2626 50%, #143030 100%);
    --sidebar-header-bg: linear-gradient(135deg, #081515 0%, #0a1a1a 100%);
}

html[data-theme="dark"] body {
    /* Neutral Dark Gradient */
    background: linear-gradient(135deg, #09090b 0%, #18181b 100%) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] body::before {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0, 168, 168, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 40%);
}

html[data-theme="dark"] .sidebar {
    background: var(--sidebar-bg);
}

html[data-theme="dark"] .sidebar-header {
    background: var(--sidebar-header-bg);
}

html[data-theme="dark"] .main-content {
    background: var(--bg-card);
}

html[data-theme="dark"] .course-content {
    color: var(--text-primary);
}

html[data-theme="dark"] .course-content h1,
html[data-theme="dark"] .course-content h2,
html[data-theme="dark"] .course-content h3 {
    color: var(--primary-light);
}

html[data-theme="dark"] .quiz-container {
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.98) 0%, rgba(22, 33, 62, 0.95) 100%);
    border: 2px solid rgba(0, 168, 168, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 168, 168, 0.1);
}

html[data-theme="dark"] .quiz-container:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 168, 168, 0.2);
}

html[data-theme="dark"] .custom-block {
    background-color: rgba(30, 30, 50, 0.8);
}

/* Dark Mode SVG Inversion - for .svg files and SVG-converted images */
html[data-theme="dark"] .course-content img[src$=".svg"],
html[data-theme="dark"] .course-content img[src$=".SVG"],
html[data-theme="dark"] .course-content img[src*=".svg.png"],
html[data-theme="dark"] .course-content img[src*=".svg_"],
html[data-theme="dark"] .custom-block img[src$=".svg"],
html[data-theme="dark"] .custom-block img[src$=".SVG"],
html[data-theme="dark"] .custom-block img[src*=".svg.png"],
html[data-theme="dark"] .custom-block img[src*=".svg_"],
html[data-theme="dark"] .columns-container img[src$=".svg"],
html[data-theme="dark"] .columns-container img[src$=".SVG"],
html[data-theme="dark"] .columns-container img[src*=".svg.png"],
html[data-theme="dark"] .columns-container img[src*=".svg_"],
html[data-theme="dark"] .page-content img[src$=".svg"],
html[data-theme="dark"] .page-content img[src$=".SVG"],
html[data-theme="dark"] .page-content img[src*=".svg.png"],
html[data-theme="dark"] .page-content img[src*=".svg_"],
html[data-theme="dark"] img.dark-invert {
    filter: invert(1) hue-rotate(180deg);
}

/* Images with explicit no-invert class will not be inverted */
html[data-theme="dark"] img[src$=".svg"].no-dark-invert,
html[data-theme="dark"] img[src$=".SVG"].no-dark-invert,
html[data-theme="dark"] img[src*=".svg.png"].no-dark-invert,
html[data-theme="dark"] img[src*=".svg_"].no-dark-invert,
html[data-theme="dark"] img.dark-invert.no-dark-invert {
    filter: none;
}

/* =====================================================
   GENEL GÖVDE STİLLERİ
   ===================================================== */
html,
body {
    overflow: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    background: linear-gradient(135deg, #e8f5f5 0%, #f0f9ff 50%, #e3f2fd 100%);
    align-items: stretch;
    color: var(--text-primary);
    position: relative;
    overflow-x: hidden;
}

/* Homepage Specific Override */
html, body.homepage {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow-y: auto !important;
    min-height: 100vh;
}

body.homepage .main-content-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body.homepage .site-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Hareketli Arka Plan */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0, 168, 168, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 212, 212, 0.05) 0%, transparent 40%);
    animation: floatingBg 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes floatingBg {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(1deg);
    }

    66% {
        transform: translateY(10px) rotate(-1deg);
    }
}

* {
    box-sizing: border-box;
}

/* =====================================================
   HAMBURGER MENU
   ===================================================== */
.hamburger {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    /* display: block !important; - Removed to allow JS toggling */
    display: block;
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 168, 168, 0.3);
    transition: all 0.3s ease;
}

.hamburger:hover {
    background: var(--orange-gradient);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 900;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
    width: var(--sidebar-width);
    min-width: 220px; /* Minimum width to fit header buttons */
    background: rgba(30, 30, 46, 0.95);
    color: rgba(255, 255, 255, 0.9);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

html[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.95);
    color: rgba(0, 0, 0, 0.85);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.sidebar-header {
    padding: 24px 20px;
    background: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sidebar-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 0;
    flex-wrap: nowrap;
    min-width: 0; /* Allow shrinking */
}

.sidebar-header-top .sidebar-btn {
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.sidebar-header h2 {
    margin: 0;
    font-size: 0.95rem;
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

html[data-theme="light"] .sidebar-header h2 {
    color: rgba(0, 0, 0, 0.6);
}

.sidebar-header p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
    width: 100%;
    display: block;
}

html[data-theme="light"] .sidebar-header p {
    color: rgba(0, 0, 0, 0.9);
}

.sidebar-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-theme="light"] .sidebar-toggle-btn {
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .sidebar-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.8);
}

.sidebar-header h2 a {
    color: white;
    text-decoration: none;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
}

.sidebar-menu li {
    list-style: none;
}

.sidebar-menu li a.topic-link {
    display: block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    position: relative;
    font-size: 0.9rem;
    font-weight: 400;
}

html[data-theme="light"] .sidebar-menu li a.topic-link {
    color: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-menu li a.topic-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: transparent;
    transition: all 0.2s ease;
}

.sidebar-menu li a.topic-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
    padding-left: 24px;
}

html[data-theme="light"] .sidebar-menu li a.topic-link:hover {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.9);
}

.sidebar-menu li a.topic-link.active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
    padding-left: 24px;
}

html[data-theme="light"] .sidebar-menu li a.topic-link.active {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 1);
}

.sidebar-menu li a.topic-link.active::before {
    background: rgba(255, 255, 255, 0.4);
    width: 2px;
}

html[data-theme="light"] .sidebar-menu li a.topic-link.active::before {
    background: rgba(0, 0, 0, 0.3);
}

/* Sub-topics list (H2 headers) */
.sub-topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.03);
    overflow: visible;
}

html[data-theme="light"] .sub-topics-list {
    background: rgba(0, 0, 0, 0.02);
}

.sub-topics-list li {
    list-style: none;
}

.sub-topic-link {
    display: block;
    padding: 8px 20px 8px 44px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    font-weight: 400;
}

html[data-theme="light"] .sub-topic-link {
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.sub-topic-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    padding-left: 48px;
}

html[data-theme="light"] .sub-topic-link:hover {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.85);
}

.sub-topic-link.active-sub {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
    padding-left: 48px;
}

html[data-theme="light"] .sub-topic-link.active-sub {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 1);
}

/* Sidebar Resizer */
.sidebar-resizer {
    width: var(--sidebar-resizer-width);
    cursor: col-resize;
    background: linear-gradient(90deg, rgba(0, 168, 168, 0.1) 0%, rgba(0, 168, 168, 0.2) 100%);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.sidebar-resizer:hover,
body.resizing-sidebar .sidebar-resizer {
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 107, 53, 0.3) 100%);
}

body.resizing-sidebar {
    cursor: col-resize;
    user-select: none;
}

/* Completed topic styling */
.topic-link.completed-topic {
    color: #4dd0e1 !important;
}

.topic-link.has-new-badge {
    padding-right: 62px;
}

.new-topic-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: 1.5;
    background: #9a3f0c;
    color: #fffdf0;
    border: 1px solid #c4601f;
    pointer-events: none;
}

html[data-theme="light"] .new-topic-badge {
    background: #9a3f0c;
    color: #fffdf0;
    border: 1px solid #c4601f;
}

.completion-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 0.75em;
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

html[data-theme="light"] .completion-badge {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Topic completion section and button */
.topic-completion-container {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid rgba(0, 168, 168, 0.2);
    display: flex;
    justify-content: flex-end;
}

.topic-completion-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.complete-topic-btn {
    padding: 12px 24px;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 168, 168, 0.3);
}

.complete-topic-btn:hover:not(.completed) {
    background: var(--orange-gradient);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.complete-topic-btn.completed {
    background: var(--accent-gradient);
    cursor: default;
    opacity: 0.9;
}

.complete-topic-btn.completed:hover {
    transform: none;
}

.completion-status {
    font-weight: bold;
    color: var(--text-secondary);
    font-size: 0.95em;
}

.completion-status.completed {
    color: var(--primary-turquoise);
}

.completion-status.error {
    color: var(--accent-orange);
}

.user-info {
    margin-top: auto;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.85em;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .user-info {
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.user-info a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

html[data-theme="light"] .user-info a {
    color: rgba(0, 0, 0, 0.6);
}

.user-info a:hover {
    color: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .user-info a:hover {
    color: rgba(0, 0, 0, 0.9);
}

/* =====================================================
   MAIN CONTENT
   ===================================================== */
.main-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 40px 40px 40px;
    width: calc(100vw - var(--sidebar-width) - var(--sidebar-resizer-width) - var(--right-sidebar-width));
    max-width: calc(100vw - var(--sidebar-width) - var(--sidebar-resizer-width) - var(--right-sidebar-width));
    max-height: 100vh;
    margin: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
}

.main-content p {
    margin-bottom: 1.15em;
    line-height: 1.8;
}

/* =====================================================
   PROGRESS BAR
   ===================================================== */
.progress-container {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 20px;
    padding: 12px 18px;
    background: var(--bg-card);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 168, 168, 0.1);
    border: 1px solid var(--glass-border);
}

body.right-sidebar-hidden .progress-container {
    margin-right: 60px;
}

.progress-container.collapsed {
    padding: 8px 12px;
    margin-bottom: 10px;
}

.progress-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
    transition: all 0.2s ease;
}

.progress-bar-wrapper {
    flex: 1;
    min-width: 0;
}

.progress-toggle-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    flex-shrink: 0;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-toggle-btn:hover {
    background: rgba(0, 168, 168, 0.1);
    border-color: var(--primary-turquoise);
    color: var(--primary-turquoise);
}

.font-controls-inline {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.font-controls-inline button {
    background: var(--accent-gradient);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.font-controls-inline button:hover {
    background: var(--orange-gradient);
    transform: translateY(-1px);
}

.theme-toggle-btn-inline {
    background: var(--accent-gradient);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.theme-toggle-btn-inline:hover {
    background: var(--orange-gradient);
    transform: translateY(-1px);
}

html[data-theme="dark"] .theme-toggle-btn-inline {
    background: var(--orange-gradient);
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: rgba(0, 168, 168, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid var(--glass-border);
}

.progress-fill {
    height: 100%;
    background: var(--orange-gradient);
    transition: width 0.4s ease;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
}

.progress-text {
    font-size: 0.9em;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
}

/* =====================================================
   COURSE CONTENT
   ===================================================== */
.course-content {
    line-height: 1.7;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-top: 20px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.course-content h1,
.course-content h2,
.course-content h3 {
    color: var(--primary-dark);
    position: relative;
    margin-bottom: 0.75em;
}

.course-content h1 {
    border-bottom: 3px solid;
    border-image: var(--mixed-gradient) 1;
    padding-bottom: 10px;
}

.course-content h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

.course-content code {
    background: rgba(0, 168, 168, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    color: var(--primary-dark);
}

.course-content pre code {
    display: block;
    padding: 15px;
    overflow-x: auto;
    background: var(--bg-card);
    border-left: 4px solid var(--primary-turquoise);
    border-radius: 0 8px 8px 0;
}

.course-content blockquote {
    border-left: 4px solid var(--primary-turquoise);
    margin: 0;
    padding: 15px 20px;
    background: rgba(0, 168, 168, 0.05);
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
}

.course-content a {
    color: var(--primary-turquoise);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.course-content a:hover {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
}

/* Tables in course content - improved spacing */
.course-content table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 168, 168, 0.1);
}

.course-content table th,
.course-content table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 168, 168, 0.15);
}

.course-content table th {
    background: linear-gradient(135deg, var(--primary-turquoise) 0%, var(--primary-light) 100%);
    color: white;
    font-weight: 600;
    font-size: 0.95em;
}

.course-content table tr:last-child td {
    border-bottom: none;
}

.course-content table tbody tr:hover {
    background: rgba(0, 168, 168, 0.05);
}

/* Table row highlighting classes for normal mode */
/* Red highlight */
.course-content table tr.highlight-red {
    background-color: rgba(255, 0, 0, 0.2) !important;
}
.course-content table tr.highlight-red td {
    background-color: rgba(255, 0, 0, 0.2) !important;
}

/* Green highlight */
.course-content table tr.highlight-green {
    background-color: rgba(0, 255, 0, 0.2) !important;
}
.course-content table tr.highlight-green td {
    background-color: rgba(0, 255, 0, 0.2) !important;
}

/* Blue highlight */
.course-content table tr.highlight-blue {
    background-color: rgba(0, 123, 255, 0.2) !important;
}
.course-content table tr.highlight-blue td {
    background-color: rgba(0, 123, 255, 0.2) !important;
}

/* Yellow highlight */
.course-content table tr.highlight-yellow {
    background-color: rgba(255, 255, 0, 0.3) !important;
}
.course-content table tr.highlight-yellow td {
    background-color: rgba(255, 255, 0, 0.3) !important;
}

/* Orange highlight */
.course-content table tr.highlight-orange {
    background-color: rgba(255, 165, 0, 0.2) !important;
}
.course-content table tr.highlight-orange td {
    background-color: rgba(255, 165, 0, 0.2) !important;
}

/* Purple highlight */
.course-content table tr.highlight-purple {
    background-color: rgba(128, 0, 128, 0.2) !important;
}
.course-content table tr.highlight-purple td {
    background-color: rgba(128, 0, 128, 0.2) !important;
}

/* Dark mode support for tables */
html[data-theme="dark"] .course-content table {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .course-content table th,
html[data-theme="dark"] .course-content table td {
    border-bottom-color: rgba(0, 168, 168, 0.2);
}

html[data-theme="dark"] .course-content table tbody tr:hover {
    background: rgba(0, 168, 168, 0.1);
}

/* Dark mode highlight colors - slightly adjusted for better visibility */
html[data-theme="dark"] .course-content table tr.highlight-red {
    background-color: rgba(255, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .course-content table tr.highlight-red td {
    background-color: rgba(255, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .course-content table tr.highlight-green {
    background-color: rgba(0, 255, 0, 0.25) !important;
}
html[data-theme="dark"] .course-content table tr.highlight-green td {
    background-color: rgba(0, 255, 0, 0.25) !important;
}

html[data-theme="dark"] .course-content table tr.highlight-blue {
    background-color: rgba(100, 180, 255, 0.25) !important;
}
html[data-theme="dark"] .course-content table tr.highlight-blue td {
    background-color: rgba(100, 180, 255, 0.25) !important;
}

html[data-theme="dark"] .course-content table tr.highlight-yellow {
    background-color: rgba(255, 255, 0, 0.35) !important;
}
html[data-theme="dark"] .course-content table tr.highlight-yellow td {
    background-color: rgba(255, 255, 0, 0.35) !important;
}

/* Center images and videos in course content (outside columns) */
/* Standalone images in course-content (accounts for .course-page wrapper) */
.course-content img,
.course-content video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center paragraphs containing only media */
.course-content p:has(img:only-child),
.course-content p:has(video:only-child),
.course-content p.design-block:has(> img),
.course-content p.design-block:has(> video),
.course-content p.video-block,
.course-content p[data-block-type="video"] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Fallback for browsers without :has() support */
.course-content p[data-block-type="paragraph"] img,
.course-content p[data-block-type="video"] video,
.course-content p.video-block video,
.course-content p.design-block img,
.course-content p.design-block video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
   QUIZ STYLES
   ===================================================== */
.quiz-container {
    background: linear-gradient(135deg, rgba(252, 248, 242, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 2px solid rgba(0, 168, 168, 0.2);
    padding: 30px;
    border-radius: 16px;
    margin-top: 30px;
    box-shadow: 0 8px 32px rgba(0, 168, 168, 0.15), 0 0 0 1px rgba(0, 168, 168, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.quiz-container:hover {
    box-shadow: 0 12px 40px rgba(0, 168, 168, 0.2), 0 0 0 1px rgba(0, 168, 168, 0.1);
    transform: translateY(-2px);
}

/* Dark mode support */
html[data-theme="dark"] .quiz-container {
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.98) 0%, rgba(22, 33, 62, 0.95) 100%);
    border: 2px solid rgba(0, 168, 168, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 168, 168, 0.1);
}

.quiz-question {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(0, 168, 168, 0.1);
    transition: all 0.3s ease;
    animation: fadeInQuestion 0.4s ease-out;
}

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

.quiz-question:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 168, 168, 0.2);
    box-shadow: 0 4px 12px rgba(0, 168, 168, 0.1);
}

/* Dark mode support */
html[data-theme="dark"] .quiz-question {
    background: rgba(40, 40, 60, 0.5);
    border: 1px solid rgba(0, 168, 168, 0.2);
}

html[data-theme="dark"] .quiz-question:hover {
    background: rgba(40, 40, 60, 0.7);
    border-color: rgba(0, 168, 168, 0.3);
}

.question-text {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 16px;
    color: var(--text-primary);
    line-height: 1.6;
}

.options label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(0, 168, 168, 0.06);
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.options label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.options label:hover::before {
    left: 100%;
}

/* Quiz Answer States */
.quiz-badge {
    font-weight: bold;
    margin-left: 8px;
}

.quiz-badge.correct {
    color: #28a745;
}

.quiz-badge.wrong {
    color: #dc3545;
}

.calc-mark {
    font-weight: bold;
}

/* Option States - Light Mode */
.quiz-option {
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.quiz-option.correct {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.08) 100%);
    border-color: #28a745;
    color: #155724;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}

.quiz-option.correct::before {
    content: '✓';
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 1.2em;
    color: #28a745;
    font-weight: bold;
}

.quiz-option.wrong {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.08) 100%);
    border-color: #dc3545;
    color: #721c24;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

.quiz-option.wrong::before {
    content: '✗';
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 1.2em;
    color: #dc3545;
    font-weight: bold;
}

.quiz-option.neutral {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}

.quiz-question.answered {
    opacity: 1;
    border-radius: 5px;
    /* Removed fixed white background/padding that broke dark mode */
}

.quiz-explanation-box {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(38, 198, 218, 0.12) 0%, rgba(38, 198, 218, 0.06) 100%);
    border-left: 4px solid #26c6da;
    border-radius: 10px;
    color: #2c3e50;
    box-shadow: 0 2px 8px rgba(38, 198, 218, 0.15);
    animation: slideInExplanation 0.4s ease-out;
}

@keyframes slideInExplanation {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.quiz-explanation-box strong {
    color: #00897b;
    display: block;
    margin-bottom: 8px;
    font-size: 1.05em;
}

/* Quiz Dark Mode Overrides */
html[data-theme="dark"] .quiz-badge.correct {
    color: #2ecc71;
}

html[data-theme="dark"] .quiz-badge.wrong {
    color: #e74c3c;
}

html[data-theme="dark"] .quiz-option.correct {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.25) 0%, rgba(39, 174, 96, 0.15) 100%);
    border-color: rgba(39, 174, 96, 0.5);
    color: #d5f5e3;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

html[data-theme="dark"] .quiz-option.wrong {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.25) 0%, rgba(231, 76, 60, 0.15) 100%);
    border-color: rgba(231, 76, 60, 0.5);
    color: #fadbd8;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

html[data-theme="dark"] .quiz-option.neutral {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .quiz-explanation-box {
    background: linear-gradient(135deg, rgba(38, 198, 218, 0.15) 0%, rgba(38, 198, 218, 0.08) 100%);
    border-left-color: #26c6da;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(38, 198, 218, 0.2);
}

html[data-theme="dark"] .quiz-explanation-box strong {
    color: #4dd0e1;
}

/* Quiz Controls */
.quiz-controls {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid rgba(0, 168, 168, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Quiz Progress Bar */
.quiz-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 168, 168, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 15px;
    position: relative;
}

.quiz-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-turquoise) 0%, var(--primary-light) 100%);
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(0, 168, 168, 0.5);
    position: relative;
    overflow: hidden;
}

.quiz-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.quiz-progress-text {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95em;
    white-space: nowrap;
    min-width: 100px;
    text-align: center;
}

/* Quiz Buttons */
.btn-prev,
.btn-next,
.btn-submit {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-prev::before,
.btn-next::before,
.btn-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-prev:hover::before,
.btn-next:hover::before,
.btn-submit:hover::before {
    width: 300px;
    height: 300px;
}

.btn-prev {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

.btn-prev:hover {
    background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(149, 165, 166, 0.3);
}

.btn-next {
    background: linear-gradient(135deg, var(--primary-turquoise) 0%, var(--primary-light) 100%);
    color: white;
}

.btn-next:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-turquoise) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 168, 168, 0.4);
}

.btn-submit {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

.btn-submit:disabled,
.btn-prev:disabled,
.btn-next:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Dark mode for buttons */
html[data-theme="dark"] .btn-prev {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

html[data-theme="dark"] .btn-next {
    background: linear-gradient(135deg, var(--primary-turquoise) 0%, var(--primary-light) 100%);
}

html[data-theme="dark"] .btn-submit {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

html[data-theme="dark"] .quiz-progress-bar {
    background: rgba(0, 168, 168, 0.2);
}
.options label:hover {
    background: rgba(0, 168, 168, 0.12);
    border-color: rgba(0, 168, 168, 0.4);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 168, 168, 0.15);
}

.options label input[type="radio"],
.options label input[type="checkbox"] {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-turquoise);
    flex-shrink: 0;
}

.quiz-result {
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    font-weight: bold;
}

.quiz-result.success {
    background: linear-gradient(135deg, rgba(0, 168, 168, 0.15), rgba(0, 212, 212, 0.1));
    color: var(--primary-dark);
    border-left: 4px solid var(--primary-turquoise);
}

.quiz-result.error {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 140, 90, 0.1));
    color: var(--accent-orange-dark);
    border-left: 4px solid var(--accent-orange);
}

.quiz-result.warning {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.15), rgba(255, 220, 100, 0.1));
    color: #856404;
    border-left: 4px solid #ffc107;
}

/* Fill-in-blank Question Styles */
.fill-blank-input {
    display: inline-block;
    min-width: 120px;
    max-width: 200px;
    padding: 8px 12px;
    margin: 0 4px;
    border: 2px solid rgba(0, 168, 168, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 1em;
    font-family: inherit;
    transition: all 0.3s ease;
}

.fill-blank-input:focus {
    outline: none;
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

.fill-blank-input.correct {
    border-color: #28a745;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.08) 100%);
    color: #155724;
}

.fill-blank-input.wrong {
    border-color: #dc3545;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.08) 100%);
    color: #721c24;
}

.correct-answer {
    color: #28a745;
    font-weight: 500;
    margin-left: 4px;
}

/* Open-ended Question Styles */
.open-ended-container {
    margin-top: 12px;
}

.open-ended-textarea {
    width: 100%;
    min-height: 150px;
    padding: 16px;
    border: 2px solid rgba(0, 168, 168, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 1em;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.3s ease;
}

.open-ended-textarea:focus {
    outline: none;
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

.open-ended-textarea:disabled {
    background: rgba(0, 0, 0, 0.05);
    cursor: not-allowed;
}

/* Pending/Graded Badge Styles */
.quiz-badge.pending {
    color: #856404;
    background: rgba(255, 193, 7, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
}

.quiz-badge.graded {
    color: #0c5460;
    background: rgba(23, 162, 184, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
}

.quiz-badge.graded.glowing-badge {
    animation: glow-graded 1.5s infinite alternate;
    cursor: help;
}

@keyframes glow-graded {
    from {
        box-shadow: 0 0 5px rgba(23, 162, 184, 0.2);
    }
    to {
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.8), 0 0 20px rgba(23, 162, 184, 0.6);
    }
}

/* Dark mode support for fill-blank and open-ended */
html[data-theme="dark"] .fill-blank-input {
    background: rgba(40, 40, 60, 0.8);
    border-color: rgba(0, 168, 168, 0.4);
    color: var(--text-primary);
}

html[data-theme="dark"] .fill-blank-input.correct {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.25) 0%, rgba(39, 174, 96, 0.15) 100%);
    border-color: rgba(39, 174, 96, 0.5);
    color: #d5f5e3;
}

html[data-theme="dark"] .fill-blank-input.wrong {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.25) 0%, rgba(231, 76, 60, 0.15) 100%);
    border-color: rgba(231, 76, 60, 0.5);
    color: #fadbd8;
}

html[data-theme="dark"] .correct-answer {
    color: #2ecc71;
}

html[data-theme="dark"] .open-ended-textarea {
    background: rgba(40, 40, 60, 0.8);
    border-color: rgba(0, 168, 168, 0.3);
    color: var(--text-primary);
}

html[data-theme="dark"] .open-ended-textarea:disabled {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .quiz-badge.pending {
    background: rgba(255, 193, 7, 0.25);
    color: #ffe69c;
}

html[data-theme="dark"] .quiz-badge.graded {
    background: rgba(23, 162, 184, 0.25);
    color: #9eeaf9;
}

html[data-theme="dark"] .quiz-badge.graded.glowing-badge {
    animation: glow-graded-dark 1.5s infinite alternate;
}

@keyframes glow-graded-dark {
    from {
        box-shadow: 0 0 5px rgba(158, 234, 249, 0.2);
    }
    to {
        box-shadow: 0 0 15px rgba(158, 234, 249, 0.6), 0 0 20px rgba(158, 234, 249, 0.4);
    }
}

/* LaTeX hint for open-ended questions */
.latex-hint {
    margin-top: 8px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.latex-hint code {
    background: rgba(0, 168, 168, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
}

/* Submitted answer preview with LaTeX rendering */
.submitted-answer-label {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.submitted-answer-preview {
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 168, 168, 0.2);
    border-radius: 12px;
    margin-bottom: 12px;
    line-height: 1.8;
    white-space: pre-wrap;
}

html[data-theme="dark"] .submitted-answer-preview {
    background: rgba(40, 40, 60, 0.6);
    border-color: rgba(0, 168, 168, 0.3);
}

/* Quiz Exam Mode Styles */
.quiz-container.exam-mode .quiz-form {
    display: none;
}

.quiz-container.exam-mode.started .quiz-form {
    display: block;
}

.quiz-container.exam-mode.started .quiz-start-overlay {
    display: none;
}

.quiz-start-overlay {
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, rgba(0, 168, 168, 0.1) 0%, rgba(0, 200, 200, 0.05) 100%);
    border-radius: 12px;
    border: 2px dashed rgba(0, 168, 168, 0.3);
}

.quiz-start-content h4 {
    font-size: 1.5em;
    margin-bottom: 16px;
    color: var(--primary-dark);
}

.quiz-start-content p {
    margin: 12px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.btn-start-quiz {
    margin-top: 24px;
    padding: 16px 40px;
    font-size: 1.1em;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-turquoise) 0%, var(--primary-light) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 168, 168, 0.3);
}

.btn-start-quiz:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 168, 168, 0.4);
}

/* Focus Warning Modal */
.quiz-focus-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

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

.quiz-focus-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.quiz-focus-content h3 {
    color: #dc3545;
    font-size: 1.5em;
    margin-bottom: 16px;
}

.quiz-focus-content p {
    color: #333;
    margin: 12px 0;
    line-height: 1.6;
}

.countdown-display {
    font-size: 4em;
    font-weight: bold;
    color: #dc3545;
    margin: 20px 0;
    font-family: monospace;
}

.btn-return-quiz {
    padding: 16px 40px;
    font-size: 1.1em;
    font-weight: 600;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-return-quiz:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

html[data-theme="dark"] .quiz-focus-content {
    background: #1e1e2e;
}

html[data-theme="dark"] .quiz-focus-content p {
    color: var(--text-primary);
}

/* Fullscreen Quiz Exam Panel */
.quiz-exam-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-secondary);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.quiz-exam-panel .quiz-exam-header {
    background: linear-gradient(135deg, var(--primary-turquoise) 0%, var(--primary-dark) 100%);
    padding: 20px 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.quiz-exam-panel .quiz-exam-header h2 {
    margin: 0;
    font-size: 1.5em;
}

.quiz-exam-panel .quiz-exam-timer {
    font-size: 1.2em;
    font-weight: bold;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 8px;
}

.quiz-exam-panel .quiz-exam-body {
    flex: 1;
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.quiz-exam-panel .quiz-container {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

html[data-theme="dark"] .quiz-exam-panel {
    background: var(--bg-primary);
}


/* =====================================================
   RIGHT SIDEBAR
   ===================================================== */
.right-sidebar {
    width: var(--right-sidebar-width);
    background: var(--bg-card);
    border-left: 1px solid var(--glass-border);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    padding: 20px 10px;
    /* Reduced padding */
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    z-index: 90;
    /* High z-index but below overlay */
}

.right-sidebar-toggle-container {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right-sidebar-toggle-btn {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 1001;
    /* Higher than header */
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 168, 168, 0.3);
    transition: all 0.3s ease;
    display: flex;
    /* Ensure visible */
}

.right-sidebar-toggle-btn:hover {
    background: var(--orange-gradient);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.right-sidebar-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.right-sidebar-close-btn:hover {
    color: var(--accent-orange);
}

.right-sidebar h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--primary-dark);
    border-bottom: 2px solid var(--primary-turquoise);
    padding-bottom: 8px;
    display: inline-block;
}

.page-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Dot Navigation Style */
.page-nav-item {
    width: 14px;
    height: 14px;
    padding: 0;
    background: rgba(0, 168, 168, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page-nav-item:hover {
    width: 18px;
    height: 18px;
    background: rgba(0, 168, 168, 0.4);
    border-color: var(--primary-turquoise);
}

.page-nav-item.active {
    width: 22px;
    height: 22px;
    background: var(--accent-gradient);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(0, 168, 168, 0.5), 0 0 20px rgba(0, 168, 168, 0.3);
}

/* Hide the text inside dots by default, show on sidebar hover */
.page-nav-item span {
    display: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 8px;
    white-space: nowrap;
}

/* Show page numbers when sidebar is hovered */
.right-sidebar:hover .page-nav-item {
    width: auto;
    height: auto;
    padding: 6px 10px;
    border-radius: 20px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
}

.right-sidebar:hover .page-nav-item::before {
    content: '';
    width: 10px;
    height: 10px;
    background: inherit;
    border-radius: 50%;
    flex-shrink: 0;
}

.right-sidebar:hover .page-nav-item span {
    display: inline;
}

.right-sidebar:hover .page-nav-item.active span {
    color: white;
}

/* ---- Page sorting drag-and-drop (design mode) ---- */

/* Cursor hint when sorting is enabled */
body.design-mode-active .page-nav-list.page-sorting-enabled .page-nav-item.page-sort-handle {
    cursor: grab;
    position: relative;
}

body.design-mode-active .page-nav-list.page-sorting-enabled .page-nav-item.page-sort-handle:active {
    cursor: grabbing;
}

/* Subtle drag-grip indicator on hover */
body.design-mode-active .page-nav-list.page-sorting-enabled .page-nav-item.page-sort-handle::after {
    content: '⋮';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

body.design-mode-active .right-sidebar:hover .page-nav-list.page-sorting-enabled .page-nav-item.page-sort-handle:hover::after {
    opacity: 1;
}

/* Item being dragged */
.page-nav-item.page-dragging {
    opacity: 0.35 !important;
}

/* Drop target indicators */
.page-nav-item.page-drag-over-top {
    border-top: 2px solid var(--accent-color, #3b82f6) !important;
}

.page-nav-item.page-drag-over-bottom {
    border-bottom: 2px solid var(--accent-color, #3b82f6) !important;
}

/* Flash animation after a successful drop */
@keyframes page-reorder-flash {
    0%   { box-shadow: 0 0 0 3px rgba(59,130,246,0.8); }
    100% { box-shadow: none; }
}

.page-nav-item.page-reorder-flash {
    animation: page-reorder-flash 0.8s ease-out forwards;
    border-radius: 50%;
}

/* Page delete button (design mode) */
.page-nav-delete-btn {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e74c3c;
    color: white;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, background 0.15s ease;
}

.page-nav-delete-btn:hover {
    background: #c0392b;
    transform: scale(1.2);
}

.page-nav-add-btn {
    display: none;
    align-self: center;
    width: 22px;
    height: 22px;
    margin-top: 6px;
    border: 1px solid rgba(0, 168, 168, 0.35);
    border-radius: 50%;
    background: rgba(0, 168, 168, 0.14);
    color: var(--primary-dark);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-nav-add-btn:hover {
    background: rgba(0, 168, 168, 0.25);
    border-color: var(--primary-turquoise);
    transform: scale(1.08);
}

html[data-theme="dark"] .page-nav-add-btn {
    color: var(--primary-light);
    border-color: rgba(0, 212, 212, 0.35);
    background: rgba(0, 168, 168, 0.2);
}

/* Show delete button only when design mode is active and sidebar is hovered */
.design-mode-active .right-sidebar:hover .page-nav-delete-btn {
    display: block;
}

.design-mode-active .right-sidebar:hover .page-nav-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Adjust page-nav-item position for the delete button */
.design-mode-active .right-sidebar:hover .page-nav-item {
    position: relative;
}

/* Tooltip removed - numbers shown directly on hover */

/* Hide right sidebar on smaller screens */
@media (max-width: 1200px) {
    :root {
        --right-sidebar-width: 0px;
    }

    .right-sidebar {
        display: none;
    }
}

/* =====================================================
   HOME PAGE
   ===================================================== */
.container {
    max-width: 900px;
    margin: 50px auto;
    text-align: center;
    padding: 0 20px;
}

.course-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
}

.course-card {
    background: linear-gradient(135deg, 
        rgba(252, 248, 242, 0.98) 0%, 
        rgba(255, 255, 255, 0.95) 100%);
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 168, 168, 0.08);
    width: 220px;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-top: 4px solid #00a8a8;
    border: 2px solid rgba(0, 168, 168, 0.15);
    position: relative;
    overflow: hidden;
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 168, 168, 0.08), transparent);
    transition: left 0.6s ease;
}

.course-card:hover::before {
    left: 100%;
}

.course-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 168, 168, 0.2);
    border-color: rgba(0, 212, 212, 0.4);
    background: linear-gradient(135deg, 
        rgba(252, 248, 242, 1) 0%, 
        rgba(240, 248, 255, 0.98) 100%);
}

.course-card:nth-child(even) {
    border-top-color: #FF6B35;
    border-color: rgba(255, 107, 53, 0.15);
}

.course-card:nth-child(even):hover {
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.2);
    border-color: rgba(255, 140, 90, 0.4);
}

html[data-theme="dark"] .course-card {
    background: linear-gradient(135deg, 
        rgba(20, 30, 45, 0.98) 0%, 
        rgba(25, 35, 50, 0.95) 100%);
    border-color: rgba(0, 168, 168, 0.2);
}

html[data-theme="dark"] .course-card:hover {
    background: linear-gradient(135deg, 
        rgba(20, 30, 45, 1) 0%, 
        rgba(25, 35, 50, 0.98) 100%);
    border-color: rgba(0, 212, 212, 0.4);
}

html[data-theme="dark"] .course-card:nth-child(even) {
    border-color: rgba(255, 107, 53, 0.2);
}

html[data-theme="dark"] .course-card:nth-child(even):hover {
    border-color: rgba(255, 140, 90, 0.4);
}

.course-card h3 {
    margin: 0 0 15px 0;
    background: linear-gradient(135deg, #00a8a8 0%, #00d4d4 50%, #4dd0e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.course-card:nth-child(even) h3 {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.course-card p {
    color: var(--text-secondary);
    margin: 15px 0 0 0;
    font-size: 0.9em;
}

.course-card .progress-bar.blue {
    background: var(--accent-gradient);
}

/* =====================================================
   MOBILE RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        width: 80vw;
        max-width: 320px;
        left: -82vw;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 4px 0 20px rgba(0, 168, 168, 0.3);
        overflow-y: auto;
    }

    .sidebar-resizer {
        display: none;
    }

    .sidebar.active {
        left: 0;
    }

    .hamburger {
        display: block;
    }

    .main-content {
        padding: 60px 20px 20px 20px;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(3px);
    }

    .sidebar-overlay.active {
        display: block;
    }
}

/* Font Size Controls */
.font-controls {
    display: none;
}

@media (max-width: 768px) {
    .font-controls {
        display: flex;
        position: fixed;
        top: 60px;
        right: 15px;
        background: var(--bg-card);
        padding: 8px 12px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 168, 168, 0.15);
        gap: 8px;
        align-items: center;
        z-index: 100;
    }

    .font-controls button {
        background: var(--accent-gradient);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .font-controls button:hover {
        background: var(--orange-gradient);
    }

    .font-controls-inline {
        display: none;
    }
}

/* =====================================================
   CUSTOM BLOCK STYLES (Theorems, Lemmas, etc.)
   ===================================================== */
.custom-block {
    margin: 20px 0;
    padding: 18px;
    border-left-width: 5px;
    border-left-style: solid;
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.custom-block-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: bold;
}

.custom-block-content {
    line-height: 1.7;
}

/* Specific colors for each type */
.custom-block.thm {
    border-left-color: var(--primary-turquoise);
    background: linear-gradient(90deg, rgba(0, 168, 168, 0.08), var(--bg-card));
}

.custom-block.thm .custom-block-title {
    color: var(--primary-dark);
}

.custom-block.lemma {
    border-left-color: #27ae60;
    background: linear-gradient(90deg, rgba(39, 174, 96, 0.08), var(--bg-card));
}

.custom-block.lemma .custom-block-title {
    color: #27ae60;
}

.custom-block.prop {
    border-left-color: #26c6da;
    background: linear-gradient(90deg, rgba(38, 198, 218, 0.08), var(--bg-card));
}

.custom-block.prop .custom-block-title {
    color: #00897b;
}

.custom-block.cor {
    border-left-color: var(--accent-orange);
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.08), var(--bg-card));
}

.custom-block.cor .custom-block-title {
    color: var(--accent-orange);
}

.custom-block.ex {
    border-left-color: #283593;
    background: linear-gradient(90deg, rgba(26, 35, 126, 0.10), var(--bg-card));
}

.custom-block.ex .custom-block-title {
    color: #1a237e;
}

html[data-theme="dark"] .custom-block.ex .custom-block-title {
    color: #7986cb;
}

.custom-block.tanim {
    border-left-color: #50C878;
    background: linear-gradient(90deg, rgba(80, 200, 120, 0.12), var(--bg-card));
}

.custom-block.tanim .custom-block-title {
    color: #2E8B57;
}

.custom-block.not {
    border-left-color: #f1c40f;
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.1), var(--bg-card));
}

.custom-block.not .custom-block-title {
    color: #d4a900;
}

.custom-block.par,
.custom-block.img,
.custom-block.video {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 10px 0;
}

.custom-block.par .custom-block-content {
    line-height: 1.7;
}

.enum-custom-label {
    font-weight: 700;
}

.content-spacer {
    display: block;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}

/* =====================================================
   PROOF ACCORDION STYLES
   ===================================================== */
.proof-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 168, 168, 0.3);
}

.proof-toggle-btn:hover {
    background: var(--orange-gradient);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.proof-toggle-btn.active {
    background: var(--orange-gradient);
}

.proof-content {
    margin-top: 15px;
    padding: 20px;
    background: rgba(0, 168, 168, 0.05);
    border-left: 3px solid var(--primary-turquoise);
    border-radius: 0 8px 8px 0;
    animation: slideDown 0.3s ease;
}

.proof-content.paginated {
    overflow: visible;
}

.proof-content.paginated .proof-body {
    overflow: visible;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.proof-title {
    margin: 0 0 12px 0;
    color: var(--primary-dark);
    font-size: 1em;
    font-weight: 600;
}

.proof-body {
    line-height: 1.7;
}

.proof-body::after {
    content: "□";
    display: block;
    text-align: right;
    font-size: 1.8em;
    color: var(--primary-dark);
    margin-top: 10px;
}

/* Paginated Proof Styles */
.proof-pages-container {
    position: relative;
    width: 100%;
}

.proof-page {
    display: none;
    width: 100%;
}

.proof-page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.proof-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 168, 168, 0.2);
}

.proof-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.proof-nav-btn:hover:not(:disabled) {
    background: var(--orange-gradient);
    transform: scale(1.1);
}

.proof-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Dot navigation for proofs */
.proof-dot-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proof-dot {
    width: 10px;
    height: 10px;
    background: rgba(0, 168, 168, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.proof-dot:hover {
    width: 12px;
    height: 12px;
    background: rgba(0, 168, 168, 0.5);
    border-color: var(--primary-turquoise);
}

.proof-dot.active {
    width: 14px;
    height: 14px;
    background: var(--accent-gradient);
    box-shadow: 0 0 8px rgba(0, 168, 168, 0.5);
}

.proof-page-indicator {
    font-size: 0.9em;
    color: var(--text-secondary);
    font-weight: 500;
}

html[data-theme="dark"] .proof-content {
    background: rgba(0, 168, 168, 0.1);
}

html[data-theme="dark"] .proof-title {
    color: var(--primary-light);
}

html[data-theme="dark"] .proof-navigation {
    border-top-color: rgba(0, 168, 168, 0.3);
}

html[data-theme="dark"] .proof-dot {
    background: rgba(0, 168, 168, 0.2);
}

html[data-theme="dark"] .proof-dot:hover {
    background: rgba(0, 168, 168, 0.4);
}

html[data-theme="dark"] .proof-dot.active {
    box-shadow: 0 0 10px rgba(0, 212, 212, 0.5);
}

/* Paginated Block Styles (for ex, etc.) */
.paginated-block .block-pages-container {
    position: relative;
    width: 100%;
}

.paginated-block .block-page {
    display: none;
    width: 100%;
}

.paginated-block .block-page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.block-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.block-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.block-nav-btn:hover:not(:disabled) {
    background: var(--orange-gradient);
    transform: scale(1.1);
}

.block-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Dot navigation for blocks */
.block-dot-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.block-dot {
    width: 10px;
    height: 10px;
    background: rgba(0, 168, 168, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.block-dot:hover {
    width: 12px;
    height: 12px;
    background: rgba(0, 168, 168, 0.5);
    border-color: var(--primary-turquoise);
}

.block-dot.active {
    width: 14px;
    height: 14px;
    background: var(--accent-gradient);
    box-shadow: 0 0 8px rgba(0, 168, 168, 0.5);
}

html[data-theme="dark"] .block-dot {
    background: rgba(0, 168, 168, 0.2);
}

html[data-theme="dark"] .block-dot:hover {
    background: rgba(0, 168, 168, 0.4);
}

html[data-theme="dark"] .block-dot.active {
    box-shadow: 0 0 10px rgba(0, 212, 212, 0.5);
}

.block-page-indicator {
    font-size: 0.9em;
    color: var(--text-secondary);
    font-weight: 500;
}

/* =====================================================
   TOOLTIP STYLES
   ===================================================== */
.tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--primary-turquoise);
    color: var(--primary-turquoise);
    font-weight: 500;
}

.tooltip-content {
    position: absolute;
    top: 100%;
    margin-top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card, rgba(255, 255, 255, 0.98));
    color: var(--text-primary, #333) !important;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 1em;
    line-height: 1.5;
    /* Enable text wrapping */
    word-break: break-word;
    min-width: 320px;
    max-width: 900px;
    width: max-content;
    white-space: pre-line;
    padding: 14px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    width: auto;

    /* Hide by default but keep in DOM for MathJax */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
}

.tooltip-content.long {
    min-width: 480px;
    max-width: 1200px;
    width: max-content;
    white-space: pre-line;
}

.tooltip:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* Tooltip arrow - pointing up */
.tooltip-content::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: var(--primary-turquoise);
}

html[data-theme="dark"] .tooltip-content::after {
    border-bottom-color: var(--primary-turquoise);
}

/* Alignment classes for edge cases */
.tooltip.tooltip-align-left .tooltip-content {
    left: 0;
    transform: translateX(0);
}

.tooltip.tooltip-align-right .tooltip-content {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.tooltip.tooltip-align-left .tooltip-content::after {
    left: 20px;
    transform: none;
}

.tooltip.tooltip-align-right .tooltip-content::after {
    left: auto;
    right: 20px;
    transform: none;
}

/* =====================================================
   CIRCLED NUMBERED LISTS
   ===================================================== */
.course-content ol {
    list-style-type: none;
    padding-left: 35px;
    counter-reset: custom-counter;
    margin-top: 0.9em; /* ~1.5x line spacing from preceding paragraph */
}

.course-content ul {
    margin-top: 0.9em; /* ~1.5x line spacing from preceding paragraph */
}

.course-content ol>li {
    counter-increment: custom-counter;
    position: relative;
    margin-bottom: 0.9em; /* ~1.5x line spacing */
    padding-left: 0;
}

/* Unordered list spacing */
.course-content ul>li {
    margin-bottom: 0.9em; /* ~1.5x line spacing */
}

.course-content ol>li:before {
    content: counter(custom-counter);
    position: absolute;
    left: -35px;
    top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--accent-gradient);
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.75em;
    box-shadow: 0 2px 8px rgba(0, 168, 168, 0.3);
}

.course-content ol>li:nth-child(even):before {
    background: var(--orange-gradient);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

/* Nested lists inside ordered lists - use different counter */
.course-content ol ol {
    counter-reset: nested-counter;
    padding-left: 30px;
    margin-top: 8px;
}

.course-content ol ol>li {
    counter-increment: nested-counter;
    margin-bottom: 0.7em; /* Slightly less for nested items */
}

.course-content ol ol>li:before {
    content: counter(nested-counter);
    width: 18px;
    height: 18px;
    font-size: 0.7em;
    left: -28px;
    background: var(--primary-turquoise);
    box-shadow: 0 2px 6px rgba(0, 168, 168, 0.2);
}

.course-content ol ol>li:nth-child(even):before {
    background: var(--accent-orange-light);
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

/* Unordered lists inside ordered lists */
.course-content ol ul:not(.list-star):not(.list-arrow):not(.list-check):not(.list-diamond):not(.list-circle):not(.list-plus):not(.list-triangle) {
    list-style: disc;
    padding-left: 25px;
    margin-top: 8px;
}

.course-content ol ul:not(.list-star):not(.list-arrow):not(.list-check):not(.list-diamond):not(.list-circle):not(.list-plus):not(.list-triangle)>li:before {
    content: none;
    display: none;
}

/* =====================================================
   THEME TOGGLE BUTTON
   ===================================================== */
.theme-toggle-btn {
    background: var(--accent-gradient);
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 168, 168, 0.3);
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 168, 168, 0.4);
}

html[data-theme="dark"] .theme-toggle-btn {
    background: var(--orange-gradient);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

html[data-theme="dark"] .theme-toggle-btn:hover {
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.font-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* =====================================================
   RIGHT SIDEBAR (Page Navigation)
   ===================================================== */
.right-sidebar {
    width: var(--right-sidebar-width);
    min-width: var(--right-sidebar-width);
    max-width: var(--right-sidebar-width);
    background: var(--bg-card);
    border-left: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 8px;
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expand sidebar on hover to show page numbers */
.right-sidebar:hover {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    padding: 20px 15px;
}

.right-sidebar-header {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
    text-align: center;
}

.right-sidebar-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.right-sidebar-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

.page-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Dot Navigation Style - Mobile override (inherits from main) */
.page-nav-item {
    width: 12px;
    height: 12px;
    padding: 0;
    background: rgba(0, 168, 168, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page-nav-item:hover {
    width: 16px;
    height: 16px;
    background: rgba(0, 168, 168, 0.5);
    border-color: var(--primary-turquoise);
}

.page-nav-item.active {
    width: 20px;
    height: 20px;
    background: var(--accent-gradient);
    border-color: transparent;
    box-shadow: 0 0 10px rgba(0, 168, 168, 0.5), 0 0 16px rgba(0, 168, 168, 0.3);
}

/* Hide the text inside dots */
.page-nav-item span {
    display: none;
}

.right-sidebar-toggle-btn {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 100;
    display: none;
    /* Hidden by default, shown when sidebar is closed */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.right-sidebar-toggle-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-turquoise);
}

/* Progress bar margin when right sidebar is hidden */
body.right-sidebar-hidden .progress-container {
    margin-right: 60px;
}

/* Dark mode adjustments for right sidebar and dot navigation */
html[data-theme="dark"] .right-sidebar {
    background: rgba(25, 25, 35, 0.95);
    backdrop-filter: blur(10px);
    border-left-color: rgba(0, 168, 168, 0.2);
}

html[data-theme="dark"] .right-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .page-nav-item {
    background: rgba(0, 168, 168, 0.15);
}

html[data-theme="dark"] .page-nav-item:hover {
    background: rgba(0, 168, 168, 0.35);
    border-color: var(--primary-light);
    box-shadow: 0 0 8px rgba(0, 168, 168, 0.3);
}

html[data-theme="dark"] .page-nav-item.active {
    box-shadow: 0 0 14px rgba(0, 212, 212, 0.6), 0 0 24px rgba(0, 212, 212, 0.35);
}

html[data-theme="dark"] .page-nav-item::after {
    background: rgba(40, 40, 55, 0.95);
    border: 1px solid rgba(0, 168, 168, 0.3);
}

html[data-theme="dark"] .right-sidebar-toggle-btn {
    background: rgba(40, 40, 40, 0.95);
}

/* Responsive - hide right sidebar on mobile */
@media (max-width: 768px) {
    .right-sidebar {
        display: none !important;
    }

    .right-sidebar-toggle-btn {
        display: none !important;
    }

    body.right-sidebar-hidden .progress-container {
        margin-right: 0;
    }
}

/* =====================================================
   ÖZEL MADDE İMLERİ - Custom List Markers
   ===================================================== */
ul.list-star {
    list-style: none;
    padding-left: 1.5em;
}

ul.list-star>li::before {
    content: "★ ";
    color: var(--accent-orange);
    margin-left: -1.5em;
    display: inline-block;
    width: 1.5em;
}

ul.list-arrow {
    list-style: none;
    padding-left: 1.5em;
}

ul.list-arrow>li::before {
    content: "→ ";
    color: var(--primary-turquoise);
    margin-left: -1.5em;
    display: inline-block;
    width: 1.5em;
}

ul.list-check {
    list-style: none;
    padding-left: 1.5em;
}

ul.list-check>li::before {
    content: "✓ ";
    color: #27ae60;
    margin-left: -1.5em;
    display: inline-block;
    width: 1.5em;
}

ul.list-diamond {
    list-style: none;
    padding-left: 1.5em;
}

ul.list-diamond>li::before {
    content: "◆ ";
    color: var(--primary-dark);
    margin-left: -1.5em;
    display: inline-block;
    width: 1.5em;
}

ul.list-circle {
    list-style: none;
    padding-left: 1.5em;
}

ul.list-circle>li::before {
    content: "⊙ ";
    color: #8e44ad;
    margin-left: -1.5em;
    display: inline-block;
    width: 1.5em;
}

ul.list-plus {
    list-style: none;
    padding-left: 1.5em;
}

ul.list-plus>li::before {
    content: "⊕ ";
    color: var(--accent-orange);
    margin-left: -1.5em;
    display: inline-block;
    width: 1.5em;
}

ul.list-triangle {
    list-style: none;
    padding-left: 1.5em;
}

ul.list-triangle>li::before {
    content: "▶ ";
    color: var(--primary-turquoise);
    margin-left: -1.5em;
    display: inline-block;
    width: 1.5em;
}

/* Nested lists inside custom list markers - reset to default */
ul.list-star ul,
ul.list-star ol,
ul.list-arrow ul,
ul.list-arrow ol,
ul.list-check ul,
ul.list-check ol,
ul.list-diamond ul,
ul.list-diamond ol,
ul.list-circle ul,
ul.list-circle ol,
ul.list-plus ul,
ul.list-plus ol,
ul.list-triangle ul,
ul.list-triangle ol {
    list-style: revert;
    padding-left: 2em;
}

ul.list-star li li::before,
ul.list-arrow li li::before,
ul.list-check li li::before,
ul.list-diamond li li::before,
ul.list-circle li li::before,
ul.list-plus li li::before,
ul.list-triangle li li::before {
    content: none;
    display: none;
}

/* =====================================================
   REFERENCE TOOLTIP STYLES
   ===================================================== */
.ref-tooltip {
    position: relative;
    cursor: pointer;
    border-bottom: 1px dotted #888;
}

.ref-tooltip-content {
    /* Uses visibility instead of display:none so MathJax can process content on load */
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    /* Use fixed positioning to escape overflow:hidden parents */
    position: fixed;
    /* Fallback position OFF-SCREEN to prevent flash on mouseleave */
    top: -9999px;
    left: -9999px;
    transform: none;
    z-index: 10000;
    /* Disable pointer events when hidden to prevent ghost interactions */
    pointer-events: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: var(--text-primary, #333) !important;
    font-size: 1em;
    word-break: break-word;
    /* Width settings - constrained to viewport */
    min-width: 280px;
    max-width: min(900px, calc(100vw - 40px));
    width: max-content;
    padding: 14px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    /* Limit height to viewport and allow scrolling for tall tooltips */
    max-height: 80vh;
    overflow-y: auto;
}

.ref-tooltip:hover .ref-tooltip-content,
.ref-tooltip:focus .ref-tooltip-content {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

html[data-theme="dark"] .ref-tooltip-content {
    color: var(--text-primary, #f4f4f5) !important;
    background: var(--bg-card, #18181b) !important;
    border: 1px solid var(--glass-border, #00a8a8) !important;
}

/* Reference anchor (invisible marker at definition location) */
.ref-anchor {
    display: inline;
    position: relative;
}

/* Highlight animation when navigating to a reference definition */
.ref-highlight {
    animation: refHighlightPulse 2s ease-out;
}

.ref-highlight::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: -5px;
    bottom: -5px;
    background: rgba(0, 168, 168, 0.2);
    border-radius: 4px;
    animation: refHighlightFade 2s ease-out forwards;
    pointer-events: none;
}

@keyframes refHighlightPulse {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.02);
    }

    20% {
        transform: scale(1);
    }
}

@keyframes refHighlightFade {
    0% {
        opacity: 1;
        background: rgba(0, 168, 168, 0.3);
    }

    100% {
        opacity: 0;
        background: transparent;
    }
}

html[data-theme="dark"] .ref-highlight::before {
    background: rgba(0, 212, 212, 0.25);
}

/* Reference tooltip navigation link */
.ref-tooltip-link {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    background: var(--accent-gradient);
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
}

.ref-tooltip-link:hover {
    background: var(--orange-gradient);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Inline style for link-only references ({refcall:...|linkonly}) */
.ref-tooltip-link.ref-link-only {
    display: inline;
    margin-top: 0;
    padding: 0;
    background: none;
    color: var(--primary-turquoise, #00a8a8) !important;
    text-decoration: underline;
    border-radius: 0;
    font-size: inherit;
    font-weight: 600;
    box-shadow: none;
}

.ref-tooltip-link.ref-link-only:hover {
    background: none;
    color: var(--primary-turquoise-dark, #007a7a) !important;
    text-decoration-thickness: 2px;
    transform: none;
    box-shadow: none;
}

html[data-theme="dark"] .ref-tooltip-link {
    background: var(--accent-gradient);
}

html[data-theme="dark"] .ref-tooltip-link:hover {
    background: var(--orange-gradient);
}

html[data-theme="dark"] .ref-tooltip-link.ref-link-only {
    background: none;
    color: var(--primary-turquoise, #00d4d4) !important;
}

html[data-theme="dark"] .ref-tooltip-link.ref-link-only:hover {
    background: none;
    color: #7de7e7 !important;
}

/* Number reference (numcall) */
.num-ref {
    color: var(--primary-turquoise, #00a8a8);
    font-weight: 600;
}

html[data-theme="dark"] .num-ref {
    color: var(--primary-turquoise, #00d4d4);
}

/* Missing reference warning */
.ref-missing {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* =====================================================
   COLUMN LAYOUT SYSTEM
   {columns} ve {col} blokları için stiller
   ===================================================== */
.columns-container {
    display: flex;
    gap: 1.5rem;
    flex-wrap: nowrap;
    margin: 1.5rem 0;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.columns-container .column {
    flex: 1 1 0;
    min-width: 60px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Column with explicit flex-basis - handled by inline style */

/* Prevent images from overflowing columns and center them */
.columns-container .column img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center videos in columns */
.columns-container .column video {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center media containers (for img/video blocks) */
.columns-container .column .media-container,
.columns-container .column .image-block,
.columns-container .column .video-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Text wrapping in columns */
.columns-container .column p,
.columns-container .column span,
.columns-container .column a,
.columns-container .column {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}

/* Center paragraphs containing media in columns */
/* Using :has() selector for modern browsers */
.columns-container .column p.design-block:has(> img),
.columns-container .column p.design-block:has(> video),
.columns-container .column p.video-block,
.columns-container .column p[data-block-type="video"] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Fallback for browsers that don't support :has() selector */
/* Center images and videos directly */
.columns-container .column p.design-block img,
.columns-container .column p.design-block video,
.columns-container .column p[data-block-type="paragraph"] img,
.columns-container .column p[data-block-type="video"] video,
.columns-container .column p.video-block video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure block-level text wraps properly */
.columns-container .column > * {
    max-width: 100%;
    white-space: normal;
}


/* Default column widths - equal distribution */
.columns-container.cols-2 .column:not([style*="width"]) {
    flex: 1 1 0;
}

.columns-container.cols-3 .column:not([style*="width"]) {
    flex: 1 1 0;
}

.columns-container.cols-4 .column:not([style*="width"]) {
    flex: 1 1 0;
}

/* Sütun içindeki bloklar için margin ayarı */
.columns-container .column > *:first-child {
    margin-top: 0;
}

.columns-container .column > *:last-child {
    margin-bottom: 0;
}

/* Sütun içinde custom-block'lar tam genişlik alsın */
.columns-container .column .custom-block {
    margin-left: 0;
    margin-right: 0;
}

/* Mobil uyumluluk - küçük ekranlarda alt alta */
@media (max-width: 768px) {
    .columns-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .columns-container .column,
    .columns-container .column[style*="width"] {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    /* Hide resizers on mobile */
    .column-resizer {
        display: none !important;
    }
}

/* =====================================================
   DESIGN MODE STYLES
   Admin görsel düzenleme modu
   ===================================================== */

/* Design mode body class */
body.design-mode-active .design-block {
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

body.design-mode-active .design-block::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px dashed rgba(0, 168, 168, 0.3);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.design-mode-active .design-block:hover::before {
    opacity: 1;
}

body.design-mode-active .design-block.selected {
    outline: 3px solid var(--accent-orange);
    outline-offset: 4px;
}

body.design-mode-active .design-block.selected::before {
    border-color: var(--accent-orange);
    opacity: 1;
}

/* Slide Pause Marker - Visual indicator for {||} in design mode */
.slide-pause-marker {
    display: none; /* Hidden by default */
}

body.design-mode-active .slide-pause-marker {
    display: inline-block;
    color: #e53935;
    font-weight: 700;
    font-size: 0.85em;
    padding: 2px 6px;
    margin: 0 4px;
    background: rgba(229, 57, 53, 0.1);
    border: 1px dashed #e53935;
    border-radius: 4px;
    vertical-align: middle;
    cursor: help;
    user-select: none;
    transition: all 0.2s ease;
}

body.design-mode-active .slide-pause-marker:hover {
    background: rgba(229, 57, 53, 0.2);
    transform: scale(1.05);
}

/* Dark theme adjustment */
[data-theme="dark"] body.design-mode-active .slide-pause-marker {
    background: rgba(229, 57, 53, 0.15);
}

/* Design mode toggle button in left sidebar */
.sidebar-btn.design-mode-toggle {
    background: transparent;
    border: none;
    padding: 6px 10px;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-right: 8px;
}

.sidebar-btn.design-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.sidebar-btn.design-mode-toggle.active {
    background: var(--orange-gradient);
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.5);
}

/* Legacy right-sidebar toggle (kept for compatibility) */
.design-mode-toggle {
    background: var(--accent-gradient) !important;
}

.design-mode-toggle.active {
    background: var(--orange-gradient) !important;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
}

/* Floating toolbar */
.design-toolbar {
    position: fixed;
    top: 80px;
    right: 20px;
    left: auto;
    transform: none;
    z-index: 10000;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    backdrop-filter: blur(10px);
}

.design-toolbar-content {
    display: flex;
    align-items: center;
    gap: 16px;
}


.design-toolbar-title {
    font-weight: bold;
    color: var(--primary-turquoise);
    font-size: 0.95em;
    cursor: move; /* Indicate draggable */
    user-select: none;
}

.design-toolbar-buttons {
    display: flex;
    gap: 8px;
}

.design-btn {
    background: var(--bg-lighter);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.design-btn:hover:not(:disabled) {
    background: var(--accent-gradient);
    color: white;
    transform: translateY(-2px);
}

.design-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.design-btn.danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
}

.design-btn.primary {
    background: var(--accent-gradient);
    color: white;
}

.design-btn.primary:hover:not(:disabled) {
    background: var(--orange-gradient);
}

/* Add block menu */
.design-add-menu {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.design-add-menu button {
    background: var(--bg-lighter);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.design-add-menu button:hover {
    background: var(--primary-turquoise);
    color: white;
}

/* Newpage marker in design mode */
.newpage-marker {
    border: none;
    height: 4px;
    background: var(--mixed-gradient);
    margin: 20px 0;
    border-radius: 2px;
}

/* Separator container for design mode - wraps hr for drag handle support */
.separator-container {
    position: relative;
    margin: 20px 0;
}

.separator-container hr {
    margin: 0;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-turquoise), var(--accent-orange));
    border-radius: 1px;
}

/* Newpage container for design mode - wraps hr for drag handle support */
.newpage-container {
    position: relative;
    margin: 20px 0;
    padding: 10px 0;
}

.newpage-container .newpage-marker {
    margin: 0;
    border: none;
    height: 4px;
    background: var(--mixed-gradient);
    border-radius: 2px;
}

/* Add label to newpage marker */
.newpage-container::after {
    content: "📄 Yeni Sayfa";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    padding: 2px 12px;
    font-size: 0.8em;
    color: var(--text-muted);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

/* Dark mode adjustments */
html[data-theme="dark"] .design-toolbar {
    background: var(--bg-card);
}

html[data-theme="dark"] .design-btn {
    background: var(--bg-lighter);
}

/* =====================================================
   DESIGN MODE PHASE 2 STYLES
   Drag & Drop, Inline Edit, Column Resizer
   ===================================================== */

/* Drag handle */
.design-drag-handle {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
    padding: 8px 4px;
    color: var(--text-muted);
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
    user-select: none;
    z-index: 10;
}

body.design-mode-active .design-block:hover .design-drag-handle,
body.design-mode-active .design-block.selected .design-drag-handle {
    opacity: 1;
}

.design-drag-handle:hover {
    color: var(--primary-turquoise);
}

.design-drag-handle:active {
    cursor: grabbing;
}

/* Dragging state */
body.design-mode-active .design-block.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    outline: 2px dashed var(--primary-turquoise);
}

/* Drop indicator */
.design-drop-indicator {
    position: absolute;
    height: 4px;
    background: var(--orange-gradient);
    border-radius: 2px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
}


/* Proof Controls (inline on theorem blocks) */
.proof-controls {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px 0;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(255, 193, 7, 0.1));
    border-radius: 8px;
    border: 1px dashed rgba(230, 126, 34, 0.3);
}

.proof-ctrl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proof-ctrl-btn.add {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
}

.proof-ctrl-btn.add:hover {
    background: linear-gradient(135deg, #229954, #27ae60);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.proof-ctrl-btn.edit {
    background: linear-gradient(135deg, #e67e22, #f39c12);
    color: white;
}

.proof-ctrl-btn.edit:hover {
    background: linear-gradient(135deg, #d35400, #e67e22);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

.proof-ctrl-btn.delete {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    padding: 6px 10px;
}

.proof-ctrl-btn.delete:hover {
    background: #e74c3c;
    color: white;
    transform: translateY(-1px);
}

/* Hide proof controls when not in design mode */
body:not(.design-mode-active) .proof-controls {
    display: none;
}

/* Heading Controls (inline on H2 blocks) */
.heading-controls {
    display: inline-flex;
    gap: 6px;
    margin-left: 12px;
    vertical-align: middle;
}

.heading-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(0, 168, 168, 0.15);
    color: var(--primary-turquoise);
    transition: all 0.2s ease;
    opacity: 0.7;
}

.heading-ctrl-btn:hover {
    background: var(--primary-turquoise);
    color: white;
    opacity: 1;
    transform: scale(1.1);
}

.heading-ctrl-btn.delete:hover {
    background: #e74c3c;
}

/* Hide heading controls when not in design mode */
body:not(.design-mode-active) .heading-controls {
    display: none;
}

/* Sidebar Sorting Styles */
body.design-mode-active .sub-topics-list li {
    position: relative;
    transition: all 0.2s ease;
}

body.design-mode-active .sub-topics-list li.sidebar-sort-handle {
    cursor: grab;
    padding-left: 20px; /* Space for grip icon */
}

body.design-mode-active .sub-topics-list li.sidebar-sort-handle::before {
    content: '⋮⋮';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

body.design-mode-active .sub-topics-list li:hover::before {
    opacity: 1;
}

.sidebar-drag-over {
    border-top: 2px solid var(--primary-turquoise);
}

.sidebar-dragging {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.1);
}

/* Edit Modal */
.design-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(4px);
}

.design-edit-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    --design-edit-editor-width: 55%;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: max-width 0.3s ease;
}

/* Wider modal when preview panel is open */
.design-edit-modal-content.preview-open {
    max-width: 1200px;
}

.design-edit-modal-content.fullscreen {
    width: min(96vw, 1800px);
    max-width: none;
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 10px;
}

/* Split layout: editor left, preview right */
.design-edit-split {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.design-edit-split > .design-edit-body {
    flex: 1;
    min-width: 0;
}

.design-edit-modal-content.preview-open .design-edit-split > .design-edit-body {
    flex: 0 0 var(--design-edit-editor-width, 55%);
    max-width: var(--design-edit-editor-width, 55%);
}

.design-edit-preview-resizer {
    display: none;
    flex: 0 0 12px;
    position: relative;
    cursor: col-resize;
    background: transparent;
}

.design-edit-preview-resizer::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(127, 140, 141, 0.25);
    transition: background 0.2s ease;
}

.design-edit-preview-resizer:hover::before,
body.design-edit-resizing .design-edit-preview-resizer::before {
    background: rgba(0, 168, 168, 0.55);
}

/* Preview panel (right side) */
.design-edit-preview {
    flex: 1 1 auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--glass-border);
    background: var(--bg-lighter, #f9f9f9);
    min-height: 0;
}

.design-edit-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.design-edit-preview-header label {
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
    font-size: 0.9em;
}

.design-edit-preview-body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
    line-height: 1.6;
    min-height: 0;
}

/* Responsive: stack on narrow screens */
@media (max-width: 768px) {
    .design-edit-modal-content.fullscreen {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .design-edit-modal-content.preview-open {
        max-width: 95%;
    }
    .design-edit-split {
        flex-direction: column;
    }
    .design-edit-preview-resizer {
        display: none !important;
    }
    .design-edit-modal-content.preview-open .design-edit-split > .design-edit-body {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .design-edit-preview {
        flex: 0 0 auto;
        max-width: 100%;
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid var(--glass-border);
    }
}

.design-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-lighter);
    border-bottom: 1px solid var(--glass-border);
    font-weight: bold;
    color: var(--primary-turquoise);
    flex-shrink: 0;
}

.design-edit-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.design-edit-expand,
.design-edit-close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

.design-edit-expand {
    font-size: 17px;
}

.design-edit-expand:hover,
.design-edit-close:hover {
    background: rgba(255, 107, 53, 0.2);
    color: var(--accent-orange);
}

.design-edit-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.design-edit-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-secondary);
}

.design-edit-body textarea {
    width: 100%;
    min-height: 250px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    resize: vertical;
    background: var(--bg-main);
    color: var(--text-primary);
}

.design-edit-body textarea:focus {
    outline: none;
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

/* Syntax-highlighted contenteditable editor */
.syntax-editor {
    width: 100%;
    min-height: 250px;
    max-height: 500px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    background: var(--bg-main);
    color: var(--text-primary);
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    outline: none;
    box-sizing: border-box;
    cursor: text;
}

.syntax-editor:focus {
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

.syntax-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, #999);
    pointer-events: none;
}

/* Syntax highlight token colors - Light Theme */
.sh-math-delim {
    color: #d4a017;
    font-weight: bold;
}
.sh-math {
    color: #b8860b;
}
.sh-latex-env {
    color: #9b59b6;
    font-weight: bold;
}
.sh-latex-cmd {
    color: #2980b9;
}
.sh-custom-tag {
    color: #e74c3c;
    font-weight: bold;
}
.sh-custom-param {
    color: #e67e22;
}
.sh-block-tag {
    color: #27ae60;
    font-weight: bold;
}
.sh-heading {
    color: #8e44ad;
    font-weight: bold;
}
.sh-quiz-correct {
    color: #27ae60;
    font-weight: bold;
    background: rgba(39, 174, 96, 0.1);
}
.sh-quiz-wrong {
    color: #e74c3c;
}

.design-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-lighter);
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}

/* Ensure design blocks have room for drag handle */
body.design-mode-active .design-block {
    margin-left: 35px;
}

body.design-mode-active .columns-container.design-block {
    margin-left: 35px;
}

/* Sütunlar design mode'da görsel yapı */
body.design-mode-active .columns-container .column {
    border: 1px dashed rgba(0, 168, 168, 0.4);
    border-radius: 4px;
    padding: 12px;
    min-height: 80px;
    background: rgba(0, 168, 168, 0.03);
    box-sizing: border-box;
    overflow: hidden;
}

body.design-mode-active .columns-container .column:hover {
    border-color: rgba(0, 168, 168, 0.6);
    background: rgba(0, 168, 168, 0.06);
}

body.design-mode-active .columns-container .column.selected {
    border-color: var(--primary-turquoise);
    background: rgba(0, 168, 168, 0.1);
}

/* Heading blocks in design mode */
body.design-mode-active h1.design-block,
body.design-mode-active h2.design-block,
body.design-mode-active h3.design-block,
body.design-mode-active h4.design-block {
    position: relative;
}

/* Dark mode adjustments for Phase 2 */
html[data-theme="dark"] .design-edit-modal-content {
    background: var(--bg-card);
}

html[data-theme="dark"] .design-edit-body textarea {
    background: var(--bg-main);
    color: var(--text-primary);
    border-color: var(--glass-border);
}

html[data-theme="dark"] .syntax-editor {
    background: var(--bg-main);
    color: var(--text-primary);
    border-color: var(--glass-border);
}

/* Dark mode syntax highlight colors */
html[data-theme="dark"] .sh-math-delim {
    color: #f1c40f;
}
html[data-theme="dark"] .sh-math {
    color: #f39c12;
}
html[data-theme="dark"] .sh-latex-env {
    color: #bb77e0;
}
html[data-theme="dark"] .sh-latex-cmd {
    color: #5dade2;
}
html[data-theme="dark"] .sh-custom-tag {
    color: #ff6b6b;
}
html[data-theme="dark"] .sh-custom-param {
    color: #ffa94d;
}
html[data-theme="dark"] .sh-block-tag {
    color: #51cf66;
}

/* LaTeX Autocomplete Dropdown */
.latex-ac-dropdown {
    position: fixed;
    z-index: 200000;
    background: var(--bg-card, #fff);
    border: 1px solid var(--glass-border, #ccc);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    max-height: 240px;
    overflow-y: auto;
    min-width: 200px;
    max-width: 360px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85em;
    padding: 4px 0;
}

.latex-ac-item {
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #333);
    line-height: 1.5;
}

.latex-ac-item.active {
    background: var(--primary-turquoise, #00a8a8);
    color: #fff;
}

.latex-ac-item:hover:not(.active) {
    background: rgba(0, 168, 168, 0.1);
}

.latex-ac-item b {
    color: inherit;
}

.latex-ac-args {
    opacity: 0.5;
    font-size: 0.9em;
}

.latex-ac-item.active .latex-ac-args {
    opacity: 0.7;
}

html[data-theme="dark"] .latex-ac-dropdown {
    background: var(--bg-card, #1e1e2e);
    border-color: var(--glass-border, #444);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .latex-ac-item {
    color: var(--text-primary, #e0e0e0);
}

html[data-theme="dark"] .latex-ac-item.active {
    background: var(--primary-turquoise, #00a8a8);
    color: #fff;
}

html[data-theme="dark"] .latex-ac-item:hover:not(.active) {
    background: rgba(0, 168, 168, 0.15);
}

html[data-theme="dark"] .column-resizer::after {
    background: var(--primary-turquoise);
}

/* Slide Settings Section in Design Mode Edit Modal */
.slide-settings-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
    background: var(--bg-card, rgba(249, 249, 249, 1));
    padding: 10px;
    border-radius: 4px;
}

html[data-theme="dark"] .slide-settings-section {
    background: var(--bg-card, rgba(30, 30, 46, 0.8));
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

.slide-settings-section label {
    color: var(--text-primary, #333);
}

html[data-theme="dark"] .slide-settings-section label {
    color: var(--text-primary, #e0e0e0);
}

.slide-settings-section input[type="number"],
.slide-settings-section select {
    background: var(--bg-card, white);
    color: var(--text-primary, #333);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.2));
}

html[data-theme="dark"] .slide-settings-section input[type="number"],
html[data-theme="dark"] .slide-settings-section select {
    background: var(--bg-main, #27272a);
    color: var(--text-primary, #f4f4f5);
    border: 1px solid var(--glass-border, rgba(0, 168, 168, 0.3));
}

html[data-theme="dark"] .slide-settings-section select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f4f4f5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html[data-theme="dark"] .slide-settings-section select option {
    background: #27272a;
    color: #f4f4f5;
}

html[data-theme="dark"] .slide-settings-section select option:hover,
html[data-theme="dark"] .slide-settings-section select option:checked {
    background: #3f3f46;
    color: #f4f4f5;
}

/* Slide Settings Section in Design Mode Edit Modal */
.slide-settings-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--glass-border);
    background: var(--bg-lighter);
    padding: 10px;
    border-radius: 4px;
}

html[data-theme="dark"] .slide-settings-section {
    background: var(--bg-card, rgba(30, 30, 46, 0.8));
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

.slide-settings-section label {
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    color: var(--text-primary);
}

html[data-theme="dark"] .slide-settings-section label {
    color: var(--text-primary, #e0e0e0);
}

.slide-settings-section > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.slide-settings-section > div:first-child span {
    font-size: 0.8em;
    color: var(--text-secondary);
}

html[data-theme="dark"] .slide-settings-section > div:first-child span {
    color: var(--text-secondary, #9e9e9e);
}

#slideSettingsBody {
    display: none;
    gap: 10px;
    flex-direction: row;
}

.slide-settings-section input[type="number"],
.slide-settings-section select {
    background: var(--bg-card, white);
    color: var(--text-primary, #333);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.2));
}

html[data-theme="dark"] .slide-settings-section input[type="number"],
html[data-theme="dark"] .slide-settings-section select {
    background: var(--bg-main, #27272a);
    color: var(--text-primary, #f4f4f5);
    border: 1px solid var(--glass-border, rgba(0, 168, 168, 0.3));
}

html[data-theme="dark"] .slide-settings-section select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f4f4f5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html[data-theme="dark"] .slide-settings-section select option {
    background: #27272a;
    color: #f4f4f5;
}

html[data-theme="dark"] .slide-settings-section select option:hover,
html[data-theme="dark"] .slide-settings-section select option:checked {
    background: #3f3f46;
    color: #f4f4f5;
}

#slideSettingsBody > div {
    flex: 1;
}

#slideSettingsBody label {
    font-size: 0.85em;
    display: block;
    margin-bottom: 2px;
    font-weight: 500;
    color: var(--text-secondary);
}

#slideSettingsBody input[type="number"],
#slideSettingsBody select {
    width: 100%;
    padding: 6px;
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9em;
}

/* Force dark colors for select in dark mode - override any inline styles */
html[data-theme="dark"] #slideSettingsBody select,
html[data-theme="dark"] #slideAnim {
    background-color: #27272a !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f4f4f5' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    color: #f4f4f5 !important;
    border-color: rgba(0, 168, 168, 0.3) !important;
}

#slideSettingsBody input[type="number"]:focus,
#slideSettingsBody select:focus {
    outline: none;
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 2px rgba(0, 168, 168, 0.15);
}

#slideSettingsBody input[type="number"]::placeholder {
    color: var(--text-muted);
}

#slideSettingsBody select option {
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
}

/* Dark mode specific styles for select dropdown */
html[data-theme="dark"] #slideSettingsBody select {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: rgba(0, 168, 168, 0.3) !important;
}

html[data-theme="dark"] #slideSettingsBody select option {
    background: #27272a !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] #slideSettingsBody select option:hover,
html[data-theme="dark"] #slideSettingsBody select option:focus,
html[data-theme="dark"] #slideSettingsBody select option:checked {
    background: #3f3f46 !important;
    color: #f4f4f5 !important;
}

/* Ensure select dropdown menu is styled in dark mode */
html[data-theme="dark"] #slideSettingsBody select:focus {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: rgba(0, 168, 168, 0.6) !important;
}

/* Force dark background for select in dark mode */
html[data-theme="dark"] #slideSettingsBody select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f4f4f5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

/* =====================================================
   DESIGN MODE PHASE 3 STYLES
   New Topic Modal Form
   ===================================================== */

.design-edit-body .form-group {
    margin-bottom: 16px;
}

.design-edit-body .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-secondary);
}

.design-edit-body .form-group input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 1em;
    background: var(--bg-main);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.design-edit-body .form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

.design-edit-body .form-group input[type="text"]::placeholder {
    color: var(--text-muted);
}

.design-edit-body .form-group small {
    display: block;
    margin-top: 4px;
    font-size: 0.8em;
    color: var(--text-muted);
}

/* Dark mode for form inputs */
html[data-theme="dark"] .design-edit-body .form-group input[type="text"] {
    background: var(--bg-main);
    color: var(--text-primary);
    border-color: var(--glass-border);
}

/* Dark mode for select dropdowns in design mode */
html[data-theme="dark"] .design-edit-body select,
html[data-theme="dark"] .design-edit-body .form-group select {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: rgba(0, 168, 168, 0.3) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f4f4f5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

html[data-theme="dark"] .design-edit-body select option,
html[data-theme="dark"] .design-edit-body .form-group select option {
    background: #27272a !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .design-edit-body select option:hover,
html[data-theme="dark"] .design-edit-body select option:focus,
html[data-theme="dark"] .design-edit-body select option:checked,
html[data-theme="dark"] .design-edit-body .form-group select option:hover,
html[data-theme="dark"] .design-edit-body .form-group select option:focus,
html[data-theme="dark"] .design-edit-body .form-group select option:checked {
    background: #3f3f46 !important;
    color: #f4f4f5 !important;
}

/* Dark mode for form inputs */
html[data-theme="dark"] .design-edit-body .form-group input[type="text"] {
    background: var(--bg-main);
    color: var(--text-primary);
    border-color: var(--glass-border);
}

/* Design Mode Column Styles - Phase 4 */
body.design-mode-active .column {
    border: 1px dashed var(--glass-border);
    padding: 10px;
    min-height: 50px;
    transition: all 0.2s ease;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

body.design-mode-active .column:hover {
    border-color: var(--primary-turquoise);
    background: rgba(0, 168, 168, 0.05);
}

body.design-mode-active .column.selected-column {
    border-color: var(--primary-turquoise);
    background: rgba(0, 168, 168, 0.08);
    box-shadow: 0 0 0 2px rgba(0, 168, 168, 0.2);
    position: relative;
    z-index: 5;
}

/* Column controls (image/video add buttons) */
body.design-mode-active .column-controls {
    display: flex;
    gap: 8px;
    padding: 8px;
    margin-top: 8px;
    border-top: 1px dashed rgba(0, 168, 168, 0.3);
    justify-content: center;
}

body.design-mode-active .column-control-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--primary-turquoise);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

body.design-mode-active .column-control-btn:hover {
    background: var(--primary-turquoise-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 168, 168, 0.3);
}

body.design-mode-active .column-control-btn:active {
    transform: translateY(0);
}

body.design-mode-active .column-control-btn span {
    font-size: 14px;
}

/* =====================================================
   PAGE MANAGEMENT MODAL STYLES
   ===================================================== */

.page-management-modal {
    max-width: 600px;
    width: 95%;
}

.page-management-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.page-count-badge {
    background: var(--bg-lighter);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.page-count-badge span {
    font-weight: bold;
    color: var(--primary-turquoise);
}

.page-cards-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.page-card {
    background: var(--bg-lighter);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: grab;
    transition: all 0.2s ease;
    position: relative;
}

.page-card:hover {
    border-color: var(--primary-turquoise);
    box-shadow: 0 4px 12px rgba(0, 168, 168, 0.15);
}

.page-card.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    border-style: dashed;
}

.page-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.page-card-number {
    background: var(--accent-gradient);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9em;
    flex-shrink: 0;
}

.page-card-title {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.page-card-info {
    color: var(--text-muted);
    font-size: 0.85em;
    min-width: 60px;
}

.page-card-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.page-card:hover .page-card-actions {
    opacity: 1;
}

.page-action-btn {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.page-action-btn:hover:not(:disabled) {
    transform: scale(1.1);
}

.page-action-btn.goto:hover {
    background: var(--primary-turquoise);
    color: white;
    border-color: var(--primary-turquoise);
}

.page-action-btn.delete:hover:not(:disabled) {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.page-action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-management-help {
    text-align: center;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

/* Dark mode adjustments for page management */
html[data-theme="dark"] .page-card {
    background: var(--bg-card);
}

html[data-theme="dark"] .page-action-btn {
    background: var(--bg-lighter);
}

/* =====================================================
COLUMN RESIZER STYLES
   ===================================================== */
.column-resizer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 50;
}

.column-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    background: transparent;
    cursor: col-resize;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.column-resizer:hover {
    background: rgba(0, 168, 168, 0.15);
}

/* Visual handle bar */
.column-resizer::after {
    content: '';
    width: 4px;
    height: 50px;
    background: var(--primary-turquoise);
    border-radius: 3px;
    opacity: 0.6;
    transition: all 0.2s;
}

.column-resizer:hover::after {
    opacity: 1;
    height: 70%;
    box-shadow: 0 0 10px var(--primary-turquoise);
}

.column-resizer.active {
    background: rgba(255, 107, 53, 0.15);
}

.column-resizer.active::after {
    background: var(--accent-orange);
    opacity: 1;
    height: 90%;
    box-shadow: 0 0 12px var(--accent-orange);
}/* Missing Design Block Styles */
body.design-mode-active .design-block {
    position: relative;
    border: 1px dashed transparent; /* Invisible border by default to prevent layout jump on hover */
    border-radius: 4px;
    margin-left: 35px; /* Space for drag handle */
    min-height: 24px; /* Ensure clickable even if empty-ish */
}

body.design-mode-active .design-block:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.02);
}

body.design-mode-active .design-block.selected {
    border-color: var(--primary-turquoise);
    background-color: rgba(0, 168, 168, 0.05);
    box-shadow: 0 0 0 2px rgba(0, 168, 168, 0.1);
    z-index: 10;
}

/* Ensure Lists in Design Blocks have visible bullets */
body.design-mode-active ul.design-block,
body.design-mode-active ol.design-block {
    padding-left: 20px; /* Ensure padding for bullets */
    list-style-position: inside; /* Keep bullets inside the block */
}

/* Drag Handle styling fix */
.design-drag-handle {
    position: absolute;
    left: -25px; /* Position in the margin space */
    top: 50%;
    transform: translateY(-50%);
    cursor: move;
    opacity: 0; 
    transition: opacity 0.2s;
    /* content: '⋮⋮'; Handled in JS HTML */
    padding: 0 5px;
    color: var(--text-muted);
}

body.design-mode-active .design-block:hover .design-drag-handle,
body.design-mode-active .design-block.selected .design-drag-handle {
    opacity: 1;
}
/* Image Resizing Styles */

/* Center image-only paragraphs - class added by JS */
p.design-block.image-block {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.design-block img {
    max-width: 100%;
    display: block;
    /* Ensure image doesn't overflow */
}

.design-block .image-wrapper {
    position: relative;
    display: inline-block; /* Fit content exactly */
    max-width: 100%;
}

/* Ensure the wrapper matches image size */
.design-block .image-wrapper img {
    display: block;
}

.image-resizer {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent var(--primary-turquoise) transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: se-resize;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-resizer::after {
    content: '';
    position: absolute;
    bottom: -18px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.design-block:hover .image-resizer,
.design-block.selected .image-resizer,
.image-resizer.resizing {
    opacity: 1;
}

.image-resizer.resizing {
    border-color: transparent transparent var(--primary-blue) transparent;
}

/* Video Resizing Styles */
.design-block video {
    max-width: 100%;
    display: block;
}

/* Center video blocks */
p.design-block.video-block,
div.design-block[data-block-type="video"] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.design-block .video-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    /* Wrapper must match video size exactly */
}

.design-block .video-wrapper video {
    display: block;
    max-width: 100%;
}

.video-resizer {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent var(--primary-turquoise) transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: se-resize;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s;
}

.video-resizer::after {
    content: '';
    position: absolute;
    bottom: -18px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.design-block:hover .video-resizer,
.design-block.selected .video-resizer,
.video-resizer.resizing {
    opacity: 1;
}

.video-resizer.resizing {
    border-color: transparent transparent var(--primary-blue) transparent;
}

/* Custom Block Edit Fields */
.custom-block-field {
    margin-bottom: 1rem;
}

.custom-block-field label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color, #ccc);
    font-weight: 500;
}

.custom-block-field input[type="text"],
.custom-block-field textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.custom-block-field input[type="text"]:focus,
.custom-block-field textarea:focus {
    outline: none;
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 2px rgba(0, 168, 168, 0.2);
}

.custom-block-field input[type="text"]::placeholder,
.custom-block-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Display Math Block Styles - keep in paragraph structure for design mode */
.display-math {
    display: block;
    text-align: center;
    margin: 1rem 0;
}

.display-math-block {
    text-align: center;
}

/* Ensure paragraphs with display math are still selectable in design mode */
body.design-mode-active p.display-math-block.design-block {
    display: block;
}

/* Main Topic Management Controls */
.main-topic-controls {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding: 2px;
    display: none;
    align-items: center;
    gap: 5px;
    z-index: 100;
}

/* Show controls only when parent Li is hovered in design mode */
.design-mode-active .sidebar-menu li.nav-item:hover .main-topic-controls {
    display: flex !important;
}

.main-topic-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.main-topic-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.main-topic-handle {
    cursor: grab;
    color: #ccc;
    font-size: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
}

.main-topic-handle:active {
    cursor: grabbing;
}

/* Sortable Main Topics */
.sidebar-menu li.nav-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.sidebar-menu li.nav-item.sidebar-dragging {
    opacity: 0.5;
    background: #444;
}

.sidebar-menu li.nav-item.sidebar-drag-over-top {
    border-top: 2px solid var(--accent-color);
}

.sidebar-menu li.nav-item.sidebar-drag-over-bottom {
    border-bottom: 2px solid var(--accent-color);
}

/* Design Mode Drag Handle */
.design-drag-handle {
    cursor: grab;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s ease;
}

.design-drag-handle:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--primary-turquoise);
}

.design-block {
    position: relative;
    transition: box-shadow 0.2s ease;
}

/* Hover effect for design blocks to show they are editable */
body.design-mode-active .design-block:hover {
    box-shadow: 0 0 0 1px rgba(0, 168, 168, 0.5) !important;
}

/* Specific style for handles in transparent blocks */
.custom-block.par .design-drag-handle,
.custom-block.img .design-drag-handle,
.custom-block.video .design-drag-handle {
    background: rgba(0, 168, 168, 0.2);
    color: var(--primary-dark);
}

.custom-block.par:hover .design-drag-handle,
.custom-block.img:hover .design-drag-handle,
.custom-block.video:hover .design-drag-handle {
    background: var(--primary-turquoise);
    color: white;
}


/* Index Marker Block Styles */
.index-marker-block {
    display: none; /* Hidden by default */
}

/* Show only in Design Mode */
body.design-mode-active .index-marker-block {
    display: flex !important;
    background: #fff3cd !important;
    padding: 10px !important;
    border: 1px dashed #e0a800 !important;
    border-radius: 4px !important;
    margin: 5px 0 !important;
    color: #856404 !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: grab !important;
    min-height: 40px !important;
}
body.design-mode-active .index-marker-block * { color: #856404 !important; }

/* =====================================================
   IMAGE TOOLTIPS ({imgtooltip:url:text})
   ===================================================== */
.hover-img-container {
    position: relative;
    cursor: help;
    border-bottom: 2px dotted var(--accent-orange);
    color: var(--primary-dark);
    font-weight: 500;
    white-space: nowrap;
}

.hover-img-content {
    display: none;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: 400px;
    width: max-content;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 2px solid var(--primary-turquoise);
    pointer-events: none;
}

.hover-img-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: var(--primary-turquoise) transparent transparent transparent;
}

.hover-img-container:hover .hover-img-content {
    display: block;
    animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =====================================================
   CUSTOM LIST STYLES (Auto-generated from a., i.)
   ===================================================== */
/* =====================================================
   CUSTOM LIST STYLES (Auto-generated from a., i.)
   ===================================================== */
/* 1. Base Overrides for all custom list types */
.course-content ol.list-lower-alpha,
.course-content ol.list-lower-roman,
.course-content ol.list-parenthesized-alpha {
    counter-reset: none !important; /* Disable default custom-counter reset */
    padding-left: 3.5em; /* Increased from 2.5em to ensure visibility */
    overflow: visible !important;
}

/* 2. Hide default turquoise circle numbers */
.course-content ol.list-lower-alpha > li::before,
.course-content ol.list-lower-roman > li::before {
    content: none !important;
    display: none !important;
}

.course-content ol.list-parenthesized-alpha > li::before {
    /* We need ::before for parenthesized, so don't hide it, but override its styles below */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    top: 0 !important;
    left: -3em !important; /* Adjusted for new padding */
    z-index: 10; /* Ensure it stays on top */
}

/* 3. Logic for Native List Types (Alpha/Roman) */
.course-content ol.list-lower-alpha > li,
.course-content ol.list-lower-roman > li {
    counter-increment: none !important; /* Stop default counter */
    padding-left: 5px;
    margin-bottom: 8px;
    list-style-type: inherit !important; /* Ensure native marker shows */
    overflow: visible !important;
}

/* Apply list styles */
.list-lower-alpha {
    list-style-type: lower-alpha !important;
}

.list-lower-roman {
    list-style-type: lower-roman !important;
}

/* 4. Logic for Parenthesized Lists ((a), (b)) */
.list-parenthesized-alpha {
    list-style-type: none !important; /* Hide native marker */
    counter-reset: paren-alpha-counter !important;
}

.course-content ol.list-parenthesized-alpha > li {
    position: relative;
    /* This OVERRIDES the default counter-increment, fulfilling two purposes:
       1. Stops 'custom-counter' (theme default)
       2. Starts 'paren-alpha-counter'
    */
    counter-increment: paren-alpha-counter !important;
    padding-left: 5px;
    margin-bottom: 8px;
    overflow: visible !important;
}

.course-content ol.list-parenthesized-alpha > li::before {
    display: inline-block !important;
    content: "(" counter(paren-alpha-counter, lower-alpha) ") " !important;
    color: var(--primary-turquoise);
    font-weight: bold;
    text-align: right;
    padding-right: 5px;
    min-width: 2.5em; /* Ensure alignment */
}


/* Content Protection */
body.content-protected {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body.content-protected input,
body.content-protected textarea {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

@media print {
    body.content-protected {
        display: none !important;
    }
    body.content-protected::after {
        content: 'Bu içeriğin yazdırılmasına izin verilmemektedir.';
        display: block !important;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        color: #333;
    }
}

/* Disable Edge/Chrome mini menu on selection */
.course-content {
    -webkit-touch-callout: none;
    -ms-touch-select: none;
}

.course-content::selection {
    background: rgba(0, 168, 168, 0.3);
}

.course-content *::selection {
    background: rgba(0, 168, 168, 0.3);
}

/* MathJax selection styling - visual consistency */
.course-content mjx-container::selection,
.course-content mjx-container *::selection,
.course-content .MathJax::selection,
.course-content .MathJax *::selection,
.course-content mjx-math::selection,
.course-content mjx-mrow::selection,
.course-content mjx-mi::selection,
.course-content mjx-mo::selection,
.course-content mjx-mn::selection {
    background: rgba(0, 168, 168, 0.3) !important;
}

/* Give MathJax containers a selection-like highlight when parent text is selected */
.course-content mjx-container {
    border-radius: 2px;
    transition: background-color 0.1s ease;
}

/* Highlight MathJax when within selection range */
.course-content mjx-container.selection-highlight {
    background-color: rgba(0, 168, 168, 0.3) !important;
    border-radius: 3px;
}

/* Annotation System Styles */
.annotation-menu {
    position: fixed;
    top: 80px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 10000;
    animation: fadeIn 0.2s ease;
    min-width: 120px;
    max-width: 220px;
}

.annotation-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    margin-bottom: 2px;
    color: #333;
    transition: color 0.2s;
}
.annotation-menu-toggle:hover {
    color: var(--primary-turquoise, #00a8a8);
}
.annotation-menu-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.annotation-colors {
    display: flex;
    gap: 5px;
}

.color-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.yellow { background-color: #ffeb3b; }
.color-btn.green { background-color: #a5d6a7; }
.color-btn.blue { background-color: #90caf9; }
.color-btn.pink { background-color: #f48fb1; }

.note-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    font-size: 1.2em;
}

.annotation {
    cursor: pointer;
    border-radius: 2px;
}
.annotation.yellow { background-color: rgba(255, 235, 59, 0.4); }
.annotation.green { background-color: rgba(165, 214, 167, 0.4); }
.annotation.blue { background-color: rgba(144, 202, 249, 0.4); }
.annotation.pink { background-color: rgba(244, 143, 177, 0.4); }

.annotation:hover {
    filter: brightness(0.95);
}

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

/* Annotation Tooltip (hover icons) */
.annotation-tooltip {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(30, 30, 30, 0.95);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-radius: 8px;
    z-index: 10001;
    animation: fadeIn 0.15s ease;
    max-width: 350px;
    min-width: 80px;
}

.annotation-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 0.95) transparent transparent transparent;
}

.tooltip-note-preview {
    color: #e0e0e0;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    word-wrap: break-word;
    max-height: 150px;
    overflow-y: auto;
}

.tooltip-note-preview:empty {
    display: none;
}

/* MathJax in tooltip */
.tooltip-note-preview .MathJax {
    font-size: 0.95em !important;
}

.tooltip-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.tooltip-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    opacity: 0.85;
}

.tooltip-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.15);
}

.tooltip-btn.delete-btn:hover {
    background: rgba(244, 67, 54, 0.3);
}

.tooltip-btn.note-btn:hover {
    background: rgba(76, 175, 80, 0.3);
}

/* Note Editor Modal */
.note-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

.note-editor-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

.note-editor-content {
    position: relative;
    background: var(--bg-card, #fff);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 450px;
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.note-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border, #e0e0e0);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #333);
}

.note-editor-close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted, #888);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.note-editor-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #333);
}

.note-editor-textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px 18px;
    border: none;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    background: transparent;
    color: var(--text-primary, #333);
    box-sizing: border-box;
}

.note-editor-textarea:focus {
    outline: none;
}

.note-editor-textarea::placeholder {
    color: var(--text-muted, #999);
}

.note-editor-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid var(--glass-border, #e0e0e0);
    gap: 10px;
}

.note-editor-right {
    display: flex;
    gap: 8px;
}

.note-editor-delete {
    background: transparent;
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #e53935;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.note-editor-delete:hover {
    background: rgba(244, 67, 54, 0.1);
    border-color: #e53935;
}

.note-editor-cancel {
    background: transparent;
    border: 1px solid var(--glass-border, #ccc);
    color: var(--text-secondary, #666);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.note-editor-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
}

.note-editor-save {
    background: var(--primary-turquoise, #00a8a8);
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.note-editor-save:hover {
    background: var(--primary-dark, #008585);
    transform: translateY(-1px);
}

/* Dark theme adjustments */
html[data-theme="dark"] .note-editor-content {
    background: var(--bg-card, #1e1e1e);
}

html[data-theme="dark"] .note-editor-textarea {
    color: var(--text-primary, #e0e0e0);
}

/* Right-Click Context Menu */
.annotation-context-menu {
    position: absolute;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10002;
    padding: 4px;
    animation: fadeIn 0.15s ease;
}

.context-menu-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.context-menu-btn:hover {
    background: rgba(0, 168, 168, 0.3);
}

/* Sticky Note Icon */
.sticky-note {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    cursor: grab;
    z-index: 100;
    transition: transform 0.15s ease, filter 0.15s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transform: translate(-50%, -50%);
    user-select: none;
}

.sticky-note:hover {
    transform: translate(-50%, -50%) scale(1.2);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.sticky-note:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Ensure course-content can contain absolutely positioned sticky notes */
.course-content {
    position: relative;
}

/* ===== AUTH MODAL ===== */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.auth-modal {
    background: var(--bg-card, #fff);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from { 
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--text-secondary, #666);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.auth-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #333);
}

.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--glass-border, #e0e0e0);
}

.auth-tab {
    flex: 1;
    padding: 16px;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.auth-tab:hover {
    color: var(--primary-turquoise, #00a8a8);
}

.auth-tab.active {
    color: var(--primary-turquoise, #00a8a8);
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-turquoise, #00a8a8), var(--accent-orange, #FF6B35));
    border-radius: 2px 2px 0 0;
}

.auth-form {
    display: none;
    padding: 24px;
}

.auth-form.active {
    display: block;
}

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

.auth-field label {
    display: block;
    font-weight: 500;
    color: var(--text-primary, #333);
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.auth-field input,
.auth-field select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--glass-border, #e0e0e0);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #333);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.auth-field input:focus,
.auth-field select:focus {
    border-color: var(--primary-turquoise, #00a8a8);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 168, 168, 0.1);
}

.auth-field input.auth-error,
.auth-field select.auth-error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
}

.auth-row {
    display: flex;
    gap: 12px;
}

.auth-row .auth-field {
    flex: 1;
}

.auth-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
}

.auth-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    accent-color: var(--primary-turquoise, #00a8a8);
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary-turquoise, #00a8a8), var(--primary-dark, #008080));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.auth-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 168, 168, 0.3);
}

.auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.auth-footer {
    text-align: center;
    margin-top: 16px;
}

.auth-footer a {
    color: var(--primary-turquoise, #00a8a8);
    text-decoration: none;
    font-size: 0.9rem;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-message {
    display: none;
    padding: 12px 16px;
    margin: 16px 24px 0;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.auth-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.auth-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Dark theme */
html[data-theme="dark"] .auth-modal {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .auth-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .auth-field input,
html[data-theme="dark"] .auth-field select {
    background: var(--bg-secondary, #2a2a3e);
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .auth-tabs {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 600px) {
    .auth-row {
        flex-direction: column;
        gap: 0;
    }
    
    .auth-modal {
        max-height: 95vh;
    }
}

/* =====================================================
   MODAL STYLES
   ===================================================== */
.modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--bg-card);
    margin: 10% auto; 
    padding: 25px;
    border: 1px solid var(--glass-border);
    width: 90%; 
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    position: relative;
    animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
}

.close {
    color: var(--text-secondary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.close:hover,
.close:focus {
    color: var(--accent-orange);
    text-decoration: none;
    cursor: pointer;
}

/* =====================================================
   SHARED THEME STYLES (Header, Hero, etc.)
   ===================================================== */

/* Amfi Silhouette Background - Fixed below hero */
.amfi-silhouette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Auditorium2.png');
    background-size: contain;
    background-position: center 140%;
    background-repeat: no-repeat;
    opacity: 0.04;
    filter: grayscale(100%) contrast(1.2);
    pointer-events: none;
    z-index: -1;
}

html[data-theme="dark"] .amfi-silhouette {
    opacity: 0.008;
    filter: grayscale(100%) contrast(1.5) invert(1);
}

/* Header Navigation */
.site-header {
    background: linear-gradient(135deg, #006666 0%, #008080 50%, #00a8a8 100%);
    color: white;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 168, 168, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

html[data-theme="dark"] .site-header {
    background: linear-gradient(135deg, #0a1a1a 0%, #0f2626 50%, #143030 100%);
}

.site-logo {
    text-decoration: none;
    color: inherit;
}

.site-logo h1 {
    margin: 0;
    font-size: 1.5rem;
    background: linear-gradient(90deg, #fff, #FF8C5A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.header-nav a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-nav a:hover {
    color: var(--accent-orange, #FF6B35);
}

.search-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.search-link:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.02);
}

.search-link svg {
    flex-shrink: 0;
}

/* Theme Toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
    transform: scale(1.05);
}

.theme-toggle-icon {
    font-size: 1.1rem;
}

.sun-icon { display: inline; }
.moon-icon { display: none; }

html[data-theme="dark"] .sun-icon { display: none; }
html[data-theme="dark"] .moon-icon { display: inline; }

.lang-btn {
    color: white;
    font-weight: bold;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
}

.lang-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.badge-notification {
    background-color: #e74c3c;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
    font-weight: bold;
}

/* =====================================================
   HOMEWORK BLOCK STYLES
   ===================================================== */
.custom-block.homework {
    border-left: 4px solid #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

.custom-block.homework .custom-block-title {
    color: #c0392b !important;
    background: rgba(231, 76, 60, 0.1);
    border-bottom: 1px solid rgba(231, 76, 60, 0.1);
}

html[data-theme="dark"] .custom-block.homework {
    background: rgba(231, 76, 60, 0.1);
}

/* Restricted homework - blurred for non-members */
.custom-block.homework-restricted {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.custom-block.homework-restricted .custom-block-title {
    filter: blur(3px);
}

.homework-blurred-content {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

.homework-restricted-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    z-index: 2;
    pointer-events: none;
}

.homework-restricted-overlay span {
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 0.95em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .homework-restricted-overlay {
    background: rgba(30, 30, 30, 0.5);
}

/* Homework Submission Form Styles */
.homework-submission-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(231, 76, 60, 0.3);
}

.homework-submission-title {
    color: #c0392b;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.homework-existing-submission {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.homework-existing-submission .submission-status {
    color: #27ae60;
    margin-bottom: 10px;
}

.submission-text-preview {
    background: white;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.9em;
    max-height: 150px;
    overflow-y: auto;
}

.homework-submission-form .form-group {
    margin-bottom: 15px;
}

.homework-submission-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
}

.homework-submission-form .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.homework-submission-form .form-control:focus {
    border-color: #e74c3c;
    outline: none;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.homework-text-area {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.homework-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.homework-save-btn {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.homework-save-btn:hover {
    background: linear-gradient(135deg, #7f8c8d, #6c7a7d);
    transform: translateY(-1px);
}

.homework-save-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.homework-submit-btn {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.homework-submit-btn:hover {
    background: linear-gradient(135deg, #1e8449, #196f3d);
    transform: translateY(-1px);
}

.homework-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Draft status */
.homework-existing-submission.homework-draft {
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.4);
}

.homework-existing-submission.homework-draft .submission-status.draft {
    color: #d68910;
}

.draft-note {
    color: #d68910;
    font-size: 0.9em;
    margin-top: 8px;
}

/* Submitted status */
.homework-existing-submission.homework-submitted {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.homework-existing-submission.homework-submitted .submission-status.submitted {
    color: #27ae60;
}

.submission-final-note {
    color: #7f8c8d;
    font-size: 0.9em;
    margin-top: 8px;
}

/* Homework Text Editor Toggle */
.homework-text-toggle {
    display: inline-block;
    cursor: pointer;
    color: #555;
    font-size: 0.92em;
    padding: 6px 0;
    text-decoration: none;
    user-select: none;
    transition: color 0.2s;
}
.homework-text-toggle:hover {
    color: #2196F3;
    text-decoration: none;
}
.homework-text-toggle .toggle-arrow {
    display: inline-block;
    font-size: 0.7em;
    transition: transform 0.25s ease;
    margin-right: 4px;
}
.homework-text-toggle.expanded .toggle-arrow {
    transform: rotate(90deg);
}
.homework-text-editor-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease;
    margin-top: 0;
}
.homework-text-editor-wrapper.show {
    max-height: 600px;
    opacity: 1;
    margin-top: 10px;
    overflow: visible;
}

/* Quill Rich Text Editor Styles */
.homework-quill-editor {
    background: white;
    border-radius: 0 0 6px 6px;
    min-height: 150px;
}

.homework-quill-editor .ql-editor {
    min-height: 150px;
    font-size: 14px;
    line-height: 1.6;
}

.homework-quill-editor .ql-editor.ql-blank::before {
    font-style: italic;
    color: #999;
}

.homework-submission-form .ql-toolbar {
    border-radius: 6px 6px 0 0;
    background: #f8f9fa;
    border-color: #ddd;
}

.homework-submission-form .ql-container {
    border-color: #ddd;
    border-radius: 0 0 6px 6px;
}

.homework-submission-form .ql-editor:focus {
    outline: none;
}

.homework-submission-form .ql-container:focus-within {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.homework-submit-status {
    margin-left: 15px;
    font-size: 0.9em;
}

.homework-submit-status.success {
    color: #27ae60;
}

.homework-submit-status.error {
    color: #e74c3c;
}

/* Admin Section */
.homework-admin-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(231, 76, 60, 0.3);
}

.homework-submissions-summary {
    cursor: pointer;
    padding: 10px 15px;
    background: rgba(52, 73, 94, 0.1);
    border-radius: 6px;
    font-weight: 600;
    color: #2c3e50;
}

.homework-submissions-summary:hover {
    background: rgba(52, 73, 94, 0.15);
}

.submissions-list {
    margin-top: 15px;
}

.submission-item {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.submission-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.submission-class {
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

.submission-date {
    color: #7f8c8d;
    font-size: 0.85em;
    margin-left: auto;
}

.submission-file {
    margin: 10px 0;
}

.submission-text {
    margin-top: 10px;
}

.submission-text-content {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.95em;
    white-space: pre-wrap;
    word-break: break-word;
}

.no-submissions {
    color: #7f8c8d;
    font-style: italic;
    padding: 15px;
    text-align: center;
}

/* Dark mode */
html[data-theme="dark"] .homework-submission-section {
    border-top-color: rgba(231, 76, 60, 0.4);
}

html[data-theme="dark"] .homework-submission-form label {
    color: #ecf0f1;
}

html[data-theme="dark"] .homework-submission-form .form-control {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #ecf0f1;
}

html[data-theme="dark"] .homework-existing-submission {
    background: rgba(46, 204, 113, 0.15);
}

html[data-theme="dark"] .homework-existing-submission.homework-draft {
    background: rgba(241, 196, 15, 0.15);
}

html[data-theme="dark"] .homework-existing-submission.homework-submitted {
    background: rgba(46, 204, 113, 0.15);
}

html[data-theme="dark"] .homework-text-toggle {
    color: #aaa;
}
html[data-theme="dark"] .homework-text-toggle:hover {
    color: #64b5f6;
}

/* Dark mode Quill Editor */
html[data-theme="dark"] .homework-quill-editor {
    background: rgba(255,255,255,0.05);
}

html[data-theme="dark"] .homework-quill-editor .ql-editor {
    color: #ecf0f1;
}

html[data-theme="dark"] .homework-submission-form .ql-toolbar {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .homework-submission-form .ql-toolbar .ql-stroke {
    stroke: #bdc3c7;
}

html[data-theme="dark"] .homework-submission-form .ql-toolbar .ql-fill {
    fill: #bdc3c7;
}

html[data-theme="dark"] .homework-submission-form .ql-toolbar .ql-picker {
    color: #bdc3c7;
}

html[data-theme="dark"] .homework-submission-form .ql-toolbar button:hover .ql-stroke,
html[data-theme="dark"] .homework-submission-form .ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: #3498db;
}

html[data-theme="dark"] .homework-submission-form .ql-container {
    border-color: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .homework-submission-form .ql-editor.ql-blank::before {
    color: #7f8c8d;
}

/* Rich Content Display (submissions) */
.homework-rich-content {
    font-size: 0.95em;
    line-height: 1.6;
}

.homework-rich-content h1,
.homework-rich-content h2,
.homework-rich-content h3 {
    margin: 0.8em 0 0.4em 0;
    font-weight: 600;
}

.homework-rich-content h1 { font-size: 1.4em; }
.homework-rich-content h2 { font-size: 1.2em; }
.homework-rich-content h3 { font-size: 1.1em; }

.homework-rich-content ul,
.homework-rich-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.homework-rich-content li {
    margin: 0.3em 0;
}

.homework-rich-content blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1em;
    margin: 0.5em 0;
    color: #666;
}

.homework-rich-content pre,
.homework-rich-content code {
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.homework-rich-content pre {
    padding: 10px;
    overflow-x: auto;
}

.homework-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

html[data-theme="dark"] .homework-rich-content blockquote {
    border-left-color: #555;
    color: #aaa;
}

html[data-theme="dark"] .homework-rich-content pre,
html[data-theme="dark"] .homework-rich-content code {
    background: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .submission-text-preview {
    background: rgba(0,0,0,0.2);
    color: #ecf0f1;
}

html[data-theme="dark"] .homework-submissions-summary {
    background: rgba(255,255,255,0.05);
    color: #ecf0f1;
}

html[data-theme="dark"] .submission-item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .submission-text-content {
    background: rgba(0,0,0,0.2);
    color: #ecf0f1;
}

/* Dark Mode Index Page Links Fix */
html[data-theme="dark"] .course-index .index-link {
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .course-index .index-link:hover {
    color: var(--accent-orange-light) !important;
}

/* =====================================================
   INDEX PAGE STYLES
   ===================================================== */
.course-index {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
}

.course-index h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--text-primary);
    text-align: center;
}

.index-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.index-group {
    margin-bottom: 0;
}

.index-letter-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px 0;
    padding: 8px 0;
    position: relative;
    width: 100%;
}

.index-letter-divider:first-child {
    margin-top: 0;
}

.index-letter {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(0, 168, 168, 0.8);
    background: rgba(0, 168, 168, 0.08);
    padding: 6px 14px;
    border-radius: 8px;
    min-width: 40px;
    text-align: center;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

html[data-theme="dark"] .index-letter {
    color: rgba(0, 212, 212, 0.9);
    background: rgba(0, 168, 168, 0.15);
}

.index-letter-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 168, 168, 0.3);
    margin-left: 12px;
    min-width: 0;
}

html[data-theme="dark"] .index-letter-divider::after {
    background: rgba(0, 168, 168, 0.4);
}

.index-items {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.index-items li {
    padding: 0;
    margin: 0;
}

.index-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 168, 168, 0.1);
}

html[data-theme="dark"] .index-link {
    background: rgba(40, 40, 60, 0.3);
    border: 1px solid rgba(0, 168, 168, 0.2);
}

.index-link:hover {
    background: rgba(0, 168, 168, 0.08);
    border-color: rgba(0, 168, 168, 0.3);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 168, 168, 0.15);
}

html[data-theme="dark"] .index-link:hover {
    background: rgba(0, 168, 168, 0.15);
    border-color: rgba(0, 168, 168, 0.4);
}

.index-term {
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
}

.index-link:hover .index-term {
    color: var(--primary-turquoise);
}

html[data-theme="dark"] .index-link:hover .index-term {
    color: var(--primary-light);
}

.index-source {
    font-size: 0.9em;
    color: var(--text-secondary);
    font-style: italic;
    flex: 1;
}

html[data-theme="dark"] .index-source {
    color: rgba(255, 255, 255, 0.6);
}

/* Collapsible Courses Panel */
.container .available-courses-section {
    margin-bottom: 2rem;
    width: 100%;
    text-align: center;
    display: block;
}

.container .available-courses-section .section-title.collapsible-title {
    cursor: pointer;
    user-select: none;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center !important;
    gap: 0;
    padding: 1rem 0;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    text-align: center !important;
    width: auto !important;
    margin: 0 auto !important;
    position: relative !important;
}

.container .available-courses-section .section-title.collapsible-title .title-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.container .available-courses-section .section-title.collapsible-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--mixed-gradient, linear-gradient(90deg, #00a8a8, #FF6B35));
    margin: 15px auto 0;
    border-radius: 2px;
}

.available-courses-section .section-title.collapsible-title {
    cursor: pointer;
    user-select: none;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 0.5rem;
    padding: 1rem 0;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    max-width: 100%;
    position: relative !important;
}

.available-courses-section .section-title.collapsible-title::after {
    margin-left: auto;
    margin-right: auto;
}

.available-courses-section .collapsible-title span:first-child {
    text-align: center;
}

.collapsible-title:hover {
    color: var(--primary-turquoise, #00a8a8);
    border-bottom-color: var(--primary-turquoise, #00a8a8);
}

.collapse-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 0.8em;
    color: var(--primary-turquoise, #00a8a8);
}

.course-list-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.course-list-panel.open {
    max-height: 5000px;
    opacity: 1;
    padding-top: 1rem;
}

html[data-theme="dark"] .collapsible-title:hover {
    color: var(--primary-light, #00d4d4);
}

html[data-theme="dark"] .collapse-icon {
    color: var(--primary-light, #00d4d4);
}

/* =====================================================
   Enum List Styles
   ===================================================== */

.enum-list {
    margin: 1em 0;
    padding-left: 2.5em;
    list-style-type: none !important;
}

.enum-list li {
    margin-bottom: 0.9em;
    padding-left: 0.5em;
    position: relative;
}

/* Override default course-content ol badge styles for enum-list */
/* We'll create our own styled badges */
.course-content ol.enum-list,
ol.enum-list,
ul.enum-list {
    counter-reset: enum-counter !important;
    list-style-type: none !important;
}

.course-content ol.enum-list > li,
ol.enum-list > li,
ul.enum-list > li {
    counter-increment: enum-counter !important;
}

/* ===== Styled Badge Base for enum-list ===== */
/* Use high specificity to override default course-content badges */
.course-content ol.enum-list > li::before,
.course-content ul.enum-list > li::before,
ol.enum-list > li::before,
ul.enum-list > li::before,
.enum-list > li::before {
    position: absolute !important;
    left: -2.2em !important;
    top: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 50% !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 168, 168, 0.3) !important;
    /* Reset any conflicting styles */
    width: auto !important;
}

/* Alternating colors for badges */
.course-content .enum-list > li:nth-child(odd)::before,
.enum-list > li:nth-child(odd)::before {
    background: linear-gradient(135deg, #00a8a8 0%, #00d4d4 100%) !important;
}

.course-content .enum-list > li:nth-child(even)::before,
.enum-list > li:nth-child(even)::before {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%) !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

/* ===== Decimal: 1, 2, 3 ===== */
.enum-decimal {
    counter-reset: enum-counter;
}

.course-content .enum-decimal > li::before,
.enum-decimal > li::before {
    content: counter(enum-counter) !important;
}

/* ===== Lowercase Alpha: a, b, c ===== */
.enum-alpha {
    counter-reset: enum-counter;
}

.course-content .enum-alpha > li::before,
.enum-alpha > li::before {
    content: counter(enum-counter, lower-alpha) !important;
}

/* ===== Uppercase Alpha: A, B, C ===== */
.enum-alpha-upper {
    counter-reset: enum-counter;
}

.course-content .enum-alpha-upper > li::before,
.enum-alpha-upper > li::before {
    content: counter(enum-counter, upper-alpha) !important;
}

/* ===== Lowercase Roman: i, ii, iii ===== */
.enum-roman {
    counter-reset: enum-counter;
}

.course-content .enum-roman > li::before,
.enum-roman > li::before {
    content: counter(enum-counter, lower-roman) !important;
    min-width: 26px !important;
    border-radius: 11px !important;
}

/* ===== Uppercase Roman: I, II, III ===== */
.enum-roman-upper {
    counter-reset: enum-counter;
}

.course-content .enum-roman-upper > li::before,
.enum-roman-upper > li::before {
    content: counter(enum-counter, upper-roman) !important;
    min-width: 26px !important;
    border-radius: 11px !important;
}

/* When custom marker labels are rendered in content, keep bullets colored but empty.
   This must come AFTER decimal/alpha/roman rules to win the cascade. */
.course-content .enum-list.enum-custom-marker > li::before,
.enum-list.enum-custom-marker > li::before {
    content: '' !important;
}

/* ===== Disc (bullet) - filled circle badge ===== */
.enum-disc {
    list-style-type: none !important;
    padding-left: 2.5em;
}

.course-content .enum-disc > li::before,
.enum-disc > li::before {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    padding: 0 !important;
}

/* ===== Circle - empty circle badge ===== */
.enum-circle {
    list-style-type: none !important;
    padding-left: 2.5em;
}

.course-content .enum-circle > li::before,
.enum-circle > li::before {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 2px solid #00a8a8 !important;
}

.course-content .enum-circle > li:nth-child(even)::before,
.enum-circle > li:nth-child(even)::before {
    border-color: #FF6B35 !important;
    background: transparent !important;
}

/* ===== Square - filled square badge ===== */
.enum-square {
    list-style-type: none !important;
    padding-left: 2.5em;
}

.enum-square > li {
    padding-left: 0.5em;
    position: relative;
}

.course-content .enum-square > li::before,
.enum-square > li::before {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    padding: 0 !important;
    border-radius: 2px !important;
}

/* For sequential enum-square, show filled square marker instead of badge */
/* Override any badge styles for enum-square - normal mode only */
/* Use highest specificity to override any other rules */
body:not(.slide-mode-active) .course-content .enum-square.enum-sequential li::before,
body:not(.slide-mode-active) .course-content ul.enum-square.enum-sequential li::before,
body:not(.slide-mode-active) ul.enum-square.enum-sequential li::before,
body:not(.slide-mode-active) .enum-square.enum-sequential li::before,
.course-content .enum-square.enum-sequential li::before,
.enum-square.enum-sequential li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.65em !important;
    /* Use px instead of em for more reliable rendering */
    width: 10.4px !important;
    height: 10.4px !important;
    min-width: 10.4px !important;
    min-height: 10.4px !important;
    max-width: 10.4px !important;
    max-height: 10.4px !important;
    background-color: var(--primary-dark, #2c3e50) !important;
    background: var(--primary-dark, #2c3e50) !important;
    border-radius: 2px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    /* Remove badge-specific styles */
    counter-increment: none !important;
    color: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    /* Ensure it's not hidden or collapsed */
    overflow: visible !important;
    clip: auto !important;
    /* Force dimensions */
    flex: none !important;
    flex-basis: auto !important;
}

/* Sequential enum (slide mode) - initial state */
.enum-sequential li {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Design mode enum block */
body.design-mode-active .enum-list.design-block {
    position: relative;
    cursor: pointer;
}

body.design-mode-active .enum-list.design-block::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px dashed rgba(0, 168, 168, 0.3);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.design-mode-active .enum-list.design-block:hover::before {
    opacity: 1;
}

body.design-mode-active .enum-list.design-block.selected {
    outline: 3px solid var(--accent-orange);
    outline-offset: 4px;
}

/* Dark theme */
[data-theme="dark"] .enum-list {
    color: var(--text-primary, #e0e0e0);
}

/* Mobile: increase spacing between badge marker and list text */
@media (max-width: 768px) {
    .course-content ol.enum-list,
    .course-content ul.enum-list,
    .enum-list {
        padding-left: 3.2em !important;
    }
    .course-content ol.enum-list > li,
    .course-content ul.enum-list > li,
    .enum-list li {
        padding-left: 1em !important;
    }
    .course-content ol.enum-list > li::before,
    .course-content ul.enum-list > li::before,
    ol.enum-list > li::before,
    ul.enum-list > li::before,
    .enum-list > li::before {
        left: -2.8em !important;
    }
    .course-content .enum-roman > li::before,
    .enum-roman > li::before,
    .course-content .enum-roman-upper > li::before,
    .enum-roman-upper > li::before {
        left: -3em !important;
    }
}

/* =====================================================
   OVERLAY AREA - Normal Mode Pagination
   ===================================================== */

/* Overlay area container */
.overlay-area {
    position: relative;
    margin: 1rem 0;
}

/* Overlay pages - group all sections of the same page together */
.overlay-page {
    display: none;
}

/* Show all sections of the active page */
.overlay-page[data-overlay-page].overlay-page-active {
    display: block;
}

/* Pagination controls */
.overlay-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem;
    background: rgba(0, 168, 168, 0.05);
    border-radius: 8px;
}

.overlay-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--primary-dark, #00a8a8);
    background: white;
    color: var(--primary-dark, #00a8a8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.overlay-pagination-btn:hover:not(:disabled) {
    background: var(--primary-dark, #00a8a8);
    color: white;
}

.overlay-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.overlay-pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    padding: 0 0.5rem;
    min-width: 60px;
    text-align: center;
}

/* Dark mode */
[data-theme="dark"] .overlay-pagination {
    background: rgba(0, 168, 168, 0.1);
}

[data-theme="dark"] .overlay-pagination-btn {
    background: var(--bg-secondary, #2d2d2d);
    border-color: var(--primary-light, #4dd0e1);
    color: var(--primary-light, #4dd0e1);
}

[data-theme="dark"] .overlay-pagination-btn:hover:not(:disabled) {
    background: var(--primary-light, #4dd0e1);
    color: var(--bg-primary, #1e1e1e);
}

[data-theme="dark"] .overlay-pagination-info {
    color: var(--text-secondary, #aaa);
}

/* =====================================================
   OVERLAYAREA EDITOR STYLES (Design Mode)
   ===================================================== */

.overlay-page-editor {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

.overlay-page-editor:hover {
    border-color: var(--primary-dark, #00a8a8);
    box-shadow: 0 2px 8px rgba(0, 168, 168, 0.1);
}

.overlay-page-editor .page-number {
    font-weight: bold;
    color: var(--primary-dark, #00a8a8);
    font-size: 0.95rem;
}

.overlay-page-editor .page-content {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    line-height: 1.5;
    resize: vertical;
    min-height: 120px;
}

.overlay-page-editor .page-content:focus {
    outline: none;
    border-color: var(--primary-dark, #00a8a8);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.1);
}

/* Dark mode for overlay editor */
[data-theme="dark"] .overlay-page-editor {
    background: var(--bg-secondary, #2d2d2d);
    border-color: #444;
}

[data-theme="dark"] .overlay-page-editor:hover {
    border-color: var(--primary-light, #4dd0e1);
}

[data-theme="dark"] .overlay-page-editor .page-number {
    color: var(--primary-light, #4dd0e1);
}

[data-theme="dark"] .overlay-page-editor .page-content {
    background: var(--bg-primary, #1e1e1e);
    border-color: #555;
    color: var(--text-primary, #e0e0e0);
}

[data-theme="dark"] .overlay-page-editor .page-content:focus {
    border-color: var(--primary-light, #4dd0e1);
}

/* Overlayarea block in design mode */
.overlay-area.design-block {
    position: relative;
    border: 2px dashed var(--primary-dark, #00a8a8);
    border-radius: 8px;
    padding: 10px;
    padding-top: 20px;
    margin: 15px 0;
}

.overlay-area.design-block::before {
    content: "📑 " attr(data-page-count) " Sayfa";
    position: absolute;
    top: -10px;
    left: 10px;
    background: var(--primary-dark, #00a8a8);
    color: white;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
}

.overlay-area.design-block.selected {
    border-color: var(--accent-orange, #FF6B35);
}

.overlay-area.design-block.selected::before {
    background: var(--accent-orange, #FF6B35);
}

/* Normal mode: show current page in pagination */
.overlay-area[data-page-count]::after {
    content: none; /* Only show in design mode */
}

/* Block Importer Modal Styles */
.block-importer-item {
    background: white;
}

.block-importer-item:hover {
    transform: translateX(3px);
}

[data-theme="dark"] .block-importer-item {
    background: var(--bg-secondary, #2d2d2d);
    border-color: #444 !important;
}

[data-theme="dark"] .block-importer-item:hover {
    background: rgba(0, 168, 168, 0.1) !important;
    border-color: var(--primary-light, #4dd0e1) !important;
}

[data-theme="dark"] .block-importer-item span:last-child {
    color: var(--text-primary, #e0e0e0) !important;
}

/* Import button in page editor */
.import-content-btn {
    background: #3498db !important;
    color: white !important;
    border: none !important;
}

.import-content-btn:hover {
    background: #2980b9 !important;
}