/* الكود الأصلي بتاعك زي ما هو بالضبط */

/* =============================================================================
   NATIVE YOUTUBE IFRAME STYLES - NEW SYSTEM
   ============================================================================= */

.manual-youtube-trigger {
    /* ONLY PLAY BUTTON VISIBLE - REST IS TRANSPARENT */
    width: 200px !important;
    height: 150px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    
    /* Positioning - circle below word (double the distance) */
    position: absolute !important;
    top: calc(50% + 50px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Clean styling - no decorations, no fake overlays */
    border: none !important;
    background: transparent !important;
    
    /* No margin needed - using center positioning */
    
    /* Layer management */
    z-index: 99999 !important;
    
    /* Display and interaction */
    display: block !important;
    pointer-events: auto !important;
    
    /* Prevent resizing */
    resize: none !important;
    
    /* Show only play button - circle mask at center */
    clip-path: circle(25px at center) !important;
    
    /* Ensure no interference with existing styles */
    box-sizing: border-box !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure YouTube controls are visible */
/* min-height: 180px !important; */
/* min-width: 320px !important; */

/* Center video content properly */
.manual-youtube-video {
    object-fit: cover !important;
}

/* RESIZING FEATURES DISABLED - VIDEO SIZE IS FIXED AT 30x30 PIXELS */


/* الحاوية الرئيسية - بتغطي الشاشة كلها */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* خلفية بيضاء سادة */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* أعلى من أي عنصر تاني في الموقع */
}

/* شكل الدائرة */
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* لون الدائرة الثابتة */
    border-top: 5px solid #3498db; /* لون الجزء اللي بيلف */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* حركة الدوران */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* تأثير الاختفاء الناعم */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}



:root { 
    --main-color: #2c3e50; 
    --accent-color: #3498db; 
    --sub-color: #27ae60; 
    --bg-color: #f8f9fa; 
    --story-color: #8e44ad; 
    --exam-color: #f39c12;
    --word-color: #e67e22; 
    --text-red: #e74c3c; 
    --section-gap: 40px; 
}

body { 
    direction: rtl; 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    background: var(--bg-color); 
    padding: 0; margin: 0; color: #2c3e50; 
}

img { max-width: 100%; height: auto; }

.section-resizer {
    width: 100%; height: 20px; margin: 10px 0;
    background: #f1f1f1; position: relative;
    resize: vertical; overflow: auto;
    border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;
    cursor: row-resize; min-height: 10px; max-height: 500px;
}

.section-resizer::after {
    content: "↕ شد لتكبير المسافة";
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); font-size: 10px; color: #aaa; pointer-events: none;
}

.app-header { background: transparent; padding: 2px 6px; box-shadow: none; position: sticky; top: 0; z-index: 100; margin-bottom: 0; }
#status {
    display: inline-flex;
    width: auto;
    margin: 2px auto 0;
    padding: 1px 6px;
    min-width: 0;
    text-align: center;
    font-size: 0.55rem;
    color: #34495e;
    background: rgba(52, 152, 219, 0.08);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.nav-bar { display: flex; align-items: center; gap: 6px; max-width: 1150px; margin: 0 auto; }
.back-btn { background: #eee; border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: bold; display: none; align-items: center; gap: 5px; }

/* Inline shrink-wrapping container for Back + Quality */
.back-quality {
    display: inline-flex;
    flex: 0 0 auto; /* do not grow — shrink to content */
    align-items: center;
    gap: 6px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    white-space: nowrap; /* prevent wrapping */
    width: auto; /* ensure auto width to match content */
}
.back-quality .back-btn { display: inline-flex; padding: 0; background: transparent; border: none; font-weight: bold; color: var(--main-color); }

/* Login wrap should shrink to its content and not be wider than the text */
.login-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: auto; /* ensure shrink-to-fit */
    flex: 0 0 auto;
}
.login-wrap .btn-admin-access { padding: 0; margin: 0; background: transparent; color: var(--main-color); border: none; display: inline-flex; }

h1 { 
    display: none !important;
    text-align: center; color: var(--main-color); margin: 0 auto; 
    font-size: 0.45rem; flex-grow: 1; position: relative; cursor: move;       
    resize: both; overflow: auto; display: flex; align-items: center; justify-content: center;
    min-width: 100px; min-height: 0; border: none; white-space: pre-wrap; 
    padding: 0;
}

h1:hover { border-color: transparent; }
h1::after { content: "✥"; position: absolute; top: 0; left: 0; font-size: 12px; background: #f0f0f0; padding: 2px; border-radius: 3px; color: #888; }

#main-content { display: flex; flex-wrap: wrap; gap: var(--section-gap); justify-content: center; }
#main-content h2, .section-title { width: 100%; text-align: center; margin-top: 0 !important; margin-bottom: 10px !important; font-size: 2rem !important; color: var(--main-color); font-weight: bold; }

.container { max-width: 800px; margin: 0 auto; padding: 0 15px; min-height: 60vh; }
button { cursor: pointer; border-radius: 8px; border: none; font-weight: 600; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
button:hover { opacity: 0.9; transform: translateY(-1px); }
button:active { transform: scale(0.98); }

.btn-main-add { background: var(--main-color); color: white; padding: 12px 25px; width: 100%; justify-content: center; margin-bottom: 20px; }
.btn-del { background: #fdfdfd; color: #888; border: 1px solid #ddd; font-size: 11px; padding: 4px 8px; margin: 2px; }
.btn-admin-access { background: #34495e; color: white; padding: 2px 6px; font-size: 0.28rem; line-height: 1; }

.converter-container { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 20px; border: 1px solid #eee; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 10px 20px; border-radius: 30px; z-index: 3000; display: none; font-size: 0.9rem; }
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: none; justify-content: center; align-items: center; z-index: 2500; }

.spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--main-color); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.confirm-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 3000; }
.confirm-box { background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 350px; text-align: center; }
.confirm-btns { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.btn-yes { background: var(--text-red); color: white; padding: 8px 20px; }
.btn-no { background: #ccc; color: #333; padding: 8px 20px; }
.empty-state { text-align: center; padding: 50px 20px; color: #888; font-weight: bold; }

.card { 
    background: white; border-radius: 12px; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    border-right: 6px solid var(--main-color); display: flex; flex-direction: column; 
    cursor: move; box-sizing: border-box; position: relative; overflow: hidden; 
    resize: both; width: 100%; height: 250px; margin-bottom: var(--section-gap); 
}

.card-image-area { width: 100%; flex: 1; min-height: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #ffffff; flex-shrink: 0; }
.card-footer { background: #ffffff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 10px; border-top: 1px solid #eee; overflow: hidden; }

.card-title { font-size: 1.1rem; font-weight: bold; color: #34495e; text-align: center; width: 100%; cursor: move; resize: both; overflow: auto; white-space: pre-wrap; display: block; min-height: 20px; }
.card:active { z-index: 999; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.card.sub-card { border-right-color: var(--sub-color); }
.card.story-card { border-right-color: var(--story-color); }
.card.exam-card { border-right-color: var(--exam-color); background: #fffdf9; }
.card.word-card { border-right-color: var(--word-color); background: #fffaf5; } 

.story-content-view { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); position: relative; }
.word-card-content-view {
    background: white; padding: 30px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-top: 3px solid var(--word-color, #e67e22);
}
/* استماع القصص فقط — بطاقة الكلمات لا تستخدم وضع الاستماع */
.story-content-view.story-pron-listen-on .wordIcon[data-pron-linked="1"] {
    cursor: pointer !important;
    border-bottom: 2px dotted var(--accent-color, #3498db);
}
.story-content-view.story-pron-listen-on .wordIcon[data-pron-linked="1"]:hover {
    border-color: var(--story-color, #e67e22);
    background: rgba(52, 152, 219, 0.08);
    border-radius: 4px;
}
.listen-label-en { font-weight: 800; color: var(--accent-color, #3498db); }
.listen-label-ar { font-family: 'Traditional Arabic', serif; font-size: 0.85em; color: #444; }
.display-controls { display: flex; gap: 6px; margin-bottom: 12px; font-weight: bold; background: #f5f5f5; padding: 6px 8px; border-radius: 8px; align-items: center; flex-wrap: wrap; }
.display-controls label { margin: 0; padding: 0; }
.control-item { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 0.76rem; line-height: 1.2; }
.control-item input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent-color, #3498db); }
.control-item-pron { font-family: 'Traditional Arabic', serif; }
/* تبديل فيديو النطق — نفس أسلوب صف «Listen» في القصص */
.control-item-word-pron {
    cursor: pointer;
    font-family: 'Traditional Arabic', serif;
    gap: 4px;
    padding: 2px 5px;
    border-radius: 6px;
    transition: background 0.2s, box-shadow 0.2s;
}
.control-item-word-pron input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--word-color, #e67e22);
    cursor: pointer;
}
.control-item-word-pron--on {
    background: rgba(230, 126, 34, 0.12);
    box-shadow: inset 0 0 0 1px rgba(230, 126, 34, 0.35);
}
.word-pron-mini-icon {
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.92;
}
.word-pron-mini-en {
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--word-color, #e67e22);
    letter-spacing: 0.02em;
}
.word-pron-mini-ar {
    font-size: 0.72rem;
    color: #555;
}
.word-card-content-view.word-pronounce-active .wordIcon--word-pron {
    cursor: pointer !important;
    border-bottom: 2px dotted var(--word-color, #e67e22);
}
.word-card-content-view.word-pronounce-active .wordIcon--word-pron:hover {
    background: rgba(230, 126, 34, 0.1);
    border-radius: 4px;
}
.dialect-box { background: #fff; padding: 4px 6px; border-radius: 6px; border: 1px solid #ccc; display: flex; gap: 6px; align-items: center; }
.dialect-box label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; margin: 0; font-size: 0.75rem; cursor: pointer; }
.dialect-box input { width: 14px; height: 14px; margin: 0; }

.hide-ar .line-ar { display: none !important; }
.hide-en .line-en { display: none !important; }
.line-container {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    line-height: 0.45; /* reduced additional 40% to tighten vertical space between lines */
    white-space: pre-wrap;
    word-break: break-word;
}
.line-ar {
    text-align: right;
    direction: rtl;
}
.line-en {
    text-align: left;
    direction: ltr;
    color: var(--accent-color);
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 2px; /* reduced additional 40% to tighten gap under English line */
    font-weight: bold;
    font-size: 18px;
}

.word-wrapper { position: relative; display: inline-block; margin: 15px 12px; vertical-align: middle; }

.wordIcon { 
    font-family: 'Traditional Arabic', serif; font-size: 40px; cursor: move; user-select: none; 
    transition: 0.2s; resize: both; overflow: auto; display: inline-block; border: 1px solid transparent;
    line-height: normal;
    font-weight: normal;
    -webkit-tap-highlight-color: transparent;
}

/* iOS: مشغّل غير ظاهر — iframe متجاوب بنفس مساحة العنصر + غطاء لمس (بدون تغيير ألوان المحتوى) */
.wordIcon--yt-overlay-host {
    position: relative;
}

.yt-gesture-slot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: 25;
    pointer-events: auto;
    box-sizing: border-box;
}

.yt-gesture-ifr {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

.yt-gesture-cap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 26;
    cursor: pointer;
    pointer-events: auto;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
.yt-gesture-cap:focus-visible {
    outline: none;
}

/* NOTE: per-word YouTube iframe overlays were removed (Single Dynamic Iframe approach). */

/* Hidden by default: only show when Pronunciation Mode is ON */
.word-card-content-view:not(.word-pronounce-active) .yt-word-play-crop {
    display: none !important;
}

/* When ON: show it and place it top-right without covering letters */
.word-card-content-view.word-pronounce-active .yt-word-play-crop {
    display: block !important;
    left: auto !important;
    right: -2px;
    top: -2px;
}

/* أثناء وضع Pronounce نمنع غطاء الflip من التقاط اللمس
   حتى "تمر" اللمسة إلى زر التشغيل داخل الـ iframe. */
.word-card-content-view.word-pronounce-active .wordIcon.yt-inline-word-frame-host .word-flip-inner,
.word-card-content-view.word-pronounce-active .wordIcon.yt-inline-word-frame-host .word-ar-layer,
.word-card-content-view.word-pronounce-active .wordIcon.yt-inline-word-frame-host .tashkeel-red {
    pointer-events: none;
}

/* أوقف غطاء yt-gesture-slot على كلمات iOS عند Pronounce حتى تصل اللمسة للـ iframe */
.word-card-content-view.word-pronounce-active .wordIcon.yt-inline-word-frame-host .yt-gesture-slot {
    pointer-events: none !important;
}

/* آيفون/آيباد — بطاقة «الوشّ والظهر»: وشّ أحمر بتشكيل، ظهر أسود بدون تشكيل + دوران 3D بلمس الطبقة */
.wordIcon.word-flip-host {
    perspective: 900px;
    -webkit-perspective: 900px;
    /* كتلة كلمة واحدة: لا تكسر الحروف بين أسطر داخل البطاقة */
    white-space: nowrap;
}

.wordIcon.word-flip-host.wordIcon--yt-overlay-host {
    position: relative;
}
.wordIcon.word-flip-host .word-flip-inner {
    display: inline-grid;
    vertical-align: middle;
    min-width: 100%;
    min-height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.52s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.wordIcon.word-flip-host.is-flipped .word-flip-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.wordIcon.word-flip-host .word-flip-front,
.wordIcon.word-flip-host .word-flip-back {
    grid-area: 1 / 1;
    justify-self: center;
    align-self: center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
}
.wordIcon.word-flip-host .word-flip-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* طبقة عربية داخل الكلمة: ثبات نوع الخط والحجم وارتفاع السطر عند إظهار/إخفاء التشكيل */
.story-content-view .wordIcon .word-ar-layer,
.word-card-content-view .wordIcon .word-ar-layer {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    vertical-align: baseline;
}
.story-content-view .wordIcon .word-ar-layer .tashkeel-red,
.word-card-content-view .wordIcon .word-ar-layer .tashkeel-red {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    vertical-align: baseline;
}

/* ⬇️ تعديل بسيط جداً لإخفاء المقابض داخل المحتوى فقط ⬇️ */
.story-content-view .wordIcon,
.story-content-view .interaction-icon,
.word-card-content-view .wordIcon,
.word-card-content-view .interaction-icon {
    resize: none !important;
    overflow: visible !important;
}

.wordIcon:hover { border-color: #3498db; }
.tashkeel-black { color: #000 !important; font-weight: bold; }

.interaction-icon { 
    width: 42px; height: 42px; font-size: 18px; color: white; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; cursor: move; 
    border: 2px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.2); transition: 0.3s;
    resize: both; overflow: hidden;
}
.interaction-icon:hover { transform: scale(1.15); }

.translate-bg { background: var(--accent-color); position: absolute; top: -35px; left: 50%; transform: translateX(-50%); z-index: 5; }
.link-bg { background: #e67e22; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); text-decoration: none; z-index: 5; }
.link-bg[href*="youtube.com"], .link-bg[href*="youtu.be"] { background: #ff0000 !important; box-shadow: 0 4px 10px rgba(255,0,0,0.4); }

.translation-tooltip { visibility: hidden; background: #333; color: #fff; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 10; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: 0.3s; white-space: nowrap; font-family: sans-serif; font-size: 14px; }
.translation-tooltip.show { visibility: visible; opacity: 1; }

.pagination-container { display: flex; justify-content: center; align-items: center; gap: 0; margin: 30px 0; direction: ltr; }
.page-btn { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: white; border: 2px solid var(--main-color); color: var(--main-color); border-radius: 50%; font-weight: bold; font-size: 1.1rem; transition: 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.page-btn.active { background: var(--main-color); color: white; box-shadow: 0 4px 12px rgba(44,62,80,0.3); }
.page-btn:hover:not(.active) { background: #f0f0f0; transform: translateY(-3px); }

.question-box { background: white; padding: 20px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.opt-btn { background: #f8f9fa; padding: 15px; text-align: center; border-radius: 10px; border: 2px solid #ddd; transition: 0.3s; font-weight: bold; cursor: pointer; }
.opt-btn:hover { background: #eef1f4; border-color: var(--accent-color); }

#editor-overlay, #exam-editor-overlay, #word-editor-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; }
.modal-box { background: white; width: 95%; max-width: 650px; padding: 25px; border-radius: 15px; max-height: 90vh; overflow-y: auto; }

textarea, input[type="text"] { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-family: inherit; white-space: pre-wrap; }

.admin-only { display: none; }
#move-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; justify-content: center; align-items: center; }
.move-box { background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 400px; text-align: center; }
select { width: 100%; padding: 10px; margin: 15px 0; border-radius: 8px; border: 1px solid #ccc; font-family: inherit; background: white; }

.nav-controls { display: flex; justify-content: flex-start; gap: 0; margin-top: 0; padding-top: 0; border-top: none; }

/* تقليل المسافة الكبيرة بين شارة رقم الصفحة و زر Next/Previous */
.content-fixed-ui.content-nav-fixed .nav-controls { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.content-fixed-ui.content-nav-fixed .nav-nav-btn { margin: 0 !important; }

.nav-nav-btn { background: var(--main-color); color: white; padding: 10px 20px; border-radius: 10px; font-size: 0.9rem; }

/* --- تكبير الصفحة بالكامل عبر شريط القلم --- */
:root {
    --cz-scale: 1;
    --cz-inverse-scale: 1;
}
body {
    --cz-scale: 1;
    zoom: 1;
}
.content-zoom-shell {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    transform: none;
}
.content-zoom-viewport {
    position: relative;
    width: 100%;
    overflow: auto;
    min-height: 200px;
    max-height: min(78vh, 900px);
    margin-bottom: 8px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}
.content-zoom-layer {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
/* طبقة منفصلة تماماً عن المحتوى — الشريط لا يتأثر بتكبير الخلفية */
#pen-overlay-root {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    isolation: isolate;
    contain: layout style;
}
#pen-overlay-root #pen-toolbar-float {
    pointer-events: auto;
}
.content-fixed-ui {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}
.content-nav-fixed {
    z-index: 20;
}
/* شريط قلم عائم — موضعه يُحدَّث عبر JS (visualViewport) */
.pen-toolbar-float {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px 4px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.pen-toolbar-float--visible {
    display: flex;
}
.pen-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    padding: 4px 6px;
    background: #2c3e50;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.pen-toolbar--collapsed {
    justify-content: center;
    width: auto;
    padding: 4px;
}
.pen-toolbar--collapsed .pen-tool-btn:not(.pen-tool-btn--toggle),
.pen-toolbar--collapsed .pen-toolbar-sep,
.pen-toolbar--collapsed .pen-zoom-level {
    display: none !important;
}
.pen-toolbar-float.pen-toolbar {
    flex-wrap: nowrap;
    margin: 0;
}
.pen-tool-btn {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, transform 0.1s;
}
.pen-tool-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}
.pen-tool-btn--toggle {
    min-width: 18px;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.pen-tool-btn--toggle:hover {
    background: rgba(255, 255, 255, 0.32);
}
.pen-tool-btn--active {
    background: var(--accent-color, #3498db);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.pen-tool-btn--text {
    font-size: 0.65rem;
    font-weight: 700;
}
.pen-toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 3px;
}
.pen-toolbar-float .pen-toolbar-sep {
    width: 18px;
    height: 1px;
    margin: 2px 0;
}
.pen-color-btn {
    padding: 0 !important;
    min-width: 18px !important;
}
.pen-color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: none;
    font-size: 13px;
    line-height: 1;
    background: transparent;
    color: #fff;
    box-sizing: border-box;
}
.pen-color-swatch::before {
    content: '🖊';
}
.pen-color-btn--red .pen-color-swatch {
    color: #e74c3c;
}
.pen-color-btn--black .pen-color-swatch {
    color: #000;
}
.pen-zoom-level {
    min-width: 32px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ecf0f1;
    user-select: none;
}
.pen-draw-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
    touch-action: none;
}
.pen-draw-canvas--pen {
    cursor: crosshair;
}
.pen-draw-canvas--eraser {
    cursor: cell;
}

.last-visited-page-wrap {
    width: 100%;
    max-width: 420px;
    margin: 12px auto 20px;
    padding: 0 6px;
    box-sizing: border-box;
}
.last-visited-page-btn {
    position: relative;
    width: 100%;
    border: none;
    border-radius: 18px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(145deg, #1a237e 0%, #3949ab 40%, #5c6bc0 100%);
    box-shadow: 0 8px 28px rgba(57, 73, 171, 0.45), 0 0 0 1px rgba(255,255,255,0.12) inset;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.last-visited-page-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(57, 73, 171, 0.55), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.last-visited-page-btn:active { transform: translateY(0); }
.last-visited-page-btn__glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35) 0%, transparent 45%);
    pointer-events: none;
    opacity: 0.9;
}
.last-visited-page-btn__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: #fff;
    text-align: start;
}
.last-visited-page-btn__icon {
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.last-visited-page-btn__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.last-visited-page-btn__en {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.92;
}
.last-visited-page-btn__ar {
    font-size: 1.05rem;
    font-weight: bold;
    font-family: 'Traditional Arabic', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.3;
}
.last-visited-page-btn__num {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.88;
    margin-top: 4px;
}
.last-visited-page-btn__chev {
    font-size: 1.25rem;
    opacity: 0.85;
}

.multi-box-container { background: #f0f0f0; padding: 10px; border-radius: 10px; margin-bottom: 15px; border: 1px dashed #ccc; }
.multi-box-title { font-weight: bold; color: #555; margin-bottom: 5px; display: block; font-size: 0.9rem; }

.auto-box { background: #e3f2fd; border: 2px solid #2196f3; padding: 10px; border-radius: 10px; margin-bottom: 15px; }
.word-grid-input { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.word-grid-input label { grid-column: span 2; font-size: 0.8rem; font-weight: bold; color: #666; }
.edit-item-row { display: flex; align-items: center; gap: 5px; background: #fff; padding: 5px; margin-bottom: 5px; border: 1px solid #eee; border-radius: 5px; }
.edit-item-row .edit-word-val { width: 40%; }
.edit-item-row .edit-trans-val { width: 50%; }

.btn-sound-manager {
    display: block; width: 100%; padding: 14px 18px; font-size: 1rem; font-weight: bold;
    font-family: 'Traditional Arabic', 'Segoe UI', Tahoma, sans-serif;
    color: #fff; background: linear-gradient(135deg, #8e44ad, #9b59b6); border: none; border-radius: 12px;
    cursor: pointer; box-shadow: 0 4px 14px rgba(155, 89, 182, 0.35);
}
.btn-sound-manager:hover { filter: brightness(1.06); transform: translateY(-1px); }

.sound-manager-overlay {
    position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,0.45);
    display: none; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
}
.sound-manager-modal { max-width: 640px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.sound-manager-list { overflow-y: auto; flex: 1; min-height: 120px; max-height: 55vh; border: 1px solid #e0e0e0; border-radius: 10px; padding: 8px; background: #fafafa; }
.sound-manager-row { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; background: #fff; border-radius: 8px; border: 1px solid #eee; flex-wrap: wrap; }
.sound-manager-row .sm-word { flex: 0 0 28%; min-width: 90px; font-weight: bold; font-family: 'Traditional Arabic', serif; word-break: break-word; }
.sound-manager-row .sm-url { flex: 1; min-width: 160px; padding: 8px; border: 1px solid #ccc; border-radius: 8px; font-size: 0.8rem; box-sizing: border-box; }
.sound-manager-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.btn-sound-save { background: var(--sub-color, #2ecc71); color: #fff; border: none; padding: 10px 22px; border-radius: 10px; font-weight: bold; cursor: pointer; font-size: 0.95rem; }
.btn-sound-cancel { background: #95a5a6; color: #fff; border: none; padding: 10px 18px; border-radius: 10px; cursor: pointer; }

/* مشغلات فيديو متجاوبة في عرض القصة / الكلمات */
.stats-footer .embedded-videos {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
}

.stats-footer .video-embed-block {
    width: 100%;
    text-align: center;
}

.stats-footer .video-embed-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 8px;
}

.responsive-video-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* شارة رقم الصفحة (نفس المظهر في الأعلى بعد Go to page وفي أسفل المحتوى) */
.page-number-badge {
    background: #28a745;
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.jump-page-badge-slot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

.jump-page-badge-slot[hidden] {
    display: none !important;
}

.responsive-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 999999 !important;
    clip-path: none !important;
    background: #000 !important;
    resize: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.responsive-video-wrap.admin-resizable {
    position: relative;
    resize: both;
    overflow: auto;
    min-width: 200px;
    min-height: 112px;
    max-width: 100%;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.responsive-video-wrap.admin-resizable:hover {
    border-color: rgba(52, 152, 219, 0.3);
}

/* Corner resize handles - only visible to admin */
.responsive-video-wrap.admin-resizable::before,
.responsive-video-wrap.admin-resizable::after,
.responsive-video-wrap.admin-resizable .resize-handle-nw,
.responsive-video-wrap.admin-resizable .resize-handle-ne,
.responsive-video-wrap.admin-resizable .resize-handle-sw,
.responsive-video-wrap.admin-resizable .resize-handle-se {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--accent-color, #3498db);
    border: 2px solid white;
    border-radius: 50%;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.responsive-video-wrap.admin-resizable:hover::before,
.responsive-video-wrap.admin-resizable:hover::after,
.responsive-video-wrap.admin-resizable:hover .resize-handle-nw,
.responsive-video-wrap.admin-resizable:hover .resize-handle-ne,
.responsive-video-wrap.admin-resizable:hover .resize-handle-sw,
.responsive-video-wrap.admin-resizable:hover .resize-handle-se {
    opacity: 1;
}

/* Corner positions */
.responsive-video-wrap.admin-resizable::before {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}

.responsive-video-wrap.admin-resizable::after {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}

.responsive-video-wrap.admin-resizable .resize-handle-sw {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}

.responsive-video-wrap.admin-resizable .resize-handle-se {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}

/* Hover effects */
.responsive-video-wrap.admin-resizable::before:hover,
.responsive-video-wrap.admin-resizable::after:hover,
.responsive-video-wrap.admin-resizable .resize-handle-nw:hover,
.responsive-video-wrap.admin-resizable .resize-handle-ne:hover,
.responsive-video-wrap.admin-resizable .resize-handle-sw:hover,
.responsive-video-wrap.admin-resizable .resize-handle-se:hover {
    transform: scale(1.2);
    background: var(--main-color, #2c3e50);
}

/* Active resize state */
.responsive-video-wrap.admin-resizable.resizing {
    border-color: var(--accent-color, #3498db);
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.4);
}

.responsive-video-wrap.admin-resizable.resizing::before,
.responsive-video-wrap.admin-resizable.resizing::after,
.responsive-video-wrap.admin-resizable.resizing .resize-handle-nw,
.responsive-video-wrap.admin-resizable.resizing .resize-handle-ne,
.responsive-video-wrap.admin-resizable.resizing .resize-handle-sw,
.responsive-video-wrap.admin-resizable.resizing .resize-handle-se {
    opacity: 1;
    transform: scale(1.1);
}

/* Admin resize indicator */
.admin-resize-indicator {
    position: absolute;
    top: -30px;
    right: 0;
    background: var(--accent-color, #3498db);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 11;
    white-space: nowrap;
}

.responsive-video-wrap.admin-resizable:hover .admin-resize-indicator {
    opacity: 1;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .responsive-video-wrap.admin-resizable::before,
    .responsive-video-wrap.admin-resizable::after,
    .responsive-video-wrap.admin-resizable .resize-handle-nw,
    .responsive-video-wrap.admin-resizable .resize-handle-ne,
    .responsive-video-wrap.admin-resizable .resize-handle-sw,
    .responsive-video-wrap.admin-resizable .resize-handle-se {
        width: 16px;
        height: 16px;
        border-width: 3px;
    }
    
    .admin-resize-indicator {
        font-size: 10px;
        padding: 3px 6px;
    }

    .pen-toolbar-float {
        right: 12px !important;
        left: auto !important;
        top: auto !important;
        bottom: 12px !important;
        transform: none !important;
        flex-direction: row;
        max-width: calc(100vw - 24px);
        max-height: 40px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 8px;
    }
    .pen-toolbar-float.pen-toolbar {
        flex-wrap: nowrap;
    }
    .pen-toolbar-float .pen-tool-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 0.8rem;
    }
}

.stats-footer .video-fallback-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 16px;
    background: #e67e22;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.stats-footer .video-fallback-link:hover {
    opacity: 0.92;
}

.exam-link-block { text-align: center; }
.stats-footer .exam-footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 22px;
    background: var(--exam-color, #9b59b6);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.35);
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.stats-footer .exam-footer-link:hover {
    filter: brightness(1.05);
    opacity: 0.95;
}

/* نافذة فيديو النطق — قسم الكلمات فقط */
.word-pron-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}
.word-pron-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.word-pron-video-modal__panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 440px);
    max-width: 100%;
    background: #0d0d0d;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.word-pron-video-modal__close {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.word-pron-video-modal__close:hover {
    background: rgba(0, 0, 0, 0.75);
}
.word-pron-video-modal__player-root {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}
.word-pron-video-modal__player-root > div[id^="word-pron-yt-inner"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.word-pron-video-modal__player-root iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
body.word-pron-modal-open {
    overflow: hidden;
}

/* لوحة إدارة روابط فيديو النطق (بطاقات الكلمات) */
#admin-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.btn-word-pron-mgmt {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(155, 89, 182, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
.btn-word-pron-mgmt:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(155, 89, 182, 0.45);
}
.word-pron-mgmt-overlay {
    position: fixed;
    inset: 0;
    z-index: 10055;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    background: rgba(15, 15, 20, 0.55);
    backdrop-filter: blur(4px);
}
.word-pron-mgmt-modal {
    width: min(96vw, 640px);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(155, 89, 182, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.word-pron-mgmt-title {
    margin: 0 0 8px 0;
    font-size: 1.15rem;
    color: #2c3e50;
}
.word-pron-mgmt-hint {
    margin: 0 0 12px 0;
    font-size: 0.78rem;
    color: #666;
    line-height: 1.45;
}
.word-pron-mgmt-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 4px;
}
.word-pron-mgmt-section {
    margin-bottom: 18px;
}
.word-pron-mgmt-section-title {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--word-color, #e67e22);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px dashed #eee;
}
.word-pron-mgmt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.word-pron-mgmt-word {
    flex: 0 1 140px;
    min-width: 80px;
    font-family: 'Traditional Arabic', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c3e50;
}
.word-pron-mgmt-url {
    flex: 1;
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.78rem;
    box-sizing: border-box;
}
.word-pron-mgmt-url:focus {
    outline: none;
    border-color: var(--accent-color, #3498db);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.word-pron-mgmt-empty,
.word-pron-mgmt-no-words {
    padding: 12px;
    color: #888;
    font-size: 0.85rem;
}
.word-pron-mgmt-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
.btn-word-pron-mgmt-cancel {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: 600;
}
.btn-word-pron-mgmt-save {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: var(--accent-color, #3498db);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}