/* ==========================================================================
   قالب «أوشن برو» — أبطال البحر | plagebleu
   هوية بصرية موحّدة: ألوان محيطية متناسقة، بطاقات متجانسة، تنقّل سلس.
   يُفعَّل بالصنف html.ocean-pro (من لوحة الإدارة › قالب التصميم) ويمكن الرجوع للقالب القديم.
   ========================================================================== */
html.ocean-pro,html.ocean-pro body{--ink-900:#06233a;--ink-800:#0a3350;--ink-700:#0d4a6b;--ink-600:#0b5f86; --teal-700:#0a7586;--teal-600:#0e8fa0;--teal-500:#18a9b9;--teal-200:#a9dde5;--teal-100:#d9f3f6;--teal-50:#eefafc; --coral-600:#cf4222;--coral-500:#d9482a;--coral-100:#ffe4dc;--sun-400:#ffc857; --bg:#f4f9fb;--surface:#ffffff;--line:#dcebf1;--muted:#4f6578;--ink:#12303f; --primary:#0e8fa0;--primary-dark:#0a5f86;--primary-light:#0a7586; --accent:#cf4222;--accent-light:#b83a1c; --bg-dark:#f4f9fb;--bg-card:#ffffff;--bg-card-hover:#f7fcfd; --text:#12303f;--text-muted:#4f6578;--text-heading:#0a3350;--border-subtle:#dcebf1; --radius:24px;--radius-sm:14px;--radius-lg:24px; --shadow-sm:0 1px 2px rgba(7,36,58,.04),0 8px 24px rgba(7,36,58,.07); --shadow-md:0 2px 4px rgba(7,36,58,.05),0 18px 44px rgba(7,36,58,.14); --shadow:0 14px 40px rgba(7,36,58,.10); --touch-target:48px;--pb-nav-h:72px; --ease:cubic-bezier(.2,.8,.2,1); color-scheme:light;}
html.ocean-pro,html.ocean-pro body,html.ocean-pro #gameContainer,html.ocean-pro #ui-layer{scroll-behavior:smooth}
html.ocean-pro body{color:var(--text);line-height:1.8; background:linear-gradient(180deg,#f4f9fb 0%,#eaf4f8 100%)!important; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
html.ocean-pro body ::selection{background:rgba(24,169,185,.28);color:var(--ink-900)}
html.ocean-pro body :focus-visible{outline:3px solid var(--teal-500)!important;outline-offset:3px;border-radius:10px}
html.ocean-pro body #navbar{background:linear-gradient(120deg,#06233a 0%,#0a3a5a 55%,#0b5568 100%)!important; border-bottom:1px solid rgba(255,255,255,.08)!important; box-shadow:0 8px 28px rgba(4,25,43,.30)!important; -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);}
html.ocean-pro body #navbar .nav-brand{font-weight:900;letter-spacing:.2px}
html.ocean-pro body #navbar .nav-links>a,html.ocean-pro body #navbar .nav-links>.nav-link-single,html.ocean-pro body #navbar .nav-drop-btn{border-radius:999px!important;font-weight:700;position:relative; transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);}
html.ocean-pro body #navbar .nav-links a.pb-active,html.ocean-pro body #navbar .nav-drop-btn.pb-active{background:rgba(255,255,255,.16)!important;box-shadow:inset 0 -3px 0 var(--sun-400);}
html.ocean-pro body #navbar .nav-drop-menu{border-radius:18px!important;box-shadow:var(--shadow-md)!important;border:1px solid var(--line)!important}
html.ocean-pro body #navbar .nav-drop-menu a.pb-active{background:var(--teal-50)!important;color:var(--ink-800)!important;font-weight:800}
html.ocean-pro body #pbProgress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100000;pointer-events:none;background:transparent}
html.ocean-pro body #pbProgress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal-500),var(--sun-400),var(--coral-500));transition:width .12s linear;border-radius:0 3px 3px 0}
html.ocean-pro body .hero-section{position:relative}
html.ocean-pro body .hero-section::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(34px,6vw,72px);z-index:4;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 44Q180 4 360 34T720 44T1080 30T1440 44V80H0Z' fill='%23f4f9fb'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;}
html.ocean-pro body #mainContent .hero-section .slide .slide-content h1{font-size:clamp(2rem,1.1rem + 4.2vw,4.4rem)!important;line-height:1.18!important;font-weight:900!important; color:#fff!important;text-shadow:0 6px 34px rgba(0,0,0,.35)!important;}
html.ocean-pro body #mainContent .hero-section .slide .slide-content p{font-size:clamp(1.05rem,.9rem + .9vw,1.8rem)!important;line-height:1.85!important;color:#eafafd!important; text-shadow:0 2px 18px rgba(0,0,0,.3)!important;}
html.ocean-pro body #mainContent .btn-hero{display:inline-flex!important;align-items:center;justify-content:center;gap:.5em;min-height:56px;padding:.8em 2.2em!important; border:0!important;border-radius:999px!important;cursor:pointer;font-weight:900!important; background:linear-gradient(135deg,#cf4222,#b83a1c)!important;color:#fff!important; box-shadow:0 12px 30px rgba(184,58,28,.40)!important;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
html.ocean-pro body #mainContent .hero-section .slider-dots{bottom:calc(clamp(34px,6vw,72px) + 14px)!important;z-index:6!important}
html.ocean-pro body #mainContent .hero-section .slide .slide-content{padding-bottom:calc(clamp(34px,6vw,72px) + 28px)!important}
html.ocean-pro body #mainContent .slider-nav{z-index:6;border-radius:50%!important;background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.35)!important;color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.ocean-pro body #mainContent .hero-section .slide::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,35,58,.62),rgba(6,35,58,.50))}
html.ocean-pro body #mainContent .hero-section .slide .slide-content{position:relative;z-index:1}
html.ocean-pro body #section-digital-twin .dt2-s-lbl{color:#4f6578!important}
html.ocean-pro body #mainContent .site-section:not(.hero-section):not(.dt2-section){padding:clamp(44px,7vw,104px) clamp(16px,4vw,56px)!important;background:transparent!important}
html.ocean-pro body #mainContent .site-section:not(.hero-section):not(.dt2-section):nth-of-type(even){background:linear-gradient(180deg,#ffffff 0%,#eef8fb 100%)!important}
html.ocean-pro body #mainContent .site-section:not(.dt2-section) .section-header{margin-bottom:clamp(26px,4vw,52px)!important;text-align:center}
html.ocean-pro body #mainContent .site-section:not(.dt2-section) .section-header h2{font-size:clamp(1.75rem,1rem + 2.4vw,2.9rem)!important;font-weight:900!important;line-height:1.3!important; color:var(--ink-800)!important;letter-spacing:-.2px;}
html.ocean-pro body #mainContent .site-section:not(.dt2-section) .section-divider{width:96px!important;height:6px!important;border-radius:99px!important;margin:14px auto 16px!important;background:linear-gradient(90deg,var(--teal-500),var(--coral-500))!important}
html.ocean-pro body #mainContent .site-section:not(.dt2-section) .section-header p{color:var(--muted)!important;font-size:clamp(1rem,.92rem + .4vw,1.25rem)!important;max-width:60ch;margin-inline:auto}
html.ocean-pro body #mainContent .cards-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))!important;gap:clamp(14px,2vw,28px)!important}
html.ocean-pro body #mainContent .card,html.ocean-pro body #mainContent .stat-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:24px!important; box-shadow:var(--shadow-sm)!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);}
html.ocean-pro body #mainContent .card{padding:clamp(16px,1.8vw,24px)}
html.ocean-pro body #mainContent .card h3{font-size:clamp(1.1rem,1rem + .35vw,1.4rem)!important;font-weight:800!important;line-height:1.4!important;color:var(--ink-800)!important}
html.ocean-pro body #mainContent .card p{color:var(--muted)!important;line-height:1.8!important}
html.ocean-pro body #mainContent .card-icon{display:inline-grid!important;place-items:center;width:3.4rem;height:3.4rem;border-radius:18px;font-size:1.75rem!important; background:linear-gradient(135deg,var(--teal-100),#d3ebf6)!important;margin-bottom:.7rem;}
html.ocean-pro body #mainContent .card-badge{display:inline-flex!important;align-items:center;padding:.2em .85em!important;border-radius:99px!important;font-weight:800!important;font-size:.82rem!important;color:var(--ink-900)!important}
html.ocean-pro body #mainContent .card-badge:not([style*="background"]){background:var(--ink-700)!important;color:#fff!important}
html.ocean-pro body #mainContent .card-badge[style*="var(--primary)"]{background:var(--teal-700)!important;color:#fff!important}
html.ocean-pro body #mainContent .article-tag{display:inline-flex;align-items:center;padding:.15em .8em;border-radius:99px;background:var(--teal-100)!important;color:var(--ink-800)!important;font-weight:800;font-size:.82rem}
html.ocean-pro body #mainContent .project-progress{height:10px!important;border-radius:99px!important;background:var(--teal-100)!important;overflow:hidden}
html.ocean-pro body #mainContent .project-progress-fill{border-radius:99px!important;background:linear-gradient(90deg,var(--teal-500),var(--teal-700))!important}
html.ocean-pro body #mainContent .project-percent{color:var(--muted)!important;font-weight:700}
html.ocean-pro body #mainContent .video-thumb{aspect-ratio:16/9;border-radius:18px;display:grid!important;place-items:center;font-size:3.2rem!important;background:linear-gradient(135deg,var(--ink-700),var(--teal-700))!important;color:#fff!important;margin-bottom:.8rem}
html.ocean-pro body #mainContent .creature-card{border-radius:22px!important}
html.ocean-pro body #mainContent .stats-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(12px,2vw,28px)!important}
@media (min-width:900px){html.ocean-pro body #mainContent .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
html.ocean-pro body #mainContent .stat-card{text-align:center;padding:clamp(22px,2.4vw,34px) 20px!important;background:linear-gradient(160deg,#ffffff,#f0f9fb)!important}
html.ocean-pro body #mainContent .stat-icon{font-size:2.2rem!important;margin-bottom:.3rem}
html.ocean-pro body #mainContent .stat-number{font-size:clamp(2.1rem,1.2rem + 2.8vw,3.6rem)!important;font-weight:900!important;line-height:1.1!important;color:var(--teal-700)!important}
@supports ((-webkit-background-clip:text) or (background-clip:text)){html.ocean-pro body #mainContent .stat-number{background:linear-gradient(135deg,var(--teal-600),var(--coral-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}
html.ocean-pro body #mainContent .stat-label{color:var(--muted)!important;font-weight:600}
html.ocean-pro body #mainContent .card-btn,html.ocean-pro body #mainContent .btn-primary,html.ocean-pro body .btn-primary{display:inline-flex!important;align-items:center;justify-content:center;gap:.5em;min-height:var(--touch-target);padding:.6em 1.5em!important; border:0!important;border-radius:999px!important;cursor:pointer;font-weight:800!important;color:#fff!important; background:linear-gradient(135deg,var(--teal-700),var(--ink-600))!important;box-shadow:0 8px 22px rgba(10,117,134,.30)!important; transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);}
html.ocean-pro body #mainContent .card-btn[style*="--accent"]{background:linear-gradient(135deg,#cf4222,#b83a1c)!important;box-shadow:0 8px 22px rgba(184,58,28,.30)!important}
html.ocean-pro body #mainContent .btn-outline,html.ocean-pro body .btn-outline{display:inline-flex!important;align-items:center;justify-content:center;gap:.5em;min-height:var(--touch-target);padding:.55em 1.4em!important; border-radius:999px!important;border:2px solid var(--teal-600)!important;color:var(--ink-600)!important;background:transparent!important;font-weight:800!important;}
html.ocean-pro body #mainContent .creature-tabs{gap:10px!important}
html.ocean-pro body #mainContent .ctab{min-height:44px;padding:.5em 1.2em!important;border-radius:999px!important;font-weight:700!important; background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);}
html.ocean-pro body #mainContent .ctab.active,html.ocean-pro body #mainContent .ctab[aria-pressed="true"]{background:linear-gradient(135deg,var(--teal-700),var(--ink-600))!important;color:#fff!important;border-color:transparent!important}
html.ocean-pro body #pbClassroomEntry{margin:clamp(20px,4vw,48px) auto!important;max-width:min(1100px,92%);border-radius:28px!important; background:linear-gradient(135deg,var(--ink-900),var(--ink-700) 60%,var(--teal-700))!important;color:#fff!important; box-shadow:var(--shadow-md)!important;border:0!important;}
html.ocean-pro body #pbClassroomEntry h2,html.ocean-pro body #pbClassroomEntry p,html.ocean-pro body #pbClassroomEntry span{color:#fff!important}
html.ocean-pro body #pbClassroomEntry button{background:linear-gradient(135deg,#cf4222,#b83a1c)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-weight:900!important;min-height:52px;padding:.7em 1.8em!important}
html.ocean-pro body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea){min-height:var(--touch-target);font-size:max(16px,1rem);padding:.6em .95em;border-radius:14px; border:1.5px solid #cfe3ea;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s;}
html.ocean-pro body :is(input,select,textarea):focus{border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(24,169,185,.30);outline:none!important}
html.ocean-pro body .modal .modal-content{border-radius:var(--radius-lg)!important;border:1px solid var(--line)!important;box-shadow:0 30px 90px rgba(4,31,56,.38)!important}
html.ocean-pro body .modal:not(.hidden){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:pbFade .22s var(--ease)}
html.ocean-pro body .modal:not(.hidden) .modal-content{animation:pbPop .3s var(--ease)}
@keyframes pbFade{from{opacity:0}to{opacity:1}}
@keyframes pbPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
html.ocean-pro body #footer{background:linear-gradient(160deg,#06233a 0%,#0a3a5a 60%,#0b5568 100%)!important;color:#c3dbe8!important;border-top:0!important;padding:clamp(36px,5vw,72px) clamp(16px,4vw,48px)!important}
html.ocean-pro body #footer .footer-brand{font-size:clamp(1.3rem,1rem + 1.2vw,2.1rem);font-weight:900;color:#fff!important}
html.ocean-pro body #footer .footer-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:1.1em 0}
html.ocean-pro body #footer .footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1.2em;border-radius:999px;background:rgba(255,255,255,.10);color:#eaf7fb!important;font-weight:700;text-decoration:none}
html.ocean-pro body #footer .footer-copy{opacity:.8}
html.ocean-pro body #scrollTopBtn{background:linear-gradient(135deg,var(--teal-600),var(--ink-600))!important;box-shadow:0 10px 26px rgba(6,35,58,.3)!important;border-radius:50%!important}
html.ocean-pro body #mainContent .pb-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.ocean-pro body #mainContent .pb-reveal.pb-in{opacity:1;transform:none}
html.ocean-pro body .pb-tabbar{display:none}
@media (hover:hover) and (pointer:fine){html.ocean-pro body #mainContent .card:hover,html.ocean-pro body #mainContent .stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)!important;border-color:var(--teal-200)!important}
html.ocean-pro body #mainContent .card-btn:hover,html.ocean-pro body #mainContent .btn-primary:hover,html.ocean-pro body #mainContent .btn-hero:hover{transform:translateY(-2px);filter:saturate(1.1)}
html.ocean-pro body #mainContent .ctab:hover{border-color:var(--teal-500)!important;transform:translateY(-1px)}
html.ocean-pro body #navbar .nav-links>a:hover,html.ocean-pro body #navbar .nav-drop-btn:hover{background:rgba(255,255,255,.14)!important}}
@media (hover:none){html.ocean-pro body #mainContent .card-btn:active,html.ocean-pro body #mainContent .btn-hero:active,html.ocean-pro body #mainContent .ctab:active{transform:scale(.97)}}
@media (max-width:767px){html.ocean-pro body:not(.pb-classroom-mode):not(.pb-auth) .pb-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:grid;grid-template-columns:repeat(5,1fr); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4); border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(7,36,58,.10);}
html.ocean-pro body .pb-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:4px 2px; border:0;background:transparent;border-radius:16px;font:inherit;font-size:.72rem;font-weight:700;color:var(--muted);cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);}
html.ocean-pro body .pb-tabbar button .pb-ti{font-size:1.35rem;line-height:1}
html.ocean-pro body .pb-tabbar button.pb-active{color:var(--ink-700);background:var(--teal-50)}
html.ocean-pro body .pb-tabbar button:active{transform:scale(.94)}
html.ocean-pro body:not(.pb-classroom-mode):not(.pb-auth) #footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
html.ocean-pro body:not(.pb-classroom-mode):not(.pb-auth) #scrollTopBtn{bottom:calc(86px + env(safe-area-inset-bottom))!important}
html.ocean-pro body #mainContent .site-section:not(.hero-section):not(.dt2-section){padding:40px 14px!important}
html.ocean-pro body #mainContent .cards-grid{gap:14px!important}
html.ocean-pro body #mainContent .card,html.ocean-pro body #mainContent .stat-card{border-radius:20px!important}
html.ocean-pro body .modal:not(.hidden){align-items:flex-end!important;padding:0!important}
html.ocean-pro body .modal:not(.hidden) .modal-content{width:100%!important;max-width:100%!important;max-height:92dvh!important;border-radius:26px 26px 0 0!important}}
@media (prefers-reduced-motion:reduce){html.ocean-pro body *,html.ocean-pro body *::before,html.ocean-pro body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.ocean-pro body #mainContent .pb-reveal{opacity:1;transform:none}}

/* شريط الهاتف السفلي: واحد فقط (الأصلي #pb-bottom-tabs)، بتصميم متناسق وتباين مقروء */
html.ocean-pro body:has(#pb-bottom-tabs) .pb-tabbar{display:none!important}
@media (max-width:767px){
  html.ocean-pro body #pb-bottom-tabs{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid #dcebf1;box-shadow:0 -10px 30px rgba(7,36,58,.10)}
  html.ocean-pro body #pb-bottom-tabs button[aria-current="page"]{color:#0a5f86!important;background:#eefafc!important}
}