:root{--navy:#163456;--blue:#246eae;--blue-soft:#e9f4fe;--border:#d2e2f3;--pink:#bd2369;--white:#fff;--shadow:0 19px 46px rgba(20,51,82,.18)}
*{box-sizing:border-box}html{height:100%}body{margin:0;font-family:Tahoma,Arial,"Segoe UI",sans-serif;color:var(--navy);background:#eaf4ff}button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #f4a820;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.48}.hidden{display:none!important}
.app-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#fff}.topbar{padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(180deg,#fff 70%,#f9fcff);border-bottom:1px solid #c6def1;box-shadow:0 2px 9px rgba(26,72,125,.04);z-index:2}.brand{text-align:right;flex:none}.brand-title{font-size:clamp(19px,2.1vw,27px);letter-spacing:-.4px;font-weight:800;line-height:1.3}.brand-title strong{font-weight:900}.brand-book{display:none;font-size:20px;margin-left:7px;color:#1d619f}.brand p{font-size:12px;color:#6282a6;margin:5px 0 0}.brand .bullet{margin:0 8px;color:#8db4d7}.toolbar{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-start}.tool{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#204c78;background:#f4f9ff;border:1px solid #b9d3eb;border-radius:10px;padding:10px 12px;white-space:nowrap;transition:background .2s,transform .2s}.tool:hover{background:#e4f2ff;transform:translateY(-1px)}.tool.active{background:#e1f5f0;border-color:#89cbb6;color:#127552}.tool-icon{font-size:20px;font-weight:400;line-height:1}
.reader{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:radial-gradient(ellipse at 50% 45%,#fafcff 0%,#e7f3ff 50%,#d8eafa 100%);min-height:0;padding:14px 70px 28px;overflow:hidden}.reader-glow{position:absolute;width:min(68vw,760px);height:75%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.9),transparent 68%);pointer-events:none;z-index:-1}
.page-stage{width:min(420px, calc((100dvh - 205px) * 1074 / 1464), calc(100vw - 150px));aspect-ratio:1074 / 1464;max-height:calc(100dvh - 205px);position:relative;border-radius:14px;box-shadow:var(--shadow),0 4px 6px rgba(25,63,93,.12);background:#fff;flex:none;overflow:hidden;transform:translateZ(0)}.image-button{display:block;width:100%;height:100%;padding:0;margin:0;border:0;outline-offset:2px;background:#fff}.image-button img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}.reader-hint{font-size:11px;letter-spacing:.2px;color:#597ca0;text-align:center;margin:0}.reader-hint span{margin:0 4px}.stage-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:47px;height:47px;display:grid;place-items:center;border:none;border-radius:100%;box-shadow:0 6px 18px rgba(40,77,117,.15);background:#fff;color:#174b7c;font-size:24px;font-weight:900;transition:transform .18s,background .18s}.stage-arrow:not(:disabled):hover{background:#e9f5ff;transform:translateY(-50%) scale(1.06)}.stage-prev{right:max(12px,calc(50% - 300px))}.stage-next{left:max(12px,calc(50% - 300px))}.stage-arrow:disabled{opacity:.25}.floating-video{position:absolute;bottom:14px;right:16px;padding:10px 17px;background:#1b6fa9;color:#fff;border:0;border-radius:26px;box-shadow:0 6px 18px #2e6b9c38;font-size:12px;font-weight:700}.floating-video:hover{background:#145484}
.pagination{min-height:69px;padding:11px max(20px,calc((100% - 380px)/2));background:#fff;display:flex;align-items:center;justify-content:center;gap:33px;border-top:1px solid #d5e6f3}.pagination button{background:#b92369;border:0;border-radius:13px;color:white;font-weight:800;font-size:14px;padding:13px 21px;min-width:90px}.pagination button:disabled{background:#e1a6c4;opacity:1}.pagination button:not(:disabled):hover{filter:brightness(.94)}.page-indicator{text-align:center;min-width:100px;display:flex;flex-direction:column;gap:2px}.page-indicator strong{font-size:17px;white-space:nowrap;letter-spacing:.5px}.page-indicator small{font-size:11px;color:#6889ab;white-space:nowrap}
.video-page{height:100%;width:100%;overflow:auto;padding:8% 7%;background:linear-gradient(160deg,#fff 5%,#e9f7ff 62%,#ffe8f2);text-align:center}.video-page-heading{display:flex;align-items:center;justify-content:center;gap:10px}.video-heading-icon{font-size:32px}.video-page-heading h2{margin:0;font-size:clamp(18px,2.4vw,28px);line-height:1.3}.video-page>p{font-size:clamp(10px,1.2vw,13px);color:#5a7d9f;margin:12px 0 16px}.video-categories{display:grid;gap:10px}.category-button{border:1px solid #c4d6e7;border-radius:14px;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#f3faff;color:#153a5e;text-align:right}.category-button:hover{filter:brightness(.98)}.category-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}.category-emoji{font-size:26px}.category-status{font-size:11px;color:#bc2866;font-weight:800;white-space:nowrap}.category-button:nth-child(2){background:#fff2f7}.category-button:nth-child(3){background:#fff4da}.category-button:nth-child(4){background:#e7f8e9}.category-button:nth-child(5){background:#f1ecff}.video-page-open{width:100%;margin-top:15px;padding:10px;border:0;border-radius:9px;background:#1b6ba4;color:#fff;font-weight:800;font-size:13px}
.dialog{border:0;border-radius:23px;box-shadow:0 25px 90px #10253e66;background:#fff;color:#163456;padding:25px 25px 26px;max-height:min(90dvh,950px);overflow:auto;direction:rtl}.dialog::backdrop{background:#102744b8;backdrop-filter:blur(2px)}.index-dialog{width:min(780px,calc(100vw - 22px))}.dialog.zoom-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;overflow:hidden}.zoom-dialog .modal-top{flex:none;align-items:center;margin:0;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px))}.zoom-dialog .close-button{background:var(--navy);color:#fff}.zoom-dialog .close-button:hover{background:#245480}body.zoom-open{overflow:hidden}.zoom-dialog:not([open]){display:none}.videos-dialog{width:min(1180px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:92vh;max-height:92dvh;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-x:hidden;overflow-y:auto}body.videos-open{overflow:hidden}.videos-dialog .modal-top{flex-wrap:wrap;gap:12px}.videos-dialog .modal-top>div{flex:1 1 260px;min-width:0}.modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.modal-top h2{font-size:22px;line-height:1.3;margin:0}.close-button{flex:none;color:#1a3f61;background:#eaf3fc;border:0;border-radius:10px;padding:10px 14px;font-weight:800;font-size:13px}.close-button:hover{background:#dcebf8}.thumb-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.thumb{border:1px solid #cfdeeb;background:#f8fbfe;border-radius:13px;padding:8px 6px 6px;display:flex;flex-direction:column;align-items:stretch;gap:4px;color:#20466c;text-align:center;transition:border-color .15s,transform .15s}.thumb:hover{border-color:#539ad2;transform:translateY(-2px)}.thumb.selected{border:2px solid #2376ad;background:#eaf6ff;padding:7px 5px 5px}.thumb img,.thumb-video-icon,.thumb-image-error{width:100%;height:128px;object-fit:contain;background:white;border-radius:7px}.thumb-video-icon{background:#e9f6ff;display:grid;place-items:center;font-size:36px}.thumb strong{font-size:12px;line-height:1.45;font-weight:800}
.zoom-toolbar{display:flex;flex:none;gap:8px;justify-content:center;align-items:center;margin:0;padding:10px max(8px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));border-top:1px solid var(--border);background:#fff;flex-wrap:wrap}.zoom-toolbar button{background:#edf5fe;border:1px solid #c5dcf1;color:#194771;border-radius:9px;font-weight:700;padding:8px 11px}.zoom-toolbar strong{min-width:48px;text-align:center}/* A left-to-right scroll origin keeps both image edges reachable above 100%. */
.zoom-scroller{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;direction:ltr;min-height:0;min-width:0;width:100%;flex:1;background:#e2effc;border-radius:0;padding:0}#zoom-image{display:block;height:auto;max-width:none;max-height:none;margin:0 auto}
.image-error{padding:16px;white-space:normal;overflow-wrap:anywhere;line-height:1.8;text-align:center;direction:rtl;font-size:13px;color:var(--navy);background:#f4f9ff}.image-button .image-error{height:100%;display:grid;place-content:center}.thumb-image-error{overflow:auto;font-size:11px}.zoom-scroller .image-error{margin:0;min-height:100%;display:grid;place-content:center}
.modal-subtitle{font-size:13px;color:#718ba7;line-height:1.8;margin:9px 0 0}
.videos-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 18px}.all-videos{border:1px solid #c1dff7;background:#e8f5ff;color:#1e608d;border-radius:12px;padding:10px 14px;min-height:44px;font-weight:800}#videos-status{margin:0;color:#6282a6;font-size:12px}
.videos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.video-card{min-width:0;border:1px solid #d5e4f1;box-shadow:0 6px 16px #2d68951a;border-radius:17px;overflow:hidden;background:#fff;display:flex;flex-direction:column}.video-art{display:grid;place-items:center;height:108px;background:#edf1f7;font-size:44px}.video-card[data-category="المدرسية"] .video-art{background:#e4f5ff}.video-card[data-category="المنزلية"] .video-art{background:#ffedf4}.video-card[data-category="الكهربائية"] .video-art{background:#fff3d8}.video-card[data-category="المرورية"] .video-art{background:#e6f8ec}.video-card[data-category="المناخية"] .video-art{background:#f0ebfd}
.video-body{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0;overflow-wrap:anywhere}.video-body h3{font-size:15px;margin:0;line-height:1.6}.video-body p{font-size:12px;color:#6f86a3;margin:0;flex:1;line-height:1.8}.video-source{font-size:11px;color:#718096;line-height:1.6}.video-platform{align-self:flex-start;font-size:11px;font-weight:700;direction:ltr;color:#486885;background:#f0f5fa;border-radius:20px;padding:4px 9px}.video-action{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;background:#1b6ca7;color:white;border:0;border-radius:9px;text-align:center;text-decoration:none;font-size:12px;font-weight:800;padding:10px 8px}.video-action:hover{background:#145484}.video-action:focus-visible,.player-external:focus-visible{outline:3px solid #f4a820;outline-offset:3px}.video-note{font-size:12px;color:#6b88a5;margin-top:18px;line-height:1.8}.videos-empty{grid-column:1 / -1;text-align:center;line-height:1.8;margin:0;padding:32px 16px;background:#f4f9ff;border:1px dashed #c1d7eb;border-radius:14px}
.player-wrapper{margin-top:22px;border:1px solid #cbdbe8;border-radius:14px;padding:16px;min-width:0;background:#f8fbff;overflow-wrap:anywhere}.player-title{font-size:18px;line-height:1.6;margin:0 0 12px}.player-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}.player-close,.player-external{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #c1d7eb;background:#e4f2fd;color:#194771;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:700;text-decoration:none}.player-external{background:#fff}.player-wrapper iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;background:#102744}.player-note{font-size:12px;line-height:1.8;color:#6b88a5;margin:12px 0 0}
.notice{position:fixed;left:50%;bottom:94px;transform:translateX(-50%);z-index:20;background:#173d61;color:white;border-radius:14px;padding:12px 18px;box-shadow:0 10px 28px #163c6060;font-size:14px;max-width:90vw;text-align:center}.noscript{position:fixed;z-index:22;top:0;width:100%;padding:15px;text-align:center;background:#fff3d4;color:#753900}
@media(max-width:1020px){.topbar{flex-direction:column;align-items:stretch;gap:11px;padding:13px 18px}.toolbar{justify-content:center}.brand{text-align:center}.reader{padding:10px 64px 22px}.page-stage{width:min(430px,calc((100dvh - 265px) * 1074 / 1464),calc(100vw - 150px));max-height:calc(100dvh - 265px)}}
@media(max-width:650px){.app-shell{grid-template-rows:auto auto auto;align-content:start}.topbar{padding:11px 10px 9px;gap:9px}.brand-title{font-size:20px}.brand p{font-size:10px}.toolbar{gap:5px}.tool{font-size:11px;padding:7px 8px;border-radius:8px}.reader{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-content:start;gap:8px;padding:8px;min-width:0}.page-stage{grid-column:1 / -1;width:100%;min-width:0;max-height:none;aspect-ratio:auto;border-radius:9px}.image-button{height:auto}.image-button img{height:auto;object-fit:contain}.stage-arrow{position:static;grid-row:2;width:44px;height:44px;transform:none;font-size:20px}.stage-arrow:not(:disabled):hover{transform:none}.stage-prev{grid-column:1}.stage-next{grid-column:3}.reader-hint{grid-column:1 / -1;grid-row:3;font-size:9px}.floating-video{position:static;grid-column:2;grid-row:2;justify-self:center;min-height:44px;padding:7px 12px;font-size:14px}.floating-video span{display:none}.pagination{gap:15px;padding:9px 7px;min-height:61px}.pagination button{font-size:12px;min-width:75px;padding:12px 14px}.page-indicator{min-width:86px}.page-indicator strong{font-size:15px}.page-indicator small{font-size:10px}.dialog{padding:16px 14px;border-radius:16px}.modal-top{gap:8px}.modal-top h2{font-size:17px}.close-button{padding:9px 10px;font-size:11px}.thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.thumb img,.thumb-video-icon,.thumb-image-error{height:145px}.videos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.video-art{height:80px}.video-body{padding:10px}.video-body h3{font-size:14px}.video-body p{font-size:12px}.video-page{padding:6% 6%}.video-page-heading h2{font-size:20px}.video-page>p{margin:7px 0 9px}.video-categories{gap:5px}.category-button{min-height:46px;padding:6px}.category-title{font-size:12px}.category-emoji{font-size:19px}.category-status{font-size:9px}.video-page-open{padding:8px;margin-top:10px;font-size:11px}}
@media(max-height:680px) and (min-width:651px){.topbar{padding:9px 18px}.reader{padding:9px 70px 20px;gap:7px}.page-stage{width:min(420px,calc((100dvh - 155px) * 1074 / 1464));max-height:calc(100dvh - 155px)}.pagination{min-height:58px;padding:7px 20px}.reader-hint{font-size:10px}}
@media(max-width:1020px){.videos-dialog .videos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.videos-dialog .videos-grid{grid-template-columns:minmax(0,1fr)}}
/* A single page turns toward the RTL reading direction; duration comes from app.js. */
.page-stage.page-flip-next,.page-stage.page-flip-prev{animation-duration:var(--page-flip-duration);animation-timing-function:cubic-bezier(.2,.7,.25,1);will-change:transform,opacity}
.page-stage.page-flip-next{transform-origin:right center;animation-name:page-flip-next}
.page-stage.page-flip-prev{transform-origin:left center;animation-name:page-flip-prev}
@keyframes page-flip-next{
  from{opacity:.82;transform:perspective(1400px) translateX(-8px) rotateY(-14deg);box-shadow:0 22px 42px rgba(20,51,82,.25),0 4px 6px rgba(25,63,93,.12)}
  to{opacity:1;transform:translateZ(0);box-shadow:var(--shadow),0 4px 6px rgba(25,63,93,.12)}
}
@keyframes page-flip-prev{
  from{opacity:.82;transform:perspective(1400px) translateX(8px) rotateY(14deg);box-shadow:0 22px 42px rgba(20,51,82,.25),0 4px 6px rgba(25,63,93,.12)}
  to{opacity:1;transform:translateZ(0);box-shadow:var(--shadow),0 4px 6px rgba(25,63,93,.12)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}