/* ============================================================ تابعلي — Design System ============================================================ */ :root { /* تدرّج ذهبي معدني: غامق ← لامع ← غامق مرتين، فالحافة تبان مصقولة مش لون واحد. */ --gold-sheen: linear-gradient(115deg, #8a6712 0%, #d9ae45 11%, #fff6d2 21%, #d9ae45 31%, #7d5c0e 45%, #d9ae45 59%, #fffbe8 69%, #d9ae45 81%, #8a6712 100%); /* لوحة الألوان: تشبّع أعلى وتباين أقوى. القاعدة اللي كل لون هنا ماشي عليها — الألوان الدلالية (نجاح/تحذير/خطر) بتتعرض كنص فوق خلفية soft خفيفة، فلازم تفضل غامقة كفاية في الوضع الفاتح وفاتحة كفاية في الليلي. عشان كده كل واحد فيهم له قيمة مستقلة في body.dark-mode بدل ما نستخدم نفس الهيكس في الاتنين ويطلع باهت في واحد منهم. */ --page: #e7ebf5; --panel: #ffffff; --panel-2: #eef1f9; --ink: #0f1428; --muted: #59617c; --line: #d7dcea; /* إنديغو حيوي لكن متزن: اللون المصمت للإجراء الأهم فقط، والباقي درجات باستيل. */ --accent: #3a4fd8; --accent-soft: rgba(58, 79, 216, 0.14); --accent-light: #7488ff; --action-bg: #2f43cf; --action-bg-end: #5566ee; --theme-gradient-angle: 135deg; --action-ink: #ffffff; --teal-vivid: #0a9686; --teal-soft: rgba(10, 150, 134, 0.15); --violet-vivid: #7343e6; --violet-soft: rgba(115, 67, 230, 0.15); --search-gold-deep: #7d5910; --search-gold: #c39227; --search-gold-light: #eccb76; --search-gold-glow: rgba(195, 146, 39, 0.28); /* زرار البحث المسطّح: درجة أفتح من اللون الأساسي، وظل بنفس اللون. */ --search-fab: #6172e0; --search-fab-strong: #3447c2; --search-fab-glow: rgba(58, 79, 216, 0.26); --lime: #d9f24d; --lime-ink: #24280a; --success: #04713d; --success-soft: rgba(4, 113, 61, 0.10); --warning: #985200; --warning-soft: rgba(152, 82, 0, 0.12); --danger: #c8111f; --danger-soft: rgba(200, 17, 31, 0.10); --purple: #7c4dff; --cyan: #06b0c4; --amber: #f59000; --gold: #bd8a00; --gold-soft: #fff0bd; --mint: #0fbf83; --rose: #f0357f; /* كروت الإحصائيات الباستيل (ستايل Analytics) */ --stat-primary: #1636e0; --stat-primary-2: #12299f; --stat-sky: #d2e6ff; --stat-sky-ink: #0a55b0; --stat-mint: #c9f4dc; --stat-mint-ink: #07854b; --stat-lav: #dcdfff; --stat-lav-ink: #3f45d0; --stat-pink: #ffd7e5; --stat-pink-ink: #cc2c63; --sidebar-bg: #12162e; --sidebar-ink: #aab2d0; /* هوية تابعلي: ثابتة مش جزء من الثيم. اللوجو وصفحة الدخول لازم يفضلوا نفس الكحلي والتركواز مهما المدرّس اختار — لو اتحسبوا من `--accent` كان اللوجو هيتغيّر لونه مع كل ثيم. الكحلي هو كحلي اللوجو (#183866). التركواز بتاع اللوجو (#20B5A6) فاتح على نص أو زرار بكتابة بيضا، فالأزرار والكلام بياخدوا درجة أغمق منه بتعدّي تباين ٤.٥:١ على الأبيض. */ --brand-navy: #183866; --brand-navy-lift: #25508c; --brand-navy-deep: #0d2142; --brand-teal: #20B5A6; --brand-accent: #0b7d72; --brand-accent-deep: #09665d; --brand-tile: linear-gradient(145deg, var(--brand-navy-lift), var(--brand-navy) 55%, var(--brand-navy-deep)); --radius: 20px; --radius-sm: 13px; --shadow: 0 8px 24px rgba(20, 32, 78, 0.10); --shadow-lg: 0 20px 50px rgba(20, 32, 78, 0.20); --speed: 0.22s; /* أقل ارتفاع لأي زر أو حقل يتلمس بالصباع على الموبايل. */ --tap: 44px; /* أرضية حجم الخط. القياس لقى خط بينزل لـ٩px وبين ٤٧ و١١٣ عنصر تحت ١٢px في كل تبويب — والتباين على نفس النصوص دي ٦٫٨:١، يعني المشكلة مش لون. العربي بيتأذى أكتر من اللاتيني في الأحجام الصغيرة لأن النقط والتشكيل بيختفوا. كل حاجة كانت ١٢px أو أقل بقت بتقرا من هنا، فالتعديل في مكان واحد. */ --fs-min: 12px; } /* ============================================================ سلّم نقاط الكسر — خمس درجات بس، والكل بيلتزم بيها ------------------------------------------------------------ 1150px شاشة عريضة → لابتوب: تقليل أعمدة الشبكات 900px لابتوب → تابلت: القائمة الجانبية تبقى درج 760px تابلت → موبايل: عمود واحد + الجداول تبقى كروت 620px موبايل → موبايل صغير: الشبكات الثنائية تتفرد 430px موبايل صغير جداً: كل حاجة عمود واحد الميديا كويري ما بتقراش الـ custom properties، فالأرقام مكتوبة صريحة — لكن أي قاعدة جديدة لازم تستخدم رقم من الخمسة دول بالظبط، ومايتخترعش مقاس جديد، عشان الصفحات كلها تتحوّل مع بعض مش كل واحدة لوحدها. ============================================================ */ /* نظام باركود الطلاب والحضور */ .qr-action.active { color: #0f766e; background: rgba(20, 184, 166, .12); } /* جنب أيقونة الباركود على طول — الاتنين بيشتغلوا على نفس الحاجة: الأولى بتوري الكارت، والتانية بتفتح الصفحة اللي الكارت بيوديها. */ .parent-report-action { color: var(--accent); } .parent-report-action:hover { color: var(--action-ink); background: var(--accent); border-color: var(--accent); } .student-card-qr-preview { display: grid; place-items: center; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; } .student-card-qr-preview img { display: block; width: 54px; height: 54px; image-rendering: pixelated; } .student-qr-dialog { position: fixed; inset: 0; z-index: 1800; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .68); backdrop-filter: blur(5px); } .student-qr-sheet { width: min(680px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 24px; padding: 24px; background: var(--surface, #fff); box-shadow: 0 24px 70px rgba(15, 23, 42, .32); } .student-qr-head, .student-qr-actions, .attendance-qr-input-row, .attendance-qr-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .student-qr-head { justify-content: space-between; margin-bottom: 18px; } .student-qr-head h2 { margin: 4px 0; } .student-qr-head p { margin: 0; color: var(--muted, #64748b); } .student-qr-print-card { width: min(420px, 100%); margin: 0 auto 18px; padding: 22px; border: 2px solid #0f766e; border-radius: 20px; background: #fff; color: #0f172a; text-align: center; } .student-qr-print-card img { display: block; width: min(330px, 100%); margin: auto; image-rendering: pixelated; } .student-qr-print-card strong, .student-qr-print-card span, .student-qr-print-card small { display: block; } .student-qr-print-card strong { margin-top: 10px; font-size: 1.35rem; } .student-qr-print-card span { margin-top: 4px; font-weight: 800; color: #0f766e; } .student-qr-print-card small { margin-top: 5px; color: #475569; } .student-qr-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .student-qr-meta > div { padding: 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; } .student-qr-meta span, .student-qr-meta strong { display: block; } .student-qr-meta span { color: var(--muted, #64748b); font-size: .78rem; } .student-qr-meta strong { margin-top: 4px; } .student-qr-actions { justify-content: center; } .student-qr-empty { padding: 46px 20px; text-align: center; } .student-qr-empty > .icon { width: 74px; height: 74px; color: #0f766e; } .student-qr-empty h3 { margin: 14px 0 6px; } .student-qr-empty p { margin: 0 auto 20px; color: var(--muted, #64748b); } .attendance-qr-scanner { margin: 16px 0; padding: 16px; border: 1px solid rgba(20, 184, 166, .35); border-radius: 18px; background: linear-gradient(135deg, rgba(20, 184, 166, .10), rgba(59, 130, 246, .06)); } .attendance-qr-copy { margin-bottom: 12px; } .attendance-qr-copy strong { display: flex; align-items: center; gap: 7px; } .attendance-qr-copy span { display: block; margin-top: 4px; color: var(--muted, #64748b); font-size: .86rem; } .attendance-qr-input-row input { flex: 1 1 260px; min-width: 0; } .attendance-qr-result { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(34, 197, 94, .11); } .attendance-qr-result span:last-child { color: var(--muted, #64748b); font-size: .82rem; } /* كاميرا المسح: طبقة عائمة ثابتة تبقى شغّالة أثناء تسجيل الطلاب المتتابع */ /* شاشة مقسومة: النصف السفلي مرسى ثابت للكاميرا والنصف العلوي للكشف — بلا تشتيت. المقاسات مكرّرة inline في app.js كخط دفاع لو نسخة الـ CSS في الكاش قديمة. */ .attendance-camera-overlay { position: fixed; inset-inline: 0; bottom: 0; z-index: 2147483000; width: 100%; height: 46vh; background: #020617; border-top: 3px solid #0f766e; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgba(2, 6, 23, .45); overflow: hidden; } .attendance-camera-overlay[hidden] { display: none; } .attendance-camera-frame { position: relative; } .attendance-camera-overlay video { display: block; width: 100%; height: calc(46vh - 34px); object-fit: cover; background: #020617; } /* الكارت المسجَّل بيتزحلق لأعلى النصف العلوي فيظهر كامل بأزرار التسميع */ .att-row { scroll-margin-top: 88px; scroll-margin-bottom: 48vh; } /* حجز النصف السفلي: الكشف بيقف فوق الكاميرا وآخر طالب يفضل قابل للوصول */ body.camera-open .att-roster { padding-bottom: 48vh; } .attendance-camera-target { position: absolute; inset: 15%; pointer-events: none; } .attendance-camera-target span { position: absolute; width: 24px; height: 24px; border: 3px solid #34d399; } .attendance-camera-target span:nth-child(1) { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; } .attendance-camera-target span:nth-child(2) { inset-block-start: 0; inset-inline-end: 0; border-inline-start: 0; border-block-end: 0; } .attendance-camera-target span:nth-child(3) { inset-block-end: 0; inset-inline-start: 0; border-inline-end: 0; border-block-start: 0; } .attendance-camera-target span:nth-child(4) { inset-block-end: 0; inset-inline-end: 0; border-inline-start: 0; border-block-start: 0; } .attendance-camera-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; color: #e2e8f0; font-size: var(--fs-min); font-weight: 700; } .attendance-camera-bar button { display: inline-flex; align-items: center; gap: 6px; background: #0f766e; color: #fff; border: 0; border-radius: 10px; padding: 7px 12px; font-weight: 800; cursor: pointer; } .attendance-camera-bar button .icon { width: 15px; height: 15px; } .att-row.qr-verified { outline: 2px solid #22c55e; outline-offset: -2px; background: rgba(34, 197, 94, .08); } @media (max-width: 620px) { .student-qr-dialog { padding: 10px; } .student-qr-sheet { padding: 16px; border-radius: 18px; } .student-qr-meta { grid-template-columns: 1fr; } .student-qr-actions > button, .attendance-qr-input-row > button { flex: 1 1 130px; } } @media print { body.printing-student-qr > *:not(.student-qr-dialog) { display: none !important; } body.printing-student-qr .student-qr-dialog { position: static; display: block; padding: 0; background: #fff; } body.printing-student-qr .student-qr-sheet { width: 100%; max-height: none; overflow: visible; padding: 0; box-shadow: none; } body.printing-student-qr .qr-no-print { display: none !important; } body.printing-student-qr .student-qr-print-card { width: 85mm; margin: 0 auto; break-inside: avoid; } } .legacy-barcode-warning { padding: 12px 14px; border: 1px solid #f3c47b; border-radius: 13px; color: #8a4b0f; background: #fff7e7; font-weight: 800; } /* لوحة فلاتر الباركود بتستعمل نفس مجموعات تبويب الغياب عشان الشكل واحد. */ .barcode-filters-panel { display: grid; gap: 14px; } .barcode-filters-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .barcode-filters-head .searchbox { flex: 1 1 260px; } .barcode-head-actions { display: flex; flex-wrap: wrap; gap: 8px; } .barcode-head-actions .submit-btn.ghost { color: var(--accent); background: var(--accent-soft); } .absence-filter-group.group-print { flex: 1 1 100%; } .absence-filter-group.group-status { flex: 1 1 220px; min-width: 200px; } /* الموبايل: البحث سطر كامل والأزرار عمودين، عشان «طباعة» و«PDF» ما يفضلوش يتزنقوا في آخر السطر ويخرجوا برّه الشاشة. */ @media (max-width: 760px) { .barcode-filters-head .searchbox { flex: 1 1 100%; min-width: 0; } .barcode-head-actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .barcode-head-actions > * { width: 100%; min-width: 0; justify-content: center; padding-inline: 8px; font-size: var(--fs-min); } .barcode-head-actions > *:first-child { grid-column: 1 / -1; } } /* لافتة الطلاب اللي من غير باركود — الإنشاء بقى بضغطة، مش تلقائي مع كل فتحة. */ .legacy-barcode-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 15px; border: 1px solid var(--warning-soft); border-inline-start: 5px solid var(--warning); border-radius: var(--radius-sm); background: var(--panel); font-weight: 700; } .legacy-barcode-notice .icon { width: 18px; height: 18px; color: var(--warning); } .legacy-barcode-notice > span { margin-inline-end: auto; } .legacy-barcode-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 13px; } .legacy-barcode-gallery-card { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color var(--speed), box-shadow var(--speed); } .legacy-barcode-gallery-card.selected { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15,118,110,.12); } /* شريط جانبي بلون الحالة: تعرف المطبوع من الجديد من الناقص من غير ما تقرا. */ .legacy-barcode-gallery-card.state-printed { border-inline-start: 4px solid var(--success); } .legacy-barcode-gallery-card.state-unprinted { border-inline-start: 4px solid var(--warning); } .legacy-barcode-gallery-card.state-fresh { border-inline-start: 4px solid var(--accent); } .legacy-barcode-gallery-card.state-missing { border-inline-start: 4px solid var(--danger); } .legacy-barcode-gallery-card > button { position: relative; flex: none; padding: 0; border: 0; background: transparent; cursor: pointer; } .legacy-barcode-gallery-card img { display: block; width: 104px; height: 104px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fff; image-rendering: pixelated; } /* الصورة لسه ما وصلتش: مربع رمادي بدل أيقونة صورة مكسورة. */ .legacy-barcode-gallery-card img[data-qr] { background: var(--panel-2); border-style: dashed; } .legacy-barcode-meta { min-width: 0; display: grid; gap: 4px; justify-items: start; } .legacy-barcode-meta span, .legacy-barcode-meta small { color: var(--muted); } .legacy-barcode-meta .pill { color: inherit; } .legacy-barcode-meta .pill.accent { background: var(--accent-soft); color: var(--accent); } .legacy-barcode-check { position: absolute; z-index: 1; inset: 4px 4px auto auto; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #0f766e; border-radius: 6px; color: #fff !important; background: #0f766e; font-weight: 900; } .legacy-barcode-missing { width: 104px; height: 104px; flex: none; display: grid; place-items: center; gap: 4px; padding: 6px; border: 1px dashed var(--danger-soft); border-radius: 9px; color: var(--muted); text-align: center; font-size: var(--fs-min); } .legacy-barcode-missing .icon { width: 17px; height: 17px; color: var(--danger); } .legacy-barcode-missing .table-action { font-size: var(--fs-min); } /* زر معاينة صفحة ولي الأمر: بيفتح نفس الرابط اللي جوه الـ QR في تبويب جديد، فمكانه آخر بيانات الكارت بنبرة هادية عشان ما يزاحمش زر التحديد للطباعة. */ .barcode-preview-btn { margin-top: 3px; color: var(--accent); font-size: var(--fs-min); } .barcode-preview-btn:hover { color: var(--action-ink); background: var(--accent); border-color: var(--accent); } .barcode-preview-btn .icon { width: 14px; height: 14px; } .risk-chip.print-printed.active { color: #fff; background: var(--success); border-color: var(--success); } .risk-chip.print-unprinted.active { color: #fff; background: var(--warning); border-color: var(--warning); } .risk-chip.print-missing.active { color: #fff; background: var(--danger); border-color: var(--danger); } .risk-chip.print-fresh.active { color: var(--action-ink); background: var(--accent); border-color: var(--accent); } .legacy-barcode-print-root { display: none; } .legacy-barcode-print-mount { display: contents; } .barcode-pdf-action { display: flex; justify-content: flex-start; margin: 0 0 10px; } .finance-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .finance-kpi { display: grid; gap: 6px; padding: 16px; border-top: 4px solid var(--accent); } .finance-kpi span, .finance-kpi small { color: var(--muted); font-weight: 700; } .finance-kpi strong { font-size: 24px; } .finance-kpi.highlight { border-top-color: var(--success); background: var(--success-soft); } .finance-kpi.warning { border-top-color: var(--warning); background: var(--warning-soft); } .finance-entry-form { align-items: end; } /* السجل كارت واحد: الشهر فوق، وتحته زرارين «التحصيل» و«المصروفات» وزرار الإضافة على نفس الخط، وبعدين الفورم (لو اتفتح) والجدول. كانوا أربع كروت منفصلة وأزرار شهور متلخبطة في أربع اتجاهات. */ .finance-book { display: grid; gap: 14px; min-width: 0; } .finance-book-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .finance-book-title h2 { font-size: 19px; } .finance-book-title p { margin-top: 3px; color: var(--muted); font-size: var(--fs-min); font-weight: 700; } .finance-month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .finance-month-nav .ghost-btn { min-height: 40px; padding-inline: 13px; } .finance-month-pick input { min-height: 40px; width: 164px; } .finance-book-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .finance-kind-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); } .finance-kind-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 18px; border-radius: 10px; color: var(--muted); font-weight: 800; transition: background var(--speed), color var(--speed), box-shadow var(--speed); } .finance-kind-switch button em { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: var(--fs-min); font-style: normal; font-weight: 800; text-align: center; } .finance-kind-switch button:hover { color: var(--ink); } .finance-kind-switch button.active { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(15, 23, 42, .08); } .finance-kind-switch button.active em { background: var(--accent-soft); color: var(--accent); } .finance-kind-switch button[data-kind="handover"].active .icon { color: var(--success); } .finance-kind-switch button[data-kind="expense"].active .icon { color: var(--danger); } /* الفورم بخط جانبي بلون نوعه: أخضر للي داخل، أحمر للي خارج. */ .finance-entry-panel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-inline-start: 4px solid var(--success); border-radius: 14px; background: var(--panel-2); } .finance-entry-panel.is-expense { border-inline-start-color: var(--danger); } .finance-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .finance-entry-head strong { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; } .finance-entry-head span { color: var(--muted); font-size: var(--fs-min); font-weight: 700; } .finance-entry-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; } .finance-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 12px; } .finance-entry-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 210px; } .finance-manage-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font-size: var(--fs-min); font-weight: 850; } .finance-manage-btn:hover { border-color: var(--accent); color: var(--accent); } .finance-manage-btn .icon { width: 15px; height: 15px; } .finance-correction-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--line)); border-radius: 12px; background: var(--warning-soft); } .finance-correction-note > div { display: grid; gap: 2px; } .finance-correction-note strong { font-size: 12.5px; } .finance-correction-note span { color: var(--muted); font-size: var(--fs-min); font-weight: 650; } .finance-correction-note .ghost-btn { flex: none; min-height: 38px; background: var(--panel); } .finance-delete-action { justify-self: start; } .finance-table { min-width: 930px; } .finance-separate-table { min-width: 690px; } .finance-table td small { display: block; color: var(--muted); margin-top: 3px; } .finance-amount { font-weight: 900; white-space: nowrap; } .finance-amount.negative { color: var(--danger); } .finance-reversal { opacity: .78; background: var(--panel-2); } .stage-create-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); align-items: end; } .stage-create-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; } /* زرار «إضافة مرحلة»: منقّط عشان يقرا كمكان فاضي مستني، مش كإجراء على مرحلة قايمة. */ .stage-card-add { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); } .stage-card-add:hover { border-color: var(--accent); background: var(--accent-soft); } .stage-card-add.is-open { border-style: solid; border-color: var(--accent); background: var(--accent-soft); } .dashboard-finance-strip { margin-top: 14px; } .finance-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .finance-strip-grid > div { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--panel-2); } .finance-strip-grid span { color: var(--muted); font-size: var(--fs-min); font-weight: 800; } .finance-strip-grid strong { font-size: 20px; } /* ---------------- كارت الباركود ---------------- تصميم واحد بيخدم الطباعة المباشرة والـ PDF. الجذر مخفي افتراضيًا (.legacy-barcode-print-root) فالستايلات دي ما بتأثرش على الواجهة العادية. */ .legacy-barcode-print-card { min-width: 0; display: grid; /* رأس · جسم مرن · شريط المدرس (الصف التالت بيختفي لوحده لو الشريط مقفول). */ grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: .3mm solid #c8dcd8; border-radius: 2.6mm; background: #fff; break-inside: avoid; } .bc-head { display: flex; align-items: center; justify-content: space-between; gap: 2mm; padding: 1.5mm 3mm; background: linear-gradient(100deg, #0d5c53, #17836f); color: #fff; font-size: 7.5pt; font-weight: 900; } .bc-head b { font-family: Arial, Helvetica, sans-serif; font-size: 7pt; font-weight: 800; letter-spacing: .05em; color: #cdece4; } .bc-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 44mm; align-items: center; gap: 3mm; padding: 2.4mm 3mm; } /* بيانات الطالب متسندة لفوق بدل ما تتوسّط، عشان الفراغ يتجمّع تحت في مكان واحد يشيله شريط المدرس بدل ما يتوزّع حوالين السطور. */ .bc-info { min-width: 0; display: grid; gap: 1.2mm; align-content: start; } .bc-name { font-size: 12pt; font-weight: 800; line-height: 1.25; color: #101828; } .bc-meta { font-size: 8pt; font-weight: 700; color: #4a5568; } .bc-place { font-size: 7.5pt; font-weight: 600; color: #7c8698; } .bc-dot { align-self: center; width: .55mm; height: .55mm; border-radius: 50%; background: currentColor; opacity: .55; } /* شريط المدرس: خط فاصل رفيع وخلفية باهتة بلون الرأس نفسه، فيقرأ كتذييل للكارت مش كسطر تالت من بيانات الطالب. */ .bc-teacher { display: grid; justify-items: center; /* الشريط بقى ٣ سطور (الاسم/التخصص/التواصل) وارتفاع الكارت ثابت بالورقة، فالمسافات هنا مضبوطة على أقل قيمة تفضل مقروءة من غير ما تاكل من الـ QR. */ gap: .4mm; padding: 1.2mm 3mm 1.4mm; border-top: .25mm solid #d8e8e4; background: #f4faf8; text-align: center; } .bc-teacher-name { font-size: 8.5pt; font-weight: 800; line-height: 1.2; color: #0d5c53; } .bc-teacher-title { font-size: 7pt; font-weight: 600; line-height: 1.2; color: #5c7a74; } /* سطر التواصل أصغر وأغمق شوية من التخصص — بيقرأ كمعلومة ثانوية، والرقم بيفضل واضح للقراءة من الكارت المطبوع. */ /* بدون letter-spacing: html2canvas بيرسم النص المتباعد حرفًا حرفًا، والحروف العربية بتفقد اتصالها وتطلع مكسّرة في الـ PDF. */ .bc-teacher-contact { font-size: 7pt; font-weight: 800; line-height: 1.2; color: #0d5c53; } .bc-teacher .bc-words { justify-content: center; } /* الفراغ تحت الصورة جزء من «الهامش الصامت» للـ QR: الصورة نفسها بتتولّد بهامش وحدة واحدة بس (server.cjs)، فبياض الكارت حواليها هو اللي بيكمّل الأربع وحدات اللي القارئ محتاجها — عشان كده الـ 44مم كلها بتروح للوحدات نفسها. */ .bc-qr { display: grid; justify-items: center; gap: 2.6mm; } .bc-qr img { width: 44mm; height: 44mm; } .bc-qr b { font-family: Arial, Helvetica, sans-serif; font-size: 7pt; font-weight: 800; letter-spacing: .09em; color: #8a6d2f; } /* المسافة بين الكلمات بتيجي من gap حقيقي في التخطيط مش من حرف المسافة (شوف wordSpans في utils.js). معاينة الإعدادات لازم تدخل في نفس القاعدة، وإلا الكلمات بتطلع ملزوقة فيها. */ .legacy-barcode-print-card .bc-words, .barcode-teacher-preview .bc-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: .18em .28em; } /* الطباعة المباشرة بيرسمها المتصفح نفسه فـ .28em كفاية. لكن html2canvas (اللي بيعمل الـ PDF) بيرسم كل كلمة عربية أعرض من صندوقها في الـ DOM بـ ٠.٧–١.٦مم، فبتاكل المسافة اللي جنبها والكلام يطلع ملزوق. المقاس اتظبط بالقياس: .3em و.45em لسه بيلزقوا، .6em بتدي مسافة واضحة من غير ما تبقى واسعة. */ .legacy-barcode-pdf-root .bc-words { column-gap: .6em; } /* معاينة الشريط داخل الإعدادات — نفس ستايل الطباعة بالظبط، متحطوط جوه إطار بعرض الكارت الحقيقي عشان المدير يشوف الناتج قبل ما يطبع. */ .barcode-teacher-preview-wrap { display: grid; gap: 8px; } .barcode-teacher-preview { max-width: 96mm; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; } .barcode-teacher-preview .bc-teacher { border-top: 0; } .barcode-teacher-preview em { display: block; padding: 12px; } .legacy-barcode-pdf-root { position: fixed; left: -10000px; top: 0; z-index: -1; width: 210mm; background: #fff; } .legacy-barcode-pdf-root .legacy-barcode-print-root { display: block !important; } .legacy-barcode-pdf-root .legacy-barcode-print-page { width: 210mm; height: 297mm; padding: 9mm; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 4mm; background: #fff; } @media print { @page { size: A4 portrait; margin: 9mm; } body.printing-barcode-batch * { visibility: hidden !important; } body.printing-barcode-batch .legacy-barcode-print-root, body.printing-barcode-batch .legacy-barcode-print-root * { visibility: visible !important; } body.printing-barcode-batch .legacy-barcode-print-root { display: block !important; position: absolute; inset: 0; } .legacy-barcode-print-page { width: 192mm; height: 279mm; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 4mm; break-after: page; page-break-after: always; } .legacy-barcode-print-page:last-child { break-after: auto; page-break-after: auto; } .legacy-barcode-print-card, .bc-head, .bc-teacher { print-color-adjust: exact; -webkit-print-color-adjust: exact; } } @media (max-width: 1150px) { .finance-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .finance-kpis { grid-template-columns: 1fr 1fr; } .finance-kpi strong { font-size: 19px; } .finance-strip-grid { grid-template-columns: 1fr 1fr; } /* الموبايل: الشهر سطر لوحده (السابق · الشهر · التالي)، والزرارين بعرض الشاشة، و«إضافة جديدة» تحتهم بعرض كامل تحت الصباع. */ .finance-month-nav { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; } .finance-month-nav [data-action="finance-current-month"] { grid-column: 1 / -1; } .finance-month-pick input { width: 100%; } .finance-kind-switch { width: 100%; } .finance-add-btn { width: 100%; justify-content: center; } .finance-entry-foot > * { flex: 1 1 0; justify-content: center; } } body.dark-mode { /* احتياطي بس لحد ما theme.js يكتب ألوان الثيم على الجسم — لازم يفضل قريب منها. */ --page: #0a0c1a; --panel: #1f2338; --panel-2: #292d44; --ink: #f4f6fc; --muted: #c2c8df; --line: #4a5069; --accent: #8ea2ff; --accent-soft: rgba(142, 162, 255, 0.14); --accent-light: #c2cbff; --action-bg: #4d61e8; --action-bg-end: #7a8bff; --action-ink: #ffffff; --teal-vivid: #33d6bf; --teal-soft: rgba(51, 214, 191, 0.18); --violet-vivid: #bda3ff; --violet-soft: rgba(189, 163, 255, 0.19); --search-gold-deep: #7f5d18; --search-gold: #d5a338; --search-gold-light: #f0d488; --search-gold-glow: rgba(229, 184, 81, 0.26); --search-fab: #6375e0; --search-fab-strong: #5768d1; --search-fab-glow: rgba(93, 111, 223, 0.34); /* الدلالية بتتقلب بالكامل في الليلي: الغامق مايتقراش فوق خلفية غامقة. */ --success: #2fdd8e; --success-soft: rgba(47, 221, 142, 0.20); --warning: #fba947; --warning-soft: rgba(251, 169, 71, 0.12); --danger: #fd939c; --danger-soft: rgba(253, 147, 156, 0.10); --purple: #a98bff; --cyan: #2ad3e6; --amber: #ffab33; --mint: #34e0a4; --rose: #ff5f9c; --gold: #f5cc5c; --gold-soft: rgba(245, 204, 92, 0.16); --stat-primary: #3a5cff; --stat-primary-2: #1f36c4; --stat-sky: #14324f; --stat-sky-ink: #8ccaff; --stat-mint: #10402e; --stat-mint-ink: #56e6a8; --stat-lav: #262a52; --stat-lav-ink: #b3b9ff; --stat-pink: #47202f; --stat-pink-ink: #ff9dbe; --sidebar-bg: #10142a; --sidebar-ink: #b2bade; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65); } /* ------------------------------ الأساسيات ------------------------------ */ * { box-sizing: border-box; } [hidden] { display: none !important; } /* تسميات لقارئ الشاشة بس. من غير القاعدة دي كانت بتتعرض كنص عادي جوه الصفوف وتاكل عرض اسم الطالب لحد ما يتقص لـ «اد...». */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 14px; line-height: 1.6; /* clip مش hidden: hidden بتخلي الـ body عنصر تمرير فتبطّل كل position: sticky في الصفحة. */ overflow-x: clip; transition: background var(--speed), color var(--speed); } h1, h2, h3, p { margin: 0; } button, input, select { font: inherit; color: inherit; } button { border: 0; cursor: pointer; background: none; } svg { display: block; max-width: 100%; } code { background: var(--panel-2); padding: 2px 7px; border-radius: 6px; font-size: var(--fs-min); } .icon { width: 18px; height: 18px; /* zoom مش transform: المقاس لازم يكبّر الصندوق نفسه عشان الأزرار والصفوف تتوسع معاه، وكمان بيضرب في أي width/height خاص متكتوب تحت — لو ظبطنا المقاس هنا بـ calc كانت كل أيقونة ليها مقاس خاص هتفضل ثابتة. */ zoom: var(--icon-scale, 1); fill: none; /* الصبغة بتتحط على color مش stroke: كده أي قاعدة أخص بتلوّن الأيقونة (تحذير/خطأ/كارت) تفضل هي اللي تكسب من غير ما نلغيها واحدة واحدة. */ color: var(--icon-tint, currentColor); stroke: currentColor; stroke-width: var(--icon-stroke-width, 2); stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* الأسطح اللي بتفرض لون نص خاص بيها (سايدبار غامق، زرار مليان، شارة ملوّنة): الأيقونة جوّاها لازم تفضل بلون النص وإلا تختفي أو يقل تباينها. currentColor هنا معناها «ورّث لون العنصر اللي فوقيك» فبتلغي الصبغة العامة موضعيًا. */ :is( .sidebar, .brand, .nav-item, .primary-action, .submit-btn, .primary-mini, .action-btn, .student-search-fab, .toast, .pill, .metric-icon, .theme-preset-card, .icon-preset-card, .att-btn.active, .rec-btn.active, .auth-tab.active, .period-chip.active, .risk-chip.active, .absence-section-tab.active, .table-action:hover, .table-action.wa, .inline-edit-fee:hover, .parent-report-action:hover, .barcode-preview-btn:hover, .ghost-btn.primary-ghost:hover, .view-switch button.active, .roster-source-tabs button.active, .recognition-tabs button.active, .certificate-mode-tabs button.active, .zoom-preset.active, .duplicate-filter.active, .exemption-toggle.active, .payment-filter-row button.active, .attendance-camera-bar button, .legacy-barcode-check, .executive-card, .certificate-sheet, .month-chip, .year-chip-group .year-remove:hover, .report-workflow li > span, .settings-card-icon, .settings-detail-icon, .appearance-tab.selected, .settings-jump-chip.active, .card-type-remove, .card-type-switch, .card-type-icon-btn, .card-cond-remove, .empty-action, .search-jump-icon ) { --icon-tint: currentColor; } /* الليلي: --accent بقى درجة فاتحة عشان يتقرا كنص فوق الكارت الغامق، فأي حاجة مليانة بيه ومكتوب عليها أبيض بقت أبيض على فاتح. «على الأساسي» في الليلي كحلي غامق — نفس منطق الزراير في أي واجهة ليلية. */ body.dark-mode :is( .parent-report-action:hover, .barcode-preview-btn:hover, .risk-chip.print-fresh.active, .risk-chip.active, .primary-mini:hover, .due-now-row .primary-mini:hover, .subs-student-row .primary-mini:hover, tbody .primary-mini:not(.ghost):hover, .inline-edit-fee:hover, .rec-btn.active.good, .view-switch button.active, .roster-source-tabs button.active, .area-badge, .theme-selected-mark, .empty-action:hover, .zoom-step:hover, .zoom-preset.active, .absence-filters-toggle b, .absence-tile-pick, .ghost-btn.primary-ghost:hover, .row-btn.pay ) { color: #0b1020; } body.dark-mode .qr-action.active { color: var(--success); } body.dark-mode .certificate-live-badge { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); } body.dark-mode .conflict-value.mine .conflict-value-tag { color: var(--accent); } body.dark-mode .conflict-error { color: var(--danger); } /* أسطح التصدير (PDF/PNG): html2canvas مش بيفهم zoom، فلو الأيقونة اتكبّرت على الشاشة كانت هتطلع بمقاسها الأصلي في الملف — نثبّتها هنا عشان الاتنين يتطابقوا. */ :is(.certificate-export-root, .legacy-barcode-pdf-root, .doc) .icon { zoom: 1; --icon-tint: currentColor; } body:not(.logged-in) .app-shell { display: none; } body:not(.logged-in) .student-search-fab { display: none; } body.logged-in .auth-screen { display: none; } .member-permissions-row { align-items: flex-start; flex-wrap: wrap; } .permission-form { width: 100%; display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); } /* شبكة بدل flex-wrap: مربعات التبويبات ١٤ مربع بأطوال نصوص مختلفة، فالـ wrap كان بيرصّها بأعمدة متعرجة تختلف مع كل عرض شاشة. */ .permission-form fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; } .permission-form legend { padding: 0 8px; font-weight: 700; } .permission-form label { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: max(var(--fs-min), 12.5px); font-weight: 700; } .permission-form label input { flex: 0 0 auto; } .absence-alert-panel { border-color: #fda29b !important; background: color-mix(in srgb, #d92d20 5%, var(--surface, #fff)); display: flex; flex-direction: column; } .absence-alert-panel h2 { color: #b42318; } .absence-count { flex-shrink: 0; align-self: flex-start; } /* القائمة بتفضل بارتفاع ثابت مهما زاد عدد الطلاب، والباقي بيتسكرول جواها */ .absence-alert-list { gap: 6px; max-height: 244px; overflow-y: auto; overscroll-behavior: contain; padding-inline-start: 4px; scrollbar-width: thin; scrollbar-color: #fda29b transparent; } .absence-alert-list::-webkit-scrollbar { width: 6px; } .absence-alert-list::-webkit-scrollbar-track { background: transparent; } .absence-alert-list::-webkit-scrollbar-thumb { background: #fda29b; border-radius: 999px; } .absence-alert-row { display: flex; align-items: center; gap: 6px; border: 1px solid #fecdca; border-radius: 10px; background: #fff6f5; padding-inline-end: 6px; } .absence-alert-list .absence-alert-row > button { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 0 !important; background: transparent !important; color: #7a271a; } .absence-alert-list .absence-alert-row > button:hover { transform: none; } .absence-streak { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #fee4e2; color: #b42318; font-size: var(--fs-min); font-weight: 800; font-variant-numeric: tabular-nums; } .absence-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .absence-alert-list .absence-info strong, .absence-alert-list .absence-info small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .absence-alert-list .absence-info strong { font-size: max(var(--fs-min), 12.5px); } .absence-alert-list .absence-info small { font-size: var(--fs-min); font-weight: 600; color: #b42318; opacity: 0.85; } .absence-alert-row .table-action { flex-shrink: 0; } .dark-mode .absence-alert-row { background: color-mix(in srgb, #d92d20 13%, #171717); } /* الألوان الوردي الفاتحة فوق مكتوبة للنهاري؛ في الليلي الكارت كان بيطلع بقعة فاتحة والعنوان أحمر غامق فوق كحلي (٢:١). */ .dark-mode .absence-alert-panel { border-color: color-mix(in srgb, var(--danger) 45%, var(--panel)) !important; background: color-mix(in srgb, var(--danger) 7%, var(--panel)); } .dark-mode .absence-alert-panel h2 { color: var(--danger); } .dark-mode .absence-alert-row { border-color: color-mix(in srgb, var(--danger) 30%, var(--panel)); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); } .dark-mode .absence-alert-list { scrollbar-color: color-mix(in srgb, var(--danger) 55%, var(--panel)) transparent; } .dark-mode .absence-alert-list .absence-alert-row > button { color: #fecdca; } .dark-mode .absence-streak { background: color-mix(in srgb, #d92d20 28%, #171717); color: #fecdca; } .dark-mode .absence-alert-list .absence-info small { color: #fda29b; } .absence-alert-panel .section-head { margin-bottom: 12px; } @media (max-width: 760px) { .absence-alert-list { max-height: 208px; } } /* مؤشر المزامنة: شريحة سطر واحد ارتفاعها زي أزرار الشريط العلوي. من غير `white-space: nowrap` كان النص الطويل («متصل ومتزامن · آخر مزامنة ١٢:٣٣ م») بيلف على أربع سطور على الموبايل ويحوّل الشريحة لبيضة واقفة جنب باقي الأزرار. */ .sync-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-min); font-weight: 700; white-space: nowrap; color: var(--muted); background: var(--surface, #fff); cursor: pointer; } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; flex: none; } .sync-status.offline .sync-dot { background: #f79009; } .sync-status.syncing .sync-dot { background: #2e90fa; animation: pulse 1s infinite; } .sync-status.conflict .sync-dot { background: #d92d20; } .sync-status:focus-visible { outline: 2px solid var(--brand, #2e90fa); outline-offset: 2px; } /* على الشاشات الضيقة الشريحة بتكتفي بكلمة الحالة، والتفصيل يفضل في الـ title. */ @media (max-width: 900px) { .sync-status { height: 34px; padding: 0 11px; font-size: var(--fs-min); } .sync-detail { display: none; } } .offline-disabled { opacity: .48 !important; cursor: not-allowed !important; } .is-offline .online-only-note { display: block; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ------------------------------ شاشة الدخول ------------------------------ */ /* الشاشة دي لابسة ألوان هوية تابعلي مهما كان ثيم المدرّس. الثيم بيتكتب على الجسم بعد الدخول، وقبله الشاشة بتاخد ألوان الملف — يعني المدرّس اللي اختار أخضر وخرج كان بيلاقي صفحة الدخول خضرا، والزائر اللي بيشوف المنتج لأول مرة بيشوف إنديغو. التوكنز هنا على الشاشة نفسها فبتغلب اللي نازل من الجسم، والصفحة العامة بقت شكل واحد للكل: شكل المنتج. */ .auth-screen { --page: #f2f5fc; --panel: #ffffff; --panel-2: #f4f7fd; --line: #e0e6f3; --ink: #0b1433; --muted: #5a6585; --accent: var(--brand-accent); --accent-soft: rgba(37, 99, 235, 0.1); --action-bg: var(--brand-accent); --action-bg-end: var(--brand-accent-deep); --theme-gradient-angle: 180deg; --action-ink: #ffffff; --shadow: 0 10px 28px -14px rgba(15, 35, 95, 0.28); --shadow-lg: 0 30px 70px -30px rgba(12, 26, 79, 0.4); min-height: 100vh; padding: 24px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(760px 420px at 88% -8%, rgba(37, 99, 235, 0.12), transparent 70%), radial-gradient(640px 400px at 4% 104%, rgba(34, 195, 238, 0.12), transparent 70%), var(--page); } .auth-card { width: min(440px, 100%); padding: 30px 26px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 18px; animation: rise 0.5s ease both; } .auth-mark { margin-bottom: 14px; } .auth-card h1, .auth-card h2 { font-size: 23px; font-weight: 900; line-height: 1.45; color: var(--ink); } .auth-card p, .auth-note { margin-top: 6px; color: var(--muted); font-size: max(var(--fs-min), 13.5px); font-weight: 600; line-height: 1.75; } .auth-plans-error a { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .auth-plans-error { display: grid; gap: 9px; margin: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line)); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--ink); } .auth-plans-error .ghost-btn { width: 100%; } /* الزرار الأساسي هنا بظل أزرق خفيف زي لوحة الهوية. `:not` عشان زرار كروت الباقات ليه قاعدته هو تحت، وأغلبه شبح من غير ظل. */ .auth-screen .submit-btn:not(.plan-pick) { border-radius: 12px; box-shadow: 0 12px 24px -14px rgba(37, 99, 235, 0.8); } .auth-screen .field input, .auth-screen .field select { height: 48px; border-radius: 12px; background: #f7f9fe; } .auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 5px; border-radius: 999px; background: var(--panel-2); } .auth-tab { height: 38px; border-radius: 999px; color: var(--muted); font-weight: 800; transition: all var(--speed); } /* نفس تدرّج الزرار الأساسي بالظبط، مش `--accent` المسطّح: الشريحة المختارة وزرار «دخول السيستم» تحتيها وزرار البدء اللي على كروت الباقات لازم يبانوا من طقم واحد — لونين مختلفين على نفس الكارت بيتقروا كأنهم حاجتين. */ .auth-tab.active { background: linear-gradient(var(--theme-gradient-angle), var(--action-bg), var(--action-bg-end)); color: var(--action-ink); box-shadow: var(--shadow); } .auth-form { display: grid; gap: 13px; } /* مدخل هادي قبل الخانات: يعرّف الزائر هو داخل على إيه من غير ما يكرر عنوان الكارت، ويحوّل أول كتلة في الفورم من فراغ بصري لطمأنة مفيدة. */ .login-intro { display: flex; align-items: center; gap: 10px; margin-block-end: 2px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, #fff), #fff 72%); } .login-intro > span:last-child { display: grid; gap: 1px; min-width: 0; } .login-intro b { color: var(--ink); font-size: max(var(--fs-min), 12.5px); line-height: 1.5; } .login-intro small { color: var(--muted); font-size: var(--fs-min); font-weight: 600; line-height: 1.55; } .login-intro-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); } .login-intro-icon svg, .login-control-icon, .login-recovery-icon svg, .login-recovery-arrow, .login-help-head svg, .login-safety svg, .auth-forgot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .login-field { gap: 7px; } .login-control { position: relative; display: block; } .login-control-icon { position: absolute; z-index: 1; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: color-mix(in srgb, var(--muted) 78%, transparent); pointer-events: none; transition: color var(--speed), transform var(--speed); } .auth-screen .login-control > input { width: 100%; padding-inline-start: 44px; border-color: color-mix(in srgb, var(--line) 88%, var(--accent)); background: linear-gradient(180deg, #fbfcff, #f6f8fd); transition: border-color var(--speed), box-shadow var(--speed), background var(--speed); } .auth-screen .login-control > input::placeholder { color: #a4abc0; font-size: max(var(--fs-min), 12.5px); } .auth-screen .login-control:focus-within > input { border-color: color-mix(in srgb, var(--accent) 76%, #fff); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 10px 20px -18px var(--accent); } .login-control:focus-within .login-control-icon { color: var(--accent); transform: translateY(-50%) scale(1.08); } /* رسالة غلط الدخول: صندوق واقف فوق الزرار، مش توست في ركن الشاشة. التوست بيروح لوحده بعد ثواني — واللي بيقرا بالراحة، أو رجع للتاب بعد ما ضغط، أو بيستخدم قارئ شاشة، بيلاقي الشاشة زي ما هي من غير ما يعرف حصل إيه. وهنا الرسالة بتفضل لحد ما حد يغيّر حاجة في الفورم. */ .auth-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: max(var(--fs-min), 12.5px); font-weight: 800; line-height: 1.65; } /* «نسيت كلمة المرور؟» زرار بشكل لينك. مش `.submit-btn` تاني تحت الزرار الأساسي: زرارين متشابهين تحت بعض بيخلّوا اللي مستعجل يضغط الغلط. */ .auth-forgot { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin-top: -2px; padding: 6px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-size: max(var(--fs-min), 12.5px); font-weight: 750; cursor: pointer; transition: color var(--speed), background var(--speed), border-color var(--speed); } .auth-forgot:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line); } .auth-forgot svg { width: 15px; height: 15px; transition: transform var(--speed); } .auth-forgot.is-open svg { transform: rotate(180deg); } .login-help { display: grid; gap: 11px; margin: -2px 0 1px; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 3.5%, #fff); animation: loginHelpReveal 240ms ease both; } .login-help[hidden] { display: none; } .login-help-head { display: flex; align-items: center; gap: 9px; } .login-help-head > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); } .login-help-head > div { display: grid; gap: 1px; } .login-help-head b { color: var(--ink); font-size: max(var(--fs-min), 12.5px); } .login-help-head small { color: var(--muted); font-size: var(--fs-min); font-weight: 600; } .login-recovery-paths { display: grid; gap: 7px; } .login-recovery-path { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; color: inherit; background: #fff; text-decoration: none; } .login-recovery-path > div { display: grid; gap: 1px; } .login-recovery-path b { color: var(--ink); font-size: max(var(--fs-min), 12px); line-height: 1.5; } .login-recovery-path small { color: var(--muted); font-size: var(--fs-min); font-weight: 600; line-height: 1.55; } .login-recovery-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); background: var(--panel-2); } .login-recovery-path.is-action { grid-template-columns: 32px minmax(0, 1fr) 18px; border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed); } .login-recovery-path.is-action .login-recovery-icon, .login-recovery-path.is-action .login-recovery-arrow { color: var(--accent); } .login-recovery-path.is-action:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); box-shadow: 0 10px 24px -20px var(--accent); } .login-safety { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -3px 0 0 !important; color: var(--muted) !important; font-size: var(--fs-min) !important; font-weight: 650 !important; line-height: 1.55 !important; text-align: center; } .login-safety svg { flex: none; width: 14px; height: 14px; color: #07956f; } .login-submit { position: relative; overflow: hidden; min-height: 48px; font-weight: 850; } .login-submit::after { content: '←'; position: absolute; inset-inline-end: 18px; font-size: 18px; transition: transform var(--speed); } .login-submit:hover::after { transform: translateX(-3px); } @keyframes loginHelpReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* «مش عندك حساب؟» تحت الفورم — نفس مكانه في لوحة الهوية. `.auth-card` قدّام الاسم عشان `.auth-card p` فوق بيحدّد الهامش والحجم بقوة أكبر. */ .auth-card .auth-switch { justify-self: center; margin: 2px 0 0; color: var(--muted); font-size: max(var(--fs-min), 13px); font-weight: 700; } /* تحذير Caps Lock بياخد مكان تلميح الخانة تحت خانة الباسورد. `.field-note` جوّه `.field` بتاخد مكانها من الشبكة لوحدها، فالتحذير بيدخل ويطلع من غير ما يزحلق الزرار اللي تحته أكتر من سطره. */ #loginCaps { margin-top: 2px; } /* ---------------------- صفحة الاشتراك العامة ---------------------- الشاشة دي ليها شكلين على نفس المبنى: من غير تسجيل مفتوح هي كارت دخول متوسّط الصفحة زي ما كانت، ومع التسجيل بتبقى صفحة عرض كاملة. الفرق كله في `.has-landing` على الـbody — من غيرها كل اللي تحت ده ما بيتحطّش على حاجة، لأن العناصر نفسها مخفية من الـHTML. ترتيب الأعمدة على الشاشة الكبيرة: العرض في العمود العريض، وكارت الدخول ملزوق فوق في عمود ضيق جنبه. في نص الصفحة الكارت قبل العرض عشان الموبايل يبدأ بيه، والشبكة هنا بترجّعه مكانه من غير ما تلمس الترتيب المنطقي. */ .auth-stage { width: min(440px, 100%); display: grid; gap: 18px; } /* بوابة الدخول: عمود واحد متوسّط من فوق لتحت. كانت عمودين — الوعد على حرف وكارت الدخول على الحرف التاني — وكل قسم تحتهم بيبدأ من مكان تاني: العنوان متوسّط على الصفحة، والأسئلة على حرف عمود الوعد، والباقات متوسّطة على عمودها هي. تلات محاور في صفحة واحدة، والعين بتدوّر على أول الكلام من جديد كل قسم. عمود واحد معناه محور واحد: كل حاجة بتبدأ وتنتهي على نفس الخطين، والوحيد اللي بيكسر التوسيط هو اللي بيتقري كقايمة. */ body.has-landing .auth-screen { place-items: start center; padding-block: 0 clamp(24px, 5vw, 60px); } body.has-landing .auth-stage { width: min(1120px, 100%); justify-items: center; gap: clamp(30px, 4.4vw, 52px); } /* الأقسام بتاخد عرض المسرح وبتوسّط اللي جوّاها بنفسها — من غير الرقم ده `justify-items: center` بتلمّ كل قسم على عرض محتواه، فالشبكات اللي جوّاه (الباقات والمميزات) بتتلمّ معاه وبتفقد أعمدتها. */ body.has-landing .auth-stage > * { width: 100%; } /* الكارت هو الاستثناء: عرضه ثابت وبيتوسّط جوّه المسرح العريض. */ body.has-landing .auth-card { justify-self: center; width: min(420px, 100%); } .auth-card-rail { display: contents; } /* ------------------------------ الشريط العلوي ------------------------------ */ /* شريط زجاجي عايم يفضل ظاهر مع التمرير: اللوك-أب على حرف، والتنقّل جوّه كبسولة هادية في النص، والدخول فعل واضح على الحرف التاني. */ .auth-nav { position: relative; z-index: 30; isolation: isolate; display: grid; grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr); align-items: center; gap: 12px 20px; margin-block-start: clamp(10px, 2vw, 18px); padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--brand-accent) 15%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: 0 18px 48px -30px rgba(15, 35, 95, .58), 0 2px 10px rgba(15, 35, 95, .05), inset 0 1px rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); overflow: hidden; animation: auth-nav-reveal 680ms cubic-bezier(.2, .8, .2, 1) both; } /* طبقة ضوء بطيئة جوّه المستطيل: بتدي السطح عمق من غير ما تغيّر مكان العناصر. */ .auth-nav::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 25%), radial-gradient(circle at 92% 50%, color-mix(in srgb, var(--brand-teal) 10%, transparent), transparent 27%), linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .46) 46%, transparent 64%); background-size: 100% 100%, 100% 100%, 210% 100%; animation: auth-nav-surface 7.5s ease-in-out infinite; } /* شعاع هوية على الحافة العليا يحدد مركز الشريط هندسيًا. */ .auth-nav::after { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 50%; width: clamp(92px, 15vw, 170px); height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--brand-teal), var(--brand-accent), transparent); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--brand-teal) 58%, transparent)); transform: translateX(50%) scaleX(.58); opacity: .7; pointer-events: none; animation: auth-nav-beam 4.8s ease-in-out infinite; } @keyframes auth-nav-reveal { from { opacity: 0; transform: translateY(-16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes auth-nav-surface { 0%, 100% { background-position: 0 0, 0 0, 115% 0; } 50% { background-position: 0 0, 0 0, -115% 0; } } @keyframes auth-nav-beam { 0%, 100% { opacity: .38; transform: translateX(50%) scaleX(.58); } 50% { opacity: .92; transform: translateX(50%) scaleX(1); } } /* اللوك-أب: بلاطة الأيقونة وجنبها Tabe3ly فوق تابعلي. `flex: none` لأن الشريط بيلفّ — من غيرها اللوك-أب بيتزنق قدام الروابط والاسم بينزل تحت البلاطة. */ .auth-wordmark { position: relative; display: flex; align-items: center; gap: 10px; justify-self: start; min-width: 154px; min-height: 48px; padding-inline: 4px 12px; flex: none; } .auth-wordmark .auth-mark { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 0; background: var(--brand-tile); color: #fff; box-shadow: 0 10px 22px -13px color-mix(in srgb, var(--brand-navy) 75%, transparent); transition: transform 420ms cubic-bezier(.2, .8, .2, 1), box-shadow 420ms ease; animation: auth-mark-breathe 5.2s ease-in-out infinite; } .auth-wordmark:hover .auth-mark { transform: translateY(-2px) rotate(-3deg) scale(1.035); box-shadow: 0 16px 28px -14px color-mix(in srgb, var(--brand-navy) 85%, transparent); } @keyframes auth-mark-breathe { 0%, 100% { box-shadow: 0 10px 22px -13px color-mix(in srgb, var(--brand-navy) 75%, transparent); } 50% { box-shadow: 0 12px 28px -11px color-mix(in srgb, var(--brand-teal) 55%, transparent); } } .auth-wordmark .brand-logo { width: 30px; height: 30px; } .auth-wordmark-text { display: grid; gap: 2px; line-height: 1; } .auth-wordmark-latin { font-family: Montserrat, Cairo, system-ui, sans-serif; font-size: 15.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--brand-navy); } .auth-wordmark-name { color: color-mix(in srgb, var(--brand-navy) 82%, var(--muted)); font-weight: 800; font-size: max(var(--fs-min), 13px); line-height: 1.15; white-space: nowrap; } .auth-nav-links { display: flex; flex-wrap: wrap; justify-self: center; gap: 3px; margin: 0; padding: 5px; border: 1px solid color-mix(in srgb, var(--brand-accent) 11%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--page) 60%, transparent); box-shadow: inset 0 1px rgba(255, 255, 255, .72); list-style: none; } .auth-nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: 11px; color: var(--muted); font-size: max(var(--fs-min), 13.5px); font-weight: 700; text-decoration: none !important; text-underline-offset: 0; transition: color var(--speed), background var(--speed), box-shadow var(--speed), transform var(--speed); } .auth-nav-links a:visited { color: var(--muted); } /* نقطة صغيرة بدل خط كامل: الكبسولة نفسها بتوضح العنصر النشط، والنقطة تضيف علامة هوية من غير ما تزاحم الكلمات. */ .auth-nav-links a::after { content: ""; position: absolute; inset-inline-start: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-accent); transform: translateX(50%) scale(0); transition: transform var(--speed); } .auth-nav-links a:hover, .auth-nav-links a:focus-visible, .auth-nav-links a[aria-expanded="true"] { color: var(--brand-accent); background: color-mix(in srgb, var(--panel) 94%, var(--brand-accent) 6%); box-shadow: 0 8px 18px -15px rgba(15, 35, 95, 0.5); transform: translateY(-1px); } .auth-nav-links a:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-accent) 65%, transparent); outline-offset: 2px; } .auth-nav-links a:hover::after, .auth-nav-links a:focus-visible::after, .auth-nav-links a[aria-expanded="true"]::after { transform: translateX(50%) scale(1); } /* زرار الدخول مختلف بصريًا عن زر التجربة في الهيرو: أصغر، ومعاه أيقونة حساب، لكنه ممتلئ عشان مستخدم السيستم الحالي يلاقي طريقه فورًا. */ .auth-nav-login { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; justify-self: end; gap: 8px; min-width: 110px; min-height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--brand-accent) 80%, #fff); background: linear-gradient(135deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 82%, var(--brand-navy))); color: #fff; font: inherit; font-size: max(var(--fs-min), 13.5px); font-weight: 800; cursor: pointer; box-shadow: 0 12px 24px -15px color-mix(in srgb, var(--brand-accent) 80%, transparent); transition: transform var(--speed), box-shadow var(--speed), filter var(--speed); } .auth-nav-login::before { content: ""; position: absolute; z-index: -1; inset: -2px; background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .34) 46%, transparent 67%); transform: translateX(135%); transition: transform 720ms cubic-bezier(.2, .8, .2, 1); } .auth-nav-login svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 360ms cubic-bezier(.2, .8, .2, 1); } .auth-nav-login:hover { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 16px 28px -15px color-mix(in srgb, var(--brand-accent) 88%, transparent); } .auth-nav-login:hover::before { transform: translateX(-135%); } .auth-nav-login:hover svg { transform: translateX(-2px) scale(1.06); } .auth-nav-login:active { transform: translateY(0); } .auth-nav-login:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } /* الروابط بتختفي على الضيّق: تلاتة بيلفّوا لسطر تاني تحت اللوك-أب فيعملوا شريط بارتفاع سطرين قبل ما الصفحة تبدأ أصلاً. الأقسام نفسها تحت بالترتيب. */ @media (max-width: 620px) { .auth-nav { grid-template-columns: minmax(0, 1fr) auto; } .auth-nav-links { display: none; } .auth-nav::after { width: 82px; } .auth-wordmark { min-width: 0; min-height: 48px; padding-inline-end: 6px; } .auth-wordmark .auth-mark { width: 42px; height: 42px; } .auth-nav-login { min-height: 48px; } } /* على التابلت بنحافظ على التوسيط الحقيقي، بس بنقلّل الجناحين وحشو الروابط بدل ما الشريط يلفّ أو عنصر يزق التاني. */ @media (max-width: 900px) { .auth-nav { grid-template-columns: minmax(132px, 1fr) auto minmax(132px, 1fr); gap: 8px 12px; } .auth-nav-links a { padding-inline: 11px; } } @media (max-width: 620px) { .auth-nav { grid-template-columns: minmax(0, 1fr) auto; } } /* -------------------------------- أول سطح -------------------------------- */ /* «صفحة البداية» في لوحة الهوية. على الموبايل الكلام ييجي الأول وبعده معاينة المنتج، ومن التابلت وطالع الكلام والمعاينة جنب بعض. */ .auth-hero { display: grid; justify-items: center; gap: clamp(14px, 3vw, 34px); text-align: center; } .auth-hero-copy { display: grid; justify-items: center; gap: 16px; } .auth-hero-art { position: relative; isolation: isolate; width: min(500px, 100%); min-width: 0; padding: 28px 16px 38px; direction: rtl; } .auth-hero-art::before { content: ""; position: absolute; z-index: -1; inset: 0 5% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .2), rgba(32, 181, 166, .1) 44%, transparent 72%); filter: blur(14px); } /* واجهة مصغرة حقيقية الملامح بدل Illustration عامة: نفس شكل لوحة اليوم، وكروت الحضور والتحصيل والمتابعة طافية حواليها كنتاج مباشر للمهمة. */ .auth-product-preview { position: relative; overflow: hidden; border: 1px solid rgba(176, 190, 222, .8); border-radius: 22px; background: #f6f8fd; color: #101a3d; box-shadow: 0 30px 70px -36px rgba(15, 35, 95, .6), 0 12px 28px -20px rgba(15, 35, 95, .45); transform: rotate(-1deg); transform-origin: center; animation: product-preview-enter .7s cubic-bezier(.2, .8, .2, 1) both; } .product-preview-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 45px; padding: 7px 12px; border-bottom: 1px solid #e2e8f5; background: rgba(255, 255, 255, .94); } .product-preview-brand { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: #14275f; font-size: 11px; font-weight: 900; } .product-preview-brand svg { width: 23px; height: 23px; padding: 4px; border-radius: 7px; background: #14275f; color: #fff; } .product-preview-live { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 8.5px; font-weight: 900; } .product-preview-live i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, .4); animation: product-live-pulse 1.8s ease-out infinite; } .product-preview-dots { display: flex; gap: 4px; justify-self: end; direction: ltr; } .product-preview-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d5ddef; } .product-preview-dots i:first-child { background: #20b5a6; } .product-preview-shell { display: grid; grid-template-columns: 46px minmax(0, 1fr); min-height: 278px; } .product-preview-nav { display: grid; align-content: start; justify-items: center; gap: 9px; padding: 13px 7px; background: linear-gradient(180deg, #162d68, #0d1c49); } .product-preview-nav span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #9fb1dc; } .product-preview-nav span.active { background: rgba(32, 181, 166, .2); color: #55e1d2; } .product-preview-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .product-preview-main { min-width: 0; padding: 14px; } .product-preview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 12px; text-align: start; } .product-preview-heading > div { display: grid; gap: 2px; } .product-preview-heading small { color: #8390ad; font-size: 8px; font-weight: 700; } .product-preview-heading strong { color: #101a3d; font-size: 14px; font-weight: 900; } .product-preview-heading > span { padding: 4px 7px; border-radius: 7px; background: #ecfdf5; color: #047857; font-size: 7px; font-weight: 900; } .product-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .product-preview-metrics > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 6px; min-width: 0; padding: 8px; border: 1px solid #e4e9f5; border-radius: 10px; background: #fff; text-align: start; box-shadow: 0 8px 18px -18px rgba(15, 35, 95, .7); } .product-preview-metrics small { align-self: end; overflow: hidden; color: #7b88a6; font-size: 6.8px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; } .product-preview-metrics b { align-self: start; color: #101a3d; font-size: 13px; font-weight: 900; } .metric-glyph { grid-row: 1 / span 2; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; } .metric-glyph.teal { background: #e7faf7; color: #078579; } .metric-glyph.blue { background: #eaf1ff; color: #2563eb; } .metric-glyph.violet { background: #f1edff; color: #7457d6; } .metric-glyph svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; } .product-preview-panels { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 7px; margin-top: 7px; } .product-attendance-card, .product-performance-card { min-width: 0; padding: 9px; border: 1px solid #e4e9f5; border-radius: 10px; background: #fff; } .product-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 7px; text-align: start; } .product-panel-title b { color: #101a3d; font-size: 8.5px; font-weight: 900; } .product-panel-title span { color: #078579; font-size: 6.5px; font-weight: 900; } .product-student-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 5px 0; border-top: 1px solid #eef1f7; text-align: start; } .product-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: #e9f8f6; color: #078579; font-size: 7px; font-style: normal; font-weight: 900; } .product-avatar.alt { background: #eaf1ff; color: #2563eb; } .product-avatar.warm { background: #fff5e6; color: #c16a05; } .product-student-row b { overflow: hidden; color: #384563; font-size: 7px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; } .product-student-row em { padding: 2px 5px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 5.8px; font-style: normal; font-weight: 900; } .product-student-row em.late { background: #fff7e8; color: #b45309; } .product-performance-card { display: grid; align-content: start; } .product-performance-card > small { margin-top: 7px; color: #7b88a6; font-size: 6px; font-weight: 700; line-height: 1.5; text-align: start; } .product-bars { display: flex; align-items: end; gap: 5px; height: 72px; padding: 8px 4px 0; border-bottom: 1px solid #e7ebf5; } .product-bars i { flex: 1; height: var(--bar); min-height: 8px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #35cfc1, #2563eb); transform-origin: bottom; animation: product-bar-grow .7s cubic-bezier(.2, .8, .2, 1) both; } .product-bars i:nth-child(2) { animation-delay: .06s; } .product-bars i:nth-child(3) { animation-delay: .12s; } .product-bars i:nth-child(4) { animation-delay: .18s; } .product-bars i:nth-child(5) { animation-delay: .24s; } .product-bars i:nth-child(6) { animation-delay: .3s; } .product-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; min-width: 148px; padding: 9px 10px; border: 1px solid rgba(185, 198, 227, .85); border-radius: 13px; background: rgba(255, 255, 255, .96); color: #101a3d; box-shadow: 0 18px 38px -22px rgba(15, 35, 95, .65); backdrop-filter: blur(8px); text-align: start; animation: product-float 4.2s ease-in-out infinite; } .product-float > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #e8f9f6; color: #078579; } .product-float svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } .product-float div { display: grid; gap: 1px; } .product-float b { font-size: 8.5px; font-weight: 900; white-space: nowrap; } .product-float small { color: #7b88a6; font-size: 6.5px; font-weight: 700; white-space: nowrap; } .product-float-scan { top: 78px; left: -10px; } .product-float-paid { right: -7px; bottom: 43px; animation-delay: -1.4s; } .product-float-paid > span { background: #eaf1ff; color: #2563eb; } .product-float-parent { left: 34px; bottom: 0; animation-delay: -2.8s; } .product-float-parent > span { background: #f1edff; color: #7457d6; } @keyframes product-preview-enter { from { opacity: 0; transform: translateY(18px) rotate(-1deg) scale(.98); } to { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); } } @keyframes product-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } } @keyframes product-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes product-bar-grow { from { transform: scaleY(.08); opacity: .4; } to { transform: scaleY(1); opacity: 1; } } /* شارة قصيرة فوق العنوان؛ اسم البراند موجود بالفعل في شريط التنقل. */ .auth-hero-top { display: flex; justify-content: center; } /* الشارة: وعد التجربة، وزرار بيفتح التسجيل. أزرق وبنفسجي من الهوية مش ذهبي. الحركة تلاتة وبس: موجة نبض حواليها، لمعة بتعدّي عليها، ونجمة بتلمع — كفاية تشدّ العين من غير ما تنافس زرار «ابدأ الآن» الأساسي. */ .auth-badge { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 9px 18px 9px 14px; border-radius: 999px; border: 1.5px solid rgba(37, 99, 235, 0.38); background: linear-gradient(120deg, #eaf1ff 0%, #f1ecff 100%); color: var(--brand-accent-deep); font: inherit; font-size: max(var(--fs-min), 15px); font-weight: 900; line-height: 1.35; text-align: center; cursor: pointer; animation: brand-badge-pulse 2.4s ease-out infinite; transition: background var(--speed), color var(--speed), border-color var(--speed), transform var(--speed); } /* اللمعة تحت الكلام وفوق الخلفية: `isolation` بيخلّي الـz-index السالب يترسم جوّه الشارة نفسها مش ورا الصفحة. */ .auth-badge::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.9) 50%, transparent 70%); transform: translateX(120%); animation: brand-badge-shine 3.6s ease-in-out infinite; } .auth-badge-spark { flex: none; width: 18px; height: 18px; fill: var(--brand-teal); animation: brand-badge-twinkle 1.8s ease-in-out infinite; } .auth-badge-go { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: brand-badge-nudge 1.8s ease-in-out infinite; } .auth-badge:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; transform: translateY(-1px); } .auth-badge:hover .auth-badge-spark { fill: #fff; } .auth-badge:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; } /* على الموبايل الجملة بتنزل سطرين: `balance` بيقسمها نصّين متساويين بدل كلمة «دفع.» لوحدها في السطر التاني. */ .auth-badge > span { text-wrap: balance; } @keyframes brand-badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.38); } 70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } /* اللمعة بتعدّي من اليمين للشمال — نفس اتجاه القراية — وتستنّى شوية. */ @keyframes brand-badge-shine { 0%, 45% { transform: translateX(120%); } 100% { transform: translateX(-120%); } } @keyframes brand-badge-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.78) rotate(40deg); } } @keyframes brand-badge-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } } /* العنوان أكبر حاجة على الشاشة وبفرق واضح — ده الوعد، وكل اللي تحته تفاصيله. مسافة السطر ١٫١٥ لأن أي مسافة أوسع في الحجم ده بتفصل السطرين عن بعض. */ .auth-hero h1 { /* الحد بالـch مربوط بحجم الخط، فبيدّي سطرين متوازنين على كل عرض، و`100%` عشان على الموبايل الرقم ده أوسع من الشاشة نفسها. */ max-width: min(23ch, 100%); font-size: clamp(28px, 4.6vw, 50px); font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); } /* الحاجات في سطر والخلاصة («في مكان واحد») في سطر لوحدها بلون الهوية. */ .auth-hero h1 .auth-hero-lead, .auth-hero h1 .auth-hero-tail { display: block; text-wrap: balance; } .auth-hero h1 .auth-hero-tail { color: var(--brand-accent); } .auth-hero-sub { max-width: 40ch; color: var(--muted); font-size: max(var(--fs-min), 15.5px); font-weight: 600; line-height: 1.8; text-wrap: balance; } .auth-hero-actions { display: grid; justify-items: center; gap: 10px; margin-block-start: 6px; } .auth-hero-cta { min-width: min(280px, 100%); height: 52px; font-size: max(var(--fs-min), 16px); } .auth-hero-assurance { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: max(var(--fs-min), 12.5px); font-weight: 700; } .auth-hero-assurance svg { width: 15px; height: 15px; fill: none; stroke: var(--success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* «اشترك دلوقتي» رابط جوّه جملة في كارت الدخول، مش زرار أساسي تاني. */ .auth-switch button { padding: 2px 3px; border: 0; border-radius: 6px; background: none; color: var(--brand-accent); font: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; } /* سطر الطمأنة نزل للشريط السفلي: فوق كان جنب وعد التجربة والاتنين بيتقروا كجملة واحدة مكرّرة. تحت السعر بيبقى إجابة على السؤال اللي بيتسأل هناك. */ .auth-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 16px; /* الشريط