/* ========================================= الخط الأساسي ========================================= */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap'); /* ========================================= الثيمات (نهاري / ليلي) عبر data-theme ضع على عنصر html: أو data-theme="dark" ========================================= */ :root { color-scheme: light; --font-main: 'Cairo', 'Segoe UI', Tahoma, sans-serif; /* ألوان الوضع النهاري */ --bg-body: radial-gradient(circle at 0% 0%, #ecfeff 0, #eef2ff 35%, #fdf2ff 100%); --bg-surface: #ffffff; --bg-sidebar: #020617; --primary: #6366f1; --primary-dark: #4f46e5; --secondary: #0ea5e9; --success: #22c55e; --danger: #fb7185; --text-main: #0f172a; --text-muted: #6b7280; --border: #e5e7eb; --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.08); --radius-lg: 16px; --radius-md: 12px; --radius-sm: 10px; --chip-bg: #f3f4f6; /* ألوان خاصة للفيديو ديتيلز نهاري */ --details-bg: #f9fafb; --details-prompt-bg: #f3f4ff; --details-prompt-border: #c7d2fe; --sidebar-border-light: #0b1120; /* خلفية رأس المحتوى (نهاري: فاتحة) */ --content-header-bg: radial-gradient(140% 200% at 0% 0%, rgba(239,246,255,0.98), rgba(239,246,255,0.85), rgba(248,250,252,0.96)), linear-gradient(120deg, rgba(56,189,248,0.06), rgba(129,140,248,0.06), rgba(244,114,182,0.04)); --content-header-glow: conic-gradient(from 210deg, rgba(56,189,248,0.25), rgba(129,140,248,0.25), rgba(244,114,182,0.18), rgba(56,189,248,0.25)); } /* الوضع الليلي */ :root[data-theme="dark"] { color-scheme: dark; --bg-body: radial-gradient(1200px 700px at 50% 40%, #0b1026 0%, #020617 55%, #000 100%); --bg-surface: rgba(15,23,42,0.98); --bg-sidebar: #020617; --primary: #22d3ee; --primary-dark: #0ea5e9; --secondary: #a855f7; --success: #22c55e; --danger: #fb7185; --text-main: #e5e7eb; --text-muted: #9ca3af; --border: #1f2937; --shadow-soft: 0 20px 40px rgba(15,23,42,0.75); --chip-bg: rgba(15,23,42,0.9); --details-bg: rgba(15,23,42,0.9); --details-prompt-bg: rgba(15,23,42,0.9); --details-prompt-border: rgba(30,64,175,0.55); --sidebar-border-light: #0b1120; /* خلفية رأس المحتوى (ليلي: داكنة) */ --content-header-bg: radial-gradient(160% 220% at 0% 0%, rgba(30,64,175,0.75), rgba(15,23,42,0.98)), radial-gradient(120% 220% at 100% 0%, rgba(147,51,234,0.55), rgba(15,23,42,0.98)); --content-header-glow: conic-gradient(from 220deg, rgba(56,189,248,0.4), rgba(147,51,234,0.5), rgba(236,72,153,0.4), rgba(56,189,248,0.4)); } /* ========================================= RESET & أساسيات ========================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-main); background: var(--bg-body); color: var(--text-main); direction: rtl; } .body-bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* شاشة المقدمة (Intro Overlay) */ .intro-overlay { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; pointer-events: auto; transition: transform 0.8s ease, opacity 0.6s ease; } .intro-overlay-frame { width: 100%; height: 100%; border: 0; display: block; } [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; padding: 0; margin: 0; } /* ========================================= الـ Layout العام ========================================= */ .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; } /* ========================================= الشريط الجانبي (Sidebar) ========================================= */ .sidebar { z-index: 1; background: radial-gradient(circle at top, rgba(15,23,42,1) 0, #020617 55%, #000 100%); color: #f8fafc; padding: 24px 18px; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--sidebar-border-light); border-right: 1px solid var(--sidebar-border-light); box-shadow: 0 0 40px rgba(15, 23, 42, 0.9); } .sidebar-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .sidebar-menu { display: grid; gap: 6px; } .sidebar-menu .menu-link{ display:block; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.06); color:#e5e7eb; font-size:14px; border:1px solid rgba(148,163,184,0.2); } .sidebar-menu .menu-link:hover{ background:rgba(255,255,255,0.12); } .character-list { /* display: grid; */ gap: 6px; } .character-list li { display: flex; align-items: center; justify-content: space-between; border-radius: 12px; transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease; padding: 6px 8px; } .character-list li a { display: flex; align-items: center; gap: 12px; padding: 4px 0; color: inherit; flex: 1; min-width: 0; } .character-list li.active, .character-list li:hover { background: linear-gradient(135deg, rgba(56,189,248,0.24), rgba(129,140,248,0.2), rgba(244,114,182,0.24)); box-shadow: 0 14px 30px rgba(15,23,42,0.75); transform: translateY(-1px); } :root[data-theme="dark"] .character-list li.active { background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(15,23,42,0.9)); box-shadow: 0 10px 30px rgba(15,23,42,0.9); transform: translateY(-1px); } .character-list .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(148,163,184,0.3); } .character-list .avatar.avatar-all { display: flex; align-items: center; justify-content: center; font-size: 20px; } .character-list span { font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* أزرار تعديل / حذف الشخصية كأيقونات */ .char-actions { display: flex; gap: 4px; margin-inline-start: 4px; } .icon-btn { background: radial-gradient(120% 180% at 0% 0%, rgba(56,189,248,0.18), rgba(56,189,248,0) 60%); border: 1px solid rgba(148,163,184,0.35); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; font-size: 15px; color: var(--text-muted); transition: background 0.18s, transform 0.1s, color 0.18s, box-shadow 0.18s; } .icon-btn:hover { background: radial-gradient(120% 180% at 0% 0%, rgba(56,189,248,0.35), rgba(56,189,248,0) 60%), radial-gradient(120% 180% at 100% 100%, rgba(236,72,153,0.35), rgba(236,72,153,0) 60%); transform: translateY(-1px); color: #f9fafb; box-shadow: 0 10px 24px rgba(15,23,42,0.8); } .icon-btn.icon-danger:hover { background: rgba(239, 68, 68, 0.1); color: #fecaca; } /* ========================================= المنطقة الرئيسية (Content) ========================================= */ .content { padding: 32px; position: relative; /* overflow: visible حتى يعمل sticky للهيدر بشكل طبيعي */ overflow: visible; } .content-header { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 16px 18px; border-radius: 18px; background: var(--content-header-bg); box-shadow: var(--shadow-soft); overflow: hidden; } .content-header::before { content: ''; position: absolute; inset: -40%; background: var(--content-header-glow); opacity: 0.9; pointer-events: none; transform: translate3d(0,0,0); animation: contentHeaderGlowShift 18s linear infinite; } .content-header > * { position: relative; z-index: 1; } .content-header h2 { margin: 0; font-size: 20px; } .content-header p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); } /* وضع مضغوط للهيدر عند النزول في الصفحة (إظهار العناصر المهمة فقط) */ body.header-compact .content-header { padding-top: 6px; padding-bottom: 6px; border-radius: 14px; } body.header-compact .content-header h2, body.header-compact .content-header p { display: none; } body.header-compact .metric-chip-yt { display: none; } body.header-compact #videoFilterToggle { display: none; } /* في الوضع المضغوط: جعل الهيدر صفاً واحداً قدر الإمكان */ body.header-compact .content-header { flex-wrap: nowrap; align-items: center; gap: 10px; } body.header-compact .content-header-main { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; } body.header-compact .content-header-metrics { gap: 6px; flex-wrap: nowrap; overflow-x: auto; } body.header-compact .actions-toolbar .btn { padding: 5px 10px; font-size: 12px; } .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } /* ========================================= Panels ========================================= */ .panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-soft); } :root[data-theme="dark"] .panel { background: rgba(15,23,42,0.92); border-color: rgba(31,41,55,0.9); } /* ========================================= أزرار عامة ========================================= */ .btn { border: none; border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease; text-align: center; background: #e5e7eb; color: #111827; font-family: inherit; } .btn, .pagination-btn, .metric-chip-clickable, .video-search-actions .btn, .video-search-actions a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn:disabled { opacity: 0.65; cursor: not-allowed; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,0.18); } .btn-primary { background-image: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 10px 25px rgba(37,99,235,0.35); background-size: 220% 220%; animation: btnGradientShift 10s ease-in-out infinite; } .btn-primary:hover { background-image: linear-gradient(135deg, var(--primary-dark), var(--secondary)); box-shadow: 0 14px 32px rgba(37,99,235,0.45); } .btn-secondary { background: #f0f4ff; color: #1c3c87; } :root[data-theme="dark"] .btn-secondary { background: rgba(148,163,184,0.12); color: #e5e7eb; } .btn-success { background: var(--success); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-light { background: #f3f4f6; color: #111827; } :root[data-theme="dark"] .btn-light { background: rgba(15,23,42,0.9); color: var(--text-main); border: 1px solid rgba(31,41,55,0.9); } .btn-ghost { background: transparent; color: var(--primary); padding-inline: 8px; box-shadow: none; } .btn.icon-only { padding-inline: 6px; min-width: 28px; } .btn.btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 999px; } /* Centered toast for bulk actions */ .center-toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.98); min-width: 280px; max-width: 90%; z-index: 99999; border-radius: 12px; padding: 14px 18px; box-shadow: 0 12px 30px rgba(2,6,23,0.6); display: flex; align-items: center; gap: 12px; transition: opacity 180ms ease, transform 180ms ease; opacity: 0; } .center-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .center-toast .center-toast-inner { font-size: 15px; font-weight: 700; color: var(--text-main); } .center-toast.success { background: linear-gradient(180deg, rgba(34,197,94,0.12), rgba(34,197,94,0.06)); border: 1px solid rgba(34,197,94,0.15); } .center-toast.error { background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04)); border: 1px solid rgba(239,68,68,0.12); } :root[data-theme="dark"] .center-toast { box-shadow: 0 18px 50px rgba(2,6,23,0.9); } :root[data-theme="dark"] .center-toast .center-toast-inner { color: var(--text-main); } .btn.copied { background: #22c55e; color: #fff; } /* ========================================= شبكة الفيديوهات (Video Grid) ========================================= */ .video-grid { /* padding: 32px; */ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; position: relative; overflow: hidden; } .video-grid-bg-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .video-grid > *:not(.video-grid-bg-canvas) { position: relative; z-index: 1; } .video-grid[data-cols="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); } .video-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .video-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .video-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .video-grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .video-grid[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .video-card { background: radial-gradient(130% 160% at 0% 0%, rgba(56,189,248,0.1), rgba(56,189,248,0) 60%), radial-gradient(140% 180% at 100% 100%, rgba(236,72,153,0.12), rgba(236,72,153,0) 65%), var(--bg-surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 12px; border: 1px solid transparent; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .video-card-selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.25), var(--shadow-soft); } :root[data-theme="dark"] .video-card { background: rgba(15,23,42,0.95); border-color: rgba(15,23,42,0.9); } .video-card:hover { transform: translateY(-2px); border-color: rgba(148,163,184,0.4); box-shadow: 0 22px 45px rgba(15,23,42,0.12); } :root[data-theme="dark"] .video-card:hover { box-shadow: 0 22px 45px rgba(15,23,42,0.9); } /* Thumbnail */ .video-thumb { position: relative; width: 100%; padding-top: calc(16 / 9 * 50%); border-radius: 14px; overflow: hidden; background: #0f172a; cursor: pointer; } .video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Placeholder للڤيديوهات التي لم تُنشأ الصورة/الفيديو بعد */ .video-thumb.video-thumb-empty { background: #0b1220; } .video-thumb.video-thumb-empty .video-thumb-placeholder { position: absolute; inset: 0; background: radial-gradient(90% 90% at 15% 20%, rgba(56, 189, 248, 0.9), rgba(56, 189, 248, 0) 60%), radial-gradient(80% 80% at 85% 30%, rgba(167, 139, 250, 0.85), rgba(167, 139, 250, 0) 60%), radial-gradient(90% 90% at 50% 85%, rgba(244, 63, 94, 0.55), rgba(244, 63, 94, 0) 65%), linear-gradient(135deg, #0b1220, #111827); background-size: 200% 200%; animation: videoThumbGradient 6s ease-in-out infinite; } @keyframes videoThumbGradient { 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } } .video-select-toggle { position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 999px; background: rgba(15,23,42,0.75); border: 1px solid rgba(148,163,184,0.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } :root[data-theme="light"] .video-select-toggle { background: rgba(15,23,42,0.65); } .video-select-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 4px; border: 2px solid #e5e7eb; background: transparent; cursor: pointer; } .video-select-toggle input[type="checkbox"]:checked { background: #22c55e; border-color: #22c55e; } /* زر التشغيل فوق الصورة */ .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #111; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 0 25px rgba(15,23,42,0.3); pointer-events: none; } :root[data-theme="dark"] .play-icon { background: rgba(15,23,42,0.85); color: #e5e7eb; border: 1px solid rgba(148,163,184,0.6); } /* أيقونة حالة الإنشاء (بدل ▶ عند عدم توفر الفيديو بعد) */ .gen-status-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 18px; background: rgba(255, 255, 255, 0.86); color: #111; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 28px rgba(15,23,42,0.28); pointer-events: none; z-index: 1; } :root[data-theme="dark"] .gen-status-icon { background: rgba(15,23,42,0.82); color: #e5e7eb; border: 1px solid rgba(148,163,184,0.55); box-shadow: 0 0 30px rgba(0,0,0,0.55); } .gen-status-icon-loading::after { content: ''; position: absolute; inset: -8px; border-radius: 22px; border: 2px solid rgba(59, 130, 246, 0.25); animation: genPulse 1.4s ease-out infinite; } :root[data-theme="dark"] .gen-status-icon-loading::after { border-color: rgba(96, 165, 250, 0.22); } @keyframes genPulse { 0% { transform: scale(0.92); opacity: 0.0; } 25% { opacity: 1; } 100% { transform: scale(1.08); opacity: 0.0; } } .gen-spinner { width: 26px; height: 26px; border-radius: 999px; border: 3px solid rgba(15,23,42,0.18); border-top-color: var(--primary); animation: genSpin 0.9s linear infinite; } :root[data-theme="dark"] .gen-spinner { border-color: rgba(226,232,240,0.22); border-top-color: var(--primary); } @keyframes genSpin { to { transform: rotate(360deg); } } .gen-status-icon-failed { font-size: 26px; font-weight: 800; background: rgba(255, 255, 255, 0.92); color: #b91c1c; border: 1px solid rgba(185, 28, 28, 0.25); } :root[data-theme="dark"] .gen-status-icon-failed { background: rgba(15,23,42,0.9); color: #fca5a5; border: 1px solid rgba(252, 165, 165, 0.25); } @media (prefers-reduced-motion: reduce) { .video-thumb.video-thumb-empty .video-thumb-placeholder { animation: none; } .gen-spinner { animation: none; } .gen-status-icon-loading::after { animation: none; } } /* نصوص الفيديو */ .video-body { display: flex; flex-direction: column; gap: 12px; } .video-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .video-title strong { font-size: 14px; line-height: 1.4; } /* أزرار أسفل الكرت */ .video-actions { display: flex; flex-wrap: wrap; gap: 5px; } /* أيقونة حالة نشر يوتيوب داخل الكرت */ .yt-publish-status { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; margin-inline-end: 4px; font-size: 0; /* إخفاء النص والاكتفاء بالأيقونة */ } .yt-publish-status::before { content: '⬤'; font-size: 11px; } .yt-publish-status[data-published="1"] { background: rgba(34, 197, 94, 0.14); color: #16a34a; } .yt-publish-status[data-published="1"]::before { color: #22c55e; } .yt-publish-status[data-published="0"] { background: rgba(148, 163, 184, 0.18); color: #6b7280; } .yt-publish-status[data-published="0"]::before { color: #9ca3af; } .yt-publish-status[data-published="error"] { background: rgba(239, 68, 68, 0.16); color: #dc2626; } .yt-publish-status[data-published="error"]::before { color: #ef4444; } .yt-publish-error-reason { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; font-size: 11px; color: #b91c1c; background: rgba(239, 68, 68, 0.08); border: 1px dashed rgba(239, 68, 68, 0.35); line-height: 1.4; word-break: break-word; } :root[data-theme="dark"] .yt-publish-error-reason { color: #fca5a5; background: rgba(239, 68, 68, 0.12); border-color: rgba(248, 113, 113, 0.35); } /* حالة جلب الفيديو (من GeminiGen) */ .video-fetch-status { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; margin-inline-start: 2px; font-size: 0; /* إخفاء أي نص داخلي */ } .video-fetch-status::before { content: '🎬'; font-size: 13px; } .video-fetch-status[data-fetched="1"] { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; } .video-fetch-status[data-fetched="0"] { background: rgba(148, 163, 184, 0.18); color: #6b7280; opacity: 0.7; } /* حالة تحميل الفيديو (تنزيله) */ .video-download-status { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; margin-inline-start: 2px; font-size: 0; } .video-download-status::before { content: '⬇️'; font-size: 13px; } .video-download-status[data-downloaded="1"] { background: rgba(34, 197, 94, 0.14); color: #16a34a; } .video-download-status[data-downloaded="0"] { background: rgba(148, 163, 184, 0.18); color: #6b7280; opacity: 0.7; } /* شريط العمليات الجماعية للفيديوهات */ .video-bulk-toolbar { grid-column: 1 / -1; margin-bottom: 4px; padding: 8px 12px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: 10px; font-size: 13px; } :root[data-theme="dark"] .video-bulk-toolbar { background: rgba(15,23,42,0.96); border-color: rgba(31,41,55,0.9); } .video-bulk-toolbar-left { display: inline-flex; align-items: center; gap: 8px; } .video-bulk-toolbar-right { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .video-bulk-counter { font-weight: 600; } .video-bulk-toolbar input[type="checkbox"] { width: 16px; height: 16px; } .video-select-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .video-select-checkbox { width: 16px; height: 16px; } /* صف فارغ */ .empty-box { padding: 32px; border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-soft); text-align: center; color: var(--text-muted); } :root[data-theme="dark"] .empty-box { background: rgba(15,23,42,0.9); border: 1px dashed rgba(148,163,184,0.5); } /* أدوات تخصيص القوائم (إضافة/حذف خيارات) */ .select-customizer { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; } .select-customizer .select-custom-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); cursor: pointer; } .select-customizer .select-custom-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 28px; height: 16px; border-radius: 999px; border: 1px solid var(--border); background: #e5e7eb; position: relative; outline: none; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; } .select-customizer .select-custom-toggle input[type="checkbox"]::before { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 3px rgba(15,23,42,0.25); transition: transform 0.18s ease; } .select-customizer .select-custom-toggle input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary-dark); } .select-customizer .select-custom-toggle input[type="checkbox"]:checked::before { transform: translateX(12px); } .select-customizer .select-custom-controls { display: none; align-items: center; flex-wrap: wrap; gap: 4px; } .select-customizer .select-custom-input { flex: 1; min-width: 120px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; background: var(--bg-surface); color: var(--text-main); } :root[data-theme="dark"] .select-customizer .select-custom-input { background: rgba(15,23,42,0.95); border-color: rgba(31,41,55,0.9); } /* ========================================= ترقيم الصفحات أسفل شبكة الفيديوهات ========================================= */ .pagination { grid-column: 1 / -1; margin-top: 12px; padding: 10px 14px; border-radius: 999px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; background: var(--bg-surface); box-shadow: var(--shadow-soft); border: 1px solid var(--border); } :root[data-theme="dark"] .pagination { background: rgba(15,23,42,0.96); border-color: rgba(31,41,55,0.9); } .pagination-summary { font-size: 13px; color: var(--text-muted); } .pagination-buttons { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pagination-btn { padding: 6px 12px; font-size: 12px; border-radius: 999px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; } .pagination-btn-active { cursor: default; } /* ========================================= صفحات الفورم (إضافة/تعديل) ========================================= */ .form-page { max-width: 600px; margin: 50px auto; padding: 24px; } .form-card { background: var(--bg-surface); padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 18px; } label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--text-main); } input[type="text"], input[type="file"], textarea, select { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 15px; background: #fff; color: var(--text-main); } :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="file"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: rgba(15,23,42,0.95); color: var(--text-main); border-color: rgba(31,41,55,0.9); } textarea { resize: vertical; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; } /* Alerts */ .alert { border-radius: 12px; padding: 12px; font-weight: 600; } .alert.error { background: #fdecea; color: #611a15; } .alert.success { background: #e8f7e9; color: #256029; } /* تخطيط فورم عريض (مخصص لصفحات مثل إدارة المستخدمين) */ .form-page-wide { max-width: 1100px; margin: 40px auto; padding: 24px; } .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 768px) { .form-grid-2 { grid-template-columns: 1fr; } } /* ========================================= الشريط العلوي داخل اللوحة (استُبدل بالشريط العام) ========================================= */ .topbar { width: 100%; margin-bottom: 16px; padding: 10px 16px; border-radius: 999px; background: var(--bg-surface); box-shadow: var(--shadow-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } :root[data-theme="dark"] .topbar { background: rgba(15,23,42,0.96); border-color: rgba(31,41,55,0.9); } .topbar-left { display: flex; flex-direction: column; gap: 2px; } .topbar-title { font-size: 15px; font-weight: 600; } .topbar-subtitle { font-size: 12px; color: var(--text-muted); } .topbar-right { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .topbar-item { padding: 6px 10px; border-radius: 999px; background: var(--chip-bg); display: flex; align-items: center; gap: 4px; font-size: 13px; } .topbar-label { color: var(--text-muted); } .topbar-value { font-weight: 700; } .topbar-icon-btn { border: none; background: #f3f4f6; color: #111827; border-radius: 999px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; position: relative; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; } :root[data-theme="dark"] .topbar-icon-btn { background: rgba(15,23,42,0.9); color: var(--text-main); border: 1px solid rgba(31,41,55,0.9); } .topbar-icon-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,0.18); } .topbar-badge { position: absolute; top: 4px; left: 4px; min-width: 14px; height: 14px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* حركات لونية خفيفة لإظهار روح الذكاء الاصطناعي */ @keyframes topbarGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes btnGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes contentHeaderGlowShift { 0% { transform: translate3d(-5%, -5%, 0) rotate(0deg); } 50% { transform: translate3d(5%, 5%, 0) rotate(180deg); } 100% { transform: translate3d(-5%, -5%, 0) rotate(360deg); } } /* ========================================= الشريط العلوي العام (فوق الـ layout) ========================================= */ .global-topbar { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 8px 18px; background: linear-gradient(120deg, #0f172a, #1d4ed8, #7c3aed, #ec4899, #0f172a); background-size: 260% 260%; color: #e5e7eb; box-shadow: 0 6px 18px rgba(15,23,42,0.6); animation: topbarGradientShift 18s ease-in-out infinite; } .global-topbar-section { display: flex; align-items: center; } .global-topbar-section-right { justify-content: flex-start; } .global-topbar-section-center { justify-content: center; } .app-brand { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 999px; background: radial-gradient(90% 200% at 0% 0%, rgba(56,189,248,0.35), rgba(56,189,248,0) 60%), radial-gradient(90% 200% at 100% 0%, rgba(236,72,153,0.35), rgba(236,72,153,0) 60%); transition: transform 0.12s ease, background 0.25s ease, box-shadow 0.25s ease; } .app-brand:hover { transform: translateY(-1px); background: radial-gradient(90% 200% at 0% 0%, rgba(56,189,248,0.55), rgba(56,189,248,0) 60%), radial-gradient(90% 200% at 100% 0%, rgba(236,72,153,0.55), rgba(236,72,153,0) 60%); box-shadow: 0 12px 30px rgba(15,23,42,0.9); } .app-logo { display: block; } @media (max-width: 520px) { .app-logo { } } /* شعار GHAITH المصغر في الشريط العلوي (متناسق مع شاشة المقدمة) */ .topbar-logo-wrap { display: inline-flex; align-items: center; justify-content: center; gap: 4px; transform: translateY(1px); direction: ltr; } .topbar-g-box, .topbar-ai-box { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 999px; background-size: 200% 200%; } .topbar-g-box { background-image: linear-gradient(135deg, #22d3ee, #6366f1, #a78bfa); } .topbar-ai-box { background-image: linear-gradient(135deg, #8b5cf6, #ec4899, #f97316); } .topbar-g-letter { font-weight: 900; font-size: 16px; letter-spacing: 0.5px; color: #f9fafb; } .topbar-ai-letter { font-weight: 900; font-size: 12px; letter-spacing: 1px; color: #f9fafb; } .topbar-tail { font-weight: 800; letter-spacing: 1px; font-size: 13px; color: #e5e7eb; } @media (max-width: 520px) { .topbar-g-letter { font-size: 14px; } .topbar-ai-letter { font-size: 11px; } .topbar-tail { font-size: 12px; } } .global-topbar-section-left { justify-content: flex-end; gap: 10px; } .global-topbar-user { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(15,23,42,0.6); border: 1px solid rgba(148,163,184,0.4); font-size: 13px; } .global-topbar-user-avatar { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.9); font-size: 13px; } .global-topbar-user-name { font-weight: 600; } .global-topbar-balance { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(15,23,42,0.75); border: 1px solid rgba(148,163,184,0.5); min-width: 140px; } .global-topbar-balance .label { font-size: 11px; color: #94a3b8; } .global-topbar-balance .value { font-size: 15px; font-weight: 700; } .global-topbar-icon { border: none; background-image: linear-gradient(145deg, rgba(15,23,42,0.9), rgba(30,64,175,0.95)); color: #e5e7eb; border-radius: 999px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; position: relative; transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; box-shadow: 0 8px 18px rgba(15,23,42,0.65); } .global-topbar-icon:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15,23,42,0.9); } .global-topbar-badge { position: absolute; top: 3px; left: 4px; min-width: 14px; height: 14px; border-radius: 999px; background: #f97316; color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* أيقونات الشريط العلوي — لمسة لونية */ .global-topbar-icon-small { width: 28px; height: 28px; font-size: 14px; } /* تفاصيل حسابات الدفع لشحن الكريدت (الحفاظ على الأسطر) */ #topupPaymentInfo { white-space: pre-line; } /* تلوين صفوف جداول طلبات الشحن حسب الحالة */ .table tr.topup-status-pending { background-color: #fff7e0; } .table tr.topup-status-confirmed { background-color: #e6ffed; } .table tr.topup-status-rejected, .table tr.topup-status-cancelled { background-color: #ffe6e6; } /* تنسيق خاص لنماذج شحن الكريدت والباكات حتى تكون الحقول أقرب وأكثر أناقة */ .auto-form.topup-form { gap: 8px; } /* أسعار إنشاء الفيديو/الصورة في صفحة topup */ .topup-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 760px) { .topup-pricing-grid { grid-template-columns: 1fr; } } .topup-price-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(148,163,184,0.28); padding: 14px; background: var(--bg-surface); } :root[data-theme="dark"] .topup-price-card { background: rgba(15,23,42,0.92); border-color: rgba(148,163,184,0.22); } .topup-price-card::before { content: ""; position: absolute; inset: -2px; opacity: 0.22; pointer-events: none; background: linear-gradient(135deg, rgba(148,163,184,0.45), rgba(148,163,184,0.0)); } .topup-price-card-video::before { background: linear-gradient(135deg, rgba(34,211,238,0.95), rgba(59,130,246,0.92), rgba(99,102,241,0.9)); } .topup-price-card-image::before { background: linear-gradient(135deg, rgba(167,139,250,0.95), rgba(236,72,153,0.9), rgba(249,115,22,0.88)); } .topup-price-card > * { position: relative; } .topup-price-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .topup-price-icon { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,0.82); border: 1px solid rgba(148,163,184,0.35); } :root[data-theme="dark"] .topup-price-icon { background: rgba(15,23,42,0.75); border-color: rgba(148,163,184,0.4); } .topup-price-title { font-size: 14px; font-weight: 800; } .topup-price-sub { margin-top: 2px; font-size: 12px; color: var(--text-muted); } .topup-price-pill { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 14px; color: #fff; font-weight: 900; border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 14px 28px rgba(2,6,23,0.16); } :root[data-theme="dark"] .topup-price-pill { box-shadow: 0 18px 50px rgba(2,6,23,0.75); } .topup-price-pill-video { background: linear-gradient(135deg, #22d3ee, #3b82f6, #6366f1); } .topup-price-pill-image { background: linear-gradient(135deg, #a78bfa, #ec4899, #f97316); } .topup-price-pill-free { background: linear-gradient(135deg, #22c55e, #16a34a, #0ea5e9); } .topup-price-number { font-size: 22px; line-height: 1; letter-spacing: 0.2px; } .topup-price-unit { font-size: 12px; opacity: 0.92; font-weight: 800; } .topup-pricing-hint { margin-top: 10px; color: var(--text-muted); } @media (min-width: 768px) { .auto-form.topup-form { flex-direction: row; flex-wrap: wrap; } .auto-form.topup-form > label { flex: 1 1 220px; min-width: 200px; } } /* لوحة الإشعارات */ .notifications-panel { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: 33vw; max-width: 420px; max-height: none; background: rgba(15,23,42,0.98); border-radius: 16px; border: 1px solid rgba(148,163,184,0.45); box-shadow: 0 20px 40px rgba(15,23,42,0.9); z-index: 70; display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(16px); } :root[data-theme="light"] .notifications-panel { background: rgba(248,250,252,0.98); border-color: rgba(148,163,184,0.45); } .notifications-header { padding: 10px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(148,163,184,0.35); } .notifications-header span { display: inline-flex; align-items: center; gap: 6px; } .notifications-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; } .notif-item { padding: 8px 14px; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; border-bottom: 1px solid rgba(15,23,42,0.25); } :root[data-theme="light"] .notif-item { border-bottom-color: rgba(229,231,235,0.9); } .notif-icon { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(30,64,175,0.18); } /* إشعار إداري مميز */ .notif-item-admin { background: linear-gradient(120deg, rgba(59,130,246,0.08), rgba(236,72,153,0.06)); } :root[data-theme="dark"] .notif-item-admin { background: linear-gradient(120deg, rgba(59,130,246,0.2), rgba(236,72,153,0.15)); } .notif-item-admin .notif-icon { background: radial-gradient(circle at 30% 30%, rgba(236,72,153,0.9), rgba(236,72,153,0.2)); } .notif-body { flex: 1; min-width: 0; } .notif-message { margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-meta { font-size: 11px; color: var(--text-muted); } .notif-empty { padding: 12px 14px; font-size: 12px; color: var(--text-muted); text-align: center; } /* ========================================= المودالات (Dialog) ========================================= */ .modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1055; } .modal[hidden] { display: none !important; } .modal-dialog { background: var(--bg-surface); border-radius: var(--radius-lg); width: min(520px, 90vw); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-soft); } .modal-header, .modal-footer { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .modal-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-muted); } /* مودال ملء الشاشة لتفاصيل الفيديو */ .modal-fullscreen { position: fixed; inset: 0; z-index: 1050; display: none; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(10px); } .modal-fullscreen[hidden] { display: none !important; } .modal-fullscreen:not([hidden]) { display: flex; align-items: stretch; justify-content: center; } .modal-fullscreen .modal-dialog { width: 100%; height: 100%; /* max-width: 960px; */ margin: auto; border-radius: 18px; overflow: hidden; background: var(--bg-surface); box-shadow: 0 30px 80px rgba(15,23,42,0.95); border: 1px solid rgba(148,163,184,0.25); } :root[data-theme="dark"] .modal-fullscreen .modal-dialog { background: radial-gradient(circle at top, #020617 0, #020617 60%, #020617 100%); } .modal-fullscreen .modal-header { padding: 10px 14px; border-bottom: 1px solid rgba(30,64,175,0.4); } .modal-fullscreen .modal-header h3 { margin: 0; font-size: 16px; } .modal-fullscreen .modal-body { height: calc(100vh - 60px); max-height: calc(100vh - 60px); overflow: auto; padding: 14px 16px 16px; } .video-details-dialog[data-mode="short"] .modal-body { display: flex; align-items: center; justify-content: center; padding: 12px; } .video-details-dialog[data-mode="short"] .video-details-layout { max-width: 420px; width: 100%; } .video-details-dialog[data-mode="short"] .details-player-wrap { max-width: 380px; margin: 0 auto 10px auto; border-radius: 18px; overflow: hidden; } .video-details-dialog[data-mode="short"] #detailsPlayer { width: 100%; max-height: 80vh; aspect-ratio: 9 / 16; object-fit: cover; } .video-details-dialog[data-mode="short"][data-orientation="landscape"] .details-player-wrap { max-width: 640px; } .video-details-dialog[data-mode="short"][data-orientation="landscape"] #detailsPlayer { aspect-ratio: 16 / 9; } .video-details-dialog[data-mode="short"] .details-title-row { justify-content: center; text-align: center; } .video-details-dialog[data-mode="short"] .details-title-row span { font-size: 16px; } .video-details-dialog[data-mode="short"] .details-prompt-box, .video-details-dialog[data-mode="short"] .details-desc-header, .video-details-dialog[data-mode="short"] #detailsDescription, .video-details-dialog[data-mode="short"] .details-info-box, .video-details-dialog[data-mode="short"] .details-meta-row, .video-details-dialog[data-mode="short"] .details-image-box, .video-details-dialog[data-mode="short"] .details-upload-row, .video-details-dialog[data-mode="short"] .details-youtube-meta { display: none !important; } .video-details-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .video-details-header-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .video-details-header-actions { display: inline-flex; align-items: center; gap: 6px; } .video-view-toggle-btn, .video-nav-btn { border-radius: 999px; width: 32px; height: 32px; font-size: 18px; background: rgba(15,23,42,0.04); border: 1px solid rgba(148,163,184,0.5); } :root[data-theme="dark"] .video-view-toggle-btn, :root[data-theme="dark"] .video-nav-btn { background: rgba(15,23,42,0.9); border-color: rgba(55,65,81,0.9); color: #e5e7eb; } .video-view-toggle-btn:hover, .video-nav-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,0.4); } /* تفاصيل الفيديو داخل المودال */ .video-details-layout { display: grid; grid-template-rows: auto auto auto auto auto; gap: 10px; } .details-player-wrap { position: relative; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(15,23,42,0.8); box-shadow: 0 7px 40px rgba(15,23,42,0.9); } #detailsPlayer { width: 100%; max-height: 60vh; background: #000; } /* حالة فشل إنشاء الفيديو في مشغل التفاصيل */ .details-player-wrap.failed { background: radial-gradient(circle at 20% 0%, rgba(248,113,113,0.25), rgba(15,23,42,1)); border-color: rgba(248,113,113,0.75); } .details-player-wrap.failed::before { content: '⚠\A فشل إنشاء الفيديو.\A قد تكون مطالبتك معقدة جدًا، أو طويلة جدًا، أو بها طلبات متضاربة، حاول تبسيط المطالبة. إذا استمر الخطأ، يرجى الانتظار لمدة 30 دقيقة قبل المحاولة مرة أخرى , حاول تجنب ادخل اسماء لها حقوق ملكية فكرية مثل شخصيات مشهورة او علامات تجارية.'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 18px; font-weight: 600; color: #fecaca; white-space: pre-line; background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(15,23,42,0.95)); } /* حالة قيد الإنشاء */ .details-player-wrap.pending { background: radial-gradient(circle at 10% 0%, rgba(56,189,248,0.35), rgba(15,23,42,1)); border-color: rgba(56,189,248,0.75); } .details-player-wrap.pending::before { content: '⏳ الفيديو قيد الإنشاء...'; display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; inset: 0; padding: 16px; font-size: 16px; font-weight: 600; color: #e0f2fe; background: radial-gradient(circle at 0% 0%, rgba(56,189,248,0.35), rgba(15,23,42,0.9)), radial-gradient(circle at 100% 100%, rgba(129,140,248,0.28), rgba(15,23,42,0.9)); } .details-player-wrap.failed video, .details-player-wrap.pending video { opacity: 0; pointer-events: none; } .details-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .details-title-row span { font-weight: 600; font-size: 15px; } .details-section-label { font-size: 13px; color: var(--text-muted); margin-bottom: 3px; } #detailsDescription { font-size: 13px; line-height: 1.6; color: var(--text-main); padding: 8px 10px; border-radius: 10px; background: var(--details-bg); border: 1px solid var(--details-prompt-border); white-space: pre-wrap; } /* برومبت الصورة / الفيديو */ .details-prompt-box { margin-top: 6px; } .details-prompt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; } .details-prompt-row textarea { width: 100%; min-height: 70px; resize: vertical; font-family: inherit; font-size: 13px; line-height: 1.6; border-radius: 10px; border: 1px solid var(--details-prompt-border); padding: 8px 10px; background: var(--details-prompt-bg); color: var(--text-main); } .details-upload-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; } /* مودال تأكيد حذف الشخصية */ #confirmDeleteCharacterModal .modal-dialog { max-width: 360px; margin: auto; border-radius: 16px; overflow: hidden; background: var(--bg-surface); border: 1px solid rgba(248,113,113,0.4); box-shadow: 0 25px 60px rgba(15,23,42,0.95); } :root[data-theme="dark"] #confirmDeleteCharacterModal .modal-dialog { background: radial-gradient(circle at top, #111827 0, #020617 70%); } #confirmDeleteCharacterModal .modal-body { padding: 14px 16px; font-size: 14px; } #confirmDeleteCharacterModal .modal-footer { padding: 10px 16px 12px; border-top: 1px solid rgba(31,41,55,0.9); display: flex; justify-content: flex-end; gap: 8px; } /* ========================================= صفحة التقدم / اللوج (progress & logs) ========================================= */ .progress-page { max-width: 820px; margin: 0 auto; padding: 32px; } .progress-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-soft); } .progress-bar { background: #e2e8f0; border-radius: 999px; overflow: hidden; height: 16px; } .progress-bar-fill { background: linear-gradient(270deg, #22d3ee, #3b82f6); height: 100%; width: 0; transition: width 0.5s ease; } .progress-status { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .progress-actions, .progress-actions-advanced { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; } .progress-actions-advanced { padding: 0; background: transparent; } .pipeline-group { background: #f9fafb; border-radius: 16px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } :root[data-theme="dark"] .pipeline-group { background: rgba(15,23,42,0.9); border: 1px solid rgba(148,163,184,0.35); } .pipeline-group-title { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); } .pipeline-group-buttons { display: flex; flex-wrap: wrap; gap: 6px; } .pipeline-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: none; } .pipeline-icon { font-size: 15px; } .pipeline-btn-image-request { background: #eef2ff; color: #3730a3; } .pipeline-btn-image-fetch { background: #e5e7eb; color: #111827; } .pipeline-btn-video-request { background: #ecfeff; color: #155e75; } .pipeline-btn-video-fetch { background: #dbeafe; color: #1d4ed8; } .pipeline-btn-video-nocredit { background: #fff7ed; color: #c2410c; } .badge { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; } .badge.success { background: #dcfce7; color: #166534; } .badge.failed { background: #fee2e2; color: #991b1b; } .logs ul { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); margin-top: 16px; } .logs li { padding: 16px; border-bottom: 1px solid var(--border); } .logs li:last-child { border-bottom: none; } .logs .meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); } .logs .message { margin-top: 6px; line-height: 1.6; } /* رسائل أعلى الصفحة (نجاح / خطأ) */ .message-box { border-radius: 10px; padding: 12px; font-weight: 600; display: none; } .message-box.success { background: #ecfdf5; color: #065f46; } .message-box.error { background: #fef2f2; color: #991b1b; } /* ========================================= صفحة عرض الفيديو (Video Show) ========================================= */ .video-show { max-width: 1000px; margin: 0 auto; padding: 32px; display: flex; flex-direction: column; gap: 20px; } .video-player { background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); } .video-meta { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-soft); display: grid; gap: 16px; } .meta-row { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .meta-row:last-child { border-bottom: none; padding-bottom: 0; } .meta-row span { color: var(--text-muted); font-size: 13px; } .meta-row strong { font-size: 16px; } .primary-image { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; } /* ========================================= Theme Toggle زر تبديل الثيم ========================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; } .theme-toggle input { display: none; } .theme-toggle .toggle-btn { width: 46px; height: 24px; border-radius: 999px; background: #e5e7eb; border: 1px solid #cbd5f5; position: relative; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .theme-toggle .toggle-btn::before { content: "☀️"; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 999px; background: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: transform 0.25s ease, right 0.25s.ease, left 0.25s ease, content 0.25s ease; } /* عند تفعيل التبديل (مثلاً ربطه بالوضع الليلي) */ .theme-toggle input:checked + .toggle-btn { background: #111827; border-color: #4b5563; } .theme-toggle input:checked + .toggle-btn::before { content: "🌙"; right: auto; left: 2px; } /* ========================================= Responsive ========================================= */ @media (max-width: 1024px) { .layout { grid-template-columns: 240px 1fr; } } @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } .sidebar { grid-row: 2; flex-direction: row; overflow-x: auto; align-items: center; } .content { padding: 20px; } .video-actions { flex-wrap: wrap; } } @media (max-width: 900px) { .body-bg-canvas, .video-grid-bg-canvas { display: none; } } @media (max-width: 640px) { .content { padding: 14px; } .content-header { padding: 12px; border-radius: 16px; } .video-grid { grid-template-columns: 1fr; gap: 16px; } .video-card { padding: 12px; } .video-title strong { font-size: 15px; } .video-actions .btn { padding: 8px 10px; font-size: 13px; } .yt-publish-status { width: auto; height: auto; padding: 4px 8px; font-size: 11px; gap: 6px; } .yt-publish-status::before { font-size: 9px; } .pagination { border-radius: 16px; padding: 10px; gap: 8px; flex-direction: column; } .pagination-buttons { width: 100%; display: flex; justify-content: center; } .pagination-summary { width: 100%; text-align: center; } .pagination-btn { padding: 8px 10px; font-size: 13px; min-width: 0; } .video-search-actions { flex-direction: column; align-items: stretch; } .video-search-actions .btn, .video-search-actions .btn-ghost { width: 100%; display: inline-flex; justify-content: center; } .video-search-grid input, .video-search-grid select { font-size: 15px; } } /* ===== Create Video Modal – Fullscreen layout ===== */ .modal.modal-fullscreen#createVideoModal .modal-dialog { max-width: 1100px; width: 95%; height: 90vh; max-height: 90vh; display: flex; flex-direction: column; } .modal.modal-fullscreen#createVideoModal .modal-body { overflow: auto; } /* شريط التبويبات */ .tabs.tabs-pill { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 6px; } .tabs.tabs-pill .tab-button { border: none; background: transparent; padding: 8px 16px; border-radius: 999px; font-size: 14px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.12s.ease; color: var(--text-muted); } .tabs.tabs-pill .tab-button:hover { background: var(--chip-bg); color: var(--text-main); transform: translateY(-1px); } .tabs.tabs-pill .tab-button.active { background: linear-gradient(135deg, var(--primary), #ec4899); color: #ffffff; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.4); } /* شريط زر بدء الإنشاء في الهيدر */ .auto-toolbar { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; } .auto-result-inline { min-width: 160px; font-size: 12px; color: var(--text-muted); } /* تخطيط الحقول في مودال إنشاء الفيديو */ .auto-form { display: flex; flex-direction: column; gap: 14px; } .form-row { display: grid; gap: 12px; } .form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .form-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .form-row-2, .form-row-3 { grid-template-columns: minmax(0, 1fr); } } .auto-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-main); } input { width: 100%; border-radius: 12px; border: 1px solid var(--border); padding: 8px 10px; font-size: 13px; font-family: inherit; background: var(--bg-surface); color: var(--text-main); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } :root[data-theme="dark"] input { background: rgba(15,23,42,0.95); border-color: rgba(31,41,55,0.9); color: var(--text-main); } .auto-form input[type="text"], .auto-form input[type="number"], .auto-form select, .auto-form textarea { width: 100%; border-radius: 12px; border: 1px solid var(--border); padding: 8px 10px; font-size: 13px; font-family: inherit; background: var(--bg-surface); color: var(--text-main); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } :root[data-theme="dark"] .auto-form input[type="text"], :root[data-theme="dark"] .auto-form input[type="number"], :root[data-theme="dark"] .auto-form select, :root[data-theme="dark"] .auto-form textarea { background: rgba(15,23,42,0.95); border-color: rgba(31,41,55,0.9); color: var(--text-main); } .auto-form textarea { resize: vertical; min-height: 70px; } .auto-form input:focus, .auto-form select:focus, .auto-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35); background: var(--bg-surface); } .auto-form input[readonly], .auto-form textarea[readonly] { opacity: 0.9; } /* قالب JSON في تبويب الإنشاء من JSON */ .json-template { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); padding: 10px 12px; display: grid; gap: 8px; } .json-template-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .json-template-title { font-size: 13px; font-weight: 600; color: var(--text-main); } .json-template-box { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--details-prompt-border); background: var(--details-prompt-bg); font-size: 12px; line-height: 1.55; max-height: 240px; overflow: auto; direction: ltr; white-space: pre; } .json-template-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; } /* حقل رقم المقاطع */ .number-input { text-align: center; } /* الحقول بعرض كامل */ .full-width { width: 100%; } /* الفوتر بشكل أفقي */ .footer-inline { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* تبويب إنشاء فيديو من بروموت */ .prompt-image-field { display: flex; flex-direction: column; gap: 8px; } .prompt-field-title { font-size: 13px; color: var(--text-muted); } .image-ref-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .image-ref-box { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 14px; background: var(--bg-surface); color: var(--text-main); cursor: pointer; min-height: 54px; } .image-ref-box:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12); } .image-ref-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .image-ref-icon { font-size: 18px; } .image-ref-preview { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--border); overflow: hidden; background: var(--bg-surface); flex: 0 0 auto; } .image-ref-preview img { width: 100%; height: 100%; display: block; object-fit: cover; } .image-ref-zoom { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(0.98); width: 160px; height: 160px; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; background: var(--bg-surface); z-index: 5; } .image-ref-preview:hover .image-ref-zoom { opacity: 1; transform: translateY(-50%) scale(1); } .image-ref-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-ref-remove { position: absolute; inset: 0; border: none; background: rgba(15, 23, 42, 0.55); color: #fff; font-size: 16px; opacity: 0; transition: opacity 0.15s ease; cursor: pointer; } .image-ref-preview:hover .image-ref-remove { opacity: 1; } .prompt-choice-group { display: flex; flex-direction: column; gap: 8px; } .prompt-choice-title { font-size: 13px; color: var(--text-muted); } .prompt-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .prompt-choice-grid-compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .prompt-choice-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); cursor: pointer; text-align: center; min-height: 70px; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .prompt-choice-card.is-selected, .prompt-choice-card:has(input:checked) { border-color: var(--primary); background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(14, 165, 233, 0.08)); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12); } .prompt-choice-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08); } .prompt-choice-card input { position: absolute; opacity: 0; pointer-events: none; } .prompt-choice-state { position: absolute; top: 10px; inset-inline-start: 10px; width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--border); background: rgba(148, 163, 184, 0.2); display: inline-flex; align-items: center; justify-content: center; } .prompt-choice-state::after { content: ""; width: 6px; height: 10px; border-right: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(45deg); display: block; } .prompt-choice-card input:checked ~ .prompt-choice-state { background: var(--primary); border-color: var(--primary); } .prompt-choice-card input:checked ~ .prompt-choice-state::after { border-color: #fff; } .prompt-choice-thumb { display: inline-block; border: 2px solid var(--text-muted); border-radius: 8px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(14, 165, 233, 0.08)); } .prompt-choice-thumb-landscape { width: 58px; height: 34px; } .prompt-choice-thumb-portrait { width: 34px; height: 58px; } .prompt-choice-label { font-size: 13px; color: var(--text-muted); } .prompt-choice-card input:checked ~ .prompt-choice-thumb { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .prompt-choice-card input:checked ~ .prompt-choice-label { color: var(--text-main); font-weight: 600; } .prompt-choice-card-compact { min-height: 54px; } .prompt-create-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .prompt-video-price { font-size: 13px; color: var(--text-muted); } /* ===== شريط الهيدر للفيديوهات – ثابت مع السكروول ===== */ .content-header-sticky { position: sticky; top: 56px; /* أسفل الشريط العلوي تقريباً */ z-index: 60; margin-bottom: 18px; } .content-header-main h2 { margin: 0; font-size: 18px; } .content-header-main p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); } /* بطاقات إحصائيات سريعة بجوار عنوان الفيديوهات */ .content-header-main { display: flex; flex-direction: column; gap: 6px; } .content-header-main > div:first-child { display: flex; flex-direction: column; gap: 2px; } @media (min-width: 768px) { .content-header-main { flex-direction: row; align-items: center; justify-content: space-between; } } .content-header-metrics { display: flex; flex-wrap: wrap; gap: 8px; } .metric-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.4); font-size: 12px; color: var(--text-muted); } .metric-hidden { display: none !important; } .metric-chip .metric-label { opacity: 0.85; } .metric-chip .metric-value { font-weight: 600; font-size: 13px; } .metric-chip-clickable { cursor: pointer; text-decoration: none; } .metric-chip-clickable:hover { filter: brightness(1.05); } .metric-chip-active { box-shadow: 0 0 0 1px var(--primary); color: var(--text-main); } .metric-chip-warn { background: rgba(234, 179, 8, 0.08); border-color: rgba(234, 179, 8, 0.5); } .metric-chip-info { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.6); } .metric-chip-success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.6); } .metric-chip-danger { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.6); } .video-filter-panel { margin-top: 10px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-soft); border: 1px solid var(--border); position: relative; } .metric-visibility-panel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .metric-visibility-title { font-size: 12px; font-weight: 600; color: var(--text-main); margin-bottom: 8px; } .metric-visibility-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .metric-visibility-item { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.35); font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; } .metric-visibility-item input { accent-color: var(--primary); margin: 0; } .metric-visibility-item:hover { filter: brightness(1.05); } :root[data-theme="dark"] .video-filter-panel { background: rgba(15,23,42,0.96); border-color: rgba(31,41,55,0.9); } .video-search-form { display: flex; flex-direction: column; gap: 10px; } .video-search-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr); gap: 8px; align-items: flex-end; } .video-search-label { font-size: 11px; color: var(--text-muted); } .video-search-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 18px; } .video-search-checkbox input[type="checkbox"] { margin: 0; } .video-search-actions { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 768px) { .video-search-grid { grid-template-columns: 1fr; } } /* شريط الأزرار كـ toolbar حديث */ .actions-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; max-width: 100%; } /* كل مجموعة أزرار في كبسولة */ .actions-group { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 999px; background: var(--chip-bg); border: 1px solid rgba(148, 163, 184, 0.35); } :root[data-theme="dark"] .actions-group { background: rgba(15, 23, 42, 0.92); border-color: rgba(55, 65, 81, 0.85); } /* زر الإعدادات على اليمين كزر مستقل */ .actions-settings-btn { border-radius: 999px; white-space: nowrap; } /* تصغير الأزرار قليلاً في التولبار */ .actions-toolbar .btn { padding: 7px 12px; font-size: 13px; border-radius: 999px; } /* لو الشاشة صغيرة – نخلي الأزرار تسحب يمين/يسار بدل تكديس سيء */ @media (max-width: 920px) { .content-header-sticky { padding-top: 10px; } .actions-toolbar { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; } .actions-toolbar::-webkit-scrollbar { height: 4px; } .actions-toolbar::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.7); border-radius: 999px; } } /* حقول اختيار متعدد بتصميم بطاقات */ .multi-select { position: relative; width: 100%; } .multi-select-trigger { width: 100%; min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-main); cursor: pointer; font-size: 13px; text-align: start; } .multi-select-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .multi-select-placeholder { color: var(--text-muted); flex: 1; } .multi-select-caret { margin-inline-start: auto; color: var(--text-muted); } .multi-select-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.45); font-size: 11px; } .multi-select-tag-remove { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1; } .multi-select-dropdown { position: absolute; inset-inline: 0; top: calc(100% + 6px); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: var(--shadow-soft); max-height: 220px; overflow: auto; display: none; z-index: 50; } .multi-select.open .multi-select-dropdown { display: block; } .multi-select-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; cursor: pointer; } .multi-select-option:hover { background: rgba(148, 163, 184, 0.12); } .multi-select-native[data-multi-ready="1"] { display: none; } /* تبويبات نوع الجدولة */ .schedule-mode-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .schedule-mode-tabs .tab-button { flex: 1; min-width: 180px; } /* بطاقات ملخص الجدولة */ .schedule-header-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 10px; } .schedule-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 10px; } .schedule-summary-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow-soft); } .schedule-summary-wide { grid-column: span 2; } @media (max-width: 640px) { .schedule-summary-wide { grid-column: span 1; } } .schedule-summary-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; } .schedule-summary-value { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .schedule-value-pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.45); background: rgba(148, 163, 184, 0.15); font-weight: 600; font-size: 13px; } .schedule-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.45); background: rgba(148, 163, 184, 0.15); font-size: 12px; } .schedule-pill-muted { color: var(--text-muted); } .schedule-next { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; } .schedule-next-label { color: var(--text-muted); font-size: 12px; } .table-actions { display: inline-flex; align-items: center; gap: 6px; } .table-actions .icon-btn { width: 30px; height: 30px; font-size: 16px; } /* تفاصيل الجدولة */ .schedule-details-layout { display: flex; flex-direction: column; gap: 14px; } .schedule-details-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-soft); } .schedule-details-title { margin: 0 0 10px; font-size: 14px; } .schedule-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .schedule-details-grid-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .schedule-details-card { background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .schedule-details-card-wide { grid-column: span 2; } @media (max-width: 640px) { .schedule-details-card-wide { grid-column: span 1; } } .schedule-details-label { font-size: 11px; color: var(--text-muted); } .schedule-details-value { font-size: 13px; font-weight: 600; } .schedule-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .schedule-plan-card { border: 1px dashed var(--border); border-radius: 14px; padding: 10px; background: rgba(148, 163, 184, 0.08); } .schedule-plan-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .schedule-plan-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; } .schedule-plan-duration { color: var(--text-muted); font-size: 11px; } .schedule-plan-chips { display: flex; flex-wrap: wrap; gap: 6px; } .schedule-plan-chip { padding: 4px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.4); font-size: 11px; }