/* original: style.css */ /* ========== RESET & BASE ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body, html { width: 100%; height: 100%; overflow: hidden; font-family: 'Tajawal', sans-serif; } :root { --primary: #0891b2; --primary-dark: #0e7490; --primary-light: #67e8f9; --accent: #f59e0b; --accent-light: #fbbf24; --bg-dark: #0c1222; --bg-card: rgba(15,23,42,0.75); --bg-card-hover: rgba(30,41,59,0.85); --text: #e2e8f0; --text-muted: #94a3b8; --text-heading: #7dd3fc; --glass: rgba(15,23,42,0.92); --glass-light: rgba(255,255,255,0.04); --radius: 18px; --radius-sm: 12px; --shadow: 0 10px 40px rgba(0,0,0,0.35); --transition: 0.3s cubic-bezier(0.4,0,0.2,1); --gradient-card: linear-gradient(145deg, rgba(15,23,42,0.8), rgba(30,58,90,0.6)); --border-subtle: rgba(125,211,252,0.1); --glow: 0 0 20px rgba(8,145,178,0.15); } body.light-mode { --bg-dark: #f0f9ff; --bg-card: rgba(255,255,255,0.9); --bg-card-hover: rgba(255,255,255,0.98); --text: #1e293b; --text-muted: #64748b; --text-heading: #0e7490; --glass: rgba(255,255,255,0.95); --glass-light: rgba(0,0,0,0.02); --border-subtle: rgba(14,116,144,0.12); } /* ========== LAYOUT ========== */ #gameContainer { width: 100%; height: 100%; position: relative; background: linear-gradient(180deg, #0c1222 0%, #0f172a 15%, #162033 40%, #0f1b2d 65%, #0c1222 85%, #080e1a 100%); } #gameCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } #ui-layer { position: relative; z-index: 1; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; } .hidden { display: none !important; } /* ========== LOADING ========== */ #loadingScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: linear-gradient(135deg, #0c1222, #0f172a); display: flex; align-items: center; justify-content: center; transition: opacity 0.8s; } #loadingScreen.fade-out { opacity: 0; pointer-events: none; } .loader-content { text-align: center; color: #fff; } /* Ocean floor ambient */ #ui-layer::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 25% 75%, rgba(8,145,178,0.12) 0%, transparent 55%), radial-gradient(ellipse at 75% 85%, rgba(14,116,144,0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 15%, rgba(103,232,249,0.06) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(245,158,11,0.04) 0%, transparent 30%); } .loader-fish { font-size: 4em; animation: fishSwim 2s ease-in-out infinite; } @keyframes fishSwim { 0%,100% { transform: translateX(0) scaleX(1); } 25% { transform: translateX(30px) scaleX(1); } 50% { transform: translateX(0) scaleX(-1); } 75% { transform: translateX(-30px) scaleX(-1); } } .loader-content h2 { font-size: 2em; margin: 15px 0; color: var(--primary-light); } .loader-bar { width: 200px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 4px; margin: 0 auto; overflow: hidden; } .loader-fill { width: 0; height: 100%; background: var(--primary-light); border-radius: 4px; animation: loadFill 2s ease forwards; } @keyframes loadFill { to { width: 100%; } } /* ========== TOP CONTROLS ========== */ #topControls { position: fixed; top: 15px; left: 15px; z-index: 500; display: flex; gap: 8px; } #topControls button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--primary); background: var(--glass); color: var(--text); font-size: 1.2em; cursor: pointer; transition: var(--transition); backdrop-filter: blur(10px); } #topControls button:hover { background: var(--primary); transform: scale(1.1); } #topControls button.active { background: var(--accent); border-color: var(--accent); } /* ========== EDIT TOOLBAR ========== */ #editToolbar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 500; background: linear-gradient(135deg, rgba(255,111,0,0.95), rgba(230,81,0,0.95)); backdrop-filter: blur(10px); padding: 10px 0; } .toolbar-inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; flex-wrap: wrap; } .toolbar-label { color: #fff; font-weight: 700; font-size: 0.95em; } #editToolbar button { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.85em; transition: var(--transition); } #editToolbar button:hover { background: rgba(255,255,255,0.35); } .btn-close-toolbar { background: rgba(0,0,0,0.3) !important; } /* ========== NAV ========== */ #navbar { position: sticky; top: 0; z-index: 400; background: var(--glass); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); transition: var(--transition); } #navbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .nav-inner { display: flex; align-items: center; gap: 20px; padding: 12px 30px; max-width: 1400px; margin: 0 auto; } .nav-brand { font-size: 1.4em; font-weight: 800; color: var(--primary-light); cursor: pointer; text-decoration: none; } .nav-links { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } .nav-links a, .nav-links .nav-link-single { color: var(--text); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); font-size: 0.9em; font-weight: 500; white-space: nowrap; } .nav-links a:hover, .nav-links a.active, .nav-links .nav-link-single:hover { background: rgba(77,208,225,0.15); color: var(--primary-light); } /* Nav Dropdowns */ .nav-dropdown { position: relative; } .nav-drop-btn { background: none; border: none; color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.9em; font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 4px; white-space: nowrap; } .nav-drop-btn:hover { background: rgba(77,208,225,0.15); color: var(--primary-light); } .nav-drop-arrow { font-size: 0.7em; transition: transform 0.3s; } .nav-dropdown:hover .nav-drop-arrow { transform: rotate(180deg); } .nav-drop-menu { position: absolute; top: 100%; right: 0; min-width: 180px; background: var(--glass); backdrop-filter: blur(20px); border: 1px solid rgba(77,208,225,0.15); border-radius: var(--radius-sm); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.25s ease; z-index: 500; box-shadow: 0 12px 40px rgba(0,0,0,0.4); } .nav-dropdown:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(2px); } .nav-drop-menu a { display: block; padding: 10px 16px; border-radius: 8px; color: var(--text); text-decoration: none; cursor: pointer; transition: var(--transition); font-size: 0.9em; } .nav-drop-menu a:hover { background: rgba(77,208,225,0.15); color: var(--primary-light); } /* Mobile nav groups */ .mobile-nav-group { margin: 2px 0; } .mobile-nav-group-title { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; color: var(--text); font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); transition: var(--transition); } .mobile-nav-group-title:hover { background: rgba(77,208,225,0.15); } .mobile-arrow { font-size: 0.7em; transition: transform 0.3s; } .mobile-nav-group.open .mobile-arrow { transform: rotate(-90deg); } .mobile-nav-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-right: 15px; } .mobile-nav-group.open .mobile-nav-sub { max-height: 300px; } .nav-hamburger { display: none; font-size: 1.8em; color: var(--text); cursor: pointer; margin-right: auto; } #mobileMenu { position: fixed; top: 60px; left: 0; width: 100%; background: var(--glass); backdrop-filter: blur(15px); z-index: 399; display: flex; flex-direction: column; padding: 10px; border-bottom: 1px solid rgba(77,208,225,0.15); } #mobileMenu a { color: var(--text); padding: 12px 20px; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } #mobileMenu a:hover { background: rgba(77,208,225,0.15); } @media(max-width:900px) { .nav-links { display: none; } .nav-hamburger { display: block; } } /* ========== SECTIONS ========== */ .site-section { padding: 60px 20px; max-width: 1400px; margin: 0 auto; opacity: 0; transform: translateY(30px); transition: opacity 0.7s, transform 0.7s; } .site-section.visible { opacity: 1; transform: translateY(0); } .section-header { text-align: center; margin-bottom: 40px; } .section-header h2 { font-size: 2.2em; font-weight: 800; color: var(--text-heading); margin-bottom: 10px; } .section-header p { color: var(--text-muted); font-size: 1.1em; max-width: 600px; margin: 0 auto; } .section-divider { width: 80px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; margin: 12px auto; } /* Edit controls on sections */ .edit-section-controls { display: none; margin-bottom: 15px; text-align: center; } .edit-mode .edit-section-controls { display: flex; justify-content: center; gap: 8px; } .edit-section-controls button { padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; font-size: 0.8em; } .btn-edit-item { background: var(--accent); color: #fff; } .btn-delete-item { background: #e53935; color: #fff; } .btn-add-item { background: #43a047; color: #fff; } /* Editable highlight */ .edit-mode [contenteditable="true"] { outline: 2px dashed var(--accent) !important; outline-offset: 3px; background: rgba(255,111,0,0.08); border-radius: 4px; cursor: text; min-height: 1em; } .edit-mode .editable-img { position: relative; cursor: pointer; } .edit-mode .editable-img::after { content: '📷 انقر لتغيير'; position: absolute; bottom: 5px; right: 5px; background: var(--accent); color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 0.7em; } /* ========== HERO / SLIDER ========== */ .hero-section { padding: 0; max-width: none; position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center; justify-content: center; } .hero-section.visible { opacity: 1; transform: none; } .slider-container { width: 100%; min-height: 85vh; position: relative; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1s ease; padding: 40px 20px; } .slide.active { opacity: 1; z-index: 2; } .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .slide-content { position: relative; z-index: 3; text-align: center; max-width: 800px; } .slide-content h1 { font-size: 3.2em; font-weight: 900; color: #fff; margin-bottom: 15px; text-shadow: 0 4px 20px rgba(0,0,0,0.5); line-height: 1.3; } .slide-content p { font-size: 1.3em; color: rgba(255,255,255,0.9); margin-bottom: 25px; text-shadow: 0 2px 10px rgba(0,0,0,0.4); line-height: 1.6; } .slide-content .btn-hero { display: inline-block; padding: 14px 35px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: 30px; font-size: 1.1em; font-weight: 700; cursor: pointer; transition: var(--transition); font-family: inherit; text-decoration: none; } .slide-content .btn-hero:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,151,167,0.5); } .slider-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 10px; } .slider-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: var(--transition); border: 2px solid transparent; } .slider-dot.active { background: var(--primary-light); border-color: #fff; transform: scale(1.2); } .slider-nav { position: absolute; top: 50%; z-index: 10; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; border: none; font-size: 1.5em; cursor: pointer; transition: var(--transition); backdrop-filter: blur(5px); transform: translateY(-50%); } .slider-nav:hover { background: var(--primary); } .slider-nav.prev { right: 20px; } .slider-nav.next { left: 20px; } @media(max-width:768px) { .slide-content h1 { font-size: 2em; } .slide-content p { font-size: 1em; } .hero-section { min-height: 70vh; } .slider-container { min-height: 70vh; } } /* ========== CARDS GRID ========== */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .card { background: var(--gradient-card); border-radius: var(--radius); padding: 28px; transition: var(--transition); border: 1px solid var(--border-subtle); position: relative; overflow: hidden; backdrop-filter: blur(10px); } .card::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transition: transform 0.4s; transform-origin: right; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow), var(--glow); border-color: var(--border-subtle); background: var(--bg-card-hover); } .card:hover::before { transform: scaleX(1); } .card-icon { font-size: 3em; margin-bottom: 12px; display: block; } .card h3 { color: var(--text-heading); font-size: 1.25em; margin-bottom: 8px; font-weight: 700; } .card p { color: var(--text-muted); font-size: 0.95em; line-height: 1.7; } .card-badge { position: absolute; top: 15px; left: 15px; background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 0.75em; font-weight: 700; } .card-btn { display: inline-block; margin-top: 15px; padding: 8px 20px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: 20px; cursor: pointer; transition: var(--transition); font-family: inherit; font-size: 0.9em; } .card-btn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,151,167,0.4); } /* ========== CREATURE CARDS ========== */ .creature-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; } .ctab { padding: 10px 22px; background: var(--bg-card); color: var(--text); border: 1px solid rgba(77,208,225,0.2); border-radius: 25px; cursor: pointer; transition: var(--transition); font-family: inherit; font-size: 0.95em; } .ctab.active, .ctab:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .creature-card { text-align: center; cursor: pointer; } .creature-card .creature-emoji { font-size: 4em; display: block; margin-bottom: 8px; transition: transform 0.3s; } .creature-card:hover .creature-emoji { transform: scale(1.2) rotate(-5deg); } .creature-card .creature-name { color: var(--text-heading); font-weight: 700; } .creature-card .creature-status { font-size: 0.8em; margin-top: 4px; padding: 2px 10px; border-radius: 10px; display: inline-block; } .status-stable { background: rgba(76,175,80,0.2); color: #81c784; } .status-threatened { background: rgba(255,152,0,0.2); color: #ffb74d; } .status-endangered { background: rgba(244,67,54,0.2); color: #ef5350; } .status-unknown { background: rgba(158,158,158,0.2); color: #bdbdbd; } /* ========== VIDEO CARDS ========== */ .video-card { cursor: pointer; overflow: hidden; } .video-thumb { width: 100%; height: 180px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 4em; background: linear-gradient(135deg, rgba(0,77,120,0.8), rgba(0,150,136,0.6)); margin-bottom: 12px; position: relative; } .video-thumb::after { content: '▶'; position: absolute; font-size: 0.5em; background: rgba(255,255,255,0.9); color: var(--primary-dark); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .video-card:hover .video-thumb::after { opacity: 1; } .video-card h3 { color: var(--text-heading); margin-bottom: 5px; } /* ========== STATS ========== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .stat-card { background: var(--gradient-card); border-radius: var(--radius); padding: 30px; text-align: center; border: 1px solid var(--border-subtle); backdrop-filter: blur(10px); transition: var(--transition); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--glow); } .stat-icon { font-size: 2.5em; margin-bottom: 10px; } .stat-number { font-size: 2.8em; font-weight: 900; color: var(--primary-light); margin-bottom: 5px; } .stat-label { color: var(--text-muted); font-size: 1em; } /* ========== MODAL ========== */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); } .modal-content { position: relative; background: var(--glass); backdrop-filter: blur(20px); border-radius: var(--radius); padding: 30px; max-width: 600px; width: 100%; max-height: 85vh; overflow-y: auto; color: var(--text); border: 1px solid rgba(77,208,225,0.2); animation: modalIn 0.3s ease; } .modal-video { max-width: 850px; } @keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-close { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(244,67,54,0.8); color: #fff; border: none; font-size: 1.1em; cursor: pointer; transition: var(--transition); z-index: 10; } .modal-close:hover { background: #e53935; transform: scale(1.1); } .modal-content h3 { color: var(--text-heading); font-size: 1.6em; margin-bottom: 15px; } .modal-content .modal-emoji { font-size: 5em; text-align: center; display: block; margin-bottom: 15px; } .modal-content .modal-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; } .modal-content .info-item { background: var(--glass-light); padding: 10px; border-radius: var(--radius-sm); } .modal-content .info-item label { color: var(--text-muted); font-size: 0.85em; display: block; } .modal-content .info-item span { color: var(--text-heading); font-weight: 700; } .modal-content iframe { width: 100%; height: 400px; border: none; border-radius: var(--radius-sm); } #importTextarea { width: 100%; min-height: 200px; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 12px; font-family: monospace; font-size: 0.85em; margin: 15px 0; resize: vertical; } /* ========== BUTTONS ========== */ .btn-primary { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: 25px; font-size: 1em; font-weight: 700; cursor: pointer; transition: var(--transition); font-family: inherit; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,151,167,0.4); } .btn-outline { display: inline-block; padding: 10px 24px; background: transparent; color: var(--primary-light); border: 2px solid var(--primary); border-radius: 25px; font-size: 0.95em; cursor: pointer; transition: var(--transition); font-family: inherit; } .btn-outline:hover { background: rgba(0,151,167,0.15); } /* ========== BLOG / ARTICLES ========== */ .article-card .article-date { color: var(--text-muted); font-size: 0.8em; margin-bottom: 8px; } .article-card .article-tag { background: rgba(0,151,167,0.2); color: var(--primary-light); padding: 2px 10px; border-radius: 10px; font-size: 0.75em; display: inline-block; margin-top: 10px; } /* ========== EBOOKS ========== */ .ebook-card .ebook-cover { font-size: 4em; margin-bottom: 10px; display: block; } .ebook-card .ebook-cover-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 12px; } .ebook-card .ebook-author { color: var(--text-muted); font-size: 0.85em; } .ebook-card .ebook-pages { color: var(--text-muted); font-size: 0.8em; margin-top: 5px; } /* ========== PROJECTS ========== */ .project-card .project-progress { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-top: 12px; overflow: hidden; } .project-card .project-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 4px; transition: width 1s ease; } .project-card .project-percent { color: var(--primary-light); font-weight: 700; font-size: 0.9em; margin-top: 5px; text-align: left; } /* ========== SCROLL TOP ========== */ #scrollTopBtn { position: fixed; bottom: 25px; right: 25px; z-index: 450; width: 50px; height: 50px; border-radius: 50%; background: var(--primary); color: #fff; border: none; font-size: 1.3em; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 15px rgba(0,151,167,0.4); } #scrollTopBtn:hover { transform: scale(1.1); } .edit-mode #scrollTopBtn { bottom: 75px; } /* ========== FOOTER ========== */ #footer { background: rgba(12,18,34,0.95); border-top: 1px solid var(--border-subtle); padding: 50px 20px; text-align: center; color: var(--text-muted); backdrop-filter: blur(10px); } .footer-brand { font-size: 1.5em; font-weight: 800; color: var(--primary-light); margin-bottom: 10px; } .footer-links { display: flex; justify-content: center; gap: 20px; margin: 15px 0; flex-wrap: wrap; } .footer-links a { color: var(--text-muted); text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--primary-light); } .footer-copy { font-size: 0.85em; margin-top: 10px; } /* ========== ADMIN EDIT FORMS ========== */ .inline-edit-form { background: rgba(255,111,0,0.1); border: 1px dashed var(--accent); border-radius: var(--radius-sm); padding: 15px; margin: 10px 0; } .inline-edit-form input, .inline-edit-form textarea, .inline-edit-form select { width: 100%; padding: 8px 12px; margin: 4px 0; border-radius: 6px; border: 1px solid rgba(77,208,225,0.3); background: rgba(0,0,0,0.3); color: var(--text); font-family: inherit; font-size: 0.9em; } .inline-edit-form textarea { min-height: 60px; resize: vertical; } .inline-edit-form label { color: var(--accent-light); font-size: 0.85em; display: block; margin-top: 6px; } /* ========== ANIMATIONS ========== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeUp 0.5s ease backwards; } .cards-grid .card:nth-child(1) { animation-delay: 0.05s; } .cards-grid .card:nth-child(2) { animation-delay: 0.1s; } .cards-grid .card:nth-child(3) { animation-delay: 0.15s; } .cards-grid .card:nth-child(4) { animation-delay: 0.2s; } .cards-grid .card:nth-child(5) { animation-delay: 0.25s; } .cards-grid .card:nth-child(6) { animation-delay: 0.3s; } /* ========== LOGIN MODAL ========== */ .login-modal-content { max-width: 420px; text-align: center; } .login-header { margin-bottom: 20px; } .login-icon { font-size: 4em; margin-bottom: 10px; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } } .login-header h3 { color: var(--text-heading); font-size: 1.5em; margin-bottom: 8px; } .login-header p { color: var(--text-muted); font-size: 0.9em; } .login-form { text-align: right; } .login-form label { color: var(--text-muted); font-size: 0.9em; display: block; margin: 12px 0 5px; } .login-form input { width: 100%; padding: 12px 15px; border-radius: var(--radius-sm); border: 2px solid rgba(77,208,225,0.2); background: rgba(0,0,0,0.3); color: var(--text); font-family: inherit; font-size: 1em; transition: var(--transition); } .login-form input:focus { outline: none; border-color: var(--primary-light); background: rgba(0,0,0,0.5); } .btn-login { width: 100%; padding: 14px; margin-top: 20px; border: none; border-radius: 25px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 1.1em; font-weight: 700; cursor: pointer; font-family: inherit; transition: var(--transition); letter-spacing: 0.5px; } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,151,167,0.5); } .login-error { background: rgba(244,67,54,0.15); border: 1px solid rgba(244,67,54,0.3); color: #ef5350; padding: 10px; border-radius: var(--radius-sm); margin-bottom: 15px; font-size: 0.9em; animation: shake 0.4s ease; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .admin-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--accent), #e65100); color: #fff; padding: 4px 12px; border-radius: 15px; font-size: 0.75em; font-weight: 700; margin-right: 10px; } /* ========== ADMIN EDIT MODAL ========== */ .admin-edit-modal-content { max-width: 650px; max-height: 85vh; overflow-y: auto; } .admin-edit-modal-content h3 { text-align: center; margin-bottom: 20px; } .admin-field-group { margin-bottom: 14px; } .admin-field-group label { display: block; color: var(--accent-light); font-size: 0.85em; margin-bottom: 4px; font-weight: 600; } .admin-field-group input, .admin-field-group textarea, .admin-field-group select { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(77,208,225,0.3); background: rgba(0,0,0,0.3); color: var(--text); font-family: inherit; font-size: 0.95em; transition: var(--transition); } .admin-field-group input:focus, .admin-field-group textarea:focus, .admin-field-group select:focus { outline: none; border-color: var(--primary-light); } .admin-field-group textarea { min-height: 80px; resize: vertical; } .admin-field-group select { cursor: pointer; } .admin-field-group .img-preview { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin-top: 8px; border: 2px solid rgba(77,208,225,0.2); } .admin-field-group .img-upload-area { border: 2px dashed rgba(77,208,225,0.3); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: var(--transition); margin-top: 5px; } .admin-field-group .img-upload-area:hover { border-color: var(--primary-light); background: rgba(77,208,225,0.05); } .admin-field-group .img-upload-area input[type="file"] { display: none; } /* ========== CARD IMAGE ========== */ .card-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 12px; } .card-img-placeholder { width: 100%; height: 160px; border-radius: var(--radius-sm); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; font-size: 4em; background: linear-gradient(135deg, rgba(0,77,120,0.4), rgba(0,150,136,0.3)); } /* ========== CUSTOM SECTION STYLE ========== */ .custom-section-content { background: var(--bg-card); border-radius: var(--radius); padding: 30px; color: var(--text); line-height: 1.8; font-size: 1.05em; } /* ========== RESPONSIVE ========== */ @media(max-width:600px) { .section-header h2 { font-size: 1.6em; } .cards-grid { grid-template-columns: 1fr; gap: 16px; } .cards-grid[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .modal-content { padding: 20px; } .modal-content iframe { height: 250px; } .site-section { padding: 40px 15px; } #topControls { top: auto; bottom: 70px; left: 10px; } } /* ========== ARTICLE EDITOR ========== */ .article-editor-content { max-width: 800px; max-height: 90vh; } .article-view-content { max-width: 800px; } .ae-form { text-align: right; } .ae-row { display: flex; gap: 12px; align-items: flex-start; } .ae-field { margin-bottom: 14px; } .ae-field label { display: block; color: var(--accent-light); font-size: 0.85em; margin-bottom: 4px; font-weight: 600; } .ae-field input, .ae-field select, .ae-field textarea { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(77,208,225,0.3); background: rgba(0,0,0,0.3); color: var(--text); font-family: inherit; font-size: 0.95em; } .ae-field input:focus, .ae-field select:focus, .ae-field textarea:focus { outline: none; border-color: var(--primary-light); } .ae-icon-selected { width: 50px; height: 50px; font-size: 1.8em; display: flex; align-items: center; justify-content: center; background: var(--glass-light); border-radius: 10px; cursor: pointer; border: 2px solid rgba(77,208,225,0.3); transition: var(--transition); } .ae-icon-selected:hover { border-color: var(--primary-light); } .ae-icon-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: var(--glass); border: 1px solid rgba(77,208,225,0.2); border-radius: 10px; padding: 8px; position: absolute; z-index: 10; max-height: 200px; overflow-y: auto; } .ae-icon-picker span { font-size: 1.4em; cursor: pointer; padding: 6px; border-radius: 6px; text-align: center; transition: var(--transition); } .ae-icon-picker span:hover { background: rgba(77,208,225,0.2); } .ae-cover-area { display: flex; flex-direction: column; gap: 8px; } .ae-cover-preview { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; border: 2px solid rgba(77,208,225,0.2); } .ae-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; background: rgba(0,0,0,0.2); border-radius: 8px 8px 0 0; border: 1px solid rgba(77,208,225,0.2); border-bottom: none; } .ae-toolbar button { width: 34px; height: 34px; border: 1px solid rgba(77,208,225,0.2); background: var(--glass-light); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 0.85em; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .ae-toolbar button:hover { background: rgba(77,208,225,0.2); } .ae-content-editor { min-height: 250px; max-height: 400px; overflow-y: auto; padding: 15px; background: rgba(0,0,0,0.3); border: 1px solid rgba(77,208,225,0.2); border-radius: 0 0 8px 8px; color: var(--text); font-family: inherit; font-size: 1em; line-height: 1.8; direction: rtl; } .ae-content-editor:focus { outline: none; border-color: var(--primary-light); } .ae-content-editor:empty::before { content: attr(placeholder); color: var(--text-muted); opacity: 0.6; } .ae-content-editor img { max-width: 100%; border-radius: 8px; margin: 10px 0; } .ae-attachment-info { background: rgba(77,208,225,0.1); border: 1px solid rgba(77,208,225,0.2); border-radius: 8px; padding: 10px; margin-top: 5px; color: var(--primary-light); font-size: 0.9em; display: flex; align-items: center; gap: 8px; } .ae-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .ae-publish-btn { background: linear-gradient(135deg, #43a047, #2e7d32) !important; } .ae-publish-btn:hover { box-shadow: 0 6px 20px rgba(67,160,71,0.4) !important; } /* Article view */ .article-view-body-content { color: var(--text); line-height: 1.9; font-size: 1.05em; } .article-view-body-content img { max-width: 100%; border-radius: 8px; margin: 12px 0; } .article-view-body-content h3 { color: var(--text-heading); margin: 15px 0 8px; } .article-view-cover { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 15px; } .article-view-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; } .article-view-meta span { background: var(--glass-light); padding: 4px 12px; border-radius: 15px; font-size: 0.85em; color: var(--text-muted); } /* ========== GAME PLAY MODAL ========== */ .game-play-content { max-width: 95vw; max-height: 92vh; width: 1100px; padding: 15px; } .game-play-content iframe { border-radius: 10px; } /* ========== PARTICIPANT BADGE ========== */ .participant-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #43a047, #2e7d32); color: #fff; padding: 4px 12px; border-radius: 15px; font-size: 0.75em; font-weight: 700; margin-right: 10px; } /* Scrollbar */ #ui-layer::-webkit-scrollbar { width: 8px; } #ui-layer::-webkit-scrollbar-track { background: transparent; } #ui-layer::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } #ui-layer::-webkit-scrollbar-thumb:hover { background: var(--primary-light); } /* ========== FULL ADMIN DASHBOARD ========== */ #adminDashboard { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; background: var(--bg-dark); } .dash-layout { display: flex; height: 100%; direction: rtl; } .dash-sidebar { width: 260px; background: rgba(12,18,34,0.98); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: 20px 0; backdrop-filter: blur(15px); overflow-y: auto; flex-shrink: 0; } .dash-brand { font-size: 1.3em; font-weight: 800; color: var(--primary-light); padding: 0 20px 15px; text-align: center; } .dash-user-info { display: flex; align-items: center; gap: 10px; padding: 12px 20px; margin-bottom: 15px; background: rgba(77,208,225,0.08); } .dash-avatar { font-size: 1.5em; } .dash-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; } .dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: var(--transition); font-size: 0.95em; text-decoration: none; } .dash-nav-item:hover { background: rgba(77,208,225,0.1); color: var(--text); } .dash-nav-item.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; } .dash-nav-item span { font-size: 1.2em; width: 24px; text-align: center; } .dash-nav-item.sub { padding-right: 40px; font-size: 0.88em; } .dash-nav-group { margin: 2px 0; } .dash-nav-group-title { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: var(--transition); font-size: 0.95em; font-weight: 600; } .dash-nav-group-title:hover { background: rgba(77,208,225,0.1); color: var(--text); } .dash-nav-group-title span:first-child { font-size: 1.2em; width: 24px; text-align: center; } .dash-arrow { margin-right: auto; font-size: 0.7em; transition: transform 0.3s; } .dash-nav-group.open .dash-arrow { transform: rotate(-90deg); } .dash-nav-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .dash-nav-group.open .dash-nav-sub { max-height: 500px; } .dash-sidebar-footer { padding: 15px 20px; } .dash-btn-back { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--primary); background: transparent; color: var(--primary-light); cursor: pointer; font-family: inherit; font-size: 0.9em; transition: var(--transition); } .dash-btn-back:hover { background: rgba(77,208,225,0.15); } .dash-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .dash-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; background: var(--glass); border-bottom: 1px solid rgba(77,208,225,0.1); flex-shrink: 0; text-align: right; margin-bottom: 0; } .dash-header h2 { font-size: 1.3em; color: var(--text-heading); margin: 0; } .dash-header p { display: none; } .dash-header-title { display: flex; align-items: center; gap: 12px; } .dash-header-actions { display: flex; align-items: center; gap: 10px; } .dash-search { padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(77,208,225,0.2); background: rgba(0,0,0,0.3); color: var(--text); font-family: inherit; font-size: 0.85em; width: 200px; } .dash-search:focus { outline: none; border-color: var(--primary-light); } .dash-btn-sm { padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(77,208,225,0.2); background: var(--glass-light); color: var(--text); cursor: pointer; font-family: inherit; font-size: 0.85em; transition: var(--transition); } .dash-btn-sm:hover { background: rgba(77,208,225,0.15); } .dash-content { flex: 1; overflow-y: auto; padding: 25px; } .dash-menu-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5em; cursor: pointer; } /* Sidebar overlay */ .dash-sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); z-index: 2000; opacity: 0; transition: opacity 0.3s ease; } .dash-sidebar-overlay.visible { display: block; opacity: 1; } @media(max-width:768px) { .dash-sidebar { position: fixed; right: 0; top: 0; height: 100%; width: 80%; max-width: 280px; z-index: 2001; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); transform: translateX(100%); box-shadow: -5px 0 30px rgba(0,0,0,0.4); } .dash-sidebar.open { transform: translateX(0); } .dash-menu-toggle { display: block; } .dash-search { width: 120px; } .dash-header { padding: 12px 15px; } .dash-header h2 { font-size: 1.1em; } .dash-content { padding: 15px; } .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .dash-kpi { padding: 14px 10px; } .dash-kpi .kpi-val { font-size: 1.4em; } .dash-kpi .kpi-label { font-size: 0.72em; } .dash-btn-sm { padding: 6px 10px; font-size: 0.8em; } .dash-report-row { flex-direction: column; align-items: flex-start; } } .admin-dash-content { max-width: 1100px; max-height: 92vh; padding: 20px; } .dash-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; } .dash-tab { padding: 10px 20px; background: var(--bg-card); color: var(--text); border: 1px solid rgba(77,208,225,0.2); border-radius: 25px; cursor: pointer; transition: var(--transition); font-family: inherit; font-size: 0.9em; } .dash-tab.active, .dash-tab:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 25px; } .dash-kpi { background: var(--gradient-card); border-radius: 14px; padding: 18px; text-align: center; border: 1px solid var(--border-subtle); transition: var(--transition); backdrop-filter: blur(10px); } .dash-kpi:hover { transform: translateY(-3px); box-shadow: var(--glow); } .dash-kpi .kpi-icon { font-size: 1.8em; margin-bottom: 6px; } .dash-kpi .kpi-val { font-size: 1.8em; font-weight: 900; color: var(--primary-light); } .dash-kpi .kpi-label { color: var(--text-muted); font-size: 0.8em; margin-top: 2px; } .dash-chart-area { background: var(--bg-card); border-radius: 14px; padding: 20px; margin-bottom: 20px; border: 1px solid rgba(77,208,225,0.1); } .dash-chart-area h4 { color: var(--text-heading); margin-bottom: 12px; } .dash-chart-canvas { width: 100%; height: 220px; } .dash-reports-list { max-height: 400px; overflow-y: auto; } .dash-report-row { background: var(--glass-light); border-radius: 10px; padding: 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; cursor: pointer; transition: var(--transition); border: 1px solid transparent; } .dash-report-row:hover { border-color: var(--primary); background: rgba(77,208,225,0.08); } .dash-report-date { color: var(--primary-light); font-weight: 700; font-size: 0.95em; } .dash-report-stats { display: flex; gap: 12px; flex-wrap: wrap; } .dash-report-stats span { color: var(--text-muted); font-size: 0.85em; } .dash-report-actions { display: flex; gap: 6px; } .dash-report-actions button { padding: 5px 12px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; font-size: 0.8em; color: #fff; transition: var(--transition); } .dash-btn-view { background: var(--primary); } .dash-btn-edit { background: var(--accent); } .dash-btn-delete { background: #e53935; } .dash-empty { text-align: center; padding: 40px; color: var(--text-muted); } .dash-empty .empty-icon { font-size: 4em; margin-bottom: 10px; } /* ========== REPORT FORM ========== */ .report-form-content { max-width: 800px; max-height: 90vh; } .report-view-content { max-width: 800px; max-height: 90vh; } .rf-section { background: var(--glass-light); border-radius: 12px; padding: 18px; margin-bottom: 16px; border: 1px solid rgba(77,208,225,0.1); } .rf-section h4 { color: var(--primary-light); margin-bottom: 12px; font-size: 1em; display: flex; align-items: center; gap: 6px; } .rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rf-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .rf-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; } .rf-field { margin-bottom: 10px; } .rf-field label { display: block; color: var(--accent-light); font-size: 0.82em; margin-bottom: 3px; font-weight: 600; } .rf-field input, .rf-field select, .rf-field textarea { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(77,208,225,0.25); background: rgba(0,0,0,0.25); color: var(--text); font-family: inherit; font-size: 0.9em; transition: var(--transition); } .rf-field input:focus, .rf-field select:focus, .rf-field textarea:focus { outline: none; border-color: var(--primary-light); } .rf-field textarea { min-height: 60px; resize: vertical; } .rf-stars { display: flex; gap: 6px; } .rf-star { font-size: 1.8em; cursor: pointer; transition: transform 0.2s; opacity: 0.3; } .rf-star.active { opacity: 1; } .rf-star:hover { transform: scale(1.2); } .rf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rf-chip { padding: 5px 12px; border-radius: 15px; font-size: 0.82em; cursor: pointer; border: 1px solid rgba(77,208,225,0.3); background: var(--glass-light); color: var(--text); transition: var(--transition); font-family: inherit; } .rf-chip.selected { background: var(--primary); color: #fff; border-color: var(--primary); } .rf-toggle { display: flex; align-items: center; gap: 10px; } .rf-toggle-btn { width: 48px; height: 26px; border-radius: 13px; border: none; background: rgba(255,255,255,0.15); cursor: pointer; position: relative; transition: var(--transition); } .rf-toggle-btn.on { background: var(--primary); } .rf-toggle-btn::after { content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: var(--transition); } .rf-toggle-btn.on::after { right: auto; left: 3px; } /* Report view */ .rv-section { background: var(--glass-light); border-radius: 12px; padding: 16px; margin-bottom: 12px; border-right: 3px solid var(--primary); } .rv-section h4 { color: var(--primary-light); margin-bottom: 8px; } .rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rv-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(77,208,225,0.08); } .rv-item label { color: var(--text-muted); font-size: 0.85em; } .rv-item span { color: var(--text-heading); font-weight: 600; } .rv-summary { background: linear-gradient(135deg, rgba(0,77,120,0.3), rgba(0,150,136,0.2)); border-radius: 12px; padding: 18px; margin-bottom: 16px; border: 1px solid rgba(77,208,225,0.2); } .rv-summary h4 { color: var(--accent-light); margin-bottom: 8px; } .rv-summary p { color: var(--text); line-height: 1.8; } @media(max-width:600px) { .rf-row, .rf-row-3, .rf-row-4 { grid-template-columns: 1fr; } .rv-grid { grid-template-columns: 1fr; } .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } } /* ========== AQUA GLASS DASHBOARD THEME ========== */ #adminDashboard { background: radial-gradient(1100px 560px at 88% -12%, rgba(34,211,238,0.20), transparent 62%), radial-gradient(900px 520px at 6% 112%, rgba(20,184,166,0.18), transparent 60%), linear-gradient(165deg, #04202c 0%, #062330 38%, #04161f 72%, #030f16 100%); } #adminDashboard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 50% 0%, rgba(103,232,249,0.07), transparent 70%); animation: aquaPulse 7s ease-in-out infinite; } @keyframes aquaPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes aquaRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } #adminDashboard .dash-layout { background: transparent; position: relative; z-index: 1; } #adminDashboard .dash-sidebar { width: 268px; border-left: 1px solid rgba(125,211,252,0.16); background: linear-gradient(180deg, rgba(7,44,60,0.86), rgba(4,24,34,0.94)); box-shadow: 14px 0 44px rgba(2,10,16,0.5); backdrop-filter: blur(18px); } #adminDashboard .dash-brand { font-size: 1.22em; letter-spacing: 0.4px; padding-bottom: 18px; background: linear-gradient(120deg, #e0fbff, #67e8f9 45%, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(34,211,238,0.35)); } #adminDashboard .dash-user-info { margin: 0 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(34,211,238,0.16), rgba(20,184,166,0.05)); border: 1px solid rgba(125,211,252,0.18); } #adminDashboard .dash-avatar { filter: drop-shadow(0 3px 10px rgba(251,191,36,0.5)); } #adminDashboard .dash-nav { padding: 0 14px; gap: 4px; } #adminDashboard .dash-nav-item { border-radius: 14px; border: 1px solid transparent; position: relative; } #adminDashboard .dash-nav-item:hover { background: rgba(103,232,249,0.09); border-color: rgba(125,211,252,0.2); color: #e6feff; } #adminDashboard .dash-nav-item.active { background: linear-gradient(135deg, rgba(8,145,178,0.95), rgba(13,148,136,0.9)); color: #f0feff; font-weight: 700; border-color: rgba(191,240,255,0.25); box-shadow: 0 10px 26px rgba(8,145,178,0.34), inset 0 1px 0 rgba(255,255,255,0.18); } #adminDashboard .dash-nav-item.active::after { content: ''; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 4px; height: 58%; border-radius: 4px; background: linear-gradient(180deg, #67e8f9, #22d3ee); box-shadow: 0 0 14px #22d3ee; } #adminDashboard .dash-nav-group-title { border-radius: 14px; } #adminDashboard .dash-nav-group-title:hover { background: rgba(103,232,249,0.09); color: #e6feff; } #adminDashboard .dash-btn-back { border-radius: 16px; border-color: rgba(103,232,249,0.45); background: rgba(103,232,249,0.07); color: #a5f3fc; font-weight: 600; } #adminDashboard .dash-btn-back:hover { background: linear-gradient(135deg, rgba(8,145,178,0.9), rgba(13,148,136,0.85)); color: #f0feff; } #adminDashboard .dash-header { background: linear-gradient(180deg, rgba(6,40,54,0.92), rgba(4,24,34,0.66)); border-bottom: 1px solid rgba(125,211,252,0.16); backdrop-filter: blur(16px); } #adminDashboard .dash-header h2 { color: #c9f6ff; font-weight: 800; letter-spacing: 0.2px; } #adminDashboard .dash-search, #adminDashboard .dash-btn-sm { border-radius: 14px; background: rgba(4,26,36,0.7); border-color: rgba(125,211,252,0.2); color: #d9f7ff; } #adminDashboard .dash-btn-sm:hover { background: rgba(34,211,238,0.16); border-color: rgba(103,232,249,0.4); } #adminDashboard .dash-content { position: relative; z-index: 1; } #adminDashboard .dash-content > * { animation: aquaRise 0.42s cubic-bezier(0.4,0,0.2,1) both; } #adminDashboard .dash-content > *:nth-child(2) { animation-delay: 0.04s; } #adminDashboard .dash-content > *:nth-child(3) { animation-delay: 0.08s; } #adminDashboard .dash-content > *:nth-child(4) { animation-delay: 0.12s; } #adminDashboard .dash-content > *:nth-child(5) { animation-delay: 0.16s; } #adminDashboard .dash-content::-webkit-scrollbar { width: 9px; } #adminDashboard .dash-content::-webkit-scrollbar-track { background: rgba(125,211,252,0.05); } #adminDashboard .dash-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #22d3ee, #0891b2); border-radius: 9px; } #adminDashboard .dash-chart-area { background: linear-gradient(150deg, rgba(10,56,72,0.6), rgba(5,28,38,0.72)); border: 1px solid rgba(125,211,252,0.15); border-radius: 22px; box-shadow: 0 20px 48px rgba(2,10,16,0.36), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(14px); } #adminDashboard .dash-chart-area h4 { display: flex; align-items: center; gap: 10px; color: #c9f6ff; } #adminDashboard .dash-chart-area h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(125,211,252,0.35), transparent); } #adminDashboard .dash-kpi { position: relative; overflow: hidden; border-radius: 20px; background: linear-gradient(155deg, rgba(12,62,80,0.72), rgba(5,28,38,0.6)); border: 1px solid rgba(125,211,252,0.18); backdrop-filter: blur(12px); } #adminDashboard .dash-kpi::before { content: ''; position: absolute; inset: 0; background: radial-gradient(130px 66px at 50% 0%, rgba(103,232,249,0.22), transparent 72%); } #adminDashboard .dash-kpi:hover { transform: translateY(-4px); border-color: rgba(103,232,249,0.42); box-shadow: 0 18px 40px rgba(8,145,178,0.3); } #adminDashboard .dash-kpi .kpi-icon { filter: drop-shadow(0 5px 14px rgba(34,211,238,0.4)); } #adminDashboard .dash-kpi .kpi-val { background: linear-gradient(120deg, #e0fbff, #67e8f9 55%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.5px; } #adminDashboard .dash-report-row { background: rgba(125,211,252,0.05); border: 1px solid rgba(125,211,252,0.11); border-radius: 16px; } #adminDashboard .dash-report-row:hover { background: rgba(103,232,249,0.09); border-color: rgba(103,232,249,0.38); transform: translateX(-2px); } #adminDashboard .dash-report-actions { gap: 8px; } #adminDashboard .dash-report-actions button { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 0.9em; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(125,211,252,0.1); border: 1px solid rgba(125,211,252,0.22); color: #cffafe; } #adminDashboard .dash-report-actions button:hover { transform: translateY(-2px) scale(1.07); box-shadow: 0 8px 20px rgba(8,145,178,0.35); } #adminDashboard .dash-report-actions button:disabled { opacity: 0.28; cursor: not-allowed; transform: none; box-shadow: none; } #adminDashboard .dash-report-actions .dash-btn-view { background: linear-gradient(135deg, #0891b2, #0e7490); border-color: transparent; } #adminDashboard .dash-report-actions .dash-btn-edit { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: transparent; } #adminDashboard .dash-report-actions .dash-btn-delete { background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: transparent; } #adminDashboard .dash-report-actions .dash-btn-copy { background: linear-gradient(135deg, #8b5cf6, #6d28d9); border-color: transparent; } #adminDashboard .dash-report-actions .dash-btn-move { background: linear-gradient(135deg, #0d9488, #0f766e); border-color: transparent; } #adminDashboard .dash-report-row td { color: var(--text); } #adminDashboard table tr:first-child th { background: rgba(34,211,238,0.12) !important; } #adminDashboard td .dash-report-actions button { width: 32px; height: 32px; } #adminDashboard .btn-primary { border-radius: 16px; background: linear-gradient(135deg, #0891b2, #0d9488); box-shadow: 0 12px 28px rgba(8,145,178,0.3); } #adminDashboard .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(8,145,178,0.42); } #adminDashboard .btn-outline { border-radius: 16px; border-color: rgba(103,232,249,0.45); background: rgba(103,232,249,0.06); } #adminDashboard .btn-outline:hover { background: rgba(103,232,249,0.14); } #adminDashboard .rf-section, #adminDashboard .dash-empty { border-radius: 18px; } #adminDashboard .rf-field input, #adminDashboard .rf-field select, #adminDashboard .rf-field textarea, #adminDashboard .img-upload-area { background: rgba(4,24,34,0.66); border: 1px solid rgba(125,211,252,0.22); border-radius: 12px; color: var(--text); } #adminDashboard .rf-field input:focus, #adminDashboard .rf-field select:focus, #adminDashboard .rf-field textarea:focus { border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(34,211,238,0.14); } #adminDashboard .rf-field label { color: #a5f3fc; } #adminDashboard .rv-summary { background: linear-gradient(135deg, rgba(8,145,178,0.28), rgba(13,148,136,0.16)); border: 1px solid rgba(125,211,252,0.22); border-radius: 20px; backdrop-filter: blur(12px); } #adminDashboard .dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } #adminDashboard .dash-section-head h4 { color: #c9f6ff; font-size: 1.05em; } #adminDashboard .dash-head-actions { display: flex; gap: 8px; flex-wrap: wrap; } #adminDashboard .dash-head-actions .btn-primary, #adminDashboard .dash-head-actions .btn-outline { padding: 9px 20px; font-size: 0.86em; } #adminDashboard .dash-item-icon { font-size: 1.6em; line-height: 1; filter: drop-shadow(0 4px 12px rgba(34,211,238,0.35)); } #adminDashboard .dash-plain-input { margin-top: 6px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(125,211,252,0.22); background: rgba(4,24,34,0.66); color: var(--text); font-family: inherit; } #adminDashboard .dash-plain-input:focus { outline: none; border-color: #67e8f9; } #adminDashboard .dash-upload-area { border: 1px dashed rgba(103,232,249,0.35); } #adminDashboard .dash-member-row { padding: 10px; margin-bottom: 6px; } /* نافذة تعديل العنصر تظهر فوق لوحة التحكم */ #adminEditModal { z-index: 3000; } #adminEditModal .modal-content { background: linear-gradient(160deg, rgba(7,44,60,0.98), rgba(4,22,31,0.99)); border: 1px solid rgba(125,211,252,0.24); box-shadow: 0 26px 64px rgba(2,10,16,0.6); } #adminEditModal .admin-field-group label { color: #a5f3fc; } #adminEditModal input, #adminEditModal textarea, #adminEditModal select { border-radius: 12px; background: rgba(4,24,34,0.7); } /* ========== AQUA COMPACT (إحكام لوحة التحكم) ========== */ #adminDashboard .dash-sidebar { width: 216px; } #adminDashboard .dash-brand { font-size: 1.05em; padding: 0 14px 12px; } #adminDashboard .dash-user-info { margin: 0 10px 10px; padding: 8px 12px; border-radius: 13px; font-size: 0.86em; } #adminDashboard .dash-avatar { font-size: 1.25em; } #adminDashboard .dash-nav { padding: 0 10px; gap: 1px; } #adminDashboard .dash-nav-item, #adminDashboard .dash-nav-group-title { padding: 8px 11px; font-size: 0.84em; border-radius: 11px; gap: 8px; } #adminDashboard .dash-nav-item span, #adminDashboard .dash-nav-group-title span:first-child { font-size: 1em; width: 18px; } #adminDashboard .dash-nav-item.sub { padding-right: 26px; font-size: 0.8em; } #adminDashboard .dash-nav-group.open .dash-nav-sub { max-height: 900px; } #adminDashboard .dash-nav-item.active::after { right: -9px; height: 52%; } #adminDashboard .dash-sidebar-footer { padding: 10px 12px; } #adminDashboard .dash-btn-back { padding: 8px; font-size: 0.82em; border-radius: 12px; } #adminDashboard .dash-header { padding: 9px 16px; } #adminDashboard .dash-header h2 { font-size: 1.05em; } #adminDashboard .dash-header-title { gap: 8px; } #adminDashboard .dash-search { width: 168px; padding: 6px 10px; font-size: 0.8em; border-radius: 11px; } #adminDashboard .dash-btn-sm { padding: 6px 11px; font-size: 0.8em; border-radius: 11px; } #adminDashboard .dash-content { padding: 14px 16px; } #adminDashboard .dash-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; margin-bottom: 14px; } #adminDashboard .dash-kpi { padding: 11px 8px; border-radius: 14px; } #adminDashboard .dash-kpi .kpi-icon { font-size: 1.3em; margin-bottom: 3px; } #adminDashboard .dash-kpi .kpi-val { font-size: 1.3em; } #adminDashboard .dash-kpi .kpi-label { font-size: 0.72em; } #adminDashboard .dash-chart-area { padding: 13px 15px; border-radius: 16px; margin-bottom: 12px; } #adminDashboard .dash-chart-area h4 { font-size: 0.92em; margin-bottom: 8px; } #adminDashboard .dash-section-head { margin-bottom: 12px; } #adminDashboard .dash-section-head h4 { font-size: 0.95em; } #adminDashboard .dash-head-actions { gap: 6px; } #adminDashboard .dash-head-actions .btn-primary, #adminDashboard .dash-head-actions .btn-outline { padding: 7px 14px; font-size: 0.8em; } #adminDashboard .dash-item-icon { font-size: 1.3em; } #adminDashboard .dash-report-row { padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; font-size: 0.88em; } #adminDashboard .dash-member-row { padding: 6px 9px; margin-bottom: 4px; } #adminDashboard .dash-report-stats { gap: 8px; } #adminDashboard .dash-report-stats span { font-size: 0.78em; } #adminDashboard .dash-report-actions, #adminDashboard td .dash-report-actions { gap: 5px; } #adminDashboard .dash-report-actions button, #adminDashboard td .dash-report-actions button { width: 28px; height: 28px; font-size: 0.8em; } #adminDashboard table th, #adminDashboard table td { padding: 7px 9px !important; font-size: 0.85em; } #adminDashboard .rf-section { padding: 12px; margin-bottom: 10px; } #adminDashboard .rf-section h4 { font-size: 0.92em; margin-bottom: 8px; } #adminDashboard .rf-field { margin-bottom: 7px; } #adminDashboard .rf-field label { font-size: 0.76em; } #adminDashboard .rf-field input, #adminDashboard .rf-field select, #adminDashboard .rf-field textarea { padding: 7px 10px; font-size: 0.86em; } #adminDashboard .btn-primary, #adminDashboard .btn-outline { padding: 8px 16px; font-size: 0.85em; } #adminDashboard .dash-empty { padding: 26px; } #adminDashboard .dash-empty .empty-icon { font-size: 2.6em; } @media(max-width:768px) { #adminDashboard .dash-sidebar { width: 78%; max-width: 236px; } #adminDashboard .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } #adminDashboard .dash-report-actions button, #adminDashboard td .dash-report-actions button { width: 32px; height: 32px; } #adminDashboard .dash-content { padding: 12px; } #adminDashboard table th, #adminDashboard table td { padding: 6px !important; font-size: 0.78em; } } /* ========== قالب أكوا — الموقع + لوحة التحكم (ستايل AQUA M'DIQ PRO) ========== */ body.aqua-compact { --primary: #1e4a5d; --primary-dark: #16394a; --primary-light: #1e4a5d; --accent: #19b9a5; --accent-light: #0f8f80; --bg-dark: #f7fbfb; --bg-card: #ffffff; --bg-card-hover: #ffffff; --text: #334155; --text-muted: #64748b; --text-heading: #1e4a5d; --glass: rgba(255,255,255,0.96); --glass-light: rgba(25,185,165,0.06); --border-subtle: rgba(30,74,93,0.10); --gradient-card: linear-gradient(160deg, #ffffff, #f6fcfb); --shadow: 0 10px 30px rgba(30,74,93,0.10); --glow: 0 12px 30px rgba(25,185,165,0.16); --radius: 14px; --radius-sm: 10px; } body.aqua-compact.light-mode { --bg-dark: #f7fbfb; --bg-card: #ffffff; --bg-card-hover: #ffffff; --text: #334155; --text-muted: #64748b; --text-heading: #1e4a5d; } body.aqua-compact #gameContainer { background: radial-gradient(900px 460px at 92% -10%, rgba(25,185,165,0.12), transparent 60%), radial-gradient(700px 420px at 4% 108%, rgba(30,74,93,0.08), transparent 60%), linear-gradient(180deg, #f7fbfb 0%, #eef6f7 100%); } body.aqua-compact #ui-layer::before { background: radial-gradient(ellipse at 20% 80%, rgba(25,185,165,0.08) 0%, transparent 55%), radial-gradient(ellipse at 82% 10%, rgba(30,74,93,0.06) 0%, transparent 45%); } body.aqua-compact #navbar { background-color: #1e4a5d; background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px), linear-gradient(100deg, #1e4a5d 0%, #1e4a5d 45%, #19b9a5 100%); background-size: 24px 24px, 100% 100%; border-bottom-color: rgba(255,255,255,0.16); } body.aqua-compact #navbar.scrolled { box-shadow: 0 8px 24px rgba(30,74,93,0.18); } body.aqua-compact .nav-brand { color: #ffffff; } body.aqua-compact .nav-links a, body.aqua-compact .nav-links .nav-link-single, body.aqua-compact .nav-drop-btn { color: rgba(255,255,255,0.92); } body.aqua-compact .nav-links a:hover, body.aqua-compact .nav-links a.active, body.aqua-compact .nav-links .nav-link-single:hover, body.aqua-compact .nav-drop-btn:hover { background: rgba(255,255,255,0.16); color: #ffffff; } body.aqua-compact .nav-drop-menu { background: #ffffff; border-color: rgba(30,74,93,0.12); box-shadow: 0 18px 40px rgba(30,74,93,0.16); } body.aqua-compact .nav-drop-menu a { color: #334155; } body.aqua-compact .nav-drop-menu a:hover { background: rgba(25,185,165,0.1); color: #0f8f80; } body.aqua-compact .nav-hamburger { color: #ffffff; } body.aqua-compact #mobileMenu { background: #ffffff; border-bottom-color: rgba(30,74,93,0.12); } body.aqua-compact #mobileMenu a { color: #1e4a5d; } body.aqua-compact #mobileMenu a:hover { background: rgba(25,185,165,0.1); } body.aqua-compact .site-section { padding: 64px 20px; max-width: 1100px; margin: 0 auto; } body.aqua-compact .section-header { margin-bottom: 32px; } body.aqua-compact .section-header h2 { color: #1e4a5d; font-size: 1.85em; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; } body.aqua-compact .section-header p { font-size: 0.98em; } body.aqua-compact .section-divider { width: 60px; height: 3px; background: linear-gradient(90deg, #1e4a5d, #19b9a5); } /* الواجهة: شريط بتدرّج أزرق→فيروزي مع نقاط شفافة (مثل قالب المرجع) */ body.aqua-compact .hero-section, body.aqua-compact .slider-container { min-height: 68vh; } body.aqua-compact .hero-section { max-width: none; padding: 0; } body.aqua-compact .slide { background: linear-gradient(135deg, #1e4a5d 0%, #1e4a5d 45%, #19b9a5 100%) !important; } body.aqua-compact .slide::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.7) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.12; } body.aqua-compact .slide-content { max-width: 700px; } body.aqua-compact .slide-content h1 { font-size: 2.9em; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; } body.aqua-compact .slide-content p { font-size: 1.08em; font-weight: 500; opacity: 0.88; line-height: 1.7; } body.aqua-compact .slider-dot { width: 10px; height: 10px; background: rgba(255,255,255,0.5); } body.aqua-compact .slider-dot.active { background: #ffffff; border-color: transparent; } body.aqua-compact .slider-nav { background: rgba(255,255,255,0.16); } body.aqua-compact .slider-nav:hover { background: rgba(255,255,255,0.3); } body.aqua-compact .cards-grid { gap: 20px; } body.aqua-compact .card { padding: 20px; border-radius: 12px; background: #ffffff; border: 1px solid #e6eff0; box-shadow: 0 1px 2px rgba(30,74,93,0.04); backdrop-filter: none; } body.aqua-compact .card::before { display: none; } body.aqua-compact .card:hover { background: #ffffff; border-color: #dbe7e8; box-shadow: 0 4px 6px rgba(30,74,93,0.08); transform: translateY(-2px); } body.aqua-compact .card-icon { width: 44px; height: 44px; margin: 0 0 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35em; border-radius: 10px; background: rgba(25,185,165,0.10); color: #0f8f80; } body.aqua-compact .card h3 { color: #1e4a5d; font-size: 1.05em; font-weight: 700; margin-bottom: 6px; } body.aqua-compact .card p { color: #64748b; font-size: 0.85em; line-height: 1.7; } body.aqua-compact .card-btn, body.aqua-compact .btn-primary { background: #1e4a5d; color: #ffffff; border-radius: 10px; padding: 10px 24px; font-size: 0.9em; font-weight: 600; box-shadow: 0 1px 2px rgba(30,74,93,0.1); } body.aqua-compact .card-btn:hover, body.aqua-compact .btn-primary:hover { background: #16394a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,74,93,0.2); } body.aqua-compact .slide-content .btn-hero { background: #ffffff; color: #1e4a5d; border-radius: 10px; padding: 12px 32px; font-size: 0.98em; font-weight: 600; } body.aqua-compact .slide-content .btn-hero:hover { background: rgba(255,255,255,0.9); transform: none; box-shadow: 0 6px 18px rgba(0,0,0,0.18); } body.aqua-compact .btn-outline { border-radius: 10px; border: 1px solid #1e4a5d; color: #1e4a5d; background: transparent; font-weight: 600; } body.aqua-compact .btn-outline:hover { background: rgba(30,74,93,0.06); } body.aqua-compact .ctab, body.aqua-compact .dash-tab { border-radius: 10px; padding: 8px 18px; font-size: 0.86em; font-weight: 600; background: #ffffff; border-color: #e6eff0; color: #1e4a5d; } body.aqua-compact .ctab.active, body.aqua-compact .ctab:hover, body.aqua-compact .dash-tab.active { background: #1e4a5d; color: #ffffff; border-color: transparent; } body.aqua-compact .stat-card, body.aqua-compact .modal-content { border-radius: var(--radius); } body.aqua-compact .stat-card { background: #ffffff; border-color: #e6eff0; box-shadow: 0 6px 20px rgba(30,74,93,0.07); } body.aqua-compact .stat-number { color: #0f8f80; } body.aqua-compact .creature-card .creature-name, body.aqua-compact .article-card .article-tag, body.aqua-compact .article-card .article-tag a { color: #0f8f80; } body.aqua-compact .status-stable { background: rgba(25,185,165,0.14); color: #0f8f80; } body.aqua-compact .status-threatened { background: rgba(245,158,11,0.16); color: #b45309; } body.aqua-compact .status-endangered { background: rgba(239,68,68,0.14); color: #b91c1c; } body.aqua-compact .status-unknown { background: rgba(100,116,139,0.14); color: #475569; } body.aqua-compact .article-card .article-tag { background: rgba(25,185,165,0.12); } body.aqua-compact .modal-content { background: #ffffff; border-color: #e6eff0; box-shadow: 0 24px 60px rgba(30,74,93,0.20); color: #334155; } body.aqua-compact #footer { background: #ffffff; border-top-color: #e6eff0; color: #64748b; } body.aqua-compact .footer-brand { color: #0f8f80; } body.aqua-compact #scrollTopBtn { background: linear-gradient(135deg, #19b9a5, #0f8f80); box-shadow: 0 10px 24px rgba(25,185,165,0.3); } body.aqua-compact .edit-mode [contenteditable="true"] { outline-color: #19b9a5 !important; background: rgba(25,185,165,0.08); } body.aqua-compact .inline-edit-form input, body.aqua-compact .inline-edit-form textarea, body.aqua-compact .inline-edit-form select, body.aqua-compact .admin-field-group input, body.aqua-compact .admin-field-group textarea, body.aqua-compact .admin-field-group select, body.aqua-compact .rf-field input, body.aqua-compact .rf-field select, body.aqua-compact .rf-field textarea, body.aqua-compact .ae-field input, body.aqua-compact .ae-field select, body.aqua-compact .ae-field textarea, body.aqua-compact .login-form input, body.aqua-compact #importTextarea, body.aqua-compact .ae-content-editor { background: #f8fcfc; border-color: #dfeaea; color: #334155; } body.aqua-compact .rf-field label, body.aqua-compact .ae-field label, body.aqua-compact .admin-field-group label { color: #0f8f80; } /* لوحة التحكم بنفس القالب */ body.aqua-compact #adminDashboard { background: radial-gradient(900px 460px at 90% -10%, rgba(25,185,165,0.12), transparent 60%), linear-gradient(180deg, #f7fbfb 0%, #eef6f7 100%); } body.aqua-compact #adminDashboard::after { display: none; } body.aqua-compact #adminDashboard .dash-sidebar { background: linear-gradient(170deg, #1e4a5d 0%, #17796f 58%, #19b9a5 100%); border-left-color: rgba(255,255,255,0.14); box-shadow: 14px 0 40px rgba(30,74,93,0.16); } body.aqua-compact #adminDashboard .dash-brand { background: none; color: #ffffff; filter: none; } body.aqua-compact #adminDashboard .dash-user-info { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #eafcf9; } body.aqua-compact #adminDashboard .dash-nav-item, body.aqua-compact #adminDashboard .dash-nav-group-title { color: rgba(255,255,255,0.88); } body.aqua-compact #adminDashboard .dash-nav-item:hover, body.aqua-compact #adminDashboard .dash-nav-group-title:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.24); color: #ffffff; } body.aqua-compact #adminDashboard .dash-nav-item.active { background: #ffffff; color: #0f8f80; box-shadow: 0 10px 24px rgba(3,40,45,0.24); } body.aqua-compact #adminDashboard .dash-nav-item.active::after { background: #ffffff; box-shadow: none; } body.aqua-compact #adminDashboard .dash-btn-back { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); color: #ffffff; } body.aqua-compact #adminDashboard .dash-btn-back:hover { background: #ffffff; color: #0f8f80; } body.aqua-compact #adminDashboard .dash-header { background: #ffffff; border-bottom-color: #e6eff0; } body.aqua-compact #adminDashboard .dash-header h2 { color: #1e4a5d; } body.aqua-compact #adminDashboard .dash-search, body.aqua-compact #adminDashboard .dash-btn-sm { background: #f4f9f9; border-color: #dfeaea; color: #334155; } body.aqua-compact #adminDashboard .dash-btn-sm:hover { background: rgba(25,185,165,0.12); border-color: rgba(25,185,165,0.4); } body.aqua-compact #adminDashboard .dash-chart-area, body.aqua-compact #adminDashboard .dash-kpi, body.aqua-compact #adminDashboard .rf-section, body.aqua-compact #adminDashboard .dash-empty { background: #ffffff; border: 1px solid #e6eff0; box-shadow: 0 6px 22px rgba(30,74,93,0.07); backdrop-filter: none; } body.aqua-compact #adminDashboard .dash-kpi::before { display: none; } body.aqua-compact #adminDashboard .dash-chart-area h4, body.aqua-compact #adminDashboard .dash-section-head h4 { color: #1e4a5d; } body.aqua-compact #adminDashboard .dash-chart-area h4::after { background: linear-gradient(90deg, rgba(25,185,165,0.45), transparent); } body.aqua-compact #adminDashboard .dash-kpi .kpi-val { background: none; color: #0f8f80; -webkit-text-fill-color: #0f8f80; } body.aqua-compact #adminDashboard .dash-kpi:hover { border-color: rgba(25,185,165,0.45); box-shadow: 0 14px 32px rgba(25,185,165,0.18); } body.aqua-compact #adminDashboard .dash-report-row { background: #f8fcfc; border-color: #e6eff0; } body.aqua-compact #adminDashboard .dash-report-row:hover { background: rgba(25,185,165,0.07); border-color: rgba(25,185,165,0.35); } body.aqua-compact #adminDashboard .dash-report-actions button { background: #f1f7f7; border-color: #dfeaea; color: #334155; } body.aqua-compact #adminDashboard table tr:first-child th { background: rgba(25,185,165,0.10) !important; } body.aqua-compact #adminDashboard .rf-field label, body.aqua-compact #adminDashboard .admin-field-group label { color: #0f8f80; } body.aqua-compact #adminDashboard .rf-field input, body.aqua-compact #adminDashboard .rf-field select, body.aqua-compact #adminDashboard .rf-field textarea, body.aqua-compact #adminDashboard .img-upload-area, body.aqua-compact #adminDashboard .dash-plain-input { background: #f8fcfc; border-color: #dfeaea; color: #334155; border-radius: 12px; } body.aqua-compact #adminDashboard .rv-summary { background: linear-gradient(135deg, rgba(25,185,165,0.14), rgba(30,74,93,0.08)); border-color: rgba(25,185,165,0.28); } body.aqua-compact #adminDashboard .rv-summary h4, body.aqua-compact #adminDashboard .rv-summary p { color: #1e4a5d; } body.aqua-compact #adminDashboard .rv-section { border-right-color: #19b9a5; } body.aqua-compact #adminEditModal .modal-content { background: #ffffff; border-color: #e6eff0; } body.aqua-compact #adminEditModal .admin-field-group label { color: #0f8f80; } body.aqua-compact #adminEditModal input, body.aqua-compact #adminEditModal textarea, body.aqua-compact #adminEditModal select { background: #f8fcfc; border-color: #dfeaea; color: #334155; } @media(max-width:600px) { body.aqua-compact .site-section { padding: 34px 14px; } body.aqua-compact .card { padding: 18px; } } /* Institutional and youth-friendly visual refinement */ :root { --institutional-blue: #164c91; --institutional-ink: #142c4c; } #navbar { box-shadow: 0 4px 24px rgba(12,45,85,.10); } .nav-brand { font-weight: 900; letter-spacing: -.025em; } .nav-hamburger { cursor: pointer; border: 1px solid rgba(22,76,145,.22); border-radius: 12px; padding: 9px 13px; background: rgba(255,255,255,.9); color: var(--institutional-blue); font-size: 22px; } #footer { border-top: 4px solid var(--institutional-blue); } #footer .footer-brand { font-weight: 900; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #f6b83b !important; outline-offset: 3px; } @media (max-width: 768px) { #navbar .nav-inner { min-width: 0; } .nav-brand { font-size: clamp(15px,4.5vw,22px); } #mobileMenu { max-height: calc(100dvh - 75px); overflow-y: auto; overscroll-behavior: contain; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Professional institutional dashboard */ #adminDashboard { --dash-blue:#1756a0; --dash-navy:#102d51; } #adminDashboard .dash-sidebar { background:linear-gradient(180deg,#0f315b,#10223e);border-left:1px solid #294669;box-shadow:-8px 0 35px rgba(11,32,59,.14); } #adminDashboard .dash-brand { font-size:1.35rem; font-weight:900; letter-spacing:-.02em; padding-block:12px 20px; } #adminDashboard .dash-nav-item { border-radius:11px; margin-inline:9px; transition:background .16s ease; } #adminDashboard .dash-nav-item.active { background:#2465b4; color:white; box-shadow:0 5px 15px rgba(0,0,0,.13); } #adminDashboard .dash-header { min-height:76px; padding-inline:clamp(14px,2vw,30px); } #adminDashboard .dash-live-status { font-size:12px; font-weight:700; color:#16835b; background:#e7f8ef; border:1px solid #bde7d0; padding:7px 12px; border-radius:30px; white-space:nowrap; } #adminDashboard .dash-content { padding:clamp(14px,2.5vw,30px); } #adminDashboard .dash-welcome { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; background:linear-gradient(115deg,#113e74,#2469b8); color:#fff; padding:clamp(20px,3vw,32px); border-radius:20px; margin-bottom:22px; box-shadow:0 14px 30px rgba(18,68,127,.18); } #adminDashboard .dash-welcome h3 {font-size:clamp(20px,2.4vw,29px);font-weight:900;margin:7px 0;} #adminDashboard .dash-welcome p {color:#dceafa;font-size:14px;} #adminDashboard .dash-eyebrow {font-size:12px;letter-spacing:.03em;color:#b7ddff;font-weight:700;} #adminDashboard .dash-welcome-actions {display:flex;flex-wrap:wrap;gap:9px;} #adminDashboard .dash-welcome-actions button {border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;padding:11px 15px;border-radius:11px;font:inherit;font-weight:700;cursor:pointer;} #adminDashboard .dash-welcome-actions button:hover {background:rgba(255,255,255,.27);} #adminDashboard .dash-kpi {border-radius:17px;box-shadow:0 5px 20px rgba(14,55,99,.07);} #adminDashboard .dash-chart-area {border-radius:17px;box-shadow:0 5px 20px rgba(14,55,99,.06);} @media(max-width:850px){#adminDashboard .dash-live-status {display:none;}#adminDashboard .dash-header-actions {flex-wrap:wrap;}#adminDashboard .dash-search {max-width:180px;}#adminDashboard .dash-welcome-actions {width:100%;}} .institution-form {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;align-items:end;} .institution-form label {display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:13px;} .institution-form input {width:100%;border:1px solid #bdd0e3;border-radius:10px;padding:11px;background:#fff;color:#18314c;font:inherit;} .institution-records {display:grid;gap:10px;} .institution-record {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px;border:1px solid #dce7f2;border-radius:13px;background:#f8fbff;color:#18314c;} .institution-record strong,.institution-record small {display:block;} .institution-record small {color:#64748b;margin-top:5px;} .institution-status {background:#e7effb;color:#194f8e;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;} .institution-actions {display:flex;gap:7px;} .institution-actions button {border:1px solid #b7cee6;background:white;color:#194f8e;border-radius:9px;padding:8px 12px;cursor:pointer;} #mainContent > section[hidden] {display:none!important;} .dt-simple-start {background:linear-gradient(115deg,#eaf5ff,#f4fbff);border:1px solid #bcd9f3;color:#173b61;padding:20px;border-radius:18px;margin:18px 0;} .dt-simple-start p {margin:8px 0 14px;color:#3d5974;} .dt-simple-actions {display:flex;flex-wrap:wrap;gap:10px;} .dt-simple-actions button {border:1px solid #a9cce9;background:white;color:#124a81;padding:11px 16px;border-radius:12px;cursor:pointer;font:inherit;font-weight:700;} .dt-simple-actions button:hover {background:#dceeff;} #editorWorkspace {position:fixed;inset:0;z-index:99999;background:rgba(9,27,48,.77);display:grid;place-items:center;padding:18px;overflow:auto;direction:rtl;} #editorWorkspace .editor-panel {background:#fff;color:#18314c;border-radius:20px;width:min(620px,100%);padding:24px;max-height:92vh;overflow:auto;} #editorWorkspace header {display:flex;justify-content:space-between;align-items:center;gap:12px;} #editorWorkspace label {display:block;margin:12px 0;font-weight:700;} #editorWorkspace input,#editorWorkspace textarea {display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #b8cddd;border-radius:10px;font:inherit;} #editorWorkspace button {background:#1756a0;color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;font:inherit;} /* plagebleu — مؤسساتي معاصر: أزرق ملكي + تركواز + ذهبي هادئ */ :root {--primary:#1763ae;--primary-dark:#103d74;--primary-light:#32a9d5;--accent:#f0ad38;--accent-light:#f8c768;--bg-dark:#eef5fc;--bg-card:#fff;--bg-card-hover:#f8fbff;--text:#193654;--text-muted:#56718c;--text-heading:#144b88;--glass:rgba(255,255,255,.96);--glass-light:rgba(20,95,170,.035);--border-subtle:rgba(20,78,140,.13);--gradient-card:linear-gradient(145deg,#fff,#f2f8ff);--shadow:0 12px 35px rgba(21,66,110,.12)} #gameContainer {background:linear-gradient(165deg,#f6faff 0%,#e9f4fd 50%,#f5faff 100%)} #navbar {background:rgba(255,255,255,.97)!important;border-bottom:1px solid #dce9f5!important;box-shadow:0 5px 20px rgba(22,66,110,.09)!important} .nav-inner {max-width:1600px;gap:12px;padding:12px 20px;flex-wrap:nowrap} .nav-brand {color:#134a83!important} .nav-links a,.nav-drop-btn {color:#254969!important} .nav-links a:hover,.nav-drop-btn:hover {background:#e7f3ff!important;color:#125ca7!important} .nav-drop-menu {background:#fff!important;border:1px solid #d5e6f5!important;box-shadow:0 18px 35px rgba(14,49,91,.13)!important} .nav-drop-menu a {color:#244663!important} #publicAccountBar {display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex-shrink:0;direction:rtl} #publicAccountBar a,.mobile-account-actions a {display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border-radius:12px;text-decoration:none;font-weight:800;font-size:14px;white-space:nowrap;transition:.2s} .account-login {background:#e9f2ff;color:#14518d;border:1px solid #cbdff3} .account-register {background:linear-gradient(120deg,#1559a3,#128ab3);color:white;box-shadow:0 5px 14px rgba(20,90,170,.2)} #publicAccountBar a:hover {transform:translateY(-2px);filter:brightness(.97)} #mobileMenu {background:#fff!important;box-shadow:0 16px 24px rgba(20,70,115,.15)!important} #mobileMenu a,.mobile-nav-group-title {color:#244a70!important} .mobile-account-actions {display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px 8px 14px;border-bottom:1px solid #e0eaf5;margin-bottom:8px} .mobile-account-actions a:first-child {background:#e9f2ff;color:#14518d!important} .mobile-account-actions a:last-child {background:#1763ae;color:#fff!important} .site-section {color:#193654} @media(max-width:1100px){#publicAccountBar {gap:5px}#publicAccountBar a {padding:9px;font-size:12px}} @media(max-width:900px){#publicAccountBar {margin-inline-start:0;margin-inline-end:auto}#publicAccountBar a {min-height:38px}#mobileMenu {top:64px;max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain}} @media(max-width:480px){.nav-inner {gap:6px;padding:10px 9px}.nav-brand {font-size:16px!important}#publicAccountBar a {font-size:11px;padding:7px 8px}.nav-hamburger {font-size:1.5em;margin-right:0}#topControls {bottom:12px!important;left:8px!important}#topControls button {width:38px;height:38px}} /* original: digital-twin.css */ /* ========================================================= التوأم الرقمي البحري v2 — Marine Digital Twin Styles ========================================================= */ /* ---- Section ---- */ .dt2-section { padding: 60px 20px 50px; } /* ---- Time Bar ---- */ .dt2-time-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 18px; background: rgba(8,145,178,.1); border: 1px solid rgba(125,211,252,.14); border-radius: 14px; backdrop-filter: blur(8px); } .dt2-play-btn { padding: 7px 18px; background: rgba(59,130,246,.2); border: 1px solid rgba(59,130,246,.4); color: #93c5fd; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .85em; font-weight: 700; transition: all .2s; } .dt2-play-btn:hover { background: rgba(59,130,246,.35); } .dt2-speed-group { display: flex; align-items: center; gap: 5px; } .dt2-speed-lbl { font-size: .78em; color: var(--text-muted); } .dt2-spd { padding: 5px 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text-muted); border-radius: 7px; cursor: pointer; font-family: inherit; font-size: .78em; transition: all .2s; } .dt2-spd.active { background: rgba(8,145,178,.3); border-color: #38bdf8; color: #7dd3fc; font-weight: 700; } .dt2-spd:hover { border-color: rgba(125,211,252,.4); } .dt2-elapsed { font-size: .82em; color: var(--text-muted); } .dt2-elapsed strong { color: #7dd3fc; } .dt2-reset-btn { margin-right: auto; padding: 6px 14px; background: rgba(100,116,139,.15); border: 1px solid rgba(100,116,139,.3); color: var(--text-muted); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .8em; transition: all .2s; } .dt2-reset-btn:hover { background: rgba(100,116,139,.28); color: var(--text); } /* ---- Top Layout ---- */ .dt2-top { display: grid; grid-template-columns: 1fr 320px; gap: 18px; margin-bottom: 20px; align-items: start; } @media(max-width:1000px) { .dt2-top { grid-template-columns: 1fr; } } /* ---- Canvas ---- */ .dt2-sim-wrap { position: relative; width: 100%; height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(125,211,252,.22); box-shadow: 0 8px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); } .dt2-sim-wrap canvas { width: 100%; height: 100%; display: block; } .dt2-hud-tl { position: absolute; top: 12px; right: 12px; pointer-events: none; } .dt2-hud-tr { position: absolute; top: 12px; left: 12px; pointer-events: none; } .dt2-eco-pill, .dt2-fish-pill { padding: 5px 13px; border-radius: 20px; font-size: .8em; font-weight: 700; backdrop-filter: blur(10px); transition: background .5s; white-space: nowrap; } .dt2-eco-pill { background: rgba(16,185,129,.85); color: #fff; } .dt2-fish-pill { background: rgba(8,145,178,.8); color: #e0f2fe; } /* ---- KPI Column ---- */ .dt2-kpi-col { display: flex; flex-direction: column; gap: 14px; } /* Gauges */ .dt2-gauges-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dt2-gauge-box { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(8,145,178,.07); border: 1px solid rgba(125,211,252,.12); border-radius: 14px; padding: 10px 8px; transition: border-color .3s; } .dt2-gauge-box:hover { border-color: rgba(125,211,252,.3); } .dt2-gauge-box canvas { width: 80px !important; height: 80px !important; } .dt2-g-label { font-size: .72em; color: var(--text-muted); text-align: center; font-weight: 600; } /* Sensors */ .dt2-sensors { background: rgba(8,145,178,.07); border: 1px solid rgba(125,211,252,.12); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .dt2-sensor-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 7px; background: rgba(255,255,255,.03); font-size: .78em; } .dt2-s-ico { font-size: 1em; flex-shrink: 0; } .dt2-s-lbl { color: var(--text-muted); flex: 1; } .dt2-s-val { font-weight: 700; color: #7dd3fc; font-size: .95em; } /* Mini Economics */ .dt2-mini-econ { background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.15); border-radius: 14px; padding: 10px 14px; } .dt2-me-title { font-size: .8em; font-weight: 700; color: #fbbf24; margin-bottom: 8px; } .dt2-me-row { display: flex; justify-content: space-between; font-size: .78em; color: var(--text-muted); padding: 3px 0; } .dt2-me-row span:last-child { color: #7dd3fc; font-weight: 600; } .dt2-me-total { border-top: 1px solid rgba(251,191,36,.15); margin-top: 4px; padding-top: 6px; } .dt2-me-total span:last-child { color: #fbbf24 !important; font-weight: 800; font-size: 1.05em; } /* ---- Inputs Grid ---- */ .dt2-inputs-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 18px; } @media(max-width:1100px) { .dt2-inputs-grid { grid-template-columns: 1fr 1fr; } } @media(max-width:700px) { .dt2-inputs-grid { grid-template-columns: 1fr; } } /* ---- Panel ---- */ .dt2-panel { background: rgba(15,23,42,.75); border: 1px solid rgba(125,211,252,.1); border-radius: 16px; padding: 14px 16px; backdrop-filter: blur(10px); } .dt2-panel-hdr { font-size: .86em; font-weight: 700; color: #7dd3fc; margin-bottom: 14px; letter-spacing: .4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dt2-hdr-red { color: #fca5a5; } .dt2-hdr-green { color: #86efac; } .dt2-hdr-purple { color: #c4b5fd; } .dt2-panel-title { font-size: .86em; font-weight: 700; color: #7dd3fc; margin-bottom: 12px; } /* ---- Slider Row ---- */ .dt2-slider-row { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; } .dt2-sl-ico { font-size: 1.1em; flex-shrink: 0; width: 22px; text-align: center; } .dt2-sl-lbl { font-size: .74em; color: var(--text-muted); flex: 0 0 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dt2-sl-track { flex: 1; position: relative; height: 20px; display: flex; align-items: center; } .dt2-range { position: relative; z-index: 2; width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 4px; background: rgba(255,255,255,.08); outline: none; cursor: pointer; } .dt2-range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; cursor: pointer; transition: transform .15s; box-shadow: 0 0 6px rgba(0,0,0,.4); } .dt2-range::-webkit-slider-thumb:hover { transform: scale(1.25); } .dt2-range-red::-webkit-slider-thumb { background: #f87171; } .dt2-range-green::-webkit-slider-thumb { background: #4ade80; } .dt2-range-red::-webkit-slider-runnable-track { background: rgba(248,113,113,.15); border-radius: 4px; } .dt2-range-green::-webkit-slider-runnable-track { background: rgba(74,222,128,.15); border-radius: 4px; } .dt2-sl-val { font-size: .74em; font-weight: 700; color: var(--text-muted); min-width: 32px; text-align: left; } .dt2-x2 { padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--text-muted); font-size: .7em; cursor: pointer; font-family: inherit; transition: all .18s; white-space: nowrap; flex-shrink: 0; } .dt2-x2-red:hover { background: rgba(248,113,113,.2); border-color: #f87171; color: #fca5a5; } .dt2-x2-green:hover { background: rgba(74,222,128,.2); border-color: #4ade80; color: #86efac; } /* ---- Custom Inputs Panel ---- */ .dt2-custom-panel {} .dt2-add-btn { margin-right: auto; padding: 4px 12px; background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.3); color: #c4b5fd; border-radius: 7px; cursor: pointer; font-size: .75em; font-family: inherit; font-weight: 600; transition: all .2s; } .dt2-add-btn:hover { background: rgba(167,139,250,.28); } .dt2-ci-empty { text-align: center; color: var(--text-muted); font-size: .8em; padding: 20px 10px; line-height: 1.7; border: 1px dashed rgba(255,255,255,.08); border-radius: 10px; } /* Add Form */ .dt2-add-form { background: rgba(255,255,255,.03); border: 1px solid rgba(167,139,250,.15); border-radius: 12px; padding: 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; } .dt2-fi { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text); border-radius: 7px; padding: 7px 10px; font-family: inherit; font-size: .82em; outline: none; box-sizing: border-box; } .dt2-fi:focus { border-color: rgba(167,139,250,.5); } .dt2-form-row { display: flex; gap: 6px; flex-wrap: wrap; } .dt2-fs { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text); border-radius: 7px; padding: 5px 8px; font-family: inherit; font-size: .78em; cursor: pointer; flex: 1; min-width: 80px; } .dt2-form-btns { display: flex; gap: 8px; } .dt2-fbtn { flex: 1; padding: 7px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; font-size: .8em; font-weight: 700; transition: all .2s; } .dt2-fbtn-ok { background: rgba(167,139,250,.3); color: #c4b5fd; } .dt2-fbtn-ok:hover { background: rgba(167,139,250,.5); } .dt2-fbtn-cancel { background: rgba(100,116,139,.15); color: var(--text-muted); } /* Custom item */ .dt2-ci-item { background: rgba(255,255,255,.03); border: 1px solid rgba(167,139,250,.12); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .dt2-ci-hdr { display: flex; align-items: center; gap: 7px; font-size: .8em; font-weight: 600; color: var(--text); margin-bottom: 8px; flex-wrap: wrap; } .dt2-ci-badge { padding: 2px 7px; border-radius: 5px; font-size: .72em; font-weight: 700; } .dt2-ci-badge.bad { background: rgba(248,113,113,.15); color: #fca5a5; } .dt2-ci-badge.good { background: rgba(74,222,128,.15); color: #86efac; } .dt2-ci-rm { margin-right: auto; background: none; border: none; color: #64748b; cursor: pointer; font-size: .9em; padding: 0 4px; transition: color .2s; } .dt2-ci-rm:hover { color: #f87171; } .dt2-ci-ctrl { display: flex; align-items: center; gap: 6px; } .dt2-ci-ctrl .dt2-range { flex: 1; } /* ---- Scenarios Bar ---- */ .dt2-scenarios-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; margin-bottom: 18px; font-size: .82em; } .dt2-sc-title { color: var(--text-muted); font-weight: 600; } .dt2-sc-pill { padding: 6px 14px; background: rgba(8,145,178,.1); border: 1px solid rgba(125,211,252,.18); color: #7dd3fc; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: .82em; font-weight: 600; transition: all .2s; } .dt2-sc-pill:hover { background: rgba(8,145,178,.25); border-color: rgba(125,211,252,.4); transform: translateY(-1px); } .dt2-sc-danger { border-color: rgba(248,113,113,.25); color: #fca5a5; background: rgba(248,113,113,.08); } .dt2-sc-danger:hover { background: rgba(248,113,113,.2); } .dt2-sc-green { border-color: rgba(74,222,128,.25); color: #86efac; background: rgba(74,222,128,.08); } .dt2-sc-green:hover { background: rgba(74,222,128,.2); } /* ---- Main Chart ---- */ .dt2-chart-wrap { background: rgba(15,23,42,.75); border: 1px solid rgba(125,211,252,.1); border-radius: 16px; padding: 16px 20px; margin-bottom: 18px; backdrop-filter: blur(10px); } .dt2-chart-title { font-size: .88em; font-weight: 700; color: #7dd3fc; margin-bottom: 12px; } .dt2-chart-wrap canvas { width: 100% !important; border-radius: 8px; } .dt2-chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: .74em; color: var(--text-muted); } .dt2-leg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 5px; vertical-align: middle; } /* ---- Bottom Grid ---- */ .dt2-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media(max-width:768px) { .dt2-bottom-grid { grid-template-columns: 1fr; } } /* Species bars */ .dt2-sp-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .78em; } .dt2-sp-row:last-child { border-bottom: none; } .dt2-sp-ico { font-size: 1.15em; flex-shrink: 0; width: 22px; text-align: center; } .dt2-sp-name { color: var(--text-muted); flex: 0 0 110px; } .dt2-sp-track { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; } .dt2-sp-fill { height: 100%; border-radius: 4px; transition: width .8s ease; } .dt2-sp-val { min-width: 36px; text-align: left; font-weight: 700; color: var(--text); } /* Missions */ .dt2-mission { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 8px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: all .3s; } .dt2-mission.done { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.25); } .dt2-m-tit { font-size: .83em; font-weight: 700; color: var(--text); } .dt2-m-desc { font-size: .73em; color: var(--text-muted); margin-top: 2px; } .dt2-m-pts { font-weight: 800; color: #fbbf24; font-size: .85em; white-space: nowrap; } .dt2-mission.done .dt2-m-pts { color: #4ade80; } /* ---- Section Subtitle ---- */ .dt2-section-sub { font-size: 1.1em; font-weight: 700; color: var(--text-heading); text-align: center; margin-bottom: 12px; } /* ---- Map ---- */ .dt2-map-section { margin-bottom: 20px; } .dt2-map-wrap { border-radius: 18px; overflow: hidden; border: 1px solid rgba(125,211,252,.2); box-shadow: 0 6px 30px rgba(0,0,0,.38); } .dt2-map { width: 100%; height: 300px; position: relative; overflow: hidden; background: linear-gradient(180deg, #0369a1 0%, #0c4a6e 35%, #083854 65%, #052d3d 100%); } .dt2-map::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 40%, rgba(0,100,160,.55) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(0,80,130,.4) 0%, transparent 45%), radial-gradient(circle at 30% 70%, rgba(120,210,180,.18) 0%, transparent 25%), radial-gradient(circle at 75% 75%, rgba(60,160,130,.12) 0%, transparent 20%); } .dt2-marker { position: absolute; transform: translate(-50%,-50%); cursor: pointer; z-index: 10; } .dt2-mpulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid rgba(125,211,252,.5); border-radius: 50%; animation: dt2MPulse 2.2s ease-out infinite; } @keyframes dt2MPulse { 0% { width: 18px; height: 18px; opacity: .85; } 100% { width: 44px; height: 44px; opacity: 0; } } .dt2-mico { font-size: 1.6em; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); transition: transform .2s; } .dt2-marker:hover .dt2-mico { transform: scale(1.28); } .dt2-map-popup { position: absolute; z-index: 20; background: rgba(12,18,34,.96); border: 1px solid rgba(125,211,252,.22); border-radius: 12px; padding: 12px 14px; min-width: 190px; backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(0,0,0,.5); font-size: .82em; color: #7dd3fc; } /* ---- Alerts ---- */ .dt2-alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .dt2-alert { padding: 10px 16px; border-radius: 10px; font-size: .85em; font-weight: 600; animation: dt2SlideIn .3s ease; } .dt2-alert.critical { background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; } .dt2-alert.warn { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.28); color: #fde68a; } @keyframes dt2SlideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } /* ---- Light mode overrides ---- */ body.light-mode .dt2-panel, body.light-mode .dt2-chart-wrap { background: rgba(255,255,255,.92); border-color: rgba(14,116,144,.15); } body.light-mode .dt2-sensors, body.light-mode .dt2-gauge-box, body.light-mode .dt2-mini-econ { background: rgba(255,255,255,.85); border-color: rgba(14,116,144,.15); } body.light-mode .dt2-sensor-row { background: rgba(0,0,0,.04); } body.light-mode .dt2-range { background: rgba(0,0,0,.1); } body.light-mode .dt2-mission { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); } body.light-mode .dt2-sp-track { background: rgba(0,0,0,.08); } body.light-mode .dt2-add-form { border-color: rgba(124,58,237,.2); } body.light-mode .dt2-fi, body.light-mode .dt2-fs { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: #1e293b; } body.light-mode .dt2-ci-item { background: rgba(0,0,0,.03); border-color: rgba(124,58,237,.12); } body.light-mode .dt2-map-popup { background: rgba(255,255,255,.97); } /* ===================================================== SMART ANALYSIS PANEL ===================================================== */ .dt2-analysis-panel { background: rgba(15,23,42,.85); border: 1px solid rgba(125,211,252,.16); border-radius: 18px; padding: 18px 20px; margin-bottom: 18px; backdrop-filter: blur(12px); box-shadow: 0 4px 24px rgba(0,0,0,.25); } .dt2-ap-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .dt2-ap-ico { font-size: 1.5em; } .dt2-ap-title { font-size: .98em; font-weight: 800; color: #7dd3fc; } .dt2-ap-sub { font-size: .72em; color: var(--text-muted); margin-right: auto; background: rgba(125,211,252,.08); padding: 2px 10px; border-radius: 10px; } .dt2-ap-loading { text-align:center; color:var(--text-muted); font-size:.85em; padding:20px; } /* Overall score */ .dt2-ap-score { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.04); border-radius: 10px; margin-bottom: 14px; } .dt2-ap-score-label { font-size: .76em; color: var(--text-muted); flex-shrink: 0; } .dt2-ap-score-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; } .dt2-ap-score-bar { height: 100%; border-radius: 6px; transition: width .7s ease, background .5s; } .dt2-ap-score-val { font-size: .88em; font-weight: 800; min-width: 46px; text-align: left; } /* Projection */ .dt2-ap-projection { font-size: .82em; color: #94a3b8; padding: 8px 14px; background: rgba(255,255,255,.03); border-right: 3px solid #38bdf8; border-radius: 0 8px 8px 0; margin-bottom: 14px; font-style: italic; } /* Section titles */ .dt2-ap-section-title { font-size: .8em; font-weight: 800; letter-spacing: .5px; margin: 12px 0 8px; padding: 4px 10px; border-radius: 6px; display: inline-block; } .dt2-ap-critical { color: #fca5a5; background: rgba(239,68,68,.1); } .dt2-ap-warn { color: #fde68a; background: rgba(245,158,11,.1); } .dt2-ap-good { color: #86efac; background: rgba(74,222,128,.1); } /* Cards */ .dt2-ap-card { border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid; animation: dt2SlideIn .25s ease; } .dt2-ap-card-red { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.22); } .dt2-ap-card-yellow { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.22); } .dt2-ap-card-hdr { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .dt2-ap-card-ico { font-size: 1.6em; flex-shrink: 0; line-height: 1; margin-top: 1px; } .dt2-ap-card-metric { font-size: .84em; font-weight: 700; color: var(--text); } .dt2-ap-card-val { font-size: .75em; color: var(--text-muted); margin-top: 2px; } .dt2-ap-card-val strong { color: #7dd3fc; } .dt2-ap-detail { font-size: .77em; color: #94a3b8; margin-bottom: 10px; padding: 6px 10px; background: rgba(255,255,255,.03); border-radius: 6px; font-style: italic; } .dt2-ap-recs-title { font-size: .74em; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; } /* Individual recommendation */ .dt2-ap-rec { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); margin-bottom: 5px; flex-wrap: wrap; } .dt2-ap-rec-num { width: 20px; height: 20px; border-radius: 50%; background: rgba(125,211,252,.15); color: #7dd3fc; font-size: .7em; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dt2-ap-rec-text { font-size: .78em; color: var(--text); flex: 1; } .dt2-ap-impact { font-size: .68em; color: #94a3b8; white-space: nowrap; } .dt2-ap-apply { padding: 4px 12px; background: rgba(74,222,128,.18); border: 1px solid rgba(74,222,128,.4); color: #86efac; border-radius: 7px; font-family: inherit; font-size: .72em; font-weight: 700; cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0; } .dt2-ap-apply:hover { background: rgba(74,222,128,.32); transform: scale(1.04); } .dt2-ap-apply-warn { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.35); color: #fde68a; } .dt2-ap-apply-warn:hover { background: rgba(251,191,36,.28); } /* Good pills */ .dt2-ap-goods-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .dt2-ap-good-pill { display: flex; align-items: center; gap: 5px; padding: 5px 12px; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.22); border-radius: 20px; font-size: .76em; color: #86efac; } .dt2-ap-good-pill strong { color: #4ade80; } .dt2-ap-perfect { text-align: center; padding: 18px; font-size: .9em; font-weight: 700; color: #4ade80; background: rgba(74,222,128,.08); border-radius: 12px; border: 1px solid rgba(74,222,128,.2); } /* Light mode */ body.light-mode .dt2-analysis-panel { background: rgba(255,255,255,.92); border-color: rgba(14,116,144,.15); } body.light-mode .dt2-ap-score { background: rgba(0,0,0,.04); } body.light-mode .dt2-ap-card-red { background: rgba(239,68,68,.06); } body.light-mode .dt2-ap-card-yellow { background: rgba(245,158,11,.06); } body.light-mode .dt2-ap-rec { background: rgba(0,0,0,.03); } body.light-mode .dt2-ap-detail { background: rgba(0,0,0,.03); } body.light-mode .dt2-ap-projection { color: #475569; } /* original: design-refresh.css */ /* PLAGEBLEU / DESIGN SYSTEM 2026: navy, indigo, teal and warm coral */ :root{--primary:#5146d8;--primary-dark:#322b93;--primary-light:#7974ed;--accent:#ee8068;--accent-light:#ffb89f;--bg-dark:#f6f7fc;--bg-card:#fff;--bg-card-hover:#f9f9ff;--text:#26324d;--text-muted:#69758e;--text-heading:#302b81;--glass:rgba(255,255,255,.97);--glass-light:rgba(80,70,216,.04);--border-subtle:#e6e8f3;--gradient-card:linear-gradient(145deg,#fff,#f7f7ff);--shadow:0 14px 35px rgba(47,48,107,.10);--radius:20px;--radius-sm:12px} #gameContainer{background:linear-gradient(155deg,#f8f9ff 0%,#eff8fa 55%,#f8f6ff 100%)} #ui-layer::before{background:radial-gradient(ellipse at 10% 10%,rgba(93,79,219,.07),transparent 45%),radial-gradient(ellipse at 90% 40%,rgba(21,178,171,.06),transparent 48%)} #navbar{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e6e8f3!important;box-shadow:0 5px 22px rgba(35,45,90,.07)!important} .nav-inner{max-width:1540px;min-height:74px;gap:14px;padding:10px 24px} .nav-brand{color:#342e91!important;font-size:clamp(18px,1.7vw,24px);font-weight:900} .nav-links{gap:2px;align-items:center} .nav-links a,.nav-drop-btn{color:#34405f!important;font-weight:700;border-radius:12px} .nav-links a:hover,.nav-drop-btn:hover{background:#f0eeff!important;color:#493fc2!important} .nav-drop-menu{background:#fff!important;border:1px solid #e6e5f7!important;box-shadow:0 16px 45px rgba(44,44,93,.13)!important;border-radius:15px;padding:8px} .nav-drop-menu a{color:#33405f!important} .nav-hamburger{color:#443abb!important;border:1px solid #deddf4!important;background:#f7f6ff!important} #publicAccountBar{gap:9px} #publicAccountBar .account-login{background:#f1efff;color:#4339b4;border:1px solid #dfdcfa} #publicAccountBar .account-register{background:linear-gradient(125deg,#5549d9,#238ca6);color:#fff;box-shadow:0 5px 15px rgba(81,70,216,.18)} #mobileMenu{background:#fff!important;border-bottom:1px solid #e8e8f3!important;box-shadow:0 18px 30px rgba(34,40,88,.13)!important} #mobileMenu a,.mobile-nav-group-title{color:#34405f!important} #mobileMenu a:hover,.mobile-nav-group-title:hover{background:#f3f1ff!important} .mobile-account-actions{border-color:#e8e8f3} .mobile-account-actions a:first-child{background:#f1efff;color:#443ab3!important} .mobile-account-actions a:last-child{background:#5146d8;color:#fff!important} .site-section{max-width:1260px;padding:clamp(32px,5vw,74px) clamp(16px,3vw,30px);color:#26324d} .site-section h2,.section-header h2{color:#302b81;font-weight:900;letter-spacing:-.025em} .section-header{margin-bottom:clamp(20px,3vw,38px)} .section-divider{background:linear-gradient(90deg,#5146d8,#27b9ad,#ee8068)!important;border-radius:20px} .card,.feature-card,.stat-card,.workshop-card,.game-card,.project-card{border-radius:20px!important;box-shadow:0 10px 28px rgba(43,52,101,.08)!important;border:1px solid #e9eaf4!important} button,.btn-primary,.btn-hero{font-family:inherit} .btn-primary,.btn-hero{background:linear-gradient(120deg,#5146d8,#347db9)!important;color:white!important;border:0!important;border-radius:13px!important;box-shadow:0 7px 18px rgba(81,70,216,.18)} .btn-primary:hover,.btn-hero:hover{filter:brightness(1.08)} input,textarea,select{accent-color:#5146d8} #footer{border-top:4px solid #5146d8!important} #adminDashboard .dash-sidebar{background:linear-gradient(180deg,#282657,#34347a)!important;border-color:#474586!important} #adminDashboard .dash-nav-item.active{background:#5d59c9!important} #adminDashboard .dash-welcome{background:linear-gradient(120deg,#353078,#5754c5,#258fa6)!important;box-shadow:0 16px 32px rgba(56,51,130,.17)} #adminDashboard .dash-kpi,#adminDashboard .dash-chart-area{border:1px solid #e8e8f3;box-shadow:0 8px 24px rgba(45,48,100,.07)} .institution-record{background:#fff;border-color:#e8e8f3;color:#26324d} .institution-status{background:#eeedff;color:#4239ae} .dt-simple-start{background:linear-gradient(115deg,#f0efff,#ecfafa);border-color:#dadcf5;color:#302b81} .dt-simple-start p{color:#56637e} .dt-simple-actions button{border-color:#d8d7f1;color:#453bbb} .dt-simple-actions button:hover{background:#f1efff} #editorWorkspace button{background:#5146d8} #topControls button{border-color:#dcdaf7;background:#fff;color:#5146d8} @media(max-width:900px){.nav-inner{min-height:66px;padding:10px 12px;gap:9px}#mobileMenu{top:66px;max-height:calc(100dvh - 66px)}.site-section{padding:34px 16px}.nav-links{display:none}} @media(max-width:480px){.nav-brand{font-size:17px!important}#publicAccountBar{gap:5px}#publicAccountBar a{font-size:11px;padding:7px 8px;min-height:38px}.nav-hamburger{padding:7px 10px}.site-section{padding:28px 13px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Mobile-first layout correction */ @media (max-width: 768px) { html,body,#gameContainer,#ui-layer {max-width:100%;} #ui-layer {overflow-x:hidden!important;overscroll-behavior-x:none;} #navbar {position:sticky;top:0;z-index:1100;} #navbar .nav-inner {display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;width:100%;min-height:64px;gap:7px;padding:9px 11px;} .nav-brand {flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(14px,4vw,19px)!important;} .nav-hamburger {display:flex!important;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;padding:0!important;margin:0!important;font-size:21px!important;order:3;} #publicAccountBar {display:flex!important;flex:0 0 auto;margin:0!important;gap:5px;order:2;} #publicAccountBar a {font-size:11px!important;padding:7px 8px!important;min-height:38px;line-height:1.15;border-radius:10px;} #mobileMenu {position:fixed!important;top:64px!important;inset-inline:0!important;left:0!important;right:0!important;width:100%!important;max-height:calc(100dvh - 64px)!important;overflow-y:auto!important;z-index:1099!important;padding:10px 12px 22px!important;} #mobileMenu.hidden {display:none!important;} #mobileMenu a,.mobile-nav-group-title {min-height:44px;display:flex;align-items:center;padding:11px 13px!important;border-radius:10px;} .mobile-nav-sub {padding-inline-start:10px;} .site-section {width:100%!important;max-width:100%!important;margin:0 auto!important;padding:30px 14px!important;overflow-wrap:anywhere;} .site-section .section-header {margin-bottom:22px;} .site-section .section-header h2 {font-size:clamp(22px,6vw,30px)!important;line-height:1.4;} .hero-section,#section-hero {padding:0!important;min-height:410px!important;overflow:hidden;} .slider-container,#section-hero .slider-container {min-height:410px!important;width:100%;} #section-hero .slide {padding:44px 35px!important;} #section-hero .slide-content h1 {font-size:clamp(23px,6vw,33px)!important;line-height:1.4;} #section-hero .slide-content p {font-size:15px!important;line-height:1.8;} .slider-nav {width:32px!important;height:32px!important;font-size:18px!important;} .slider-nav.prev {right:3px!important;}.slider-nav.next {left:3px!important;} .slider-dots {bottom:12px!important;} .card-grid,.games-grid,.creatures-grid,.workshops-grid,.projects-grid,.stats-grid,.videos-grid,.library-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;} .card,.feature-card,.stat-card,.workshop-card,.game-card,.project-card {min-width:0!important;max-width:100%!important;} img,video,iframe,canvas {max-width:100%;} .dt2-section {overflow:hidden;} .dt2-top,.dt2-kpi-col,.dt2-time-bar {max-width:100%;min-width:0;} .dt-simple-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .dt-simple-actions button {padding:10px 7px;font-size:13px;white-space:normal;} #adminDashboard .dash-content {padding:12px!important;} #adminDashboard .dash-header {padding:12px!important;} #adminDashboard .dash-welcome {padding:18px!important;border-radius:16px;} #adminDashboard .dash-welcome h3 {font-size:20px!important;} #editorWorkspace .editor-panel {padding:16px!important;} } @media(max-width:480px){ #publicAccountBar .account-register {display:none!important;} .card-grid,.games-grid,.creatures-grid,.workshops-grid,.projects-grid,.stats-grid,.videos-grid,.library-grid {grid-template-columns:minmax(0,1fr)!important;} #mobileMenu .mobile-account-actions {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));} #mobileMenu .mobile-account-actions a {justify-content:center;text-align:center;} #section-hero .slide {padding:40px 31px!important;} .site-section {padding:26px 12px!important;} } /* Phone screenshot targeted corrections — prevent auth button wrapping and oversized hero */ @media(max-width:768px){ #navbar .nav-inner{direction:rtl!important;display:grid!important;grid-template-columns:minmax(0,1fr) 44px auto!important;align-items:center!important;column-gap:8px!important;min-height:62px!important;padding:8px 12px!important;} #navbar .nav-brand{grid-column:1!important;grid-row:1!important;max-width:100%!important;font-size:17px!important;line-height:1.3!important;text-align:right!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} #navbar .nav-hamburger{grid-column:2!important;grid-row:1!important;width:42px!important;height:42px!important;margin:0!important;order:initial!important;} #publicAccountBar{grid-column:3!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;min-width:0!important;max-width:100%!important;gap:0!important;order:initial!important;} #publicAccountBar .account-login{display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;white-space:nowrap!important;word-break:normal!important;line-height:1!important;min-height:38px!important;padding:7px 9px!important;box-shadow:none!important;} #publicAccountBar .account-register{display:none!important;} #mobileMenu{top:62px!important;max-height:calc(100dvh - 62px)!important;} #section-hero,.hero-section,#section-hero .slider-container{height:440px!important;min-height:440px!important;max-height:440px!important;} #section-hero .slide{height:100%!important;min-height:0!important;padding:32px 42px!important;} #section-hero .slide-content{max-width:100%!important;padding:0 4px!important;} #section-hero .slide-content h1{font-size:clamp(26px,7vw,38px)!important;margin-bottom:10px!important;line-height:1.3!important;} #section-hero .slide-content p{font-size:clamp(14px,3.6vw,17px)!important;line-height:1.65!important;margin-bottom:18px!important;} #section-hero .slide-content .btn-hero{padding:11px 24px!important;font-size:15px!important;border-radius:13px!important;} #section-hero .slider-nav{top:auto!important;bottom:15px!important;transform:none!important;width:34px!important;height:34px!important;font-size:17px!important;background:rgba(20,38,66,.45)!important;} #section-hero .slider-nav.prev{right:14px!important;} #section-hero .slider-nav.next{left:14px!important;} #section-hero .slider-dots{bottom:24px!important;} } @media(max-width:390px){#navbar .nav-inner{grid-template-columns:minmax(0,1fr) 40px auto!important;gap:5px!important;padding-inline:8px!important;}#navbar .nav-brand{font-size:14px!important;}#publicAccountBar .account-login{font-size:11px!important;padding:6px!important;}#section-hero,.hero-section,#section-hero .slider-container{height:390px!important;min-height:390px!important;max-height:390px!important;}} /* screenshot-specific priority overrides for active aqua-compact theme */ @media(max-width:768px){ body.aqua-compact #navbar .nav-inner{display:grid!important;grid-template-columns:minmax(0,1fr) 44px 110px!important;gap:7px!important;min-height:60px!important;padding:8px 10px!important;direction:rtl!important;} body.aqua-compact #navbar .nav-brand{grid-column:1!important;grid-row:1!important;min-width:0!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:15px!important;line-height:1.4!important;} body.aqua-compact #navbar .nav-hamburger{grid-column:2!important;grid-row:1!important;width:42px!important;height:42px!important;margin:0!important;padding:0!important;} body.aqua-compact #publicAccountBar{grid-column:3!important;grid-row:1!important;min-width:0!important;max-width:110px!important;display:flex!important;flex-wrap:nowrap!important;overflow:hidden!important;} body.aqua-compact #publicAccountBar .account-login{display:block!important;width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important;font-size:11px!important;line-height:22px!important;padding:6px 5px!important;} body.aqua-compact #publicAccountBar .account-register{display:none!important;} body.aqua-compact #mobileMenu{top:60px!important;} body.aqua-compact #section-hero,body.aqua-compact .hero-section,body.aqua-compact #section-hero .slider-container{height:440px!important;min-height:440px!important;max-height:440px!important;width:100%!important;} body.aqua-compact #section-hero .slide{height:100%!important;padding:28px 40px!important;} body.aqua-compact #section-hero .slide-content{max-width:100%!important;width:100%!important;} body.aqua-compact #section-hero .slide-content h1{font-size:clamp(23px,6vw,31px)!important;line-height:1.4!important;margin-bottom:12px!important;} body.aqua-compact #section-hero .slide-content p{font-size:14px!important;line-height:1.65!important;margin-bottom:16px!important;} body.aqua-compact #section-hero .slide-content .btn-hero{padding:10px 18px!important;font-size:14px!important;} body.aqua-compact #section-hero .slider-nav{top:auto!important;bottom:12px!important;transform:none!important;width:33px!important;height:33px!important;} body.aqua-compact #section-hero .slider-dots{bottom:21px!important;} } /* original: mobile-overhaul.css */ /* Mobile modal and typography overhaul: fluid layout, no clipped close button */ @media (max-width: 768px) { #creatureModal.modal, #videoModal.modal {position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)!important;align-items:center!important;justify-content:center!important;z-index:3000!important;} #creatureModal .modal-content, #videoModal .modal-content {position:relative!important;display:block!important;width:100%!important;max-width:560px!important;min-width:0!important;max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;padding:52px 17px 22px!important;margin:auto!important;border-radius:19px!important;font-size:15px!important;line-height:1.6!important;} #creatureModal .modal-close,#videoModal .modal-close {position:sticky!important;top:0!important;left:0!important;right:auto!important;float:left!important;display:grid!important;place-items:center!important;width:40px!important;height:40px!important;margin:-42px 0 0 -5px!important;border-radius:12px!important;background:#cf3f4d!important;color:#fff!important;z-index:20!important;} #creatureModal #modalBody {clear:both!important;max-width:100%!important;min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important;text-align:right!important;} #creatureModal #modalBody .modal-emoji {font-size:48px!important;line-height:1.3!important;margin:0 auto 10px!important;text-align:center!important;} #creatureModal #modalBody h3 {font-size:clamp(21px,5.5vw,27px)!important;line-height:1.35!important;margin:8px 0 12px!important;text-align:center!important;} #creatureModal #modalBody p {font-size:15px!important;line-height:1.85!important;margin:10px 0 15px!important;text-align:right!important;} #creatureModal #modalBody .modal-info {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:14px 0!important;} #creatureModal #modalBody .info-item {min-width:0!important;max-width:100%!important;padding:11px!important;border-radius:12px!important;overflow-wrap:anywhere!important;} #creatureModal #modalBody .info-item label {font-size:12px!important;line-height:1.5!important;} #creatureModal #modalBody .info-item span {font-size:14px!important;line-height:1.55!important;display:block!important;} #creatureModal #modalBody ul,#creatureModal #modalBody li {font-size:14px!important;line-height:1.75!important;max-width:100%!important;} #videoModal iframe {width:100%!important;height:auto!important;aspect-ratio:16/9!important;} #mobileMenu {max-width:100vw!important;overflow-x:hidden!important;} .cards-grid,.stats-grid {min-width:0!important;} .cards-grid>* ,.stats-grid>* {min-width:0!important;} } @media(max-width:380px){#creatureModal #modalBody .modal-info{grid-template-columns:1fr!important;}#creatureModal .modal-content{padding-inline:13px!important;}} /* Full viewport game on phones, without the intrusive X button */ @media(max-width:768px){ #gamePlayModal.game-immersive{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:0!important;z-index:4000!important;align-items:stretch!important;justify-content:stretch!important;background:#071326!important;} #gamePlayModal.game-immersive>.modal-overlay{display:none!important;} #gamePlayModal.game-immersive>.modal-content{width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;} #gamePlayModal.game-immersive .modal-close{display:none!important;} #gamePlayModal.game-immersive #gamePlayTitle{display:none!important;} #gamePlayModal.game-immersive #gamePlayBody{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;} #gamePlayModal.game-immersive #gamePlayBody>div:first-child{flex:0 0 auto!important;min-height:42px!important;margin:0!important;padding:6px 58px 6px 12px!important;} #gamePlayModal.game-immersive #gamePlayBody>iframe{flex:1 1 auto!important;min-height:0!important;height:auto!important;width:100%!important;border-radius:0!important;} #gamePlayModal.game-immersive .game-immersive-menu{position:absolute!important;top:max(6px,env(safe-area-inset-top,0px))!important;right:8px!important;z-index:100!important;} #gamePlayModal.game-immersive .game-menu-toggle{width:40px;height:38px;border-radius:10px;border:1px solid #b5c6df;background:#fff;color:#28385b;font-size:24px;font-weight:900;cursor:pointer;} #gamePlayModal.game-immersive .game-menu-panel{position:absolute;top:42px;right:0;min-width:220px;padding:7px;background:#fff;box-shadow:0 12px 28px #0003;border-radius:12px;} #gamePlayModal.game-immersive .game-menu-panel[hidden]{display:none!important;} #gamePlayModal.game-immersive .game-exit-action{width:100%;padding:12px;background:#fff;color:#21334d;border:0;border-radius:8px;text-align:right;font-family:inherit;font-weight:800;} } /* All sign-in/sign-up actions belong in hamburger navigation only. */ #publicAccountBar{display:none!important;} @media(max-width:768px){ #navbar .nav-inner,body.aqua-compact #navbar .nav-inner{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:9px 15px!important;min-height:62px!important;} #navbar .nav-brand,body.aqua-compact #navbar .nav-brand{order:1!important;flex:0 1 auto!important;max-width:calc(100% - 64px)!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:clamp(16px,4.5vw,20px)!important;line-height:1.3!important;} #navbar .nav-hamburger,body.aqua-compact #navbar .nav-hamburger{order:2!important;flex:0 0 44px!important;width:44px!important;height:44px!important;margin:0!important;} #mobileMenu .mobile-account-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;direction:rtl!important;} #mobileMenu .mobile-account-actions a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:45px!important;padding:10px 8px!important;font-size:13px!important;text-align:center!important;white-space:normal!important;} } /* original: plagebleu-mobile-enhancements.css */ /* Responsive mobile navigation, system scheme, and touch selection. */ #pb-bottom-tabs { display: none; } .pb-vaul-overlay { position: fixed; inset: 0; background: rgba(2, 14, 25, .56); z-index: 9998; } .pb-vaul-content { position: fixed; inset-inline: 0; bottom: 0; max-height: min(78dvh, 640px); display: flex; flex-direction: column; background: #fff; color: #142c3c; border-radius: 20px 20px 0 0; z-index: 9999; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); } .pb-vaul-handle { width: 40px; height: 5px; border-radius: 5px; background: #a6b5c2; margin: 0 auto 14px; } .pb-vaul-title { font-weight: 700; font-size: 17px; } .pb-vaul-description { font-size: 12px; opacity: .65; margin: 4px 0 12px; } .pb-vaul-options { overflow-y: auto; overscroll-behavior: contain; } .pb-vaul-options button { width: 100%; display: block; text-align: start; padding: 14px 12px; border: 0; border-bottom: 1px solid #e6edf1; background: transparent; color: inherit; } .pb-vaul-options button[aria-current="true"] { color: #0369a1; font-weight: 700; background: #eaf6fc; } .pb-vaul-options button:disabled { opacity: .4; } .pb-system-dark .pb-vaul-content { background: #10283b; color: #eef7ff; } .pb-system-dark .pb-vaul-options button { border-color: #2d4a5b; } .pb-system-dark .pb-vaul-options button[aria-current="true"] { background: #17425a; color: #8ce0ff; } #navbar { padding-top: env(safe-area-inset-top, 0px); } button, a, [role="button"], .card, [class*="-card"] { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .pb-system-dark { color-scheme: dark; } .pb-system-dark body { background-color: #071827; color: #eef7ff; } .pb-system-dark #navbar, .pb-system-dark #mobileMenu, .pb-system-dark #pb-bottom-tabs { background: #0d2436; color: #f0f8ff; } .pb-system-dark #navbar a, .pb-system-dark #mobileMenu a { color: #f0f8ff; } @media (max-width: 767px) { body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; } #pb-bottom-tabs { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 900; min-height: 64px; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; color: #12354b; border-top: 1px solid rgba(0,0,0,.12); box-shadow: 0 -5px 22px rgba(0,0,0,.08); justify-content: space-around; align-items: stretch; } #pb-bottom-tabs button { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 7px 1px; font-size: 21px; cursor: pointer; } #pb-bottom-tabs button small { font-size: 10px; line-height: 1.25; font-weight: 600; white-space: nowrap; } #pb-bottom-tabs button:focus-visible { outline: 2px solid #06b6d4; outline-offset: -3px; border-radius: 8px; } .pb-system-dark #pb-bottom-tabs { border-color: #24465b; } } @media (max-width:767px) { #pb-bottom-tabs button[aria-current="page"] { color: #0284c7; background: rgba(14,165,233,.09); } body:has(#root form) #pb-bottom-tabs { display:none; } } .pb-account-delete { display:block; width:100%; text-align:start; border:1px solid #dc2626; color:#b91c1c; border-radius:8px; padding:10px; margin-top:8px; background:transparent; } /* original: digital-twin-easy.css */ #section-digital-twin .dt-easy-guide{background:linear-gradient(140deg,#eef8ff,#f3f1ff);border:1px solid #d9e4f6;border-radius:22px;padding:clamp(16px,3vw,30px);margin:20px 0;color:#203b59;box-shadow:0 12px 28px #283f7212} .dt-easy-top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.dt-easy-label{font-size:13px;font-weight:800;color:#4a49ad}.dt-easy-mode{background:#fff;border:1px solid #cbd6ed;border-radius:12px;padding:10px 14px;color:#373a92;font-weight:800;cursor:pointer} .dt-easy-guide h3{font-size:clamp(23px,3vw,33px);margin:14px 0 8px;color:#263c75}.dt-easy-guide>p{line-height:1.8;color:#54657d} .dt-easy-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.dt-easy-choices button{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;border:1px solid #dbe5f3;border-radius:17px;background:#fff;padding:18px 12px;color:#29436b;font-size:28px;cursor:pointer;box-shadow:0 7px 17px #3447750c}.dt-easy-choices button:hover,.dt-easy-choices button:focus-visible{outline:2px solid #4e70ce;transform:translateY(-2px)}.dt-easy-choices strong{font-size:17px}.dt-easy-choices small{font-size:13px;color:#64738b;text-align:center;line-height:1.5} .dt-easy-result{background:#fff;border-inline-start:5px solid #27a5a4;border-radius:13px;padding:15px 17px;font-size:15px;line-height:1.8;min-height:58px}.dt-easy-reset{background:#e7efff;border:0;border-radius:11px;color:#3450a0;padding:11px 16px;font-weight:800;margin-top:14px;cursor:pointer}.dt-easy-disclaimer{font-size:12px!important;margin-top:12px;color:#69758a!important} #section-digital-twin:not(.dt-easy-advanced) .dt-simple-start,#section-digital-twin:not(.dt-easy-advanced) .dt2-time-bar,#section-digital-twin:not(.dt-easy-advanced) .dt2-inputs-grid,#section-digital-twin:not(.dt-easy-advanced) .dt2-scenarios-bar,#section-digital-twin:not(.dt-easy-advanced) .dt2-chart-wrap,#section-digital-twin:not(.dt-easy-advanced) .dt2-bottom-grid,#section-digital-twin:not(.dt-easy-advanced) .dt2-ap-wrap{display:none!important} @media(max-width:600px){.dt-easy-choices{grid-template-columns:1fr;gap:9px}.dt-easy-choices button{display:grid;grid-template-columns:40px 1fr;column-gap:12px;text-align:right;padding:13px 15px;font-size:27px}.dt-easy-choices strong,.dt-easy-choices small{grid-column:2;text-align:right}.dt-easy-choices button{grid-template-rows:auto auto}.dt-easy-choices button::first-letter{grid-row:1 / span 2}.dt-easy-guide{padding:17px!important}.dt-easy-top{align-items:flex-start}.dt-easy-mode{font-size:12px;padding:8px 10px}#section-digital-twin .dt2-top{display:flex;flex-direction:column;gap:12px}#section-digital-twin .dt2-sim-wrap{width:100%;height:260px!important;min-height:260px!important}#section-digital-twin .dt2-kpi-col{width:100%}#section-digital-twin .dt2-gauges-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}} /* original: digital-twin-upgrade.css */ /* Readable ocean lab, with scenario cards sized for touch screens. */ #section-digital-twin .dt-pro{background:linear-gradient(135deg,#e7f6fb,#f3faff);border:1px solid #bcdce9;border-radius:26px;padding:clamp(16px,3vw,34px);margin:20px 0 24px;color:#16384e;box-shadow:0 16px 38px #0b496014} .dt-pro-intro{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.dt-pro-tag{display:inline-block;background:#d0eff6;color:#08617d;padding:7px 13px;border-radius:30px;font-weight:800;font-size:13px}.dt-pro-intro h3{font-size:clamp(23px,3vw,38px);margin:12px 0;color:#07486b;line-height:1.35}.dt-pro-intro p{font-size:clamp(14px,1.6vw,18px);line-height:1.8;max-width:800px}.dt-pro-badge{background:white;border:1px solid #c7e4ee;padding:13px 18px;border-radius:16px;font-weight:800}.dt-pro-scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.dt-pro-scenes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;min-width:0;min-height:160px;padding:15px 10px;background:white;border:2px solid #cde6ee;border-radius:20px;cursor:pointer;color:#174b67;font-family:inherit;transition:transform .15s,border-color .15s,background .15s}.dt-pro-scenes button>span{font-size:42px}.dt-pro-scenes strong{font-size:clamp(16px,1.6vw,22px)}.dt-pro-scenes small{font-size:13px;line-height:1.5;color:#57758a}.dt-pro-scenes button.active,.dt-pro-scenes button[aria-pressed=true]{background:#d5f4f5;border-color:#008aaf;box-shadow:0 0 0 3px #27b1d41c}.dt-pro-scenes button:focus-visible{outline:3px solid #087ca4;outline-offset:3px}.dt-pro-toolbar{display:flex;gap:10px;flex-wrap:wrap}.dt-pro-toolbar button{border:1px solid #bad8e5;background:#fff;color:#115577;padding:13px 18px;min-height:48px;border-radius:13px;font-family:inherit;font-weight:800;cursor:pointer}.dt-pro-toolbar button:first-child{background:#067ea4;color:white;border-color:#067ea4}.dt-pro-story{background:#fff;border-right:5px solid #12a5b0;border-radius:14px;margin-top:18px;padding:17px 20px;min-height:90px}.dt-pro-story strong{font-size:19px;color:#086185}.dt-pro-story p{line-height:1.8;margin:8px 0 0;color:#3e6477}.dt-pro-note{font-size:13px;line-height:1.7;color:#526e80;margin-top:15px} #section-digital-twin:not(.dt-easy-advanced) .dt2-top{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:15px;align-items:stretch}#section-digital-twin .dt2-sim-wrap{border-radius:20px;overflow:hidden;border:2px solid #157ea1;min-height:360px}#section-digital-twin .dt2-kpi-col{min-width:0}#section-digital-twin .dt2-gauges-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#section-digital-twin .dt2-gauge-box{min-width:0}#section-digital-twin .dt2-eco-pill,#section-digital-twin .dt2-fish-pill{font-weight:800} @media(max-width:1050px){.dt-pro-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}#section-digital-twin:not(.dt-easy-advanced) .dt2-top{grid-template-columns:1fr}#section-digital-twin .dt2-sim-wrap{min-height:340px}#section-digital-twin .dt2-kpi-col{width:100%}} @media(max-width:560px){.dt-pro-scenes{gap:9px}.dt-pro-scenes button{min-height:128px;padding:11px 7px}.dt-pro-scenes button>span{font-size:34px}.dt-pro-scenes small{font-size:11px}.dt-pro-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.dt-pro-toolbar button{padding:11px 7px;font-size:13px}.dt-pro-toolbar button:last-child{grid-column:1/-1}#section-digital-twin .dt2-sim-wrap{min-height:260px!important;height:clamp(260px,65vw,340px)!important}.dt-pro-badge{display:none}} @media(pointer:coarse) and (min-width:800px){.dt-pro-scenes button{min-height:185px}.dt-pro-toolbar button{min-height:60px;font-size:18px}} @media(prefers-reduced-motion:reduce){.dt-pro-scenes button{transition:none}} /* original: digital-twin-studio.css */ #section-digital-twin .dt-studio-panel{margin:26px 0;padding:clamp(16px,3vw,32px);border:1px solid #bad8e7;border-radius:24px;background:linear-gradient(135deg,#f2fbff,#e8f5fc);color:#163e59;box-shadow:0 15px 36px #08456314}.dt-studio-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.dt-studio-chip{display:inline-block;background:#d0eaf5;color:#085e7b;padding:7px 12px;border-radius:20px;font-size:12px;font-weight:800;letter-spacing:.5px}.dt-studio-head h3{font-size:clamp(22px,3vw,34px);margin:12px 0;color:#084e70}.dt-studio-head p{max-width:780px;line-height:1.8}.dt-studio-status{background:#fff0d9;color:#8c5c0c;border-radius:20px;padding:10px 14px;font-size:13px;font-weight:800}.dt-studio-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.dt-studio-actions button{background:#086f95;color:#fff;border:0;border-radius:12px;padding:13px 16px;min-height:48px;font-family:inherit;font-weight:800;cursor:pointer}.dt-studio-actions button:nth-child(2){background:#145378}.dt-studio-actions button:nth-child(3){background:#087c72}.dt-studio-actions button:last-child{background:#fff;color:#6c3f45;border:1px solid #e5c6c8}.dt-studio-feedback{background:#fff;border-right:4px solid #0c9ab5;border-radius:12px;padding:14px;line-height:1.7;margin-bottom:15px}.dt-studio-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.dt-studio-table{width:100%;border-collapse:collapse;min-width:380px;background:#fff;border-radius:12px;overflow:hidden}.dt-studio-table th,.dt-studio-table td{border-bottom:1px solid #deebf2;padding:12px 15px;text-align:right;white-space:nowrap}.dt-studio-table th{background:#dceff7;color:#164e68}.dt-studio-method{margin-top:20px;border:1px solid #c4dfe9;background:#fff;border-radius:14px;padding:16px}.dt-studio-method summary{font-weight:800;cursor:pointer}.dt-studio-method p{line-height:1.8}.dt-studio-sources{display:flex;gap:12px;flex-wrap:wrap}.dt-studio-sources a{color:#086f95;font-weight:800}.dt-studio-nav{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border-radius:12px;background:#d6f2fa;color:#075878!important;font-weight:900;cursor:pointer;text-decoration:none}#mobileMenu .dt-studio-nav{display:flex;width:100%;margin:8px 0;min-height:48px}@media(max-width:620px){.dt-studio-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.dt-studio-actions button{padding:11px 7px;font-size:13px}.dt-studio-table th,.dt-studio-table td{padding:10px}} /* original: digital-twin-premium.css */ /* Ocean Observatory — cohesive visual system for the interactive educational twin */ #section-digital-twin{--ocean-ink:#e8faff;--ocean-muted:#a6cbdc;--ocean-border:rgba(115,213,246,.23);--ocean-glass:rgba(6,37,64,.84);max-width:1560px!important;margin:auto;color:var(--ocean-ink);isolation:isolate} #section-digital-twin .section-header{position:relative;overflow:hidden;padding:clamp(28px,5vw,68px) clamp(18px,4vw,56px);border-radius:30px;background:radial-gradient(ellipse at 83% 14%,rgba(22,197,229,.35),transparent 40%),radial-gradient(ellipse at 10% 90%,rgba(8,114,190,.3),transparent 45%),linear-gradient(130deg,#04182d,#06456b 64%,#0878a1);border:1px solid var(--ocean-border);box-shadow:0 28px 80px #001d3652;text-align:right;margin-bottom:20px} #section-digital-twin .section-header:after{content:'🌊';position:absolute;left:7%;top:12%;font-size:clamp(90px,16vw,220px);opacity:.13;pointer-events:none;filter:drop-shadow(0 12px 22px #051f3c)} #section-digital-twin .section-header h2{font-size:clamp(30px,4.5vw,60px)!important;color:#fff!important;line-height:1.2;max-width:900px;letter-spacing:-.7px;margin-bottom:15px} #section-digital-twin .section-header p{color:#d0f3ff!important;font-size:clamp(15px,1.6vw,19px);line-height:1.9;max-width:790px;margin-right:0} #section-digital-twin .section-divider{background:linear-gradient(90deg,#40e0d0,#2fb8f4)!important;margin-right:0} #section-digital-twin .dt-pro{background:linear-gradient(145deg,#f2fbff,#dceffb)!important;border:1px solid #b5dce9!important;box-shadow:0 22px 60px #042e4b23!important;border-radius:26px!important} #section-digital-twin .dt-pro-scenes button{position:relative;overflow:hidden;box-shadow:0 10px 22px #0a5e8420;min-height:165px;border-radius:20px!important;transition:transform .2s,box-shadow .2s,border-color .2s!important} #section-digital-twin .dt-pro-scenes button:hover{transform:translateY(-4px);box-shadow:0 18px 30px #075b8230} #section-digital-twin .dt-pro-scenes button.active{background:linear-gradient(150deg,#d7faff,#bde9f5)!important;border-color:#009fc6!important;box-shadow:0 0 0 3px #15b6db2d,0 14px 30px #057a9d26} #section-digital-twin .dt-pro-scenes button.active:after{content:'✓ تم الاختيار';position:absolute;top:8px;left:9px;background:#007b9e;color:#fff;padding:4px 8px;border-radius:20px;font-size:10px;font-weight:900} #section-digital-twin .dt2-time-bar{border-radius:18px;background:linear-gradient(110deg,#092f4a,#0c4c6b)!important;border:1px solid var(--ocean-border)!important;box-shadow:0 14px 30px #031b332e;padding:13px 18px!important;gap:12px} #section-digital-twin .dt2-sim-wrap{position:relative;border:2px solid #36c8e7!important;border-radius:25px!important;box-shadow:0 0 0 6px #1f8bb31b,0 24px 55px #031b3447;min-height:420px;overflow:hidden} #section-digital-twin .dt2-sim-wrap:after{content:'● محاكاة تعليمية مباشرة';position:absolute;bottom:12px;right:12px;pointer-events:none;background:#062f4acb;border:1px solid #56d3e87d;color:#e4ffff;border-radius:40px;padding:7px 12px;font-size:12px;font-weight:800;z-index:4} #section-digital-twin .dt2-gauge-box{border-radius:20px!important;box-shadow:0 12px 25px #05345024;border:1px solid #91d0e350!important} #section-digital-twin .dt-studio-panel{border-radius:25px!important;box-shadow:0 18px 42px #0b436020!important} #section-digital-twin .dt2-top,#section-digital-twin .dt2-kpi-col,#section-digital-twin .dt2-gauges-row{min-width:0} #section-digital-twin button{font-family:inherit;touch-action:manipulation}#section-digital-twin button:focus-visible{outline:3px solid #32e4f0;outline-offset:3px} #section-digital-twin .dt-observer-help{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#e8f8fd;color:#175475;border:1px solid #a6dcea;padding:14px 18px;border-radius:17px;margin:0 0 20px;font-size:14px;line-height:1.8} #section-digital-twin .dt-observer-help strong{color:#06587d} @media(max-width:800px){#section-digital-twin .section-header{border-radius:22px;padding:30px 20px}#section-digital-twin .dt2-sim-wrap{min-height:320px}#section-digital-twin .dt2-time-bar{flex-wrap:wrap}#section-digital-twin .dt-pro-scenes button{min-height:135px}#section-digital-twin .dt2-sim-wrap:after{font-size:10px;padding:5px 8px}} @media(max-width:540px){#section-digital-twin .section-header:after{font-size:100px;left:-15px;top:35px}#section-digital-twin .dt2-sim-wrap{min-height:260px}#section-digital-twin .dt-observer-help{align-items:flex-start}#section-digital-twin .dt-pro-scenes button.active:after{font-size:9px;top:4px;left:4px}} @media(prefers-reduced-motion:reduce){#section-digital-twin .dt-pro-scenes button{transition:none!important}#section-digital-twin .dt-pro-scenes button:hover{transform:none}} /* original: digital-twin-layout.css */ /* Guided learning flow: choose → observe → understand → experiment → compare. */ #section-digital-twin{display:flex;flex-direction:column;gap:18px} #section-digital-twin>.section-header{order:0;margin-bottom:0} #section-digital-twin>.dt-pro{order:1;margin:0!important} #section-digital-twin>.dt-observer-help{order:2;margin:0!important} #section-digital-twin>.dt2-top{order:3;margin:0!important} #section-digital-twin>.dt-pro-explainer{order:4} #section-digital-twin>.dt2-time-bar{order:5;margin:0!important} #section-digital-twin>.dt2-inputs-grid{order:6;margin:0!important} #section-digital-twin>.dt2-analysis-panel{order:7;margin:0!important} #section-digital-twin>.dt2-scenarios-bar{order:8;margin:0!important} #section-digital-twin>.dt2-chart-wrap{order:9;margin:0!important} #section-digital-twin>.dt2-bottom-grid{order:10;margin:0!important} #section-digital-twin>.dt2-map-section{order:11;margin:0!important} #section-digital-twin>.dt-studio-panel{order:12;margin:0!important} #section-digital-twin>.dt-page-back{order:-1} #section-digital-twin .dt-pro{padding:clamp(18px,3vw,30px)!important} #section-digital-twin .dt-pro-scenes{margin:16px 0!important} #section-digital-twin .dt-pro-story{min-height:0!important;margin-top:13px!important} #section-digital-twin .dt-pro-explainer{background:linear-gradient(115deg,#e5f7fc,#f5fbfe);border:1px solid #b6dce8;color:#184d65;border-radius:20px;padding:18px 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #section-digital-twin .dt-pro-explainer>div{background:white;border:1px solid #d8ebf2;border-radius:14px;padding:15px;line-height:1.7} #section-digital-twin .dt-pro-explainer strong{display:block;color:#06678b;font-size:16px;margin-bottom:4px} #section-digital-twin .dt-pro-explainer p{margin:0;font-size:13px} #section-digital-twin .dt2-top{align-items:stretch} #section-digital-twin .dt2-kpi-col{display:flex;flex-direction:column;gap:12px} #section-digital-twin .dt2-gauges-row{gap:12px} #section-digital-twin .dt2-gauge-box{min-height:125px} #section-digital-twin .dt2-inputs-grid .dt2-panel{min-width:0} #section-digital-twin .dt-studio-table-wrap{scrollbar-width:thin} #section-digital-twin .dt-pro-toolbar button{transition:background .18s,transform .18s} #section-digital-twin .dt-pro-toolbar button:hover{transform:translateY(-2px)} #section-digital-twin .dt2-sim-wrap{aspect-ratio:16/9;min-height:350px!important;height:auto!important} #section-digital-twin .dt2-sim-wrap canvas{position:absolute;inset:0} #section-digital-twin .dt2-sim-wrap .dt2-hud-tl,#section-digital-twin .dt2-sim-wrap .dt2-hud-tr{z-index:3} @media(max-width:1050px){#section-digital-twin .dt2-sim-wrap{min-height:300px!important}} @media(max-width:700px){#section-digital-twin .dt-pro-explainer{grid-template-columns:1fr;gap:8px;padding:12px}#section-digital-twin .dt-pro-explainer>div{padding:12px}#section-digital-twin .dt2-sim-wrap{aspect-ratio:4/3;min-height:250px!important}#section-digital-twin .dt-pro-scenes{gap:8px!important}} @media(prefers-reduced-motion:reduce){#section-digital-twin .dt-pro-toolbar button{transition:none}#section-digital-twin .dt-pro-toolbar button:hover{transform:none}} /* original: digital-twin-3d.css */ #section-digital-twin .dt-3d-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;grid-column:1/-1;background:#e7f5fa;border:1px solid #b5dbe8;border-radius:15px;padding:11px 15px;color:#17506b;font-size:13px} #section-digital-twin .dt-3d-controls button{background:#065b83;color:white;border:0;border-radius:11px;padding:11px 16px;min-height:44px;font-weight:800;cursor:pointer} #section-digital-twin .dt-3d-controls button[aria-pressed=true]{background:#087c6d} #section-digital-twin .dt2-sim-wrap .dt-webgl-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:2;display:block} #section-digital-twin .dt2-sim-wrap.dt-3d-active #dtOceanCanvas{visibility:hidden} @media(max-width:600px){#section-digital-twin .dt-3d-controls{flex-direction:column;align-items:stretch}#section-digital-twin .dt-3d-controls button{width:100%}} #section-digital-twin .dt-3d-controls .dt-3d-reset{background:#d6f2f6;color:#075375;border:1px solid #a3d4df}#section-digital-twin .dt2-sim-wrap .dt-webgl-canvas{touch-action:none;cursor:grab}#section-digital-twin .dt2-sim-wrap .dt-webgl-canvas:active{cursor:grabbing} #section-digital-twin .dt-3d-controls .dt-ghost-start{background:#165b74}#section-digital-twin .dt-3d-controls .dt-ghost-remove{background:#147c68}#section-digital-twin .dt-3d-controls .dt-ghost-remove:disabled{opacity:.45;cursor:not-allowed} /* original: ocean-digital-lab.css */ /* OCEAN DIGITAL LAB — unified navigation and intentional visual hierarchy */ #section-digital-twin{--odl-navy:#061f36;--odl-cyan:#24c4e0;--odl-blue:#0877aa} #section-digital-twin .odl-kicker{display:inline-flex;color:#a9f2f6;font-size:13px;font-weight:900;letter-spacing:1.4px;margin-bottom:15px;border:1px solid #73d7e85e;border-radius:40px;padding:8px 15px;background:#073b5888} #section-digital-twin .odl-navigation{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:#092b44;border:1px solid #236786;padding:8px;border-radius:20px;box-shadow:0 16px 38px #09243a28;position:relative;z-index:3} #section-digital-twin .odl-navigation button{font:800 clamp(13px,1.5vw,17px) inherit;font-family:inherit;font-weight:900;min-height:59px;border:1px solid transparent;border-radius:13px;color:#c9e5f0;background:transparent;cursor:pointer;transition:background .15s,color .15s} #section-digital-twin .odl-navigation button[aria-selected=true]{color:#063a56;background:linear-gradient(120deg,#d9f9ff,#a9e8f4);box-shadow:0 6px 17px #011b3444} #section-digital-twin .odl-navigation button:focus-visible{outline:3px solid #41d9e9;outline-offset:2px} #section-digital-twin .odl-subheading{order:2;background:#e6f5fa;border:1px solid #b4dce8;border-right:4px solid #16a4cb;border-radius:13px;padding:13px 18px;color:#15536f;font-size:15px;font-weight:700} #section-digital-twin .dt-pro{order:3} #section-digital-twin .dt-observer-help{order:4} #section-digital-twin .dt-3d-controls{order:5} #section-digital-twin .dt2-top{order:6} #section-digital-twin .dt-pro-explainer{order:7} #section-digital-twin .dt2-time-bar{order:8} #section-digital-twin .dt2-inputs-grid{order:9} #section-digital-twin .dt2-analysis-panel{order:10} #section-digital-twin .dt2-scenarios-bar{order:11} #section-digital-twin .dt2-chart-wrap{order:12} #section-digital-twin .dt2-bottom-grid{order:13} #section-digital-twin .dt2-map-section{order:14} #section-digital-twin .dt-studio-panel{order:15} /* Keep the canvas alive while switching: simulation state and animation are preserved. */ #section-digital-twin[data-odl-tab=explore]>.dt2-inputs-grid,#section-digital-twin[data-odl-tab=explore]>.dt2-chart-wrap,#section-digital-twin[data-odl-tab=explore]>.dt2-bottom-grid,#section-digital-twin[data-odl-tab=explore]>.dt-studio-panel,#section-digital-twin[data-odl-tab=explore]>.dt2-analysis-panel,#section-digital-twin[data-odl-tab=explore]>.dt2-scenarios-bar,#section-digital-twin[data-odl-tab=explore]>.dt2-map-section{display:none!important} #section-digital-twin[data-odl-tab=lab]>.dt-pro,#section-digital-twin[data-odl-tab=lab]>.dt-pro-explainer,#section-digital-twin[data-odl-tab=lab]>.dt2-chart-wrap,#section-digital-twin[data-odl-tab=lab]>.dt2-bottom-grid,#section-digital-twin[data-odl-tab=lab]>.dt-studio-panel,#section-digital-twin[data-odl-tab=lab]>.dt2-map-section{display:none!important} #section-digital-twin[data-odl-tab=results]>.dt-pro,#section-digital-twin[data-odl-tab=results]>.dt-pro-explainer,#section-digital-twin[data-odl-tab=results]>.dt2-inputs-grid,#section-digital-twin[data-odl-tab=results]>.dt2-scenarios-bar,#section-digital-twin[data-odl-tab=results]>.dt2-bottom-grid,#section-digital-twin[data-odl-tab=results]>.dt2-map-section{display:none!important} #section-digital-twin[data-odl-tab=challenges]>.dt-pro,#section-digital-twin[data-odl-tab=challenges]>.dt-pro-explainer,#section-digital-twin[data-odl-tab=challenges]>.dt2-inputs-grid,#section-digital-twin[data-odl-tab=challenges]>.dt2-scenarios-bar,#section-digital-twin[data-odl-tab=challenges]>.dt2-chart-wrap,#section-digital-twin[data-odl-tab=challenges]>.dt-studio-panel,#section-digital-twin[data-odl-tab=challenges]>.dt2-analysis-panel,#section-digital-twin[data-odl-tab=challenges]>.dt2-map-section{display:none!important} #section-digital-twin[data-odl-tab=challenges]>.dt2-bottom-grid{display:grid!important} #section-digital-twin[data-odl-tab=challenges]>.dt2-time-bar,#section-digital-twin[data-odl-tab=challenges]>.dt-observer-help{display:none!important} #section-digital-twin[data-odl-tab=results]>.dt-studio-panel,#section-digital-twin[data-odl-tab=results]>.dt2-chart-wrap,#section-digital-twin[data-odl-tab=results]>.dt2-analysis-panel{display:block!important} #section-digital-twin[data-odl-tab=lab]>.dt2-inputs-grid{display:grid!important} #section-digital-twin[data-odl-tab=explore]>.dt2-top{grid-template-columns:minmax(0,2fr) minmax(245px,1fr)} #section-digital-twin[data-odl-tab=explore] .dt2-sim-wrap{min-height:430px!important} #section-digital-twin .dt-easy-guide,#section-digital-twin .dt-simple-start{display:none!important} @media(max-width:1050px){#section-digital-twin[data-odl-tab=explore]>.dt2-top{grid-template-columns:1fr}} @media(max-width:650px){#section-digital-twin .odl-navigation{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}#section-digital-twin .odl-navigation button{min-height:54px;font-size:13px}#section-digital-twin[data-odl-tab=explore] .dt2-sim-wrap{min-height:255px!important}} @media(prefers-reduced-motion:reduce){#section-digital-twin .odl-navigation button{transition:none}} /* original: site-stability.css */ /* Browser hidden attribute must beat all section display rules. */ #mainContent > section[hidden]{display:none!important}#ui-layer{overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y}#mainContent{min-height:35vh}#mobileMenu.hidden{display:none!important}#mobileMenu:not(.hidden){overflow-y:auto;overscroll-behavior:contain;max-height:calc(100dvh - 65px)}.nav-hamburger{min-width:44px;min-height:44px;cursor:pointer}#section-digital-twin{min-height:75vh}#section-digital-twin .dt2-top,#section-digital-twin .dt-studio-panel{max-width:100%}#mainContent button{touch-action:manipulation}@media(max-width:600px){#mainContent .site-section{max-width:100vw}#section-digital-twin .dt2-top{min-width:0}#section-digital-twin .dt2-kpi-col{max-width:100%}} /* Animate only visible pages; keep hidden sections out of layout. */ @keyframes pb-page-reveal { from { opacity: 0; transform: translate3d(0, 9px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } #mainContent > section:not([hidden]) { animation: pb-page-reveal 240ms ease-out both; } @media (prefers-reduced-motion: reduce) { #mainContent > section:not([hidden]) { animation: none; } } body, #ui-layer { overscroll-behavior-y: none; } #pb-pull-indicator { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -65px); opacity: 0; z-index: 1001; pointer-events: none; background: #075d85; color: white; border-radius: 24px; padding: 9px 13px; box-shadow: 0 3px 12px #0003; transition: transform 150ms ease, opacity 150ms ease; } #pb-pull-indicator.pb-visible { transform: translate(-50%, 0); opacity: 1; } #pb-pull-indicator.pb-refreshing .pb-pull-spinner { animation: pb-pull-spin .65s linear infinite; display: inline-block; } @keyframes pb-pull-spin { to { transform: rotate(360deg); } } /* original: access-requests.css */ .ar-overlay{position:fixed;inset:0;z-index:99999;background:#001a31ba;display:flex;align-items:center;justify-content:center;padding:14px;direction:rtl;overflow:auto}.ar-card{position:relative;background:#fff;color:#153e5b;border-radius:20px;padding:clamp(18px,3vw,34px);width:min(100%,560px);max-height:92dvh;overflow:auto;box-shadow:0 20px 80px #001c3c66;font-family:Tajawal,sans-serif}.ar-wide{width:min(100%,850px)}.ar-card h2{color:#075b87;margin:10px 0}.ar-card p{line-height:1.7}.ar-card label{display:block;font-weight:700;margin:12px 0}.ar-card input,.ar-card select,.ar-card textarea{display:block;width:100%;background:#f7fbff;color:#173e5c;border:1px solid #c1d8e6;border-radius:10px;padding:12px;margin-top:6px}.ar-card button{cursor:pointer;border:0;border-radius:10px;padding:12px 16px;min-height:44px;font-family:inherit;font-weight:800;margin:5px;background:#dceef7;color:#075b87}.ar-card .ar-primary{background:#087caa;color:white;width:100%}.ar-card .ar-close{position:absolute;top:12px;left:12px}.ar-request{border:1px solid #d6e7ef;border-radius:12px;padding:14px;margin:10px 0;background:#f7fbff}.ar-request>div{font-weight:800}#ar-result{padding:12px;color:#075b87} /* original: usage-analytics.css */ .ma-overlay{position:fixed;inset:0;z-index:99998;background:#00182bc7;display:flex;align-items:center;justify-content:center;padding:12px}.ma-panel{background:#fff;color:#17455d;border-radius:20px;width:min(1100px,100%);max-height:94dvh;overflow:auto;padding:clamp(15px,3vw,30px);font-family:Tajawal,Arial,sans-serif}.ma-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px}.ma-panel h2,.ma-panel h3{color:#075f88}.ma-panel button{background:#0579a8;color:#fff;border:0;border-radius:10px;padding:11px 15px;min-height:44px;cursor:pointer;font-family:inherit;font-weight:700}.ma-note{background:#eaf6fc;padding:12px;border-radius:10px;line-height:1.7}.ma-controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:15px 0}.ma-controls label{font-weight:700}.ma-controls input{display:block;padding:10px;border:1px solid #bdd8e5;border-radius:9px}.ma-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:20px 0}.ma-kpi{border:1px solid #cce4ee;border-radius:14px;background:#f1faff;padding:16px}.ma-kpi strong{display:block;font-size:30px;color:#05749d}.ma-kpi span{display:block;font-weight:700}.ma-block{margin:20px 0;overflow:auto}.ma-block table{width:100%;border-collapse:collapse}.ma-block th,.ma-block td{border-bottom:1px solid #d6e6ed;padding:10px;text-align:right}.ma-block th{background:#e8f4fa}@media(max-width:580px){.ma-panel header h2{font-size:19px}.ma-controls label{width:calc(50% - 8px)}.ma-controls input{max-width:100%}} .ma-dashboard-action{margin:12px 0 20px}.ma-dashboard-action button{background:#0678a5;color:#fff;border:0;border-radius:12px;padding:14px 20px;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;min-height:48px} /* original: analytics-pro.css */ .ma-pro-panel{background:#f4f8fc!important;border:1px solid #d8e6ef!important}.ma-pro-panel>header{background:#fff;border-radius:14px;padding:12px 16px}.ma-pro-head{display:flex;align-items:center;justify-content:space-between;gap:15px;background:linear-gradient(120deg,#053c65,#087aab);color:#fff;padding:26px;border-radius:18px;margin:16px 0}.ma-pro-head h2{color:#fff!important;font-size:clamp(23px,3vw,34px);margin:7px 0}.ma-pro-head p{margin:0;color:#dceffa}.ma-pro-eyebrow{font-size:12px;letter-spacing:.04em;color:#9bdcf7;font-weight:800}.ma-pro-badge{border:1px solid #ffffff77;padding:9px 14px;border-radius:50px;white-space:nowrap;background:#ffffff22}.ma-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}.ma-presets>span{font-weight:800;margin-left:5px}.ma-presets button{background:#fff!important;color:#165a7d!important;border:1px solid #cbdfe9!important}.ma-presets button.selected{background:#077ba9!important;color:#fff!important}.ma-pro-panel .ma-kpi{background:#fff;box-shadow:0 5px 18px #0b47690d;border:1px solid #dce8ef;border-radius:17px}.ma-pro-panel .ma-block,.ma-chart-block{background:#fff;border:1px solid #dce8ef;border-radius:17px;padding:18px;box-shadow:0 4px 18px #0b47690a}.ma-chart-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}.ma-chart-heading h3{color:#075f88;margin:0}.ma-chart-heading span{color:#648399}.ma-bar-chart{height:220px;display:flex;align-items:end;gap:4px;overflow-x:auto;padding:22px 4px 4px;border-bottom:1px solid #dae9f0}.ma-chart-column{height:100%;min-width:24px;flex:1;max-width:55px;display:flex;flex-direction:column;justify-content:end;align-items:center;position:relative}.ma-chart-bar{width:75%;min-height:3px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#17c4d5,#0875a8)}.ma-bar-value{font-size:10px;color:#34637d}.ma-bar-day{font-size:10px;color:#708a9a;white-space:nowrap}.ma-status-pill{padding:10px 13px;border-radius:10px;background:#e9f6fd;color:#0b6188}.ma-pro-panel .ma-controls{background:#fff;padding:14px;border-radius:14px;border:1px solid #dce8ef}.ma-pro-panel .ma-note{border:1px solid #d0e9f4}@media(max-width:650px){.ma-pro-head{padding:18px;align-items:start;flex-direction:column}.ma-pro-panel .ma-block{padding:10px}.ma-bar-chart{height:170px}.ma-chart-column{min-width:28px}} /* original: admin-content-hub.css */ .ch-settings,.ch-head,.ch-main,.ch-sections{background:#fff;color:#16435d;border-radius:16px;padding:18px;border:1px solid #d6e6ef}.ch-settings h2,.ch-head h2{color:#07638c}.ch-settings>button,.ch-head>button,.ch-add,.ch-save{background:#087eab!important;color:#fff!important}.ch-settings button,.ch-head button,.ch-layout button,.ch-modal button{font:inherit;border:1px solid #cfe0ea;border-radius:10px;padding:10px 13px;cursor:pointer;min-height:43px}.ch-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin:20px 0}.ch-settings-grid button{background:#edf7fc;color:#105a7e;text-align:right}.ch-settings-grid b,.ch-sections b{float:left;background:#d8ebf5;padding:2px 8px;border-radius:20px}.ch-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.ch-head span{font-weight:800;color:#1285a8}.ch-head p{line-height:1.7}.ch-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:15px}.ch-sections{display:flex;flex-direction:column;gap:6px}.ch-sections button{text-align:right;background:#f1f8fc;color:#155578}.ch-sections button.active{background:#076f9d;color:#fff}.ch-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.ch-toolbar h3{color:#075b85;margin:0}.ch-search{width:100%;border:1px solid #cadfe9;border-radius:12px;padding:13px;margin:16px 0;color:#15435d;background:#fff}.ch-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 4px;border-bottom:1px solid #e1edf2}.ch-item strong{color:#124e70}.ch-item p{margin:6px 0 0;color:#668296;font-size:13px}.ch-actions{display:flex;gap:6px;flex-shrink:0}.ch-actions button{background:#eaf5fb;color:#07668e}.ch-actions button:last-child{color:#a82e40;background:#fff2f3}.ch-overlay{position:fixed;inset:0;background:#00182fc9;z-index:100000;display:flex;align-items:center;justify-content:center;padding:12px;direction:rtl}.ch-modal{background:#fff;color:#17445e;border-radius:18px;padding:24px;width:min(580px,100%);max-height:92dvh;overflow:auto}.ch-modal header{display:flex;justify-content:space-between;align-items:center}.ch-modal label{display:block;font-weight:800;margin:13px 0}.ch-modal input,.ch-modal textarea{display:block;width:100%;padding:11px;margin-top:6px;border:1px solid #bed7e4;border-radius:9px;color:#153f59;background:#f9fcfe}.ch-modal-actions{display:flex;justify-content:flex-end;gap:8px}.ch-empty{padding:25px;text-align:center}@media(max-width:760px){.ch-layout{grid-template-columns:1fr}.ch-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ch-head{flex-direction:column;align-items:start}.ch-item{align-items:start;flex-direction:column}.ch-actions{width:100%}.ch-actions button{flex:1}} /* Statistics and facilitator sections are administrative, not public-facing. */ #section-stats,#section-team{display:none!important} .ch-category-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin:18px 0}.ch-category-summary button{border:1px solid #d3e6f2;border-radius:13px;background:#f3faff;color:#155475;padding:16px;display:flex;flex-direction:column;gap:7px;text-align:right;cursor:pointer}.ch-category-summary button strong{font-size:17px}.ch-category-summary button span{font-weight:700;color:#0479a8}.ch-category-summary button small{color:#527b90}.ch-filter{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:12px 0}.ch-filter select{border:1px solid #bfd7e5;border-radius:8px;padding:8px;margin:0 8px}.ch-filter button{border:1px solid #b8d9eb;background:#f0f8fd;border-radius:8px;padding:9px;cursor:pointer} /* original: admin-diagnostics.css */ .ch-diagnostics{background:#f0f8fc;border:1px solid #c9e4ef;padding:20px;border-radius:16px;margin-bottom:18px;color:#144e6b}.ch-diagnostics h3{color:#056a94}.ch-diagnostics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:9px;margin:16px 0}.ch-diagnostics-grid div{background:#fff;border:1px solid #d6e8f0;padding:12px;border-radius:12px;display:flex;flex-direction:column;gap:5px}.ch-diagnostics-grid strong{font-size:23px;color:#047aa6}.ch-diagnostics-grid span{font-size:12px}.ch-diagnostics button{border:0;border-radius:9px;background:#087ba7;color:white;padding:10px 16px;cursor:pointer} /* original: marine-quizzes.css */ .marine-quiz-heading{margin:28px 0 15px;text-align:center}.marine-quiz-heading h3{font-size:clamp(22px,3vw,29px);color:#343188}.marine-quiz-heading p{color:#69758b}.marine-quiz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:28px}.marine-quiz-card{background:#fff;border:1px solid #e4e5f4;border-radius:18px;padding:21px 14px;text-align:center;box-shadow:0 8px 24px #22234a10}.marine-quiz-card>span{font-size:39px}.marine-quiz-card h3{font-size:17px;color:#292f66;margin:9px 0}.marine-quiz-card p{font-size:13px;color:#68758c}.marine-quiz-card button,.mq-next,.mq-finish button{border:0;border-radius:12px;background:#5146d8;color:white;padding:12px 17px;font-family:inherit;font-weight:800;cursor:pointer}.marine-quiz-overlay{position:fixed;inset:0;z-index:10000;background:#0d1930e8;align-items:center;justify-content:center;padding:12px}.marine-quiz-shell{width:min(100%,660px);max-height:calc(100dvh - 24px);overflow-y:auto;background:#fff;border-radius:22px;padding:clamp(16px,3vw,28px);color:#24334c}.marine-quiz-shell header{display:flex;justify-content:space-between;align-items:center;gap:12px}.marine-quiz-shell header strong{font-size:18px}.marine-quiz-shell header button{border:1px solid #e2e6f0;border-radius:10px;padding:10px;background:#f4f5fb;color:#445;cursor:pointer}.marine-quiz-progress{margin:20px 0;color:#66748c;font-size:13px}.marine-quiz-progress>div{height:8px;background:#e8ebf6;border-radius:20px;margin-top:9px;overflow:hidden}.marine-quiz-progress i{display:block;height:100%;background:#2bb5aa;transition:width .2s}.marine-quiz-shell #mqContent h2{font-size:clamp(20px,4vw,27px);line-height:1.6;margin:20px 0}.mq-options{display:grid;gap:11px}.mq-options button{background:#f7f9fe;border:2px solid #e2e8f3;border-radius:13px;text-align:right;padding:16px;color:#263e61;font-family:inherit;font-size:16px;cursor:pointer}.mq-options button.correct{background:#e1f9eb;border-color:#32a66d;color:#126d3e}.mq-options button.wrong{background:#fff0ef;border-color:#d96a6a;color:#a43e3e}.mq-options button:disabled{cursor:default}#mqFeedback{min-height:35px;padding:10px 0;font-weight:700}.mq-next{width:100%}.mq-next[hidden]{display:none}.mq-finish{text-align:center;padding:25px 0}.mq-finish>div{font-size:65px}.mq-finish button{margin:5px}.marine-game-loading{position:absolute;inset:50px 0 0;display:grid;place-items:center;background:#f5f8ff;color:#384e79;font-size:17px;font-weight:800;pointer-events:none}@media(max-width:850px){.marine-quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.marine-quiz-grid{grid-template-columns:1fr}.marine-quiz-card{padding:15px}.marine-quiz-shell{border-radius:15px}.mq-options button{padding:13px;font-size:15px}} .marine-existing-heading{margin:32px 0 16px;text-align:center}.marine-existing-heading h3{color:#343188;font-size:clamp(21px,3vw,28px)}.marine-existing-heading p{color:#65748c;line-height:1.7} /* All games share one unified grid; no old/new categories. */ #section-games .cards-grid>.marine-quiz-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;}#section-games .cards-grid>.marine-quiz-card .card-btn{margin-top:auto;} /* Ocean-blue immersive quiz experience inspired by the provided screenshot. */ .marine-quiz-overlay{background:#001c32f5;padding:0;z-index:11000} .marine-quiz-shell{width:min(100%,760px);height:100dvh;max-height:100dvh;overflow-y:auto;border-radius:0;background:radial-gradient(ellipse at 50% 45%,#075c8c 0%,#03446e 46%,#002a4c 100%);color:#e4f8ff;padding:clamp(16px,4vw,30px);box-shadow:inset 0 0 0 2px #1a8fb550} .marine-quiz-shell header{padding:0 0 16px;border-bottom:1px solid #37a7c444}.marine-quiz-shell header strong{color:#c1ecf9}.marine-quiz-shell header button{background:#06486c;color:#e9faff;border:1px solid #2b92ba} .mq-welcome{text-align:center;display:flex;flex-direction:column;align-items:stretch;gap:17px;padding:24px 0}.mq-hero-icon{font-size:clamp(70px,15vw,110px);filter:drop-shadow(0 7px 14px #001a39)}.mq-welcome h1{font-size:clamp(29px,6vw,46px);line-height:1.25;margin:0;color:#e7e85d;text-shadow:0 4px 12px #002139}.mq-welcome>p{color:#a9e3f0;font-size:clamp(17px,3vw,24px);line-height:1.65;margin:0}.mq-creatures{font-size:clamp(25px,5vw,40px);letter-spacing:5px;margin:6px 0}.mq-welcome label{font-weight:800;color:#aee8f5;font-size:19px}.mq-welcome input{width:100%;border:3px solid #0d709c;border-radius:18px;padding:18px;background:#002d4b;color:#fff;font-size:21px;text-align:center;font-family:inherit;outline-offset:3px}.mq-welcome input::placeholder{color:#85aebf}.mq-primary{background:linear-gradient(100deg,#0782bc,#06b8d9);border:0;border-radius:18px;color:white;font-family:inherit;font-size:24px;font-weight:900;padding:19px;cursor:pointer;box-shadow:0 9px 22px #001e3e55}.mq-welcome details{border:2px solid #127da5;border-radius:16px;color:#b7e6f4;padding:15px;font-size:17px}.mq-welcome summary{cursor:pointer;font-weight:800}.mq-welcome details p{line-height:1.8}.mq-play-stats{display:flex;justify-content:space-between;gap:12px;margin-top:25px;font-weight:800;color:#b4ebff}.marine-quiz-progress{margin:13px 0 26px}.marine-quiz-progress>div{height:11px;background:#003456}.marine-quiz-progress i{background:linear-gradient(90deg,#19b9e1,#c8e55d)}.marine-quiz-shell #mqContent h2.mq-question{color:#fff;font-size:clamp(22px,5vw,32px);text-align:center;line-height:1.6}.mq-options button{background:#063c62;color:#fff;border:2px solid #167ca9;border-radius:17px;font-size:clamp(16px,3vw,20px);font-weight:700;display:flex;align-items:center;gap:12px;min-height:65px}.mq-option-letter{display:inline-grid;place-items:center;border-radius:50%;width:36px;height:36px;flex-shrink:0;background:#0a83b6;color:#fff}.mq-options button.correct{background:#115d49;color:#f1fff6;border-color:#51df9e}.mq-options button.wrong{background:#7b3042;color:#fff;border-color:#f78a94}#mqFeedback{color:#f2e77a;text-align:center}.mq-next,.mq-finish button{background:linear-gradient(100deg,#0782bc,#06b8d9);font-size:18px}.mq-finish h2{color:#e8ea61}.mq-finish p{color:#c8f3ff;font-size:20px}@media(min-width:800px){.marine-quiz-shell{height:min(92dvh,880px);max-height:92dvh;border-radius:25px}} /* original: responsive-universal.css */ /* Universal responsive layer: phone, tablet, desktop and touch-enabled interactive panels. */ :root{--touch-target:44px}*,*::before,*::after{box-sizing:border-box}html{max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body,#gameContainer,#ui-layer{max-width:100%;}#ui-layer{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}img,video,canvas,svg{max-width:100%}img,video{height:auto}iframe{max-width:100%}main,section,article,.card,.modal-content{min-width:0;overflow-wrap:anywhere}input,select,textarea,button{font:inherit;max-width:100%}button,a,[role=button],summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #14a5df;outline-offset:3px}#mainContent{width:100%;min-width:0}#mainContent .site-section{max-width:100%;min-width:0}#mainContent .cards-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:clamp(12px,1.7vw,24px)}#mainContent .cards-grid>.card{min-width:0}#section-games .cards-grid>.marine-quiz-card{min-width:0}#section-games .cards-grid>.marine-quiz-card button{min-height:var(--touch-target)}.modal-content{max-width:calc(100vw - 24px)}.marine-quiz-shell{overscroll-behavior:contain;padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}.mq-options button,.mq-next,.mq-primary{min-height:52px}table{max-width:100%} .table-responsive,[class*=table-wrap]{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:599px){#mainContent .cards-grid{grid-template-columns:minmax(0,1fr);gap:14px}#mainContent .site-section{padding-inline:clamp(12px,4vw,20px)}#section-games .cards-grid>.marine-quiz-card{min-height:190px}#section-games .card-btn{width:100%}.marine-quiz-shell{padding-inline:clamp(15px,5vw,24px)}.mq-welcome{gap:13px}.mq-welcome input{font-size:18px}} @media(min-width:600px) and (max-width:1023px){#mainContent .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#mainContent .site-section{padding-inline:clamp(20px,4vw,40px)}#section-games .cards-grid>.marine-quiz-card{min-height:240px}.marine-quiz-shell{width:min(95vw,760px)}} @media(min-width:1024px) and (max-width:1599px){#mainContent .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#mainContent .site-section{padding-inline:clamp(30px,4vw,70px)}} @media(min-width:1600px){#mainContent .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#mainContent .site-section{padding-inline:clamp(40px,5vw,120px)}.section-header h2{font-size:clamp(30px,2.5vw,48px)}} /* Large touch displays (classrooms, kiosks and interactive whiteboards). */ @media(pointer:coarse) and (min-width:768px){:root{--touch-target:56px}button,.card-btn,.btn-primary,.btn-outline,#mobileMenu a{min-height:56px}input,select,textarea{min-height:52px}.mq-options button{min-height:72px;font-size:clamp(20px,2vw,28px)}.mq-primary,.mq-next{min-height:72px}.marine-quiz-shell{width:min(94vw,1100px)}.marine-quiz-shell #mqContent h2.mq-question{font-size:clamp(27px,2.8vw,42px)}.mq-welcome h1{font-size:clamp(36px,4vw,58px)}} @media(min-width:1600px) and (pointer:coarse){body{font-size:clamp(18px,1.15vw,26px)}#mainContent .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.card h3{font-size:clamp(22px,1.5vw,30px)}.card p{font-size:clamp(17px,1.1vw,23px)}.marine-quiz-shell{height:min(94dvh,1100px);max-height:94dvh}} @media(orientation:landscape) and (max-height:540px){.marine-quiz-shell{height:100dvh;max-height:100dvh;overflow-y:auto}.mq-welcome{gap:8px;padding:10px 0}.mq-hero-icon{font-size:52px}.mq-welcome h1{font-size:27px}.mq-creatures{margin:0;font-size:24px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Second-pass fixes for long content, landscape tablets and classroom displays. */ #gameContainer{width:100%;height:100dvh;min-height:0}#ui-layer{height:100dvh;min-height:0;overflow-y:auto!important;overflow-x:hidden!important}#mainContent :is(.cards-grid,.articles-grid,.ebooks-grid,.projects-grid,.workshops-grid,.videos-grid){max-width:100%;min-width:0}#mainContent :is(.card,.ebook-card,.video-card,.project-card){max-width:100%;min-width:0}#mainContent :is(.card,.ebook-card,.video-card,.project-card) :is(h2,h3,p){overflow-wrap:anywhere}#mainContent .site-section{scroll-margin-top:82px}.modal-content,.admin-edit-modal-content,#editorWorkspace .editor-panel{max-height:min(90dvh,900px);overflow-y:auto;overscroll-behavior:contain}#gamePlayModal .game-play-content{max-width:min(96vw,1200px)}#gamePlayBody iframe{max-width:100%;min-height:260px}#mobileMenu{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}#mobileMenu a,#mobileMenu button{min-height:44px}#navbar{max-width:100vw}#navbar .nav-inner{max-width:100%;min-width:0}#navbar .nav-brand{min-width:0}#section-ebooks :is(.card,.ebook-card) img{object-fit:contain}#section-games .cards-grid>.marine-quiz-card{min-height:220px} @media(min-width:769px) and (max-width:1180px){#mainContent .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#navbar .nav-inner{gap:8px}#navbar .nav-brand{font-size:clamp(17px,2vw,24px)}} @media(max-width:768px){#navbar .nav-inner{width:100%;max-width:100%;min-width:0}#mobileMenu{max-height:calc(100dvh - 65px);overflow-y:auto}#mainContent .site-section{padding-block:clamp(24px,6vw,44px)}.modal-content,.admin-edit-modal-content{max-width:calc(100vw - 16px);padding:clamp(12px,3vw,22px)}#gamePlayModal.game-immersive .modal-content{max-width:100vw!important}#section-games .cards-grid>.marine-quiz-card{min-height:190px}} @media(min-width:769px) and (pointer:coarse){#gamePlayModal .game-play-content{max-width:98vw;width:98vw;max-height:94dvh}#gamePlayBody iframe{min-height:60dvh}#mobileMenu a,#mobileMenu button{min-height:56px}} @media(min-width:1400px) and (pointer:coarse){#mainContent .site-section{max-width:1800px;margin-inline:auto}#section-games .cards-grid>.card{min-height:270px}#section-games .cards-grid>.card .card-btn{font-size:clamp(18px,1.3vw,27px);padding:15px 20px}} /* original: site-repair.css */ /* Public site scrolling, keyboard focus and mobile content resilience. */ html,body{overscroll-behavior-y:auto}#ui-layer{overflow-y:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-behavior:auto}button,a,input,select,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #14a3d1;outline-offset:2px}.ch-main,.ch-layout,.ch-item{min-width:0}.ch-item strong,.ch-item p{overflow-wrap:anywhere}.ch-sections{max-height:70vh;overflow:auto}@media(max-width:760px){.ch-sections{max-height:260px;overflow:auto}.ch-toolbar{align-items:stretch}.ch-toolbar button{width:100%}.ch-modal{max-height:90dvh;padding:16px}.ch-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){#ui-layer{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* original: plagebleu-ui-fixes.css */ /* Consistent geometry, accessible controls and resilient responsive layout. */ :root{--pb-tap:44px}#ui-layer{scroll-behavior:auto;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain}#mainContent{min-width:0;width:100%}#mainContent>.site-section{width:100%;min-width:0;scroll-margin-top:85px}#mainContent .section-header{max-width:100%;overflow-wrap:anywhere} #section-creatures .creature-tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:100%;padding:10px 0 18px;overflow:visible}#section-creatures .creature-tabs .ctab{min-height:46px;max-width:100%;white-space:normal;text-align:center;padding:10px 15px;line-height:1.35;border-radius:12px}#section-creatures .creature-card{cursor:pointer;min-width:0;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}#section-creatures .creature-card:focus-visible{outline:3px solid #06b6d4;outline-offset:3px}#section-creatures .creature-name{overflow-wrap:anywhere;text-align:center}#section-creatures .cards-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));align-items:stretch} #mainContent :is(button,.ctab,.card-btn,.btn-primary,.btn-outline){min-height:var(--pb-tap);max-width:100%;touch-action:manipulation}#mainContent :is(button,.ctab,.card-btn):disabled{cursor:not-allowed;opacity:.5}#mainContent .cards-grid>*{min-width:0}#mainContent :is(.dt2-top,.dt2-inputs-grid,.dt2-bottom-grid,.dt-pro,.dt-studio-panel){min-width:0;max-width:100%}#mainContent :is(input,select,textarea){min-width:0;max-width:100%} #mobileMenu{max-width:100vw;max-height:calc(100dvh - 64px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}#mobileMenu :is(a,button){min-height:46px;white-space:normal;overflow-wrap:anywhere} @media(max-width:700px){#section-creatures .creature-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#section-creatures .creature-tabs .ctab{width:100%;font-size:13px;padding:10px 7px}#section-creatures .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#section-creatures .creature-card{min-height:155px;padding:12px 7px}#mainContent>.site-section{padding-inline:clamp(12px,4vw,22px)}#mainContent .section-header h2{font-size:clamp(22px,6vw,32px)}} @media(max-width:360px){#section-creatures .cards-grid{grid-template-columns:1fr}#section-creatures .creature-tabs{grid-template-columns:1fr 1fr}} @media(min-width:701px) and (max-width:1100px){#section-creatures .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(pointer:coarse){:root{--pb-tap:48px}#section-creatures .creature-tabs .ctab{min-height:50px}} @media(prefers-reduced-motion:reduce){#ui-layer{scroll-behavior:auto!important}} /* original: plagebleu-aqua-premium.css */ /* Plagebleu Aqua Premium: coastal education design, inspired by modern aquaculture dashboards. */ :root{--primary:#075f9e;--primary-dark:#073d6a;--primary-light:#1599cc;--accent:#10b9b2;--accent-light:#a8f1e6;--bg-dark:#f4f9fc;--bg-card:#fff;--text:#203c57;--text-heading:#073c65;--text-muted:#59738b;--border-subtle:#dcebf2;--radius:19px;--shadow:0 18px 48px rgba(10,54,86,.1)} #gameContainer{background:#f4f9fc!important}#ui-layer::before{background:radial-gradient(ellipse at 80% 0%,#daf6f633,transparent 50%),radial-gradient(ellipse at 5% 65%,#d1eaf833,transparent 45%)!important} #navbar{background:#ffffffef!important;backdrop-filter:blur(18px);border-bottom:1px solid #e1eef4!important;box-shadow:0 6px 25px #0b436212!important} #navbar .nav-inner{max-width:1500px;min-height:79px;gap:clamp(8px,1.1vw,19px);padding-inline:clamp(12px,2vw,30px)} #navbar .nav-brand{color:#073d6c!important;font-weight:950;letter-spacing:-.03em} #navbar .nav-links{gap:3px;min-width:0}#navbar .nav-links :is(a,.nav-drop-btn){color:#244764!important;border-radius:11px;font-weight:800;font-size:clamp(12px,.97vw,16px);padding:11px clamp(7px,.9vw,14px)} #navbar .nav-links :is(a,.nav-drop-btn):hover{color:#057caa!important;background:#e7f6fc!important}#navbar .nav-drop-menu{border:1px solid #d8edf4!important;border-radius:16px;box-shadow:0 20px 50px #07385821!important} #navbar .nav-hamburger{background:#eaf7fb!important;color:#076a98!important;border:1px solid #cde8f2!important} #mobileMenu{background:#fff!important;border-color:#dcebf2!important}#mobileMenu :is(a,.mobile-nav-group-title):hover{background:#eaf8fc!important} #section-hero.hero-section{width:min(100% - 48px,1480px)!important;max-width:1480px!important;margin:22px auto 35px!important;border-radius:30px!important;overflow:hidden!important;min-height:560px!important;padding:0!important;box-shadow:0 28px 65px #0c416529!important;position:relative} #section-hero .slider-container{min-height:560px!important;height:560px!important;border-radius:inherit;overflow:hidden} #section-hero .slide{padding:clamp(35px,5vw,85px)!important;isolation:isolate;display:flex;align-items:center;justify-content:center;text-align:center} #section-hero .slide::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,#032945d9 0%,#075b7cb5 52%,#0aa8a76e 100%)!important} #section-hero .slide::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.55;background:radial-gradient(circle at 78% 20%,#b9ffeb3d,transparent 22%),radial-gradient(circle at 20% 90%,#0b76af4d,transparent 40%);pointer-events:none} #section-hero .slide-content{width:min(100%,940px);max-width:940px!important;margin:auto!important;position:relative;z-index:1} #section-hero .slide-content h1{font-size:clamp(36px,4.3vw,70px)!important;line-height:1.24!important;color:#fff!important;text-shadow:0 4px 24px #001b324a;margin-bottom:24px!important;font-weight:950;letter-spacing:-.035em} #section-hero .slide-content p{color:#e1f5fb!important;font-size:clamp(16px,1.55vw,22px)!important;line-height:1.9!important;max-width:800px;margin:0 auto 30px!important} #section-hero .btn-hero{background:linear-gradient(110deg,#18b8b6,#0b83bc)!important;color:#fff!important;border:1px solid #ffffff48!important;padding:16px 35px!important;font-size:18px!important;border-radius:15px!important;min-height:56px;box-shadow:0 12px 25px #032a4850!important} #section-hero .btn-hero:hover{transform:translateY(-2px);filter:brightness(1.1)} #section-hero .slider-nav{width:52px!important;height:52px!important;border:1px solid #ffffff65!important;border-radius:50%!important;background:#ffffff27!important;backdrop-filter:blur(8px);color:#fff!important;font-size:26px!important;transition:background .2s} #section-hero .slider-nav:hover{background:#ffffff53!important} #section-hero .slider-dots{bottom:28px!important;display:flex;gap:9px;align-items:center;justify-content:center}#section-hero .slider-dot{width:11px;height:11px;border-radius:50%;background:#cceaf18c;cursor:pointer}#section-hero .slider-dot.active{width:31px;border-radius:20px;background:#fff} #mainContent>.site-section:not(#section-hero){width:min(100%,1420px);margin-inline:auto}#mainContent .section-header h2{color:#073e68!important;font-weight:950}#mainContent .section-divider{background:linear-gradient(90deg,#0b73b3,#13b7b1)!important} #mainContent :is(.card,.feature-card,.stat-card,.workshop-card,.game-card,.project-card){background:#fff;border:1px solid #e0edf3!important;border-radius:19px!important;box-shadow:0 12px 30px #063a5e10!important;transition:transform .18s,box-shadow .18s}#mainContent :is(.card,.feature-card,.stat-card,.workshop-card,.game-card,.project-card):hover{box-shadow:0 18px 40px #063a5e20!important;transform:translateY(-3px)} #mainContent :is(.btn-primary,.card-btn){background:linear-gradient(110deg,#0879b4,#0b9ca9)!important;color:#fff!important;border:0!important;border-radius:12px!important;box-shadow:0 7px 20px #0879b42b} #section-creatures .creature-tabs .ctab.active{background:linear-gradient(110deg,#0879b4,#0b9ca9)!important;color:#fff!important;border-color:transparent!important} #section-creatures .creature-tabs .ctab:not(.active){background:#edf8fc;color:#11557a;border:1px solid #cce8f1} #footer{border-top:3px solid #0b9ca9!important} @media(max-width:900px){#section-hero.hero-section{width:calc(100% - 24px)!important;margin:12px auto 22px!important;border-radius:20px!important;min-height:430px!important}#section-hero .slider-container{height:430px!important;min-height:430px!important}#section-hero .slide{padding:38px 44px!important}#section-hero .slide-content h1{font-size:clamp(28px,6vw,45px)!important}#section-hero .slide-content p{font-size:clamp(14px,3vw,18px)!important}#section-hero .slider-nav{width:39px!important;height:39px!important;font-size:19px!important}#navbar .nav-inner{min-height:64px}} @media(max-width:480px){#section-hero.hero-section{width:calc(100% - 16px)!important;border-radius:17px!important;min-height:410px!important}#section-hero .slider-container{height:410px!important;min-height:410px!important}#section-hero .slide{padding:28px 36px!important}#section-hero .slide-content h1{font-size:clamp(26px,8vw,35px)!important;margin-bottom:14px!important}#section-hero .slide-content p{font-size:14px!important;line-height:1.75!important;margin-bottom:19px!important}#section-hero .btn-hero{min-height:48px;padding:12px 23px!important;font-size:15px!important}#section-hero .slider-nav{width:34px!important;height:34px!important}#section-hero .slider-dots{bottom:18px!important}} @media(prefers-reduced-motion:reduce){#mainContent :is(.card,.btn-hero){transition:none!important;transform:none!important}} /* original: plagebleu-responsive-modals.css */ /* Unified responsive dialogs for games, library, articles, media and forms. */ :root{--pb-modal-gap:clamp(8px,2vw,28px)} body .modal:not(.hidden){position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:var(--pb-modal-gap)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;z-index:3000!important;box-sizing:border-box} body .modal .modal-overlay{position:absolute;inset:0;background:#061d36b9;backdrop-filter:blur(7px)} body .modal .modal-content{position:relative;box-sizing:border-box;min-width:0;width:min(100%,720px);max-width:min(100%,720px);max-height:calc(100dvh - 2 * var(--pb-modal-gap));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(18px,2.5vw,34px)!important;border-radius:clamp(14px,2vw,24px)!important;background:#fff!important;color:#1b3851;box-shadow:0 28px 85px #041f3861!important;border:1px solid #cde7ee!important} body .modal .modal-content :is(img,video,canvas,svg){max-width:100%;height:auto}body .modal .modal-content iframe{max-width:100%;border:0}body .modal .modal-content :is(p,h1,h2,h3,h4,span){overflow-wrap:anywhere}body .modal .modal-content :is(button,a){touch-action:manipulation}body .modal .modal-content .modal-close{position:sticky!important;top:0;float:left;z-index:20;display:grid;place-items:center;width:46px!important;height:46px!important;min-width:46px;background:#e8f3f7!important;color:#07587e!important;border:1px solid #c6e2ec!important;border-radius:13px!important;margin:-5px -5px 6px 10px;font-size:21px!important} body .modal .modal-content .modal-close:focus-visible{outline:3px solid #14a3d1;outline-offset:2px} body .modal .modal-content :is(.modal-info,.report-grid){min-width:0} body #gamePlayModal .game-play-content{display:flex!important;flex-direction:column;width:min(100%,1650px)!important;max-width:min(100%,1650px)!important;height:calc(100dvh - 2 * var(--pb-modal-gap));max-height:calc(100dvh - 2 * var(--pb-modal-gap))!important;padding:clamp(10px,1.5vw,22px)!important;overflow:hidden!important} body #gamePlayModal #gamePlayTitle{flex:0 0 auto;margin:2px 48px 10px!important;font-size:clamp(16px,1.8vw,25px);line-height:1.3} body #gamePlayModal #gamePlayBody{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden} body #gamePlayModal #gamePlayBody>div:first-child{flex:0 0 auto;gap:8px;flex-wrap:wrap;min-height:40px} body #gamePlayModal #gamePlayBody>iframe{flex:1 1 auto;display:block;width:100%!important;min-width:0;min-height:0;height:auto!important;border-radius:12px!important;background:#f0f7fb} body #gamePlayModal .game-immersive-menu{z-index:22} body #creatureModal .modal-content{width:min(100%,880px);max-width:min(100%,880px)} body #articleViewModal .article-view-content,body #creatureModal:has(#modalBody .book-page) .modal-content{width:min(100%,1050px);max-width:min(100%,1050px)} body #articleViewModal .article-view-body-content,body #creatureModal #modalBody{max-width:100%;overflow-wrap:anywhere}body #articleViewModal .article-view-body-content :is(table,pre){display:block;max-width:100%;overflow-x:auto}body #articleViewModal .article-view-body-content img{object-fit:contain} body #videoModal .modal-video{width:min(100%,1120px);max-width:min(100%,1120px)}body #videoModal iframe{width:100%;height:auto;aspect-ratio:16/9;min-height:210px} body .modal :is(.login-modal-content,.admin-edit-modal-content,.article-editor-content,.report-form-content,.report-view-content){max-height:calc(100dvh - 2 * var(--pb-modal-gap))} @media(max-width:700px){:root{--pb-modal-gap:7px}body .modal .modal-content{padding:15px!important;border-radius:15px!important}body .modal .modal-content .modal-close{width:44px!important;height:44px!important;margin:0 0 8px 8px}body .modal .modal-content .modal-info{grid-template-columns:1fr 1fr;gap:7px}body #gamePlayModal .game-play-content{padding:9px!important}body #gamePlayModal #gamePlayTitle{margin:3px 44px 7px!important;font-size:16px}body #gamePlayModal #gamePlayBody>div:first-child{font-size:12px}body #gamePlayModal #gamePlayBody>iframe{border-radius:8px!important}body #videoModal iframe{min-height:180px}} @media(max-width:400px){body .modal .modal-content .modal-info{grid-template-columns:1fr}body #gamePlayModal #gamePlayBody>div:first-child{justify-content:center!important}body #gamePlayModal #gamePlayTitle{font-size:14px}} @media(min-width:1700px){body #gamePlayModal .game-play-content{width:min(96vw,1900px)!important;max-width:min(96vw,1900px)!important}body .modal .modal-content{font-size:clamp(16px,.95vw,22px)}body .modal button{min-height:50px}} @media(orientation:landscape) and (max-height:600px){body #gamePlayModal .game-play-content{padding:6px!important}body #gamePlayModal #gamePlayTitle{font-size:14px;margin:0 40px 3px!important}body #gamePlayModal #gamePlayBody>div:first-child{min-height:28px}} @media(prefers-reduced-motion:reduce){body .modal .modal-content{animation:none!important}} /* original: plagebleu-content-fit.css */ /* Second pass: content itself must fit, not only its surrounding modal. */ body #creatureModal #bookA5Container{box-sizing:border-box!important;width:min(100%,560px)!important;max-width:100%!important;min-height:0!important;padding:clamp(14px,4vw,34px)!important;margin-inline:auto!important;overflow-wrap:anywhere;overflow-x:hidden} body #creatureModal #bookPageContent{min-height:0!important;width:100%;max-width:100%;overflow-wrap:anywhere;line-height:1.9!important;font-size:clamp(15px,2vw,20px)!important} body #creatureModal #bookPageContent :is(img,video,svg,canvas){max-width:100%!important;height:auto!important;object-fit:contain} body #creatureModal #bookPageContent :is(table,pre){display:block;max-width:100%;overflow-x:auto;white-space:pre-wrap} body #creatureModal #bookPageContent iframe{width:100%!important;height:auto!important;aspect-ratio:16/9} body #creatureModal #modalBody>div[style*="max-height:60vh"]{max-height:none!important;padding:clamp(14px,3vw,30px)!important;overflow-wrap:anywhere} body #articleViewModal .article-view-content{width:min(100%,1100px)!important;max-width:min(100%,1100px)!important} body #articleViewModal #articleViewBody{min-width:0;max-width:100%;line-height:1.85} body #articleViewModal #articleViewBody :is(img,video,svg,canvas){max-width:100%!important;height:auto!important;object-fit:contain} body #articleViewModal #articleViewBody :is(table,pre){max-width:100%;overflow-x:auto;display:block} body #articleViewModal #articleViewBody iframe{width:100%!important;height:auto!important;aspect-ratio:16/9} body #gamePlayModal #gamePlayBody>iframe{max-height:100%;min-height:0!important} body #gamePlayModal .game-play-content{min-height:0} body #gamePlayModal #gamePlayBody>div:first-child button{min-height:44px;padding:8px 14px!important} @media(max-width:768px){body #creatureModal .modal-content,body #videoModal .modal-content{padding:54px 15px 18px!important;max-width:100%!important}body #creatureModal .modal-close,body #videoModal .modal-close{margin:-43px 0 4px -3px!important;position:sticky!important}body #creatureModal #bookA5Container{min-height:0!important;padding:19px 15px!important;border-radius:12px!important}body #creatureModal #bookPageContent{font-size:16px!important;min-height:0!important}body #gamePlayModal.game-immersive .game-play-content{height:100dvh!important;max-height:100dvh!important;width:100%!important;max-width:none!important;border-radius:0!important;padding:0!important}body #gamePlayModal.game-immersive #gamePlayBody>iframe{height:auto!important;min-height:0!important}body #gamePlayModal.game-immersive #gamePlayBody>div:first-child{padding-right:58px!important;padding-left:10px!important}body #gamePlayModal.game-immersive .game-immersive-menu{z-index:101}} @media(max-width:400px){body #creatureModal #bookA5Container{padding:14px 11px!important}body #creatureModal #modalBody button{font-size:13px!important;white-space:normal!important}body #gamePlayModal #gamePlayBody>div:first-child button{font-size:12px!important}} @media(min-width:1500px) and (pointer:coarse){body #gamePlayModal #gamePlayBody>div:first-child button,body .modal .modal-close{min-width:60px;min-height:60px;font-size:20px!important}body #gamePlayModal #gamePlayTitle{font-size:clamp(23px,1.5vw,34px)!important}} /* original: plagebleu-classroom.css */ .pb-classroom-entry{direction:rtl;width:min(100% - 48px,1350px);margin:35px auto;padding:clamp(22px,4vw,52px);border-radius:28px;background:linear-gradient(125deg,#064773,#086f9a 70%,#0db5b2);color:white;display:flex;align-items:center;justify-content:space-between;gap:25px;box-shadow:0 18px 45px #07517935}.pb-classroom-entry[hidden]{display:none!important}.pb-classroom-entry h2{font-size:clamp(24px,3vw,42px);margin:12px 0;color:white}.pb-classroom-entry p{max-width:650px;line-height:1.9}.pb-classroom-entry button,.pb-classroom-primary{border:0;border-radius:13px;background:#fff;color:#065781;padding:15px 25px;font:inherit;font-weight:800;cursor:pointer;min-height:52px}.pb-classroom-entry button{white-space:nowrap}.pb-classroom-modal[hidden]{display:none!important}.pb-classroom-modal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:12px}.pb-classroom-backdrop{position:absolute;inset:0;background:#031c35cf;backdrop-filter:blur(6px)}.pb-classroom-panel{position:relative;direction:rtl;background:#fff;color:#153c59;width:min(100%,900px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;border-radius:20px;padding:clamp(18px,3vw,34px);box-shadow:0 22px 80px #001e3466}.pb-classroom-panel header{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #d5e7ef;margin-bottom:20px}.pb-classroom-panel h2,.pb-classroom-panel h3{color:#075981}.pb-classroom-close{width:48px;height:48px;border:0;border-radius:12px;background:#eaf3f8;color:#075981;cursor:pointer}.pb-classroom-panel form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.pb-classroom-panel form label{display:grid;gap:7px;font-weight:700}.pb-classroom-panel select{width:100%;min-height:48px;padding:8px 12px;border:1px solid #b7d5e3;border-radius:10px;background:white;color:#123e5b;font:inherit}.pb-classroom-panel form button{grid-column:1/-1;background:#086b9b;color:white}.pb-classroom-panel small{display:block;margin-top:14px;color:#4d7184}.pb-classroom-summary{background:#eaf6f9;border-radius:13px;padding:14px;display:grid;gap:5px}.pb-classroom-steps{line-height:2;padding-right:25px}.pb-classroom-question{border:1px solid #c9e1eb;border-radius:12px;padding:12px;margin:12px 0}.pb-classroom-question legend{font-weight:800}.pb-classroom-question label{display:block;padding:8px 4px;cursor:pointer}.pb-classroom-question input{width:18px;height:18px;vertical-align:middle;accent-color:#0875a5}.pb-classroom-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.pb-classroom-actions button{padding:12px 17px;border:1px solid #b8d7e5;border-radius:10px;background:#f0f8fb;color:#065981;font:inherit;cursor:pointer;min-height:48px}.pb-classroom-actions .pb-classroom-primary{background:#076c9a;color:white}.pb-classroom-disclaimer{font-size:13px;color:#5b7383}#pbClassroomResult{font-weight:800;color:#075981;margin-top:12px}@media(max-width:700px){.pb-classroom-entry{width:calc(100% - 24px);margin:20px auto;flex-direction:column;align-items:stretch;border-radius:17px}.pb-classroom-entry button{white-space:normal}.pb-classroom-panel form{grid-template-columns:1fr}.pb-classroom-panel{padding:16px}.pb-classroom-panel header h2{font-size:20px}}@media print{body *{visibility:hidden!important}.pb-classroom-panel,.pb-classroom-panel *{visibility:visible!important}.pb-classroom-modal{position:static!important;padding:0!important}.pb-classroom-panel{position:absolute!important;top:0;right:0;width:100%!important;max-height:none!important;overflow:visible!important;box-shadow:none!important}.pb-classroom-backdrop,.pb-classroom-close,.pb-classroom-actions,.pb-classroom-disclaimer{display:none!important}} .pb-classroom-resources{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin:14px 0}.pb-classroom-resources button{border:1px solid #b8dce9;border-radius:12px;background:#eff9fc;color:#075981;padding:15px;text-align:right;min-height:64px;cursor:pointer;font:inherit;font-weight:800}.pb-classroom-resources button:hover,.pb-classroom-resources button:focus-visible{background:#d8f1f9;outline:2px solid #0d88b5}.pb-classroom-resume{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:18px;z-index:2800;background:#075b89;color:#fff;border:2px solid #fff;border-radius:30px;box-shadow:0 8px 24px #002a4466;padding:14px 20px;min-height:52px;font:inherit;font-weight:800;cursor:pointer}.pb-classroom-resume[hidden]{display:none!important}@media(max-width:600px){.pb-classroom-resume{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px)}}@media print{.pb-classroom-resume,.pb-classroom-resources{display:none!important}} .pb-classroom-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pb-classroom-progress label{padding:12px;background:#eef8fc;border:1px solid #c6e2ee;border-radius:11px;cursor:pointer}.pb-classroom-progress input{width:20px;height:20px;vertical-align:middle;accent-color:#0875a5}#pbClassroomProgressText{font-weight:800;color:#075981}#pbClassroomReport{background:#f4f9fb;padding:14px;border-radius:12px;margin-top:16px}@media(max-width:600px){.pb-classroom-progress{grid-template-columns:1fr}}@media print{#pbClassroomReport{border:1px solid #a9cad8} .pb-classroom-progress input{appearance:auto!important}} /* original: plagebleu-library-mobile-fix.css */ /* Library mobile fix: override legacy inline four-column grid. */ #section-library .cards-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(14px,1.8vw,24px)!important;align-items:stretch} #section-library .cards-grid>.card{min-width:0!important;width:100%!important;max-width:none!important;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:16px!important;border-radius:19px!important;overflow:hidden} #section-library .cards-grid>.card>img,#section-library .cards-grid>.card>div[data-book-id]{display:block;width:100%!important;max-width:100%!important;height:clamp(170px,22vw,260px)!important;object-fit:cover!important;border-radius:13px!important} #section-library .cards-grid>.card h3{font-size:clamp(18px,1.35vw,24px)!important;line-height:1.5!important;overflow-wrap:normal!important;word-break:normal!important;margin:3px 0!important} #section-library .cards-grid>.card p{font-size:clamp(14px,1vw,17px)!important;line-height:1.7!important;overflow-wrap:normal!important;word-break:normal!important;margin:0!important;flex:1} #section-library .cards-grid>.card>div:has(>.card-btn){display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:10px!important;margin-top:auto!important;width:100%!important} #section-library .cards-grid>.card .card-btn{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;min-height:50px!important;white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;font-size:clamp(15px,1.15vw,19px)!important;padding:11px 14px!important;border-radius:12px!important;line-height:1.3!important} #section-library .cards-grid>.card .card-btn:first-child{flex:1 1 auto!important} #section-library .cards-grid>.card .card-btn:last-child{flex:0 0 54px!important;width:54px!important} #section-library .creature-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:8px;overscroll-behavior-x:contain} #section-library .creature-tabs .ctab{flex:0 0 auto;white-space:nowrap;min-height:44px} @media(max-width:1100px){#section-library .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:800px){#section-library .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:600px){#section-library .cards-grid{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}#section-library{padding-inline:clamp(12px,4vw,20px)!important}#section-library .cards-grid>.card{padding:16px!important;gap:10px!important}#section-library .cards-grid>.card>img,#section-library .cards-grid>.card>div[data-book-id]{height:clamp(190px,58vw,320px)!important;object-fit:cover!important}#section-library .cards-grid>.card h3{font-size:22px!important}#section-library .cards-grid>.card p{font-size:16px!important}#section-library .cards-grid>.card .card-btn{font-size:17px!important;min-height:52px!important}#section-library .cards-grid>.card .card-btn:last-child{flex-basis:58px!important;width:58px!important}} @media(min-width:601px) and (max-width:800px){#section-library .cards-grid>.card .card-btn{font-size:15px!important;padding:9px!important}} /* original: plagebleu-all-mobile.css */ /* Plagebleu mobile-first consistency for every public content section. */ #mainContent .site-section{min-width:0;max-width:100%;overflow-x:clip} #mainContent .site-section .cards-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(14px,1.8vw,24px)!important;align-items:stretch} #mainContent .site-section .cards-grid>.card{box-sizing:border-box;min-width:0!important;max-width:100%!important;width:100%!important;overflow:hidden;overflow-wrap:normal;word-break:normal} #mainContent .site-section .cards-grid>.card h3,#mainContent .site-section .cards-grid>.card p{overflow-wrap:break-word!important;word-break:normal!important;white-space:normal!important;hyphens:none!important} #mainContent .site-section .cards-grid>.card h3{line-height:1.5!important} #mainContent .site-section .cards-grid>.card p{line-height:1.75!important} #mainContent .site-section .cards-grid>.card :is(img,video){max-width:100%!important;object-fit:cover} #mainContent .site-section .cards-grid>.card :is(button,.card-btn,a.card-btn){min-height:46px;max-width:100%;white-space:normal;word-break:normal;overflow-wrap:normal;line-height:1.4;text-align:center} #mainContent .site-section .cards-grid>.card>div:has(>.card-btn){min-width:0;max-width:100%;flex-wrap:wrap!important} #mainContent .site-section :is(.creature-tabs,.category-tabs,.filter-tabs){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} #mainContent .site-section .ctab{min-height:42px} #mainContent .site-section :is(table,pre){max-width:100%;overflow-x:auto} #mainContent .site-section :is(input,select,textarea){max-width:100%;min-width:0} #mainContent .site-section :is(.section-header,.section-header h2){max-width:100%;overflow-wrap:break-word;word-break:normal} #mainContent .site-section .cards-grid>.card :is(.card-img,.ebook-cover-img){width:100%;height:auto;max-height:290px;object-fit:cover} #mainContent .site-section .cards-grid>.card .card-btn{font-size:clamp(14px,1.2vw,18px);padding:10px 14px} #section-blog .cards-grid>.card{display:flex;flex-direction:column;gap:9px;padding:16px!important;border-radius:18px} #section-blog .cards-grid>.card>img,#section-blog .cards-grid>.card>div[onclick*="openBlogArticle"]{width:100%!important;max-width:100%!important;height:clamp(170px,20vw,250px)!important;object-fit:cover;border-radius:13px!important} #section-blog .cards-grid>.card h3{font-size:clamp(18px,1.4vw,24px)!important;margin:5px 0!important} #section-blog .cards-grid>.card p{font-size:clamp(14px,1vw,17px)!important;margin:0!important;flex:1} #section-blog .cards-grid>.card>div:has(>.card-btn){display:flex!important;flex-wrap:nowrap!important;gap:10px!important;margin-top:auto!important;width:100%!important} #section-blog .cards-grid>.card .card-btn{display:flex!important;align-items:center;justify-content:center;min-width:0;white-space:nowrap!important;font-size:clamp(15px,1.15vw,19px)!important} #section-blog .cards-grid>.card .card-btn:first-child{flex:1 1 auto} #section-blog .cards-grid>.card .card-btn:last-child{flex:0 0 54px;width:54px} #section-articles .article-card,#section-ebooks .ebook-card{display:flex;flex-direction:column;gap:8px} #section-articles .article-card p,#section-ebooks .ebook-card p{flex:1} #section-articles .article-card .card-btn,#section-ebooks .ebook-card .card-btn{min-height:48px} #mainContent .site-section .cards-grid>.card :is(.edit-section-controls){max-width:100%;flex-wrap:wrap} @media(max-width:1100px){#mainContent .site-section .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:800px){#mainContent .site-section .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:600px){ #mainContent .site-section{padding-inline:clamp(12px,4vw,20px)!important} #mainContent .site-section .cards-grid{grid-template-columns:minmax(0,1fr)!important;gap:17px!important} #mainContent .site-section .cards-grid>.card{padding:16px!important;border-radius:18px!important} #mainContent .site-section .cards-grid>.card h3{font-size:clamp(19px,5vw,23px)!important;line-height:1.5!important} #mainContent .site-section .cards-grid>.card p{font-size:clamp(15px,4vw,17px)!important} #mainContent .site-section .cards-grid>.card :is(.card-btn,button){min-height:50px;font-size:16px!important} #section-blog .cards-grid>.card>img,#section-blog .cards-grid>.card>div[onclick*="openBlogArticle"]{height:clamp(190px,58vw,320px)!important} #section-blog .cards-grid>.card .card-btn{font-size:17px!important} #section-blog .cards-grid>.card .card-btn:last-child{flex-basis:58px;width:58px} #mainContent .site-section .section-header h2{font-size:clamp(24px,6vw,31px)!important} #mainContent .site-section .section-header p{font-size:15px;line-height:1.75} #mainContent .site-section .cards-grid>.card :is(.card-img,.ebook-cover-img){max-height:320px} #mainContent .site-section .cards-grid>.card>div:has(>.card-btn){gap:8px!important} #mainContent .site-section .cards-grid>.card>div:has(>.card-btn)>.card-btn{flex:1 1 auto} #mainContent .site-section .cards-grid>.card>div:has(>.card-btn)>.card-btn:last-child:not(:first-child){flex:0 0 auto} #mainContent .site-section .cards-grid>.card>div:has(>.card-btn)>.card-btn:only-child{width:100%} } @media(max-width:380px){#mainContent .site-section .cards-grid>.card{padding:12px!important}#mainContent .site-section .cards-grid>.card .card-btn{font-size:14px!important;padding:10px!important}} /* original: plagebleu-classroom-mode.css */ #pbClassroomModeTrigger{position:fixed;z-index:1250;left:14px;bottom:max(15px,env(safe-area-inset-bottom));padding:11px 17px;min-height:48px;border:2px solid #fff;border-radius:30px;background:#075f91;color:white;box-shadow:0 8px 28px #002c4a66;font:inherit;font-weight:800;cursor:pointer;max-width:calc(100vw - 28px)} #pbClassroomModeBar{display:none;position:fixed;top:0;right:0;left:0;z-index:2400;min-height:76px;background:#073d62;color:white;box-shadow:0 6px 25px #03233b44;padding:10px clamp(12px,3vw,38px);gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-weight:800} #pbClassroomModeBar button{border:1px solid #b9e6f5;background:#e8f7fc;color:#07547d;padding:11px 16px;min-height:52px;border-radius:12px;font:inherit;font-weight:800;cursor:pointer} body.pb-classroom-mode #pbClassroomModeBar{display:flex}body.pb-classroom-mode #pbClassroomModeTrigger{display:none} body.pb-classroom-mode #navbar,body.pb-classroom-mode #footer,body.pb-classroom-mode #topControls,body.pb-classroom-mode #publicAccountBar,body.pb-classroom-mode #mobileMenu{display:none!important} body.pb-classroom-mode #ui-layer{padding-top:84px!important}body.pb-classroom-mode #mainContent .site-section{max-width:1550px!important}body.pb-classroom-mode #mainContent .site-section h2{font-size:clamp(28px,3vw,48px)!important}body.pb-classroom-mode #mainContent .site-section .card-btn,body.pb-classroom-mode #mainContent .site-section button{min-height:56px;font-size:clamp(17px,1.5vw,24px)!important} body.pb-classroom-mode #mainContent .site-section .card p{font-size:clamp(17px,1.4vw,23px)!important}body.pb-classroom-mode #mainContent .site-section .card h3{font-size:clamp(21px,1.7vw,29px)!important} body.pb-classroom-mode #pbClassroomResume{bottom:18px;left:16px;z-index:2500} @media(max-width:650px){#pbClassroomModeBar{min-height:68px;gap:6px;padding:7px 8px;justify-content:space-around}#pbClassroomModeBar .pb-classroom-mode-label{font-size:13px;flex-basis:100%;text-align:center}#pbClassroomModeBar button{font-size:12px;padding:7px 9px;min-height:40px}body.pb-classroom-mode #ui-layer{padding-top:106px!important}#pbClassroomModeTrigger{font-size:13px;padding:9px 13px;min-height:44px}} @media print{#pbClassroomModeBar,#pbClassroomModeTrigger{display:none!important}} #pbClassroomModeTrigger{display:none!important}.pb-classroom-nav-link{display:inline-flex;align-items:center;gap:7px;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid #b5d9eb;border-radius:12px;background:#eaf7ff;color:#07547d;font:700 14px system-ui,Arial;cursor:pointer}.pb-classroom-nav-link:hover,.pb-classroom-nav-link:focus-visible{background:#d4efff;outline:2px solid #0787b9;outline-offset:2px}#mobileMenu .pb-classroom-nav-link{display:flex;width:calc(100% - 20px);margin:10px;text-align:center;min-height:48px;font-size:16px}@media(max-width:800px){#navLinks .pb-classroom-nav-link{display:none}} /* original: plagebleu-smartboard.css */ #pbSmartboard[hidden],#pbSmartboardBack[hidden]{display:none!important}#pbSmartboard{position:fixed;inset:0;z-index:2300;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(circle at 8% 15%,#0b7aa966,transparent 34%),radial-gradient(circle at 95% 90%,#09b7b155,transparent 40%),linear-gradient(135deg,#062b4b,#074b70 62%,#036f82);color:#fff;padding:clamp(16px,3vw,45px);font-family:inherit}#pbSmartboard .pb-smartboard-inner{max-width:1500px;margin:auto;min-height:100%;display:flex;flex-direction:column}#pbSmartboard .pb-smartboard-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.pb-smartboard-brand{font-weight:900;font-size:clamp(17px,1.5vw,24px)}#pbSmartboardClose{background:#ffffff24;color:#fff;border:1px solid #ffffff88;border-radius:14px;padding:12px 18px;min-height:50px;font:inherit;font-weight:800;cursor:pointer}.pb-smartboard-heading{text-align:center;margin:clamp(25px,5vh,70px) auto 25px}.pb-smartboard-kicker{background:#ffffff24;border:1px solid #ffffff55;border-radius:30px;padding:8px 18px;font-weight:800}.pb-smartboard-heading h1{font-size:clamp(31px,5vw,68px);line-height:1.2;margin:22px 0 14px;color:#fff}.pb-smartboard-heading p{font-size:clamp(16px,1.7vw,25px);color:#e4f6fc}.pb-smartboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.7vw,25px);width:100%;margin:18px auto}.pb-smartboard-card{display:flex;align-items:flex-start;flex-direction:column;text-align:right;gap:10px;position:relative;min-height:clamp(170px,18vw,235px);padding:clamp(18px,2.4vw,34px);border:1px solid #bdebf477;border-radius:23px;background:linear-gradient(140deg,#ffffffed,#dff7f7f2);box-shadow:0 15px 35px #001b3450;color:#064467;font:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s}.pb-smartboard-card:hover,.pb-smartboard-card:focus-visible{transform:translateY(-4px);box-shadow:0 22px 40px #001b3470;outline:3px solid #f5d97b}.pb-smartboard-icon{font-size:clamp(34px,4vw,57px)}.pb-smartboard-card strong{font-size:clamp(21px,2vw,32px);line-height:1.35}.pb-smartboard-card small{font-size:clamp(14px,1.2vw,19px);color:#476c7f}.pb-smartboard-arrow{position:absolute;left:22px;bottom:20px;font-size:25px}.pb-smartboard-bottom{text-align:center;margin:24px auto 8px}.pb-smartboard-bottom button{background:#f9d978;border:0;border-radius:16px;padding:17px 35px;min-height:60px;color:#123e56;font:inherit;font-weight:900;font-size:clamp(18px,1.7vw,24px);cursor:pointer}.pb-smartboard-bottom p{color:#d6f0f6;font-size:14px;margin-top:12px}#pbSmartboardBack{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));right:15px;z-index:2300;border:2px solid white;border-radius:30px;background:#05638d;color:white;box-shadow:0 9px 25px #001b3455;padding:13px 22px;min-height:52px;font:inherit;font-weight:900;cursor:pointer}body.pb-classroom-mode #pbClassroomModeBar{z-index:2250}body.pb-classroom-mode .pb-classroom-modal{z-index:2600}@media(max-width:900px){.pb-smartboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){#pbSmartboard{padding:15px 12px}.pb-smartboard-top{align-items:flex-start!important}.pb-smartboard-brand{font-size:15px}#pbSmartboardClose{font-size:12px;padding:8px 10px;min-height:44px}.pb-smartboard-heading{margin:35px auto 12px}.pb-smartboard-heading h1{font-size:29px}.pb-smartboard-heading p{font-size:15px}.pb-smartboard-grid{gap:11px}.pb-smartboard-card{padding:14px 12px;min-height:160px;border-radius:16px}.pb-smartboard-icon{font-size:31px}.pb-smartboard-card strong{font-size:17px}.pb-smartboard-card small{font-size:12px}.pb-smartboard-arrow{left:12px;bottom:10px;font-size:19px}.pb-smartboard-bottom button{font-size:16px;min-height:52px;padding:12px 20px}#pbSmartboardBack{font-size:14px;padding:10px 14px}}@media(max-width:360px){.pb-smartboard-grid{grid-template-columns:1fr}.pb-smartboard-card{min-height:125px}}@media(prefers-reduced-motion:reduce){.pb-smartboard-card{transition:none}}@media print{#pbSmartboard,#pbSmartboardBack{display:none!important}} /* Interactive whiteboards 16:9 (Full HD/4K), touch panels 55–86 inches. */ @media (min-width:1280px) and (min-height:680px){ #pbSmartboard{padding:clamp(18px,2.3vh,34px) clamp(28px,3vw,72px)!important;box-sizing:border-box} #pbSmartboard .pb-smartboard-inner{max-width:1840px!important;min-height:calc(100dvh - 6vh)!important;justify-content:space-between!important} #pbSmartboard .pb-smartboard-heading{margin:clamp(12px,2.5vh,38px) auto 12px!important} #pbSmartboard .pb-smartboard-heading h1{font-size:clamp(40px,3.5vw,78px)!important;margin:12px 0!important} #pbSmartboard .pb-smartboard-heading p{font-size:clamp(20px,1.65vw,32px)!important} #pbSmartboard .pb-smartboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(15px,1.5vw,30px)!important;margin:12px auto!important} #pbSmartboard .pb-smartboard-card{min-height:clamp(165px,21vh,280px)!important;padding:clamp(20px,2vw,40px)!important;border-radius:22px!important;cursor:pointer;touch-action:manipulation} #pbSmartboard .pb-smartboard-card strong{font-size:clamp(23px,1.85vw,36px)!important} #pbSmartboard .pb-smartboard-card small{font-size:clamp(17px,1.15vw,24px)!important} #pbSmartboard .pb-smartboard-icon{font-size:clamp(42px,3.5vw,72px)!important} #pbSmartboardClose,#pbSmartboardBack,#pbSmartboard .pb-smartboard-bottom button{min-height:64px!important;min-width:64px!important;font-size:clamp(18px,1.25vw,25px)!important;touch-action:manipulation} #pbSmartboard .pb-smartboard-bottom{margin:12px auto!important} } @media (min-width:1280px) and (max-height:800px){#pbSmartboard .pb-smartboard-card{min-height:145px!important;padding:18px!important}#pbSmartboard .pb-smartboard-heading{margin:8px auto!important}#pbSmartboard .pb-smartboard-heading h1{font-size:40px!important}} @media (pointer:coarse) and (min-width:1000px){#pbSmartboard button,#pbSmartboard .pb-smartboard-card,#pbSmartboardBack,#pbClassroomModeBar button{touch-action:manipulation;min-height:64px!important}#pbSmartboard .pb-smartboard-card:focus-visible{outline:5px solid #fbd76b;outline-offset:3px}} /* Classroom preset: 65-inch 16:9 interactive touch screen. Optimized at 1920x1080 and 3840x2160 CSS-scaled displays. */ @media (min-width:1400px) and (min-height:800px){ #pbSmartboard{padding:clamp(22px,2.4vh,44px) clamp(34px,3.5vw,82px)!important} #pbSmartboard .pb-smartboard-inner{max-width:1660px!important} #pbSmartboard .pb-smartboard-top{min-height:64px!important} #pbSmartboard .pb-smartboard-brand{font-size:clamp(22px,1.4vw,30px)!important} #pbSmartboard .pb-smartboard-heading h1{font-size:clamp(44px,3.25vw,68px)!important;line-height:1.22!important} #pbSmartboard .pb-smartboard-heading p{font-size:clamp(22px,1.5vw,30px)!important;line-height:1.5!important} #pbSmartboard .pb-smartboard-grid{gap:clamp(18px,1.5vw,28px)!important} #pbSmartboard .pb-smartboard-card{min-height:clamp(180px,19vh,250px)!important;padding:clamp(22px,1.8vw,35px)!important} #pbSmartboard .pb-smartboard-card strong{font-size:clamp(25px,1.7vw,34px)!important;line-height:1.35!important} #pbSmartboard .pb-smartboard-card small{font-size:clamp(18px,1.15vw,23px)!important;line-height:1.45!important} #pbSmartboard .pb-smartboard-bottom button,#pbSmartboardClose,#pbSmartboardBack{min-height:70px!important;min-width:70px!important;padding:14px 24px!important} #pbClassroomModeBar button{min-height:64px!important;padding:12px 20px!important;font-size:19px!important} } /* original: plagebleu-lessons.css */ #pbLessons[hidden],#pbLessonReturn[hidden]{display:none!important}#pbLessons{position:fixed;inset:0;z-index:2400;overflow-y:auto;background:linear-gradient(130deg,#e7f8fc,#f5faff);color:#123e58;padding:clamp(12px,3vw,36px);font-family:inherit}#pbLessons .pb-lessons-wrap{max-width:1200px;margin:auto}#pbLessons header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:clamp(16px,2vw,25px)}#pbLessons button{font:inherit;cursor:pointer}#pbLessonsClose{background:#07638b;color:white;border:0;border-radius:12px;padding:12px 16px;min-height:48px}#pbLessonsBody>h1{text-align:center;font-size:clamp(27px,4vw,47px);color:#064c72;margin:35px 0 15px}#pbLessonsBody>p{text-align:center;font-size:19px}.pb-lessons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin:25px 0}.pb-lessons-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:right;gap:12px;border:1px solid #c3e3ee;border-radius:20px;background:white;padding:25px;min-height:195px;box-shadow:0 10px 25px #07527818;color:#075278}.pb-lessons-grid span{font-size:54px}.pb-lessons-grid strong{font-size:clamp(21px,2vw,29px)}.pb-lessons-grid small{font-size:15px;color:#51768a}.pb-lessons-steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:25px auto}.pb-lessons-steps span{background:#d4e8f0;border-radius:25px;padding:10px 14px}.pb-lessons-steps .active{background:#08678e;color:white;font-weight:900}.pb-lessons-stage{background:white;border:1px solid #c9e2ec;border-radius:24px;min-height:350px;padding:clamp(20px,4vw,52px);text-align:center;box-shadow:0 15px 35px #073f5d17}.pb-lessons-icon{font-size:clamp(60px,8vw,105px)}.pb-lessons-stage h2{font-size:clamp(23px,3vw,37px);color:#075078}.pb-lessons-stage p{font-size:clamp(19px,2.2vw,29px);line-height:1.85;max-width:880px;margin:20px auto}.pb-lessons-stage small{font-size:16px;color:#59788a}.pb-lessons-answers{display:grid;gap:12px;max-width:800px;margin:20px auto}.pb-lessons-answers button{background:#eefaff;color:#064e73;border:2px solid #b6dce9;border-radius:14px;min-height:58px;padding:12px;font-size:clamp(17px,2vw,24px)!important}.pb-lessons-answers button[aria-pressed=true]{background:#b7ece3;border-color:#008e87}#pbLessonResource,.pb-lessons-nav button{background:#07638b;color:white;border:0;border-radius:13px;padding:14px 24px;min-height:54px;font-weight:800!important}.pb-lessons-nav{display:flex;justify-content:space-between;gap:10px;margin:20px 0}#pbLessonReturn{position:fixed;right:14px;bottom:18px;z-index:2500;background:#07638b;color:white;border:2px solid white;border-radius:28px;padding:14px 20px;min-height:52px;font:inherit;font-weight:900;cursor:pointer}@media(max-width:550px){.pb-lessons-stage{min-height:280px;padding:22px 14px}.pb-lessons-steps{gap:4px}.pb-lessons-steps span{font-size:11px;padding:7px}#pbLessons header{font-size:14px}#pbLessonsClose{font-size:12px;padding:8px 10px}.pb-lessons-nav button{padding:12px 15px}} /* original: plagebleu-science-safe.css */ .pb-science-citations{margin:20px 0;padding:15px;border-radius:14px;background:#e8f6fa;color:#124c66;line-height:1.7}.pb-science-citations p{font-size:14px;margin:8px 0}.pb-science-citations a{display:inline-block;margin:5px 8px;color:#075e89;text-decoration:underline;font-size:14px} /* original: plagebleu-taxon-photo-ui.css */ .creature-emoji.pb-tax-photo,.modal-emoji.pb-tax-photo{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.creature-emoji.pb-tax-photo img{width:100%;height:100%;min-height:110px;max-height:170px;object-fit:contain;background:#edf7fa}.modal-emoji.pb-tax-photo{flex-direction:column}.modal-emoji.pb-tax-photo img{width:min(100%,420px);height:240px;object-fit:contain;border-radius:14px;background:#edf7fa}.pb-tax-credit{font-size:11px;color:#075e89;margin-top:4px;display:block}.pb-tax-photo img+*{display:block}.creature-emoji.pb-tax-photo,.modal-emoji.pb-tax-photo{font-size:0!important}.creature-emoji.pb-tax-photo img,.modal-emoji.pb-tax-photo img{display:block;flex-shrink:0}.modal-emoji.pb-tax-photo .pb-tax-credit{font-size:11px!important} .creature-emoji:not(.pb-tax-photo),.modal-emoji:not(.pb-tax-photo){font-size:clamp(2.4rem,5vw,4.3rem);text-align:center} /* Restore the original illustrations: emojis remain visible, no photo can hide them. */ .creature-card .creature-emoji,.modal-emoji{font-size:clamp(3rem,6vw,5rem)!important;line-height:1.3;display:flex;align-items:center;justify-content:center;text-align:center}.creature-card .creature-emoji{height:125px;min-height:110px;background:linear-gradient(135deg,#e8f8ff,#d4eff8);border-radius:16px}.creature-emoji.pb-tax-photo,.modal-emoji.pb-tax-photo{font-size:clamp(3rem,6vw,5rem)!important}.creature-emoji img,.modal-emoji img{display:none!important} #modalBody .pb-science-citations{display:none!important}#modalBody>h3{text-align:center;margin:6px 0 12px}#modalBody>.modal-emoji{margin:0 auto 14px;min-height:90px}#modalBody .modal-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}#modalBody .info-item{min-width:0;overflow-wrap:anywhere} /* original: plagebleu-fishipedia-only.css */ .pb-fishipedia-single-source{background:#eaf6fa;border:1px solid #b4e0ed;padding:16px;margin:18px 0;border-radius:14px;color:#17485e;line-height:1.8}.pb-fishipedia-single-source a{color:#006e9a;text-decoration:underline;display:inline-block;margin:5px 8px}.creature-emoji.pb-tax-photo img{object-fit:contain} .pb-fishipedia-single-source{display:none!important} /* original: plagebleu-education-suite.css */ #pb-edu-launch{position:fixed;bottom:22px;inset-inline-end:20px;z-index:9990;background:#075f94;color:white;border:0;border-radius:40px;padding:12px 18px;box-shadow:0 5px 20px #1235;cursor:pointer;font-weight:700}#pb-edu-root[hidden]{display:none}#pb-edu-root{position:fixed;inset:0;z-index:10000}.pb-edu-backdrop{position:absolute;inset:0;background:#001c36b9}.pb-edu-dialog{position:absolute;inset:3vh 3vw;background:white;border-radius:18px;padding:clamp(12px,3vw,30px);overflow:auto;max-height:94vh;width:94vw;max-width:1050px;left:50%;transform:translateX(-50%);color:#123650}.pb-edu-dialog header,.pb-edu-dialog header>div,.pb-edu-dialog nav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.pb-edu-dialog button{cursor:pointer;border:0;background:#087bb5;color:white;border-radius:9px;padding:10px 13px;margin:3px}.pb-edu-dialog input,.pb-edu-dialog select{display:block;width:100%;padding:10px;border:1px solid #9ab5c5;border-radius:8px;max-width:100%;box-sizing:border-box}.pb-edu-dialog label{display:block;margin:10px 0}.pb-edu-dialog form{background:#eef8fd;padding:16px;border-radius:12px}.pb-edu-card{padding:15px;margin:12px 0;border:1px solid #bcd7e6;border-radius:12px}.pb-edu-note{font-size:13px;color:#7c5111}.pb-edu-answers{display:flex;gap:10px;justify-content:center}.pb-edu-answers button{font-size:35px;padding:20px}@media(max-width:600px){.pb-edu-dialog{inset:0;width:100vw;max-height:100dvh;height:100dvh;border-radius:0;transform:none;left:0;box-sizing:border-box}.pb-edu-dialog header h2{font-size:19px}#pb-edu-launch{bottom:12px;inset-inline-end:10px}} /* original: plagebleu-education-lab.css */ .pb-lab{background:linear-gradient(145deg,#e8f7ff,#fff);border:1px solid #b5ddec;border-radius:16px;padding:clamp(14px,3vw,28px);margin-top:15px}.pb-lab h4{font-size:1.3rem;color:#075f94}.pb-lab-progress{padding:10px;border-radius:10px;background:#d6effb;margin:14px 0;font-weight:700}.pb-lab-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:18px 0}.pb-lab-options button{min-height:60px}.pb-lab-options button:disabled{opacity:.65;cursor:default}#pb-lab-feedback{font-weight:700;min-height:1.5em} /* original: plagebleu-education-results-report.css */ .pb-results-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}.pb-results-metrics strong{background:#e7f5fc;padding:16px;border-radius:10px;color:#075f94}.pb-results-table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}.pb-results-table th,.pb-results-table td{border:1px solid #b8d5e4;padding:10px;text-align:start;white-space:nowrap} /* original: plagebleu-education-admin-final.css */ .pb-admin-scroll{overflow-x:auto;max-height:270px;overflow-y:auto}.pb-admin-scroll table{width:100%;border-collapse:collapse}.pb-admin-scroll td,.pb-admin-scroll th{padding:9px;border:1px solid #c3dbe8;text-align:start}.pb-admin-scroll tr:nth-child(even){background:#edf7fb} /* original: plagebleu-language-button.css */ #pb-language-switch{border:1px solid #c0d9eb;background:#fff;color:#06547b;border-radius:12px;padding:9px 14px;font:700 14px system-ui,Arial;cursor:pointer;white-space:nowrap;min-height:40px}#pb-language-switch:focus-visible{outline:3px solid #007cb9;outline-offset:2px}@media(max-width:600px){#pb-language-switch{padding:8px 10px;font-size:12px}} #mobileMenu .pb-mobile-language{display:flex!important;align-items:center;justify-content:center;gap:10px;width:calc(100% - 20px);min-height:48px;margin:10px;padding:11px 16px;background:#e9f6ff;color:#07547d;border:1px solid #9dcbe5;border-radius:12px;font:700 16px system-ui,Arial;cursor:pointer;visibility:visible!important;opacity:1!important}#mobileMenu .pb-mobile-language:focus-visible{outline:3px solid #007cb9;outline-offset:2px} /* original: plagebleu-navigation-layout.css */ /* Desktop navigation: language-specific direction, clean spacing, no collisions. */ @media(min-width:901px){ #navbar{width:100%;box-sizing:border-box} #navbar .nav-inner{max-width:100%!important;width:100%!important;box-sizing:border-box;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:clamp(12px,1.6vw,28px)!important;padding:12px clamp(18px,2.5vw,42px)!important;min-height:78px!important;direction:inherit!important} html[dir=rtl] #navbar .nav-inner{direction:rtl!important} html[dir=ltr] #navbar .nav-inner{direction:ltr!important} #navbar .nav-brand{flex:0 0 auto!important;max-width:210px;white-space:nowrap!important;font-size:clamp(18px,1.45vw,24px)!important;overflow:visible!important;order:0!important} #navbar #navLinks{display:flex!important;flex:1 1 auto!important;min-width:0!important;align-items:center!important;justify-content:center!important;gap:clamp(4px,.7vw,13px)!important;flex-wrap:nowrap!important;order:1!important} #navbar #navLinks>.nav-dropdown,#navbar #navLinks>.nav-link-single,#navbar #navLinks>.pb-classroom-nav-link{flex:0 0 auto!important;white-space:nowrap!important;min-width:0!important} #navbar #navLinks .nav-drop-btn,#navbar #navLinks .nav-link-single,#navbar #navLinks .pb-classroom-nav-link{font-size:clamp(12px,.84vw,15px)!important;padding:10px clamp(6px,.65vw,13px)!important;line-height:1.3!important;border-radius:12px!important} #navbar #navLinks .nav-drop-menu{min-width:200px;z-index:1200} #navbar .nav-hamburger{display:none!important} #navbar #publicAccountBar{flex:0 0 auto!important;order:2!important} html[dir=ltr] #navbar .nav-brand{text-align:left!important} html[dir=rtl] #navbar .nav-brand{text-align:right!important} } @media(min-width:901px) and (max-width:1230px){#navbar .nav-inner{gap:8px!important;padding-inline:12px!important}#navbar #navLinks{gap:2px!important}#navbar #navLinks .nav-drop-btn,#navbar #navLinks .nav-link-single,#navbar #navLinks .pb-classroom-nav-link{padding:8px 5px!important;font-size:12px!important}} @media(max-width:900px){html[dir=ltr] #navbar .nav-inner{direction:ltr!important}html[dir=rtl] #navbar .nav-inner{direction:rtl!important}html[dir=ltr] #mobileMenu{direction:ltr;text-align:left}html[dir=rtl] #mobileMenu{direction:rtl;text-align:right}} /* Remove detached controls overlapping the navigation. */ #pb-language-switch{max-width:125px;white-space:nowrap} /* Unified navigation buttons: icons and text are independent flex items. */ #navbar #navLinks{column-gap:clamp(7px,.85vw,16px)!important} #navbar #navLinks .nav-drop-btn,#navbar #navLinks .nav-link-single,#navbar #navLinks .pb-classroom-nav-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;gap:8px!important;vertical-align:middle!important;min-height:44px!important;white-space:nowrap!important;letter-spacing:0!important;box-sizing:border-box!important} #navbar #navLinks .nav-drop-btn{border:1px solid transparent!important;background:transparent!important} #navbar #navLinks .nav-drop-btn:hover,#navbar #navLinks .nav-link-single:hover{background:#eaf6fb!important;border-color:#d5edf6!important} #navbar #navLinks .pb-nav-icon,#navbar #navLinks .pb-nav-title,#navbar #navLinks .nav-drop-arrow{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;line-height:1.2!important} #navbar #navLinks .pb-nav-icon{font-size:17px!important;min-width:19px} #navbar #navLinks .nav-drop-arrow{font-size:11px!important;margin:0!important;opacity:.7} #navbar #navLinks .nav-link-single{padding-inline:12px!important} #navbar #navLinks .pb-classroom-nav-link{padding-inline:12px!important} #mobileMenu .mobile-nav-group-title{display:flex!important;align-items:center!important;gap:10px!important} #mobileMenu .pb-nav-icon{min-width:24px;text-align:center} #mobileMenu .mobile-arrow{margin-inline-start:auto} @media(min-width:901px) and (max-width:1250px){#navbar #navLinks{gap:3px!important}#navbar #navLinks .nav-drop-btn,#navbar #navLinks .nav-link-single,#navbar #navLinks .pb-classroom-nav-link{gap:5px!important;padding-inline:6px!important}} /* original: plagebleu-nav-redesign-v3.css */ /* Brand-new university-style desktop menu, overriding the old light navigation. */ @media(min-width:901px){ #navbar{background:#073d69!important;border:0!important;box-shadow:0 5px 18px rgba(0,22,46,.18)!important} #navbar .nav-inner{display:grid!important;grid-template-columns:minmax(160px,235px) minmax(0,1fr) 120px!important;gap:20px!important;min-height:98px!important;max-width:1600px!important;margin:auto!important;padding:16px clamp(18px,2.2vw,36px)!important;background:transparent!important} #navbar .nav-brand{grid-column:1!important;grid-row:1!important;max-width:235px!important;color:white!important;font-size:clamp(18px,1.5vw,25px)!important;font-weight:850!important;white-space:nowrap!important;letter-spacing:0!important} #navbar #navLinks{grid-column:2!important;grid-row:1!important;display:flex!important;flex-wrap:nowrap!important;justify-content:space-evenly!important;align-items:center!important;gap:8px!important;min-width:0!important} #navbar #navLinks .nav-drop-btn,#navbar #navLinks .nav-link-single,#navbar #navLinks .pb-classroom-nav-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;background:transparent!important;color:#fff!important;border:0!important;border-radius:7px!important;box-shadow:none!important;padding:13px 9px!important;font-size:clamp(13px,.96vw,16px)!important;font-weight:650!important;min-height:48px!important;line-height:1.3!important;white-space:nowrap!important} #navbar #navLinks .nav-drop-btn:hover,#navbar #navLinks .nav-link-single:hover,#navbar #navLinks .pb-classroom-nav-link:hover{background:#155785!important;color:#fff!important} #navbar #navLinks .nav-drop-arrow{color:#c9e8fb!important;opacity:1!important;font-size:12px!important} #navbar #navLinks .nav-drop-menu{top:calc(100% + 3px)!important;background:#fff!important;border-radius:10px!important;box-shadow:0 18px 35px #001c3760!important} #navbar #navLinks .nav-drop-menu a{color:#143b55!important} #navbar #navLinks .pb-classroom-nav-link{border:1px solid #5685a8!important;padding-inline:12px!important} #navbar #navLinks .pb-nav-icon{display:none!important} #pb-nav-actions{grid-column:3!important;grid-row:1!important;display:flex!important;justify-content:flex-end!important;align-items:center!important} #pb-nav-actions #pb-language-switch{background:#145680!important;color:white!important;border:1px solid #6799b8!important;border-radius:8px!important;font-size:13px!important;min-width:106px!important;min-height:43px!important;position:static!important;box-shadow:none!important} #navbar .nav-hamburger{display:none!important} } @media(min-width:901px) and (max-width:1250px){#navbar .nav-inner{grid-template-columns:160px minmax(0,1fr) 90px!important;gap:8px!important;padding-inline:10px!important}#navbar #navLinks{gap:0!important}#navbar #navLinks .nav-drop-btn,#navbar #navLinks .nav-link-single,#navbar #navLinks .pb-classroom-nav-link{font-size:12px!important;padding:10px 5px!important}#pb-nav-actions #pb-language-switch{min-width:85px!important}} @media(max-width:900px){#navbar{background:#073d69!important}#navbar .nav-brand{color:#fff!important}#navbar .nav-hamburger{color:white!important}} /* Hide the floating moon control even if an older script recreates it. */ #darkModeBtn{display:none!important} /* original: plagebleu-luxury-identity.css */ /* PLAGEBLEU — Oceanic Institution / premium visual identity */ :root{--primary:#07547c;--primary-dark:#052e4e;--primary-light:#137ca1;--accent:#c7a767;--accent-light:#e8d5a7;--bg-dark:#f4f7f9;--bg-card:#fff;--text:#153247;--pb-ink:#092f49;--pb-gold:#c7a767;--pb-sea:#0b7894} html{scroll-behavior:smooth}body{font-family:'Tajawal','Cairo','Noto Sans Arabic',system-ui,sans-serif!important;color:#153247;background:#f4f7f9!important;letter-spacing:0} #navbar{background:#052e4e!important;border-bottom:2px solid #c7a767!important;box-shadow:0 12px 30px #052d4a2a!important}#navbar .nav-brand{color:#fff!important;font-weight:900!important;letter-spacing:.01em}#navbar .nav-links button,#navbar .nav-links>a{font-weight:750!important}#navbar .nav-drop-btn{color:#fff!important}#navbar .nav-drop-btn:hover{color:#ead9b0!important} #mainContent h1,#mainContent h2,#mainContent h3{color:#092f49;letter-spacing:-.015em}#mainContent h1,#mainContent h2{font-weight:900!important}#mainContent h2{position:relative}#mainContent .section-title{font-weight:900!important} #mainContent .card,#mainContent .feature-card,#mainContent .stat-card,#mainContent .workshop-card,#mainContent .game-card,#mainContent .project-card{background:#fff!important;border:1px solid #dce7eb!important;border-radius:18px!important;box-shadow:0 12px 32px #092f4912!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important} @media(hover:hover){#mainContent .card:hover,#mainContent .feature-card:hover,#mainContent .game-card:hover,#mainContent .project-card:hover{transform:translateY(-4px)!important;box-shadow:0 18px 42px #092f4923!important;border-color:#a7c6d2!important}} #mainContent .btn-primary,#mainContent .btn-hero,#mainContent button.btn-primary{background:linear-gradient(125deg,#075b83,#063654)!important;color:#fff!important;border:1px solid #2c829d!important;border-radius:11px!important;box-shadow:0 7px 20px #06365432!important;font-weight:850!important;min-height:44px} #mainContent .btn-primary:hover,#mainContent .btn-hero:hover{background:linear-gradient(125deg,#0c7497,#07405f)!important} #mainContent input,#mainContent select,#mainContent textarea{border-radius:10px!important;border:1px solid #c8d8e1!important;background:#fff!important;color:#12364d!important} #mainContent input:focus-visible,#mainContent select:focus-visible,#mainContent textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #d4b675!important;outline-offset:3px!important} #mainContent .badge,#mainContent .tag{border-radius:7px!important} #footer{background:#052e4e!important;color:#eef5f8!important;border-top:3px solid #c7a767!important} html[dir=rtl] #navbar .nav-inner{direction:rtl!important}html[dir=rtl] #navbar .nav-links{direction:rtl!important;text-align:right!important}html[dir=ltr] #navbar .nav-inner,html[dir=ltr] #navbar .nav-links{direction:ltr!important;text-align:left!important} @media(max-width:900px){#navbar .nav-inner{min-height:68px!important}#mainContent .card,#mainContent .feature-card,#mainContent .game-card{border-radius:15px!important}} @media(prefers-reduced-motion:reduce){#mainContent .card,#mainContent .feature-card,#mainContent .game-card{transition:none!important}} /* original: plagebleu-window-fit.css */ /* Responsive viewport-safe window system: desktop, phone, 65-inch board */ :root{--pb-window-gap:clamp(8px,2vw,26px)} html,body{max-width:100%;overflow-x:clip} body .marine-quiz-overlay{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:var(--pb-window-gap)!important;box-sizing:border-box!important;overflow:hidden!important} body .marine-quiz-shell{position:relative!important;box-sizing:border-box!important;width:min(100%,1100px)!important;max-width:100%!important;height:auto!important;max-height:calc(100dvh - 2 * var(--pb-window-gap))!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;border-radius:20px!important;padding:clamp(16px,2.3vw,32px)!important;scrollbar-gutter:stable} body .marine-quiz-shell .mq-welcome{gap:clamp(9px,1.4vh,16px)!important;padding:clamp(8px,1.4vh,18px) 0!important} body .marine-quiz-shell .mq-hero-icon{font-size:clamp(52px,8vh,90px)!important;line-height:1.1!important} body .marine-quiz-shell .mq-welcome h1{font-size:clamp(25px,3vw,48px)!important;line-height:1.3!important;margin:4px 0!important} body .marine-quiz-shell .mq-welcome p{font-size:clamp(16px,1.5vw,24px)!important;line-height:1.5!important;margin:3px 0!important} body .marine-quiz-shell .mq-creatures{font-size:clamp(23px,3vw,44px)!important;line-height:1.25!important} body .marine-quiz-shell :is(input,select,button){max-width:100%;box-sizing:border-box;touch-action:manipulation} body .marine-quiz-shell :is(img,video,canvas,iframe){max-width:100%;height:auto} body .modal:not(.hidden){box-sizing:border-box!important;max-width:100vw!important;max-height:100dvh!important} body .modal:not(.hidden) .modal-content{min-width:0!important;max-width:calc(100vw - 2 * var(--pb-window-gap))!important;max-height:calc(100dvh - 2 * var(--pb-window-gap))!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important} body .modal:not(.hidden) :is(.modal-body,.article-view-body-content,.book-page,.library-content,.blog-content){max-width:100%!important;min-width:0!important;overflow-wrap:anywhere} body .modal:not(.hidden) :is(table,pre){max-width:100%;overflow-x:auto} body .modal:not(.hidden) img{max-width:100%!important;height:auto!important;object-fit:contain} html[dir=rtl] .marine-quiz-shell{direction:rtl!important;text-align:right}html[dir=ltr] .marine-quiz-shell{direction:ltr!important;text-align:left} @media(max-width:700px){:root{--pb-window-gap:6px}body .marine-quiz-shell{border-radius:13px!important;padding:13px!important}body .marine-quiz-shell .mq-welcome{gap:8px!important}body .marine-quiz-shell .mq-hero-icon{font-size:52px!important}body .marine-quiz-shell .mq-welcome h1{font-size:25px!important}body .marine-quiz-shell .mq-welcome p{font-size:16px!important}body .marine-quiz-shell :is(input,button){min-height:44px}} @media(min-width:1280px) and (min-height:700px){body .marine-quiz-shell{width:min(88vw,1380px)!important;max-height:calc(100dvh - 36px)!important}body .marine-quiz-shell :is(input,button){min-height:54px}body .modal:not(.hidden) .modal-content{max-height:calc(100dvh - 36px)!important}} @media(max-height:750px) and (min-width:701px){body .marine-quiz-shell .mq-welcome{gap:6px!important;padding:5px 0!important}body .marine-quiz-shell .mq-hero-icon{font-size:55px!important}body .marine-quiz-shell .mq-welcome h1{font-size:clamp(24px,2.8vw,37px)!important}body .marine-quiz-shell .mq-creatures{font-size:26px!important}} /* original: plagebleu-professional-v3.css */ /* Plagebleu 3.0 — restrained design system and navigation reliability. */ :root{--pb3-navy:#12334b;--pb3-blue:#087eac;--pb3-ink:#17354a;--pb3-muted:#607487;--pb3-border:#e0eaf0;--pb3-shadow:0 8px 28px rgba(19,53,74,.075)} body{font-family:'Tajawal',system-ui,sans-serif!important;-webkit-font-smoothing:antialiased} #navbar{background:#103d5c!important;box-shadow:0 3px 18px rgba(13,43,63,.13)!important;border-bottom:1px solid rgba(255,255,255,.12)!important} #navbar .nav-brand{font-weight:800!important;letter-spacing:0!important} @media(min-width:901px){ #navbar .nav-inner{display:flex!important;align-items:center!important;gap:clamp(10px,1.5vw,22px)!important;min-height:76px!important;max-width:none!important;padding:10px clamp(14px,2vw,34px)!important;flex-wrap:nowrap!important} #navbar .nav-brand{flex:0 0 auto!important;max-width:210px!important;grid-column:auto!important;grid-row:auto!important} #navbar #navLinks{display:flex!important;flex:1 1 auto!important;min-width:0!important;justify-content:flex-start!important;align-items:center!important;gap:4px!important;flex-wrap:wrap!important;overflow:visible!important;row-gap:4px!important;grid-column:auto!important;grid-row:auto!important} #navbar #navLinks .nav-drop-btn,#navbar #navLinks .nav-link-single,#navbar #navLinks .pb-classroom-nav-link{flex-shrink:0!important;white-space:nowrap!important;min-height:42px!important;padding:9px 11px!important;border-radius:9px!important;color:#f4f9fd!important;font-size:clamp(12px,.9vw,15px)!important} #navbar #navLinks .nav-drop-btn:hover,#navbar #navLinks .nav-link-single:hover,#navbar #navLinks .pb-classroom-nav-link:hover{background:#215979!important;color:#fff!important} #pb-nav-actions{display:flex!important;position:relative!important;flex:0 0 auto!important;grid-column:auto!important;grid-row:auto!important;align-items:center!important} #pb-nav-actions #pb-language-switch{position:static!important;min-width:94px!important;min-height:42px!important;border-radius:10px!important} #navbar #navLinks .nav-drop-menu{z-index:3000!important;border-radius:12px!important;box-shadow:0 18px 38px rgba(16,47,68,.17)!important} } #mainContent .site-section{padding-block:clamp(28px,4.5vw,64px)!important} #mainContent .section-header{margin-bottom:clamp(20px,3vw,36px)!important} #mainContent .section-header h2{font-size:clamp(25px,2.5vw,38px)!important;font-weight:800!important;line-height:1.35!important;letter-spacing:-.015em} #mainContent .cards-grid{gap:clamp(14px,2vw,24px)!important;align-items:stretch} #mainContent .cards-grid>.card{border:1px solid var(--pb3-border)!important;border-radius:17px!important;box-shadow:var(--pb3-shadow)!important;transition:box-shadow .18s ease,transform .18s ease!important;overflow:hidden} @media(hover:hover){#mainContent .cards-grid>.card:hover{transform:translateY(-3px)!important;box-shadow:0 14px 36px rgba(19,53,74,.12)!important}} #mainContent .card h3{line-height:1.4!important}#mainContent .card p{line-height:1.7!important} #mainContent :is(button,.card-btn,.btn-primary){-webkit-tap-highlight-color:transparent} #section-games .pb-start-game{min-height:48px!important;position:relative!important;z-index:2!important;touch-action:manipulation!important;cursor:pointer!important;border-radius:10px!important} #gamePlayModal{z-index:4500!important}#gamePlayModal .modal-content{position:relative!important;overflow:auto!important}#gamePlayModal .modal-close{position:sticky!important;top:0!important;float:inline-end!important;min-width:44px!important;min-height:44px!important;z-index:30!important;touch-action:manipulation!important} #gamePlayBody iframe{pointer-events:auto!important;touch-action:auto!important} #gamePlayModal.game-immersive{padding:0!important}#gamePlayModal.game-immersive .game-play-content{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}#gamePlayModal.game-immersive #gamePlayBody iframe{height:calc(100dvh - 135px)!important} @media(max-width:900px){ #navbar .nav-inner{min-height:62px!important;padding-inline:14px!important} #mobileMenu{max-height:calc(100dvh - 66px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;padding-bottom:max(20px,env(safe-area-inset-bottom,0px))!important} #mobileMenu :is(a,button){min-height:46px!important;touch-action:manipulation!important} #mainContent .site-section{padding-inline:clamp(14px,4vw,22px)!important} #mainContent .cards-grid{grid-template-columns:minmax(0,1fr)!important} #gamePlayModal{padding:7px!important;align-items:stretch!important} #gamePlayModal .game-play-content{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 14px)!important;padding:12px!important} #gamePlayBody iframe{height:min(66dvh,650px)!important;min-height:260px!important} } @media(prefers-reduced-motion:reduce){#mainContent .cards-grid>.card{transition:none!important}} /* original: plagebleu-professional-v3-full.css */ /* Plagebleu 3.0: cohesive public-facing UI without changing data or app routing. */ :root{--pb3-surface:#fff;--pb3-soft:#f4f8fb;--pb3-border:#dce8ef;--pb3-radius:18px;--pb3-content:1320px} #ui-layer{background:linear-gradient(180deg,#f4f8fb 0%,#f9fbfc 58%,#f2f7fa 100%)!important} #mainContent{color:#17354a!important}#mainContent>.site-section:not(.hero-section){width:min(100%,var(--pb3-content))!important;max-width:var(--pb3-content)!important;margin-inline:auto!important} #mainContent>.site-section:not(.hero-section):nth-of-type(even){background:rgba(255,255,255,.55)!important;border-radius:22px!important} #mainContent .section-header{text-align:center!important;max-width:850px!important;margin-inline:auto!important} #mainContent .section-header h2{color:#12334b!important;margin-bottom:10px!important} #mainContent .section-header p{color:#637b8a!important;max-width:680px!important;line-height:1.8!important;font-size:clamp(15px,1.25vw,18px)!important} #mainContent .section-divider{width:68px!important;max-width:68px!important;height:4px!important;border-radius:99px!important;margin:12px auto 17px!important;background:#0b8ab1!important;box-shadow:none!important} #section-hero.hero-section{min-height:unset!important;padding:clamp(12px,2.3vw,28px)!important;max-width:1500px!important;margin-inline:auto!important;overflow:visible!important} #section-hero .slider-container{width:100%!important;min-height:clamp(390px,54vh,650px)!important;max-height:740px!important;border-radius:24px!important;overflow:hidden!important;box-shadow:0 20px 55px rgba(14,54,78,.14)!important} #section-hero .slide{min-height:100%!important}#section-hero .slide-content{max-width:min(90%,820px)!important;padding:clamp(24px,5vw,64px)!important} #section-hero .slide-content h1{font-size:clamp(30px,4.1vw,60px)!important;line-height:1.2!important;letter-spacing:-.025em!important} #section-hero .slide-content p{font-size:clamp(16px,1.5vw,21px)!important;line-height:1.75!important;max-width:680px!important} #section-hero .btn-hero{min-height:48px!important;border-radius:11px!important;padding:12px 25px!important;font-weight:800!important;box-shadow:0 8px 20px rgba(0,0,0,.1)!important} #section-hero .slider-nav{min-width:42px!important;min-height:42px!important;border-radius:50%!important;display:grid!important;place-items:center!important;touch-action:manipulation!important} #mainContent :is(.card,.feature-card,.stat-card,.workshop-card,.project-card,.article-card,.ebook-card,.video-card){border-radius:var(--pb3-radius)!important;border:1px solid var(--pb3-border)!important;box-shadow:0 6px 24px rgba(22,60,83,.06)!important;background:#fff!important;min-width:0!important;overflow:hidden!important} #mainContent :is(.card,.feature-card,.stat-card,.workshop-card,.project-card,.article-card,.ebook-card,.video-card) :is(h3,h4){color:#143950!important;font-weight:800!important;line-height:1.4!important} #mainContent :is(.card,.feature-card,.stat-card,.workshop-card,.project-card,.article-card,.ebook-card,.video-card) p{color:#587285!important;line-height:1.7!important} #mainContent :is(.card,.feature-card,.stat-card,.workshop-card,.project-card,.article-card,.ebook-card,.video-card) img{max-width:100%!important} #mainContent :is(.btn-primary,.card-btn,.btn-hero){border-radius:11px!important;min-height:44px!important;font-weight:750!important;transition:background-color .18s ease,box-shadow .18s ease!important} #mainContent :is(.btn-primary,.card-btn,.btn-hero):focus-visible{outline:3px solid #65bdd7!important;outline-offset:3px!important} #mainContent :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:44px!important;border:1px solid #cddde6!important;border-radius:10px!important;box-shadow:none!important;background:#fff!important;color:#15374c!important} #mainContent :is(input,select,textarea):focus-visible{border-color:#0983ab!important;outline:3px solid rgba(9,131,171,.17)!important;outline-offset:0!important} #mainContent :is(.cards-grid,.articles-grid,.ebooks-grid,.projects-grid,.workshops-grid,.videos-grid){gap:clamp(14px,1.7vw,24px)!important} #mainContent :is(.card,.article-card,.ebook-card,.video-card){height:auto!important} #mainContent :is(table){border-collapse:separate!important;border-spacing:0!important;max-width:100%!important} #mainContent :is(th){background:#edf5f9!important;color:#254c63!important;font-weight:800!important} #mainContent :is(td,th){padding:11px 13px!important;border-bottom:1px solid #e5edf2!important} #mainContent :is(.ctab){min-height:42px!important;min-width:42px!important;border-radius:10px!important} #mainContent :is(.stat-card){padding:clamp(18px,2.4vw,30px)!important} #footer{border-top:1px solid #31536a!important;background:#103d5c!important} #navbar .nav-dropdown{position:relative!important}#navbar .nav-drop-btn{cursor:pointer!important} #navbar .nav-dropdown.pb3-open>.nav-drop-menu{opacity:1!important;visibility:visible!important;transform:translateY(2px)!important;pointer-events:auto!important} #navbar .nav-drop-menu{min-width:210px!important;padding:8px!important;border:1px solid #e2eaf0!important} #navbar .nav-drop-menu a{display:block!important;padding:11px 12px!important;border-radius:8px!important;cursor:pointer!important;line-height:1.5!important} #navbar .nav-drop-menu a:hover{background:#e9f5fa!important} #mobileMenu .mobile-nav-group-title{min-height:48px!important;cursor:pointer!important;border-radius:9px!important;padding:11px 14px!important} #mobileMenu .mobile-nav-sub a{display:block!important;min-height:45px!important;padding:12px 17px!important} #mobileMenu .mobile-nav-group.open .mobile-nav-group-title{background:rgba(13,117,154,.1)!important} .modal:not(.hidden) .modal-content{box-shadow:0 25px 65px rgba(0,23,43,.25)!important;border-radius:18px!important} @media(max-width:900px){#section-hero.hero-section{padding:10px 12px!important}#section-hero .slider-container{border-radius:16px!important;min-height:380px!important}#section-hero .slide-content{max-width:100%!important;padding:24px!important}#section-hero .slide-content h1{font-size:clamp(27px,7vw,42px)!important}#mainContent>.site-section:not(.hero-section):nth-of-type(even){border-radius:12px!important}#mainContent :is(.card,.feature-card,.stat-card,.workshop-card,.project-card,.article-card,.ebook-card,.video-card){border-radius:15px!important}#mainContent .section-header{margin-bottom:22px!important}} @media(max-width:420px){#section-hero .slider-container{min-height:350px!important}#section-hero .slider-nav{min-width:36px!important;min-height:36px!important}} @media(prefers-reduced-motion:reduce){#mainContent :is(.btn-primary,.card-btn,.btn-hero){transition:none!important}} /* Phase 3: prevent overlay/scroll traps and keep the full UI usable on phones. */ #mobileMenu.hidden{display:none!important;pointer-events:none!important} #mobileMenu:not(.hidden){pointer-events:auto!important;z-index:3500!important} #navbar .nav-hamburger{min-width:44px!important;min-height:44px!important;touch-action:manipulation!important;cursor:pointer!important} #navbar .nav-hamburger:focus-visible,#mobileMenu :is(a,button,[role=button]):focus-visible{outline:3px solid #7dd6ed!important;outline-offset:2px!important} #ui-layer{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain} #mainContent>.site-section{scroll-margin-top:85px!important} #mainContent :is(.cards-grid,.projects-grid,.workshops-grid,.articles-grid,.ebooks-grid,.videos-grid)>*{min-width:0!important} #mainContent :is(.card,.article-card,.ebook-card,.video-card,.project-card,.workshop-card) :is(h2,h3,h4,p){overflow-wrap:anywhere!important} #mainContent :is(img,video,canvas){max-width:100%!important} #mainContent .table-responsive,#mainContent [class*=table-wrap]{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important} #mainContent button:disabled{opacity:.5!important;cursor:not-allowed!important} @media(max-width:900px){#mobileMenu:not(.hidden){max-height:calc(100dvh - 70px)!important;overflow-y:auto!important;overscroll-behavior:contain!important}#mainContent>.site-section{scroll-margin-top:70px!important}#mainContent :is(.cards-grid,.projects-grid,.workshops-grid,.articles-grid,.ebooks-grid,.videos-grid){grid-template-columns:minmax(0,1fr)!important}#mainContent :is(.btn-primary,.card-btn){min-height:48px!important}} /* original: plagebleu-dashboard-v3.css */ /* Plagebleu 3.0 administrative layout: readable, independently scrollable panels. */ #adminDashboard{background:#f3f7fa!important;color:#17384c!important;overflow:hidden!important} #adminDashboard .dash-layout{height:100dvh!important;min-height:0!important;overflow:hidden!important} #adminDashboard .dash-sidebar{height:100dvh!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:#103d5c!important;border-color:#315f79!important;box-shadow:5px 0 22px rgba(18,52,75,.1)!important;padding-block:14px!important} #adminDashboard .dash-brand{flex-shrink:0!important;color:#fff!important;background:none!important;-webkit-text-fill-color:#fff!important;filter:none!important;font-weight:800!important} #adminDashboard .dash-user-info{flex-shrink:0!important;background:rgba(255,255,255,.08)!important;color:#eaf5fb!important} #adminDashboard .dash-nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;scrollbar-color:#638ca4 transparent!important;padding-bottom:20px!important} #adminDashboard .dash-nav-item,#adminDashboard .dash-nav-group-title{color:#d7e9f4!important;min-height:43px!important;border-radius:9px!important;line-height:1.45!important;cursor:pointer!important;touch-action:manipulation!important} #adminDashboard .dash-nav-item:hover,#adminDashboard .dash-nav-group-title:hover{background:rgba(255,255,255,.11)!important;color:#fff!important} #adminDashboard .dash-nav-item.active{background:#167ba5!important;color:#fff!important;box-shadow:none!important} #adminDashboard .dash-nav-group.open .dash-nav-sub{max-height:none!important;overflow:visible!important} #adminDashboard .dash-sidebar-footer{flex-shrink:0!important;background:#103d5c!important;border-top:1px solid rgba(255,255,255,.1)!important;padding:12px!important} #adminDashboard .dash-btn-back{color:#fff!important;border-color:#6b9cb4!important;min-height:44px!important} #adminDashboard .dash-main{min-width:0!important;min-height:0!important;background:#f3f7fa!important} #adminDashboard .dash-header{background:#fff!important;border-bottom:1px solid #dce7ee!important;box-shadow:0 3px 14px rgba(23,57,78,.04)!important;gap:12px!important;flex-wrap:wrap!important} #adminDashboard .dash-header h2{color:#183b50!important;font-weight:800!important} #adminDashboard .dash-header-actions{flex-wrap:wrap!important;gap:8px!important} #adminDashboard .dash-search{background:#f8fbfc!important;color:#183b50!important;border:1px solid #cbdce5!important;min-height:42px!important;width:clamp(160px,19vw,290px)!important} #adminDashboard .dash-btn-sm{min-height:42px!important;background:#eef5f9!important;color:#1b506c!important;border:1px solid #d1e3ed!important} #adminDashboard .dash-content{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;padding:clamp(14px,2vw,30px)!important;color:#1a3a4d!important} #adminDashboard .dash-content :is(.dash-chart-area,.dash-report-row,.dash-kpi){border-radius:14px!important;max-width:100%!important} #adminDashboard .dash-content :is(table){max-width:100%!important} #adminDashboard .dash-content :is(.table-responsive,[class*=table-wrap]){max-width:100%!important;overflow-x:auto!important} #adminDashboard .dash-content :is(button,input,select,textarea){max-width:100%!important} #adminDashboard .dash-content :is(button,a,[role=button]){touch-action:manipulation!important} #adminDashboard .dash-content :is(h2,h3,h4,p){overflow-wrap:anywhere!important} #adminDashboard :is(.dash-nav-item,.dash-nav-group-title,.dash-btn-sm,.dash-btn-back,.dash-menu-toggle):focus-visible{outline:3px solid #7ed5f0!important;outline-offset:2px!important} @media(max-width:768px){#adminDashboard .dash-sidebar{width:min(86vw,320px)!important;max-width:320px!important;z-index:2001!important}#adminDashboard .dash-menu-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:44px!important;min-height:44px!important;color:#164762!important}#adminDashboard .dash-header{padding:12px!important}#adminDashboard .dash-header-actions{width:100%!important}#adminDashboard .dash-search{flex:1 1 150px!important;width:auto!important}#adminDashboard .dash-content{padding:12px!important}#adminDashboard .dash-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:420px){#adminDashboard .dash-kpi-grid{grid-template-columns:minmax(0,1fr)!important}#adminDashboard .dash-header-title{max-width:100%!important;flex-wrap:wrap!important}}