/* ================= admin.html ================= */
html.page-admin {
/* === Hostaka UI Design System v2.0 === */
--black: #ffffff; --dark: #f5f5f7; --card: #ffffff; --border: rgba(0,0,0,0.08);
--text: #1c1c1e; --muted: #8e8e93; --primary: #0071e3; --primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08); --primary-border: rgba(0,113,227,0.25);
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--danger:#ff3b30; --success:#34c759; --warning:#ff9500;
--bg: var(--dark);
}
[data-theme="dark"].page-admin {
--black: #000000; --dark: #121212; --card: #1c1c1e; --border: rgba(255,255,255,0.08);
--text: #f5f5f7; --muted: #8e8e93; --primary: #0a84ff; --primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12); --primary-border: rgba(10,132,255,0.3);
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
}
body.page-admin, body.page-admin * {margin:0;padding:0;box-sizing:border-box;}
body.page-admin {background:var(--bg);color:var(--text);font-family:'Cairo',sans-serif;min-height:100vh;display:flex;transition:background var(--transition-base),color var(--transition-base);}
body.page-admin .sidebar {width:220px;background:var(--card);border-left:1px solid var(--border);padding:24px 12px;display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;}
body.page-admin .logo {font-weight:900;font-size:1.2rem;color:var(--text);padding:0 8px;margin-bottom:28px;}
body.page-admin .nav-item {display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);font-size:0.88rem;border:none;background:none;width:100%;text-align:right;font-family:'Cairo';margin-bottom:2px;transition:all var(--transition-fast);}
body.page-admin .nav-item:hover {background:var(--primary-light);color:var(--primary);}
body.page-admin .nav-item.active {background:var(--primary-light);color:var(--primary);font-weight:700;}
body.page-admin .sidebar-footer {margin-top:auto;padding:12px;}
body.page-admin .user-info {font-size:0.82rem;color:var(--muted);margin-bottom:8px;}
body.page-admin .user-info span {color:var(--text);font-weight:700;}
body.page-admin .btn-logout {width:100%;padding:9px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:'Cairo';font-size:0.85rem;transition:all var(--transition-fast);}
body.page-admin .btn-logout:hover {background:var(--primary-h);}
body.page-admin .main {margin-right:220px;flex:1;padding:28px;}
body.page-admin .page {display:none;}
body.page-admin .page.active {display:block;}
body.page-admin .page-title {font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;}
body.page-admin .card {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;margin-bottom:18px;transition:all var(--transition-base);}
body.page-admin .stats-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:24px;}
body.page-admin .stat-card {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;text-align:center;transition:all var(--transition-base);}
body.page-admin .stat-card:hover {border-color:var(--primary-border);box-shadow:var(--shadow);}
body.page-admin .stat-n {font-size:1.8rem;font-weight:900;color:var(--primary);}
body.page-admin .stat-l {font-size:0.78rem;color:var(--muted);margin-top:3px;}
body.page-admin table {width:100%;border-collapse:collapse;font-size:0.85rem;}
body.page-admin th {padding:10px 12px;text-align:right;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);}
body.page-admin td {padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
body.page-admin tr:last-child td {border-bottom:none;}
body.page-admin tr:hover td {background:var(--primary-light);}
body.page-admin .badge {display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:0.72rem;font-weight:700;}
body.page-admin .badge-admin {background:var(--primary-light);color:var(--primary);border:1px solid var(--primary-border);}
body.page-admin .badge-user {background:var(--dark);color:var(--muted);border:1px solid var(--border);}
body.page-admin .badge-pending {background:rgba(255,149,0,0.12);color:#a16207;}
[data-theme="dark"].page-admin body.page-admin .badge-pending {color:var(--warning);}
body.page-admin .badge-suspended {background:rgba(255,59,48,0.1);color:#dc2626;border:1px solid rgba(255,59,48,0.25);}
[data-theme="dark"].page-admin body.page-admin .badge-suspended {color:#ff6961;}
body.page-admin .badge-active {background:rgba(52,199,89,0.1);color:#15803d;border:1px solid rgba(52,199,89,0.25);}
[data-theme="dark"].page-admin body.page-admin .badge-active {color:var(--success);}
body.page-admin .btn {display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);cursor:pointer;font-family:'Cairo';font-size:0.82rem;font-weight:700;border:none;transition:all var(--transition-fast);}
body.page-admin .btn-dark {background:var(--primary);color:#fff;}
body.page-admin .btn-dark:hover {background:var(--primary-h);}
body.page-admin .btn-ghost {background:var(--primary-light);color:var(--text);border:1px solid var(--border);}
body.page-admin .btn-ghost:hover {background:var(--primary-border);}
body.page-admin .btn-sm {padding:5px 10px;font-size:0.78rem;}
body.page-admin .alert {padding:10px 14px;border-radius:var(--radius-sm);font-size:0.85rem;margin-bottom:12px;display:none;}
body.page-admin .alert-err {background:rgba(255,59,48,0.08);color:var(--danger);border:1px solid rgba(255,59,48,0.2);}
body.page-admin .form-input {width:100%;padding:10px 12px;background:var(--dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';font-size:0.88rem;margin-bottom:12px;transition:border-color var(--transition-fast);}
body.page-admin .form-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-admin .form-label {display:block;color:var(--muted);font-size:0.82rem;font-weight:600;margin-bottom:5px;}
body.page-admin .toast {position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:11px 22px;border-radius:var(--radius-md);font-size:0.86rem;z-index:999;opacity:0;transition:opacity var(--transition-base);pointer-events:none;box-shadow:var(--shadow);}
body.page-admin .toast.show {opacity:1;}
body.page-admin .theme-toggle {width:34px;height:34px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all var(--transition-fast);}
body.page-admin .theme-toggle:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
/* Login */
body.page-admin #loginScreen {position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;}
body.page-admin .login-box {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;width:100%;max-width:380px;box-shadow:var(--shadow);}
body.page-admin .login-title {font-size:1.4rem;font-weight:900;color:var(--text);margin-bottom:4px;}
body.page-admin .login-sub {font-size:0.88rem;color:var(--muted);margin-bottom:24px;}
body.page-admin .btn-login-submit {width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-family:'Cairo';font-weight:800;font-size:0.92rem;transition:all var(--transition-fast);margin-top:4px;box-shadow:0 4px 16px rgba(0,113,227,0.25);}
body.page-admin .btn-login-submit:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-admin .btn-login-submit:disabled {opacity:0.5;cursor:not-allowed;transform:none;}
/* ================= chat.html ================= */
/* ===== الثيمات ===== */
html.page-chat {
/* === Hostaka UI Design System v2.0 === */
--black: #ffffff;
--dark: #f5f5f7;
--card: #ffffff;
--border: rgba(0,0,0,0.08);
--text: #1c1c1e;
--muted: #8e8e93;
--primary: #0071e3;
--primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08);
--primary-mid: rgba(0,113,227,0.15);
--primary-border: rgba(0,113,227,0.25);
--accent: #0071e3;
--mine-bg: linear-gradient(135deg, var(--primary), var(--primary-h));
--mine-border: rgba(0,113,227,0.12);
--their-bg: var(--card);
--their-border: rgba(0,0,0,0.06);
--topbar-bg: rgba(255,255,255,0.72);
--input-bg: #f2f2f7;
--modal-bg: #ffffff;
--post-bg: #ffffff;
--sort-btn-bg: rgba(0,0,0,0.04);
--surface-elevated: #ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--glass-bg: rgba(255,255,255,0.65);
--glass-bg-strong: rgba(255,255,255,0.82);
--glass-border: rgba(255,255,255,0.4);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(255,255,255,0);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--success: #34c759;
--warning: #ff9500;
--danger: #ff3b30;
/* === توافق مع الأسماء القديمة (لا تُحذف) === */
--red: var(--primary);
--red-h: var(--primary-h);
--sidebar-bg: var(--glass-bg);
}
[data-theme="dark"].page-chat {
--black: #000000;
--dark: #121212;
--card: #1c1c1e;
--border: rgba(255,255,255,0.08);
--text: #f5f5f7;
--muted: #8e8e93;
--primary: #0a84ff;
--primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12);
--primary-mid: rgba(10,132,255,0.2);
--primary-border: rgba(10,132,255,0.3);
--accent: #0a84ff;
--mine-bg: linear-gradient(135deg, var(--primary), var(--primary-h));
--mine-border: rgba(10,132,255,0.18);
--their-bg: var(--card);
--their-border: rgba(255,255,255,0.06);
--topbar-bg: rgba(0,0,0,0.65);
--input-bg: #1c1c1e;
--modal-bg: #1c1c1e;
--post-bg: #1c1c1e;
--sort-btn-bg: rgba(255,255,255,0.04);
--surface-elevated: #2c2c2e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
--glass-bg: rgba(28,28,30,0.72);
--glass-bg-strong: rgba(28,28,30,0.88);
--glass-border: rgba(255,255,255,0.08);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(0,0,0,0);
--red: var(--primary);
--red-h: var(--primary-h);
--sidebar-bg: var(--glass-bg);
}
body.page-chat, body.page-chat * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html.page-chat, body.page-chat {height:100%;overflow:hidden;}
body.page-chat {
background:radial-gradient(circle at 18% 16%,rgba(0,0,0,0.05),transparent 22%),var(--black);
color:var(--text);
font-family:'Cairo',sans-serif;
display:flex;
flex-direction:column;
-webkit-font-smoothing:antialiased;
transition:background var(--transition-slow), color var(--transition-slow);
}
html.has-wallpaper body.page-chat * {
transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
/* ===== خلفية المنصة (Wallpaper) ===== */
body.page-chat .wallpaper-bg {
position:fixed;inset:0;z-index:-2;
background-image:var(--wallpaper-img);
background-size:cover;background-position:center;background-repeat:no-repeat;
opacity:0;transition:opacity 0.6s ease;
transform:scale(1.02);
}
html.has-wallpaper body.page-chat .wallpaper-bg {opacity:1;}
body.page-chat .wallpaper-overlay {
position:fixed;inset:0;z-index:-1;
background:var(--wallpaper-overlay);
pointer-events:none;
transition:background 0.6s ease;
}
html.has-wallpaper body.page-chat .topbar, html.has-wallpaper body.page-chat .sidebar, html.has-wallpaper body.page-chat .modal-box {
background:var(--glass-bg)!important;
backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
border-color:var(--glass-border)!important;
}
html.has-wallpaper body.page-chat {background:transparent;}
/* ===== نافذة إعداد الخلفية ===== */
body.page-chat .wp-overlay {position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;visibility:hidden;transition:all .25s ease;padding:20px;}
body.page-chat .wp-overlay.show {opacity:1;visibility:visible;}
body.page-chat .wp-box {background:var(--modal-bg);border:1px solid var(--border);border-radius:22px;padding:26px 22px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;transform:translateY(14px) scale(.97);transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow);}
body.page-chat .wp-overlay.show .wp-box {transform:translateY(0) scale(1);}
body.page-chat .wp-title {font-weight:800;font-size:1.02rem;color:var(--text);display:flex;align-items:center;gap:9px;margin-bottom:14px;}
body.page-chat .wp-title svg {width:19px;height:19px;color:var(--accent);flex-shrink:0;}
body.page-chat .wp-desc {color:var(--muted);font-size:.8rem;line-height:1.7;margin-bottom:14px;}
body.page-chat .wp-preview {width:100%;height:110px;border-radius:14px;border:1px solid var(--border);background:var(--input-bg);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.78rem;margin-bottom:14px;overflow:hidden;}
body.page-chat .wp-upload-btn {width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(128,128,128,.08);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:12px;font-family:'Cairo',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s;margin-bottom:14px;}
body.page-chat .wp-upload-btn:hover {background:rgba(128,128,128,.14);}
body.page-chat .wp-row {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
body.page-chat .wp-row label {font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-chat .wp-row input[type=range] {flex:1;accent-color:var(--accent);}
body.page-chat .wp-check {display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);margin-bottom:16px;cursor:pointer;}
body.page-chat .wp-check input {accent-color:var(--accent);}
body.page-chat .wp-footer {display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}
body.page-chat .wp-btn-ghost {background:none;border:1px solid var(--border);color:var(--muted);padding:9px 16px;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:6px;transition:all .2s;}
body.page-chat .wp-btn-ghost:hover {color:var(--text);border-color:var(--text);}
body.page-chat .wp-btn-primary {background:var(--accent);color:var(--black);border:none;padding:9px 20px;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:800;transition:all .2s;}
body.page-chat .wp-btn-primary:hover {opacity:.88;}
/* ===== الشريط العلوي ===== */
body.page-chat .topbar {
height:56px;
background:var(--topbar-bg);
backdrop-filter:blur(24px) saturate(1.2);
-webkit-backdrop-filter:blur(24px);
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
padding:0 16px;
gap:10px;
flex-shrink:0;
z-index:20;
transition:background 0.3s, border-color 0.3s;
}
body.page-chat .topbar-left {display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
body.page-chat .topbar-right {display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-chat .back-btn {
display:flex;align-items:center;gap:6px;
color:var(--muted);font-size:0.82rem;cursor:pointer;
padding:6px 12px;border-radius:999px;
background:rgba(128,128,128,0.06);
border:1px solid var(--border);
font-family:'Cairo';font-weight:600;
text-decoration:none;white-space:nowrap;
transition:all 0.18s;
}
body.page-chat .back-btn:hover {color:var(--text);background:rgba(128,128,128,0.12);border-color:var(--border);}
body.page-chat .back-btn:active {transform:scale(0.95);}
body.page-chat .back-btn svg {width:14px;height:14px;}
body.page-chat .topbar-title {
font-weight:800;font-size:0.9rem;color:var(--text);
flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.page-chat .icon-btn {
width:36px;height:36px;border-radius:50%;
background:rgba(128,128,128,0.06);
border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--muted);
transition:all 0.2s;flex-shrink:0;
}
body.page-chat .icon-btn:hover, body.page-chat .icon-btn:active {background:rgba(128,128,128,0.12);color:var(--text);border-color:var(--border);}
body.page-chat .icon-btn svg {width:16px;height:16px;}
body.page-chat .peer-opts-menu {
position:absolute;top:42px;left:0;
background:var(--modal-bg);
border:1px solid var(--border);border-radius:12px;
min-width:180px;
opacity:0;visibility:hidden;
transform:translateY(-6px) scale(0.96);
transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
z-index:30;box-shadow:var(--shadow);overflow:hidden;
}
body.page-chat .peer-opts-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-chat .peer-opts-menu button {display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:none;border:none;color:var(--text);font-family:'Cairo',sans-serif;font-size:0.8rem;font-weight:600;cursor:pointer;text-align:right;transition:background 0.15s;}
body.page-chat .peer-opts-menu button:hover {background:rgba(128,128,128,0.08);}
body.page-chat .peer-opts-menu button.danger {color:#dc2626;}
body.page-chat .peer-opts-menu svg {width:14px;height:14px;flex-shrink:0;}
body.page-chat .lang-selector {position:relative;}
body.page-chat .lang-menu {
position:absolute;top:42px;left:0;
background:var(--modal-bg);
border:1px solid var(--border);border-radius:12px;
padding:6px 0;min-width:140px;
opacity:0;visibility:hidden;
transform:translateY(-6px) scale(0.96);
transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
z-index:30;box-shadow:var(--shadow);
}
body.page-chat .lang-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-chat .lang-menu button {
display:flex;align-items:center;gap:8px;
width:100%;padding:8px 16px;
background:none;border:none;
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.85rem;
cursor:pointer;transition:background 0.15s;
text-align:right;
}
body.page-chat .lang-menu button:hover {background:rgba(128,128,128,0.08);}
body.page-chat .lang-menu button .flag {font-size:1.1rem;}
body.page-chat .topbar-peer {
display:flex;align-items:center;gap:10px;flex:1;
cursor:pointer;padding:4px;border-radius:10px;
transition:background 0.15s;
}
body.page-chat .topbar-peer:hover {background:rgba(128,128,128,0.06);}
body.page-chat .topbar-peer:active {transform:scale(0.98);}
body.page-chat .topbar-peer-av {
width:34px;height:34px;border-radius:50%;
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:0.9rem;color:#fff;
overflow:hidden;flex-shrink:0;
border:2px solid rgba(255,255,255,0.05);
}
body.page-chat .topbar-peer-av img {width:100%;height:100%;object-fit:cover;}
body.page-chat .topbar-peer-name {font-weight:700;font-size:0.9rem;color:var(--text);}
body.page-chat .topbar-peer-role {font-size:0.7rem;color:var(--muted);display:flex;align-items:center;gap:5px;}
body.page-chat .status-dot {width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto;display:inline-block;}
body.page-chat .status-dot.online {background:#2ecc71;box-shadow:0 0 0 2px rgba(46,204,113,0.2);}
/* ===== التخطيط ===== */
body.page-chat .chat-layout {display:flex;flex:1;overflow:hidden;}
/* ===== الشريط الجانبي ===== */
body.page-chat .sidebar {
width:300px;
display:flex;flex-direction:column;
border-left:1px solid var(--border);
background:var(--sidebar-bg);
flex-shrink:0;
transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
body.page-chat .sidebar-head {
padding:14px 16px;
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;gap:8px;
}
body.page-chat .sidebar-head-title {font-weight:800;font-size:0.88rem;color:var(--text);}
body.page-chat .btn-new-group {
display:flex;align-items:center;gap:5px;
background:rgba(128,128,128,0.08);
border:1px solid var(--border);
color:var(--muted);
padding:6px 12px;border-radius:8px;
cursor:pointer;font-family:'Cairo';font-size:0.78rem;font-weight:700;
transition:all 0.18s;
}
body.page-chat .btn-new-group:hover {background:rgba(128,128,128,0.15);color:var(--text);border-color:var(--border);}
body.page-chat .btn-new-group:active {transform:scale(0.95);}
body.page-chat .btn-new-group svg {width:12px;height:12px;}
body.page-chat .user-list {flex:1;overflow-y:auto;padding:6px 0;}
body.page-chat .user-list::-webkit-scrollbar {width:4px;}
body.page-chat .user-list::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-chat .section-label {
padding:10px 16px 4px;
font-size:0.68rem;color:var(--muted);font-weight:700;
text-transform:uppercase;letter-spacing:0.06em;
}
body.page-chat .user-item {
display:flex;align-items:center;gap:10px;
padding:10px 14px;cursor:pointer;
transition:all 0.15s;border-radius:10px;
margin:2px 8px;position:relative;
}
body.page-chat .user-item:hover {background:rgba(128,128,128,0.06);}
body.page-chat .user-item.active {
background:rgba(128,128,128,0.12);
border:1px solid var(--border);
}
body.page-chat .user-item:active {transform:scale(0.98);}
body.page-chat .u-av {
width:40px;height:40px;border-radius:50%;
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:0.95rem;color:#fff;
flex-shrink:0;overflow:hidden;
border:2px solid rgba(255,255,255,0.05);
}
body.page-chat .u-av img {width:100%;height:100%;object-fit:cover;}
body.page-chat .u-info {flex:1;min-width:0;}
body.page-chat .u-name {
font-weight:700;font-size:0.86rem;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
display:flex;align-items:center;gap:5px;
}
body.page-chat .u-last {
font-size:0.72rem;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
margin-top:2px;
}
body.page-chat .u-badge {
display:inline-flex;align-items:center;gap:3px;
font-size:0.66rem;color:var(--red);font-weight:700;
}
body.page-chat .u-badge svg {width:9px;height:9px;}
body.page-chat .u-unread {
min-width:18px;height:18px;
background:var(--red);border-radius:50%;
font-size:0.65rem;font-weight:800;color:#fff;
display:flex;align-items:center;justify-content:center;
padding:0 5px;flex-shrink:0;
}
/* ===== منطقة المحادثة ===== */
body.page-chat .chat-main {
flex:1;display:flex;flex-direction:column;
min-width:0;min-height:0;position:relative;
}
body.page-chat .empty-state {
flex:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:14px;color:var(--muted);
animation:chat-fadeIn 0.5s ease;
}
body.page-chat .empty-state svg {width:52px;height:52px;opacity:0.15;}
body.page-chat .empty-state span {font-size:0.9rem;font-weight:600;}
@keyframes chat-fadeIn{from{opacity:0;}to{opacity:1;}}
/* ===== الرسائل ===== */
body.page-chat .msgs-area {
flex:1;overflow-y:auto;padding:16px 14px;
display:flex;flex-direction:column;gap:4px;min-height:0;
}
body.page-chat .msgs-area::-webkit-scrollbar {width:4px;}
body.page-chat .msgs-area::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-chat .date-divider {
text-align:center;font-size:0.68rem;color:var(--muted);
padding:10px 0;position:relative;font-weight:600;
}
body.page-chat .date-divider::before {
content:'';position:absolute;top:50%;left:0;right:0;
height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);
}
body.page-chat .date-divider span {position:relative;z-index:1;background:var(--black);padding:0 12px;}
body.page-chat .msg-row {
display:flex;align-items:flex-end;gap:8px;
margin-bottom:6px;animation:chat-msgIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes chat-msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
body.page-chat .msg-row.mine {flex-direction:row-reverse;}
body.page-chat .msg-av {
width:28px;height:28px;border-radius:50%;
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:0.75rem;color:#fff;
flex-shrink:0;overflow:hidden;
border:2px solid rgba(255,255,255,0.05);
}
body.page-chat .msg-av img {width:100%;height:100%;object-fit:cover;}
body.page-chat .msg-av.invisible {opacity:0;pointer-events:none;}
body.page-chat .bubble-wrap {
display:flex;flex-direction:column;
max-width:68%;min-width:0;
}
body.page-chat .msg-row.mine .bubble-wrap {align-items:flex-end;}
body.page-chat .bubble {
padding:10px 14px;border-radius:18px;
font-size:0.9rem;line-height:1.6;word-break:break-word;
position:relative;cursor:pointer;
transition:background-color 0.3s ease, box-shadow 0.15s ease, transform 0.1s ease;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
body.page-chat .bubble:active {transform:scale(0.98);}
body.page-chat .msg-row.mine .bubble {
background:var(--mine-bg);
color:#fff;
border-bottom-left-radius:5px;
box-shadow:0 2px 8px rgba(0,113,227,0.22);
}
body.page-chat .msg-row.mine .bubble .msg-link {color:#fff;}
body.page-chat .msg-row.theirs .bubble {
background:var(--their-bg);
border:1px solid var(--their-border);
border-bottom-right-radius:5px;
}
body.page-chat .bubble-media {
position:relative;border-radius:18px;overflow:hidden;cursor:pointer;
max-width:260px;box-shadow:0 1px 3px rgba(0,0,0,0.08);
transition:transform 0.15s ease;
}
body.page-chat .bubble-media:active {transform:scale(0.98);}
body.page-chat .bubble-img {
display:block;width:100%;max-height:320px;min-height:120px;
object-fit:cover;background:var(--input-bg);
}
body.page-chat .media-more-btn {
position:absolute;top:7px;left:7px;width:26px;height:26px;
border-radius:50%;border:none;cursor:pointer;
background:rgba(0,0,0,0.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
color:#fff;display:flex;align-items:center;justify-content:center;
transition:background 0.15s ease;z-index:2;
}
body.page-chat .media-more-btn:hover {background:rgba(0,0,0,0.55);}
body.page-chat .bubble-media .react-picker {top:calc(100% + 8px);bottom:auto;}
/* ===== عارض الصور (فتح/حفظ) ===== */
body.page-chat .img-viewer-overlay {
position:fixed;inset:0;background:rgba(0,0,0,0.92);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
z-index:9999;display:none;align-items:center;justify-content:center;
opacity:0;transition:opacity 0.25s ease;
}
body.page-chat .img-viewer-overlay.show {display:flex;opacity:1;}
body.page-chat .img-viewer-img {
max-width:92vw;max-height:80vh;border-radius:14px;object-fit:contain;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
animation:chat-ivPop .25s cubic-bezier(.16,1,.3,1);
}
@keyframes chat-ivPop{from{transform:scale(0.94);opacity:0;}to{transform:scale(1);opacity:1;}}
body.page-chat .img-viewer-topbar {
position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;
padding:calc(14px + env(safe-area-inset-top)) 16px 14px;z-index:2;
}
body.page-chat .iv-btn {
display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.12);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.15);color:#fff;padding:9px 16px;
border-radius:999px;font-family:'Cairo',sans-serif;font-weight:700;font-size:0.85rem;
cursor:pointer;transition:background 0.2s ease;
}
body.page-chat .iv-btn:hover {background:rgba(255,255,255,0.22);}
body.page-chat .iv-btn svg {width:15px;height:15px;}
body.page-chat .msg-link {color:var(--primary);text-decoration:underline;word-break:break-all;}
body.page-chat .link-preview-card {
display:block;margin-top:6px;border:1px solid var(--border);border-radius:12px;
overflow:hidden;background:var(--card);text-decoration:none;color:inherit;max-width:280px;
}
body.page-chat .link-preview-img {width:100%;max-height:140px;object-fit:cover;display:block;background:var(--dark);}
body.page-chat .link-preview-body {padding:8px 10px;}
body.page-chat .link-preview-site {font-size:0.62rem;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:2px;}
body.page-chat .link-preview-title {font-size:0.78rem;font-weight:700;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-chat .link-preview-desc {font-size:0.7rem;color:var(--muted);margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-chat .msg-time {
font-size:0.62rem;color:var(--muted);
padding:3px 5px;font-weight:600;
}
body.page-chat .msg-reaction {
display:inline-flex;align-items:center;gap:4px;
background:rgba(250,250,250,0.95);
border:1px solid var(--border);
border-radius:999px;padding:3px 8px;
font-size:0.78rem;margin-top:4px;
cursor:pointer;transition:all 0.15s;
backdrop-filter:blur(10px);
}
body.page-chat .msg-reaction:hover {background:rgba(30,30,32,0.95);border-color:rgba(255,255,255,0.1);}
body.page-chat .msg-reaction svg {width:12px;height:12px;}
body.page-chat .react-picker {
position:absolute;bottom:calc(100% + 8px);
background:var(--modal-bg);
border:1px solid var(--border);
border-radius:999px;padding:5px 8px;
display:none;gap:3px;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
z-index:30;white-space:nowrap;
box-shadow:var(--shadow);
animation:chat-menuPop 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes chat-menuPop{from{opacity:0;transform:translateY(6px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
body.page-chat .msg-row.mine .react-picker {right:0;}
body.page-chat .msg-row.theirs .react-picker {left:0;}
body.page-chat .react-picker.show {display:flex;}
body.page-chat .r-emoji {
background:none;border:none;cursor:pointer;
padding:5px 7px;border-radius:8px;
transition:all 0.15s;line-height:1;
display:flex;align-items:center;justify-content:center;
color:var(--muted);
}
body.page-chat .r-emoji:hover {background:rgba(128,128,128,0.08);transform:scale(1.2);color:var(--text);}
body.page-chat .r-emoji.active {background:rgba(212,175,55,0.15);color:var(--red);}
body.page-chat .r-emoji svg {width:16px;height:16px;}
body.page-chat .picker-sep {width:1px;align-self:stretch;background:var(--border);margin:2px 2px;}
body.page-chat .msg-edited-tag {opacity:0.75;font-style:italic;}
/* ===== مربع الإدخال ===== */
body.page-chat .img-preview-bar {
padding:8px 14px;
background:var(--topbar-bg);
border-top:1px solid var(--border);
display:none;align-items:center;gap:10px;
flex-shrink:0;animation:chat-slideUp 0.2s ease;
}
@keyframes chat-slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
body.page-chat .img-preview-bar img {height:50px;border-radius:8px;object-fit:cover;border:1px solid var(--border);}
body.page-chat .img-rm-btn {
background:rgba(0,0,0,0.7);border:none;color:#fff;
border-radius:50%;width:22px;height:22px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
flex-shrink:0;transition:all 0.15s;
}
body.page-chat .img-rm-btn:hover {background:rgba(0,0,0,0.9);transform:scale(1.1);}
body.page-chat .img-rm-btn svg {width:10px;height:10px;}
body.page-chat .input-area {
padding:10px 14px;
border-top:1px solid var(--border);
display:flex;align-items:flex-end;gap:8px;
background:var(--topbar-bg);flex-shrink:0;
position:relative;flex-wrap:wrap;
}
body.page-chat .edit-msg-banner {
width:100%;display:flex;align-items:center;justify-content:space-between;
background:rgba(212,175,55,0.1);border:1px solid var(--border);border-radius:10px;
padding:6px 12px;font-size:0.78rem;font-weight:700;color:var(--red);margin-bottom:4px;
}
body.page-chat .edit-msg-banner button {background:none;border:none;color:var(--muted);cursor:pointer;display:flex;}
body.page-chat .btn-attach {
width:40px;height:40px;border-radius:50%;
background:rgba(128,128,128,0.06);
border:1px solid var(--border);
cursor:pointer;display:flex;align-items:center;justify-content:center;
color:var(--muted);transition:all 0.18s;flex-shrink:0;
}
body.page-chat .btn-attach:hover {color:var(--text);background:rgba(128,128,128,0.12);border-color:var(--border);}
body.page-chat .btn-attach:active {transform:scale(0.92);}
body.page-chat .btn-attach svg {width:15px;height:15px;}
body.page-chat .msg-input {
flex:1;padding:11px 16px;
background:var(--input-bg);
border:1px solid var(--border);border-radius:22px;
color:var(--text);font-family:'Cairo';font-size:0.9rem;
resize:none;max-height:120px;overflow-y:auto;line-height:1.5;
outline:none;transition:all 0.2s;
}
body.page-chat .msg-input:focus {
border-color:var(--border);background:var(--input-bg);
box-shadow:0 0 0 3px rgba(128,128,128,0.08);
}
body.page-chat .msg-input::placeholder {color:var(--muted);}
body.page-chat .send-btn {
width:42px;height:42px;border-radius:50%;
background:var(--red);border:none;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all 0.2s;flex-shrink:0;
}
body.page-chat .send-btn:hover {background:var(--red-h);transform:scale(1.08);}
body.page-chat .send-btn:active {transform:scale(0.95);}
body.page-chat .send-btn:disabled {opacity:0.4;cursor:not-allowed;transform:none;}
body.page-chat .send-btn svg {width:17px;height:17px;}
/* ===== الهواتف ===== */
body.page-chat .sidebar-toggle {
display:none;
width:38px;height:38px;border-radius:10px;
background:rgba(128,128,128,0.06);
border:1px solid var(--border);
align-items:center;justify-content:center;
cursor:pointer;color:var(--muted);flex-shrink:0;
transition:all 0.18s;
}
body.page-chat .sidebar-toggle:hover {color:var(--text);background:rgba(128,128,128,0.12);}
body.page-chat .sidebar-toggle:active {transform:scale(0.92);}
body.page-chat .sidebar-toggle svg {width:17px;height:17px;}
body.page-chat .sidebar-overlay {
display:none;
position:fixed;inset:0;
background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
z-index:15;opacity:0;transition:opacity 0.3s;
}
body.page-chat .sidebar-overlay.show {display:block;opacity:1;}
/* ===== غير مسجل ===== */
body.page-chat .not-logged {
flex:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:14px;animation:chat-fadeIn 0.5s ease;
}
body.page-chat .not-logged h2 {font-size:1.2rem;font-weight:800;color:var(--text);}
body.page-chat .not-logged p {color:var(--muted);font-size:0.85rem;max-width:300px;text-align:center;line-height:1.6;}
body.page-chat .btn-go {
display:inline-flex;align-items:center;gap:6px;
padding:11px 24px;background:var(--red);color:#fff;
border-radius:10px;font-weight:800;font-size:0.88rem;
text-decoration:none;transition:all 0.2s;
}
body.page-chat .btn-go:hover {background:var(--red-h);transform:translateY(-1px);}
body.page-chat .btn-go:active {transform:scale(0.97);}
/* ===== المودال ===== */
body.page-chat .modal-bg {
position:fixed;inset:0;
background:rgba(0,0,0,0.85);backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
display:none;align-items:center;justify-content:center;
z-index:200;padding:20px;opacity:0;transition:opacity 0.25s;
}
body.page-chat .modal-bg.show {display:flex;opacity:1;}
body.page-chat .modal-box {
background:var(--modal-bg);
border:1px solid var(--border);
border-radius:22px;padding:28px 24px;
width:100%;max-width:440px;max-height:85vh;
overflow-y:auto;transform:translateY(12px) scale(0.97);
transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
box-shadow:var(--shadow);
}
body.page-chat .modal-bg.show .modal-box {transform:translateY(0) scale(1);}
body.page-chat .modal-title {
font-weight:800;font-size:1.05rem;color:var(--text);
margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
body.page-chat .modal-title svg {width:20px;height:20px;color:var(--red);}
body.page-chat .m-input {
width:100%;padding:11px 14px;
background:var(--input-bg);
border:1px solid var(--border);border-radius:10px;
color:var(--text);font-family:'Cairo';font-size:0.9rem;
margin-bottom:14px;transition:all 0.2s;
}
body.page-chat .m-input:focus {outline:none;border-color:var(--border);background:var(--input-bg);box-shadow:0 0 0 3px rgba(128,128,128,0.08);}
body.page-chat .m-input::placeholder {color:var(--muted);}
body.page-chat .member-check {
display:flex;align-items:center;gap:10px;
padding:10px 12px;background:rgba(128,128,128,0.04);
border-radius:10px;cursor:pointer;margin-bottom:6px;
transition:all 0.15s;border:1px solid transparent;
}
body.page-chat .member-check:hover {background:rgba(128,128,128,0.08);border-color:var(--border);}
body.page-chat .member-check input[type="checkbox"] {accent-color:var(--red);width:16px;height:16px;flex-shrink:0;}
body.page-chat .member-check .u-av {width:28px;height:28px;font-size:0.78rem;flex-shrink:0;}
body.page-chat .member-check span {font-size:0.86rem;color:var(--text);}
body.page-chat .m-footer {display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
body.page-chat .btn-cancel {
padding:10px 18px;
background:rgba(128,128,128,0.06);
border:1px solid var(--border);border-radius:9px;
color:var(--muted);cursor:pointer;font-family:'Cairo';
font-size:0.86rem;font-weight:600;transition:all 0.2s;
}
body.page-chat .btn-cancel:hover {background:rgba(128,128,128,0.12);color:var(--text);border-color:var(--border);}
body.page-chat .btn-cancel:active {transform:scale(0.96);}
body.page-chat .btn-confirm {
padding:10px 18px;
background:var(--red);border:none;border-radius:9px;
color:#fff;font-weight:800;cursor:pointer;font-family:'Cairo';
font-size:0.86rem;transition:all 0.2s;
}
body.page-chat .btn-confirm:hover {background:var(--red-h);transform:translateY(-1px);}
body.page-chat .btn-confirm:active {transform:translateY(0);}
body.page-chat .btn-confirm:disabled {opacity:0.5;cursor:not-allowed;transform:none;}
/* ===== توست ===== */
body.page-chat .toast {
position:fixed;bottom:24px;left:50%;
transform:translateX(-50%) translateY(20px);
padding:12px 22px;border-radius:14px;
font-size:0.88rem;font-weight:600;
z-index:999;border:1px solid var(--border);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
opacity:0;visibility:hidden;
transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
white-space:nowrap;max-width:90vw;text-align:center;
}
body.page-chat .toast.show {opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
body.page-chat .toast-success {background:var(--modal-bg);color:var(--text);border-color:var(--border);}
body.page-chat .toast-error {background:var(--red);color:#fff;border-color:var(--red);}
/* ===== سكرول ===== */
body.page-chat ::-webkit-scrollbar {width:4px;}
body.page-chat ::-webkit-scrollbar-track {background:transparent;}
body.page-chat ::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-chat ::-webkit-scrollbar-thumb:hover {background:var(--muted);}
/* ===== استجابة ===== */
@media(max-width:680px){
body.page-chat .topbar {height:52px;padding:0 12px;gap:6px;}
body.page-chat .back-btn {padding:5px 10px;font-size:0.76rem;}
body.page-chat .back-btn svg {width:12px;height:12px;}
body.page-chat .topbar-title {font-size:0.82rem;}
body.page-chat .topbar-peer-av {width:30px;height:30px;}
body.page-chat .topbar-peer-name {font-size:0.84rem;}
body.page-chat .sidebar {
position:fixed;top:0;right:0;bottom:0;z-index:16;
width:280px;transform:translateX(100%);
border-left:none;border-right:1px solid var(--border);
}
body.page-chat .sidebar.open {transform:translateX(0);}
body.page-chat .sidebar-head {padding:12px 14px;}
body.page-chat .btn-new-group {padding:5px 10px;font-size:0.74rem;}
body.page-chat .user-item {padding:9px 12px;margin:2px 6px;}
body.page-chat .u-av {width:36px;height:36px;}
body.page-chat .u-name {font-size:0.82rem;}
body.page-chat .u-last {font-size:0.7rem;}
body.page-chat .sidebar-toggle {display:flex;}
body.page-chat .bubble-wrap {max-width:82%;}
body.page-chat .bubble {padding:9px 12px;font-size:0.88rem;border-radius:16px;}
body.page-chat .msg-av {width:24px;height:24px;font-size:0.68rem;}
body.page-chat .msg-time {font-size:0.6rem;}
body.page-chat .input-area {padding:8px 12px;}
body.page-chat .btn-attach {width:36px;height:36px;}
body.page-chat .msg-input {padding:9px 14px;font-size:0.86rem;}
body.page-chat .send-btn {width:38px;height:38px;}
body.page-chat .send-btn svg {width:15px;height:15px;}
body.page-chat .modal-box {padding:22px 18px;border-radius:18px;}
body.page-chat .modal-title {font-size:0.95rem;}
body.page-chat .m-input {padding:10px 12px;font-size:0.86rem;}
body.page-chat .member-check {padding:8px 10px;}
body.page-chat .not-logged {padding:60px 20px;}
body.page-chat .not-logged h2 {font-size:1.1rem;}
}
@media(max-width:400px){
body.page-chat .topbar {padding:0 10px;}
body.page-chat .back-btn span {display:none;}
body.page-chat .back-btn {padding:6px;}
body.page-chat .back-btn svg {margin:0;}
body.page-chat .topbar-peer-name {max-width:120px;overflow:hidden;text-overflow:ellipsis;}
body.page-chat .bubble-wrap {max-width:88%;}
body.page-chat .msgs-area {padding:12px 10px;}
}
@media(prefers-reduced-motion:reduce){
body.page-chat, body.page-chat *, body.page-chat *::before, body.page-chat *::after {animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}
/* ================= group.html ================= */
html.page-group {
/* === Hostaka UI Design System v2.0 === */
--black: #ffffff;
--dark: #f5f5f7;
--card: #ffffff;
--border: rgba(0,0,0,0.08);
--text: #1c1c1e;
--muted: #8e8e93;
--primary: #0071e3;
--primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08);
--primary-mid: rgba(0,113,227,0.15);
--primary-border: rgba(0,113,227,0.25);
--accent: #0071e3;
--mine-bg: linear-gradient(135deg, var(--primary), var(--primary-h));
--mine-border: rgba(0,113,227,0.12);
--their-bg: var(--card);
--their-border: rgba(0,0,0,0.06);
--topbar-bg: rgba(255,255,255,0.72);
--input-bg: #f2f2f7;
--modal-bg: #ffffff;
--post-bg: #ffffff;
--sort-btn-bg: rgba(0,0,0,0.04);
--surface-elevated: #ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--glass-bg: rgba(255,255,255,0.65);
--glass-bg-strong: rgba(255,255,255,0.82);
--glass-border: rgba(255,255,255,0.4);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(255,255,255,0);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--success: #34c759;
--warning: #ff9500;
--danger: #ff3b30;
--red: var(--primary);
--red-h: var(--primary-h);
--sidebar-bg: var(--glass-bg);
}
[data-theme="dark"].page-group {
--black: #000000;
--dark: #121212;
--card: #1c1c1e;
--border: rgba(255,255,255,0.08);
--text: #f5f5f7;
--muted: #8e8e93;
--primary: #0a84ff;
--primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12);
--primary-mid: rgba(10,132,255,0.2);
--primary-border: rgba(10,132,255,0.3);
--accent: #0a84ff;
--mine-bg: linear-gradient(135deg, var(--primary), var(--primary-h));
--mine-border: rgba(10,132,255,0.18);
--their-bg: var(--card);
--their-border: rgba(255,255,255,0.06);
--topbar-bg: rgba(0,0,0,0.65);
--input-bg: #1c1c1e;
--modal-bg: #1c1c1e;
--post-bg: #1c1c1e;
--sort-btn-bg: rgba(255,255,255,0.04);
--surface-elevated: #2c2c2e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
--glass-bg: rgba(28,28,30,0.72);
--glass-bg-strong: rgba(28,28,30,0.88);
--glass-border: rgba(255,255,255,0.08);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(0,0,0,0);
--red: var(--primary);
--red-h: var(--primary-h);
--sidebar-bg: var(--glass-bg);
}
body.page-group, body.page-group * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html.page-group, body.page-group {height:100%;overflow:hidden;}
body.page-group {
background:radial-gradient(circle at 18% 16%,rgba(0,0,0,0.05),transparent 22%),var(--black);
color:var(--text);font-family:'Cairo',sans-serif;
display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;
transition:background var(--transition-slow), color var(--transition-slow);
}
html.has-wallpaper body.page-group * {
transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
/* ===== خلفية المنصة (Wallpaper) ===== */
body.page-group .wallpaper-bg {
position:fixed;inset:0;z-index:-2;
background-image:var(--wallpaper-img);
background-size:cover;background-position:center;background-repeat:no-repeat;
opacity:0;transition:opacity 0.6s ease;
transform:scale(1.02);
}
html.has-wallpaper body.page-group .wallpaper-bg {opacity:1;}
body.page-group .wallpaper-overlay {
position:fixed;inset:0;z-index:-1;
background:var(--wallpaper-overlay);
pointer-events:none;
transition:background 0.6s ease;
}
html.has-wallpaper body.page-group .topbar, html.has-wallpaper body.page-group .sidebar, html.has-wallpaper body.page-group .modal-box {
background:var(--glass-bg)!important;
backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
border-color:var(--glass-border)!important;
}
html.has-wallpaper body.page-group {background:transparent;}
/* ===== نافذة إعداد الخلفية ===== */
body.page-group .wp-overlay {position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;visibility:hidden;transition:all .25s ease;padding:20px;}
body.page-group .wp-overlay.show {opacity:1;visibility:visible;}
body.page-group .wp-box {background:var(--modal-bg);border:1px solid var(--border);border-radius:22px;padding:26px 22px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;transform:translateY(14px) scale(.97);transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow);}
body.page-group .wp-overlay.show .wp-box {transform:translateY(0) scale(1);}
body.page-group .wp-title {font-weight:800;font-size:1.02rem;color:var(--text);display:flex;align-items:center;gap:9px;margin-bottom:14px;}
body.page-group .wp-title svg {width:19px;height:19px;color:var(--accent);flex-shrink:0;}
body.page-group .wp-desc {color:var(--muted);font-size:.8rem;line-height:1.7;margin-bottom:14px;}
body.page-group .wp-preview {width:100%;height:110px;border-radius:14px;border:1px solid var(--border);background:var(--input-bg);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.78rem;margin-bottom:14px;overflow:hidden;}
body.page-group .wp-upload-btn {width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(128,128,128,.08);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:12px;font-family:'Cairo',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s;margin-bottom:14px;}
body.page-group .wp-upload-btn:hover {background:rgba(128,128,128,.14);}
body.page-group .wp-row {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
body.page-group .wp-row label {font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-group .wp-row input[type=range] {flex:1;accent-color:var(--accent);}
body.page-group .wp-check {display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);margin-bottom:16px;cursor:pointer;}
body.page-group .wp-check input {accent-color:var(--accent);}
body.page-group .wp-footer {display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}
body.page-group .wp-btn-ghost {background:none;border:1px solid var(--border);color:var(--muted);padding:9px 16px;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:6px;transition:all .2s;}
body.page-group .wp-btn-ghost:hover {color:var(--text);border-color:var(--text);}
body.page-group .wp-btn-primary {background:var(--accent);color:var(--black);border:none;padding:9px 20px;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:800;transition:all .2s;}
body.page-group .wp-btn-primary:hover {opacity:.88;}
body.page-group .topbar {
height:56px;background:var(--topbar-bg);
backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px);
border-bottom:1px solid var(--border);
display:flex;align-items:center;padding:0 16px;gap:10px;
flex-shrink:0;z-index:20;transition:background 0.3s, border-color 0.3s;
}
body.page-group .topbar-left {display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
body.page-group .topbar-right {display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-group .back-btn {
display:flex;align-items:center;gap:6px;color:var(--muted);font-size:0.82rem;cursor:pointer;
padding:6px 12px;border-radius:999px;background:rgba(128,128,128,0.06);
border:1px solid var(--border);font-family:'Cairo';font-weight:600;
text-decoration:none;white-space:nowrap;transition:all 0.18s;
}
body.page-group .back-btn:hover {color:var(--text);background:rgba(128,128,128,0.12);}
body.page-group .back-btn:active {transform:scale(0.95);}
body.page-group .back-btn svg {width:14px;height:14px;}
body.page-group .icon-btn {
width:36px;height:36px;border-radius:50%;background:rgba(128,128,128,0.06);
border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--muted);transition:all 0.2s;flex-shrink:0;
}
body.page-group .icon-btn:hover, body.page-group .icon-btn:active {background:rgba(128,128,128,0.12);color:var(--text);}
body.page-group .icon-btn svg {width:16px;height:16px;}
body.page-group .lang-selector {position:relative;}
body.page-group .lang-menu {
position:absolute;top:42px;left:0;background:var(--modal-bg);
border:1px solid var(--border);border-radius:12px;padding:6px 0;min-width:140px;
opacity:0;visibility:hidden;transform:translateY(-6px) scale(0.96);
transition:all 0.2s cubic-bezier(0.16,1,0.3,1);z-index:30;box-shadow:var(--shadow);
}
body.page-group .lang-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-group .lang-menu button {
display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;
background:none;border:none;color:var(--text);font-family:'Cairo',sans-serif;
font-size:0.85rem;cursor:pointer;transition:background 0.15s;text-align:right;
}
body.page-group .lang-menu button:hover {background:rgba(128,128,128,0.08);}
body.page-group .lang-menu button .flag {font-size:1.1rem;}
body.page-group .topbar-peer {
display:flex;align-items:center;gap:10px;flex:1;min-width:0;
cursor:pointer;padding:4px;border-radius:10px;transition:background 0.15s;
}
body.page-group .topbar-peer:hover {background:rgba(128,128,128,0.06);}
body.page-group .topbar-peer-av {
width:34px;height:34px;border-radius:50%;background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;font-weight:800;
font-size:0.9rem;color:#fff;overflow:hidden;flex-shrink:0;
border:2px solid rgba(255,255,255,0.05);
}
body.page-group .topbar-peer-av img {width:100%;height:100%;object-fit:cover;}
body.page-group .topbar-peer-name {font-weight:700;font-size:0.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.page-group .topbar-peer-role {font-size:0.7rem;color:var(--muted);}
body.page-group .chat-layout {display:flex;flex:1;overflow:hidden;}
body.page-group .sidebar {
width:280px;display:flex;flex-direction:column;border-left:1px solid var(--border);
background:var(--sidebar-bg);flex-shrink:0;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
body.page-group .sidebar-head {padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
body.page-group .sidebar-head-title {font-weight:800;font-size:0.88rem;color:var(--text);}
body.page-group .btn-add-member {
display:flex;align-items:center;gap:5px;background:rgba(128,128,128,0.08);
border:1px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:8px;
cursor:pointer;font-family:'Cairo';font-size:0.78rem;font-weight:700;transition:all 0.18s;
}
body.page-group .btn-add-member:hover {background:rgba(128,128,128,0.15);color:var(--text);}
body.page-group .btn-add-member svg {width:12px;height:12px;}
body.page-group .member-list {flex:1;overflow-y:auto;padding:6px 0;}
body.page-group .member-list::-webkit-scrollbar {width:4px;}
body.page-group .member-list::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-group .member-item {
display:flex;align-items:center;gap:10px;padding:10px 14px;
transition:all 0.15s;border-radius:10px;margin:2px 8px;position:relative;
}
body.page-group .member-item:hover {background:rgba(128,128,128,0.06);}
body.page-group .m-av {
width:36px;height:36px;border-radius:50%;background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85rem;
color:#fff;flex-shrink:0;overflow:hidden;border:2px solid rgba(255,255,255,0.05);cursor:pointer;
}
body.page-group .m-av img {width:100%;height:100%;object-fit:cover;}
body.page-group .m-info {flex:1;min-width:0;cursor:pointer;}
body.page-group .m-name {font-weight:700;font-size:0.84rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.page-group .m-role {font-size:0.7rem;color:var(--muted);}
body.page-group .m-role.admin {color:var(--red);font-weight:700;}
body.page-group .m-actions {position:relative;flex-shrink:0;}
body.page-group .m-more {
width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--muted);transition:all 0.15s;
}
body.page-group .m-more:hover {background:rgba(128,128,128,0.12);color:var(--text);}
body.page-group .m-menu {
position:absolute;top:30px;left:0;background:var(--modal-bg);border:1px solid var(--border);
border-radius:10px;padding:5px;min-width:130px;z-index:35;box-shadow:var(--shadow);
display:none;flex-direction:column;
}
body.page-group .m-menu.show {display:flex;}
body.page-group .m-menu button {
background:none;border:none;color:var(--text);font-family:'Cairo';font-size:0.78rem;
padding:7px 10px;text-align:right;border-radius:6px;cursor:pointer;transition:background 0.15s;
}
body.page-group .m-menu button:hover {background:rgba(128,128,128,0.08);}
body.page-group .m-menu button.danger {color:#ef4444;}
body.page-group .chat-main {flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;}
body.page-group .empty-state {
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;color:var(--muted);animation:group-fadeIn 0.5s ease;
}
body.page-group .empty-state svg {width:52px;height:52px;opacity:0.15;}
@keyframes group-fadeIn{from{opacity:0;}to{opacity:1;}}
body.page-group .msgs-area {flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:4px;min-height:0;}
body.page-group .msgs-area::-webkit-scrollbar {width:4px;}
body.page-group .msgs-area::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-group .date-divider {text-align:center;font-size:0.68rem;color:var(--muted);padding:10px 0;position:relative;font-weight:600;}
body.page-group .date-divider::before {content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);}
body.page-group .date-divider span {position:relative;z-index:1;background:var(--black);padding:0 12px;}
body.page-group .msg-row {display:flex;align-items:flex-end;gap:8px;margin-bottom:6px;animation:group-msgIn 0.25s cubic-bezier(0.16,1,0.3,1);}
@keyframes group-msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
body.page-group .msg-row.mine {flex-direction:row-reverse;}
body.page-group .msg-av {
width:28px;height:28px;border-radius:50%;background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.75rem;
color:#fff;flex-shrink:0;overflow:hidden;border:2px solid rgba(255,255,255,0.05);
}
body.page-group .msg-av img {width:100%;height:100%;object-fit:cover;}
body.page-group .msg-av.invisible {opacity:0;pointer-events:none;}
body.page-group .bubble-wrap {display:flex;flex-direction:column;max-width:68%;min-width:0;}
body.page-group .msg-row.mine .bubble-wrap {align-items:flex-end;}
body.page-group .sender-name {font-size:0.7rem;color:var(--muted);font-weight:700;margin:0 6px 2px;}
body.page-group .bubble {
padding:10px 14px;border-radius:18px;font-size:0.9rem;line-height:1.6;
word-break:break-word;position:relative;cursor:pointer;
transition:background-color 0.3s ease, box-shadow 0.15s ease, transform 0.1s ease;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
body.page-group .bubble:active {transform:scale(0.98);}
body.page-group .msg-row.mine .bubble {background:var(--mine-bg);color:#fff;border-bottom-left-radius:5px;box-shadow:0 2px 8px rgba(0,113,227,0.22);}
body.page-group .msg-row.mine .bubble .msg-link {color:#fff;}
body.page-group .msg-row.theirs .bubble {background:var(--their-bg);border:1px solid var(--their-border);border-bottom-right-radius:5px;}
body.page-group .bubble-media {
position:relative;border-radius:18px;overflow:hidden;cursor:pointer;
max-width:260px;box-shadow:0 1px 3px rgba(0,0,0,0.08);
transition:transform 0.15s ease;
}
body.page-group .bubble-media:active {transform:scale(0.98);}
body.page-group .bubble-img {
display:block;width:100%;max-height:320px;min-height:120px;
object-fit:cover;background:var(--input-bg);
}
body.page-group .media-more-btn {
position:absolute;top:7px;left:7px;width:26px;height:26px;
border-radius:50%;border:none;cursor:pointer;
background:rgba(0,0,0,0.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
color:#fff;display:flex;align-items:center;justify-content:center;
transition:background 0.15s ease;z-index:2;
}
body.page-group .media-more-btn:hover {background:rgba(0,0,0,0.55);}
body.page-group .bubble-media .react-picker {top:calc(100% + 8px);bottom:auto;}
/* ===== عارض الصور (فتح/حفظ) ===== */
body.page-group .img-viewer-overlay {
position:fixed;inset:0;background:rgba(0,0,0,0.92);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
z-index:9999;display:none;align-items:center;justify-content:center;
opacity:0;transition:opacity 0.25s ease;
}
body.page-group .img-viewer-overlay.show {display:flex;opacity:1;}
body.page-group .img-viewer-img {
max-width:92vw;max-height:80vh;border-radius:14px;object-fit:contain;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
animation:group-ivPop .25s cubic-bezier(.16,1,.3,1);
}
@keyframes group-ivPop{from{transform:scale(0.94);opacity:0;}to{transform:scale(1);opacity:1;}}
body.page-group .img-viewer-topbar {
position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;
padding:calc(14px + env(safe-area-inset-top)) 16px 14px;z-index:2;
}
body.page-group .iv-btn {
display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.12);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.15);color:#fff;padding:9px 16px;
border-radius:999px;font-family:'Cairo',sans-serif;font-weight:700;font-size:0.85rem;
cursor:pointer;transition:background 0.2s ease;
}
body.page-group .iv-btn:hover {background:rgba(255,255,255,0.22);}
body.page-group .iv-btn svg {width:15px;height:15px;}
body.page-group .msg-link {color:var(--primary);text-decoration:underline;word-break:break-all;}
body.page-group .link-preview-card {
display:block;margin-top:6px;border:1px solid var(--border);border-radius:12px;
overflow:hidden;background:var(--card);text-decoration:none;color:inherit;max-width:280px;
}
body.page-group .link-preview-img {width:100%;max-height:140px;object-fit:cover;display:block;background:var(--dark);}
body.page-group .link-preview-body {padding:8px 10px;}
body.page-group .link-preview-site {font-size:0.62rem;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:2px;}
body.page-group .link-preview-title {font-size:0.78rem;font-weight:700;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-group .link-preview-desc {font-size:0.7rem;color:var(--muted);margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-group .msg-time {font-size:0.62rem;color:var(--muted);padding:3px 5px;font-weight:600;}
body.page-group .msg-reaction {
display:inline-flex;align-items:center;gap:4px;background:rgba(250,250,250,0.95);
border:1px solid var(--border);border-radius:999px;padding:3px 8px;font-size:0.78rem;
margin-top:4px;cursor:pointer;transition:all 0.15s;backdrop-filter:blur(10px);
}
body.page-group .react-picker {
position:absolute;bottom:calc(100% + 8px);background:var(--modal-bg);
border:1px solid var(--border);border-radius:999px;padding:5px 8px;display:none;gap:3px;
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:30;
white-space:nowrap;box-shadow:var(--shadow);animation:group-menuPop 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes group-menuPop{from{opacity:0;transform:translateY(6px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
body.page-group .msg-row.mine .react-picker {right:0;}
body.page-group .msg-row.theirs .react-picker {left:0;}
body.page-group .react-picker.show {display:flex;}
body.page-group .r-emoji {
background:none;border:none;cursor:pointer;padding:5px 7px;border-radius:8px;
transition:all 0.15s;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--muted);
}
body.page-group .r-emoji:hover {background:rgba(128,128,128,0.08);transform:scale(1.2);color:var(--text);}
body.page-group .r-emoji.active {background:rgba(212,175,55,0.15);color:var(--red);}
body.page-group .picker-sep {width:1px;align-self:stretch;background:var(--border);margin:2px 2px;}
body.page-group .msg-edited-tag {opacity:0.75;font-style:italic;}
body.page-group .status-dot {width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto;display:inline-block;margin-inline-end:4px;}
body.page-group .status-dot.online {background:#2ecc71;box-shadow:0 0 0 2px rgba(46,204,113,0.2);}
body.page-group .member-dot {position:absolute;bottom:0;inset-inline-end:0;border:2px solid var(--card,var(--bg));}
body.page-group .r-emoji svg {width:16px;height:16px;}
body.page-group .img-preview-bar {
padding:8px 14px;background:var(--topbar-bg);border-top:1px solid var(--border);
display:none;align-items:center;gap:10px;flex-shrink:0;animation:group-slideUp 0.2s ease;
}
@keyframes group-slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
body.page-group .img-preview-bar img {height:50px;border-radius:8px;object-fit:cover;border:1px solid var(--border);}
body.page-group .img-rm-btn {
background:rgba(0,0,0,0.7);border:none;color:#fff;border-radius:50%;width:22px;height:22px;
cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;
}
body.page-group .input-area {
padding:10px 14px;border-top:1px solid var(--border);display:flex;align-items:flex-end;
gap:8px;background:var(--topbar-bg);flex-shrink:0;position:relative;flex-wrap:wrap;
}
body.page-group .edit-msg-banner {
width:100%;display:flex;align-items:center;justify-content:space-between;
background:rgba(212,175,55,0.1);border:1px solid var(--border);border-radius:10px;
padding:6px 12px;font-size:0.78rem;font-weight:700;color:var(--red);margin-bottom:4px;
}
body.page-group .edit-msg-banner button {background:none;border:none;color:var(--muted);cursor:pointer;display:flex;}
body.page-group .btn-attach {
width:40px;height:40px;border-radius:50%;background:rgba(128,128,128,0.06);
border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;
color:var(--muted);transition:all 0.18s;flex-shrink:0;
}
body.page-group .btn-attach:hover {color:var(--text);background:rgba(128,128,128,0.12);}
body.page-group .msg-input {
flex:1;padding:11px 16px;background:var(--input-bg);border:1px solid var(--border);
border-radius:20px;color:var(--text);font-family:'Cairo';font-size:0.9rem;
resize:none;max-height:120px;line-height:1.5;transition:all 0.2s;
}
body.page-group .msg-input:focus {outline:none;box-shadow:0 0 0 3px rgba(128,128,128,0.08);}
body.page-group .send-btn {
width:40px;height:40px;border-radius:50%;flex-shrink:0;background:var(--red);
border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all 0.2s;
}
body.page-group .send-btn:hover {background:var(--red-h);transform:translateY(-2px);}
body.page-group .send-btn:disabled {opacity:0.5;cursor:not-allowed;transform:none;}
body.page-group .send-btn svg {width:17px;height:17px;}
body.page-group .sidebar-toggle {display:none;}
body.page-group .not-logged {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 20px;text-align:center;}
body.page-group .not-logged svg {width:44px;height:44px;color:var(--muted);}
body.page-group .not-logged h2 {font-size:1.1rem;color:var(--text);font-weight:800;}
body.page-group .btn-go {margin-top:6px;display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:10px 22px;border-radius:12px;text-decoration:none;font-weight:700;font-size:0.85rem;}
body.page-group .modal-bg {
position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;visibility:hidden;
transition:all 0.25s;
}
body.page-group .modal-bg.show {opacity:1;visibility:visible;}
body.page-group .modal-box {
background:var(--modal-bg);border:1px solid var(--border);border-radius:20px;
padding:26px;width:min(420px,92%);max-height:82vh;overflow-y:auto;
transform:translateY(14px) scale(0.97);transition:transform 0.25s cubic-bezier(0.16,1,0.3,1);
box-shadow:var(--shadow);
}
body.page-group .modal-bg.show .modal-box {transform:translateY(0) scale(1);}
body.page-group .modal-title {font-weight:800;font-size:1.05rem;color:var(--text);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
body.page-group .modal-title svg {width:20px;height:20px;color:var(--red);}
body.page-group .m-input {
width:100%;padding:11px 14px;background:var(--input-bg);border:1px solid var(--border);
border-radius:10px;color:var(--text);font-family:'Cairo';font-size:0.9rem;margin-bottom:14px;transition:all 0.2s;
}
body.page-group .m-input:focus {outline:none;box-shadow:0 0 0 3px rgba(128,128,128,0.08);}
body.page-group .member-check {
display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(128,128,128,0.04);
border-radius:10px;cursor:pointer;margin-bottom:6px;transition:all 0.15s;border:1px solid transparent;
}
body.page-group .member-check:hover {background:rgba(128,128,128,0.08);border-color:var(--border);}
body.page-group .member-check input[type="checkbox"] {accent-color:var(--red);width:16px;height:16px;flex-shrink:0;}
body.page-group .m-footer {display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap;}
body.page-group .btn-cancel {
padding:10px 18px;background:rgba(128,128,128,0.06);border:1px solid var(--border);
border-radius:9px;color:var(--muted);cursor:pointer;font-family:'Cairo';font-size:0.86rem;
font-weight:600;transition:all 0.2s;
}
body.page-group .btn-cancel:hover {background:rgba(128,128,128,0.12);color:var(--text);}
body.page-group .btn-confirm {
padding:10px 18px;background:var(--red);border:none;border-radius:9px;color:#fff;
font-weight:800;cursor:pointer;font-family:'Cairo';font-size:0.86rem;transition:all 0.2s;
}
body.page-group .btn-confirm:hover {background:var(--red-h);transform:translateY(-1px);}
body.page-group .btn-confirm:disabled {opacity:0.5;cursor:not-allowed;transform:none;}
body.page-group .btn-danger {background:#ef4444;}
body.page-group .btn-danger:hover {background:#dc2626;}
body.page-group .toast {
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
padding:12px 22px;border-radius:14px;font-size:0.88rem;font-weight:600;z-index:999;
border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
opacity:0;visibility:hidden;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
white-space:nowrap;max-width:90vw;text-align:center;
}
body.page-group .toast.show {opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
body.page-group .toast-success {background:var(--modal-bg);color:var(--text);border-color:var(--border);}
body.page-group .toast-error {background:var(--red);color:#fff;border-color:var(--red);}
body.page-group .sidebar-overlay {
display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:15;
}
body.page-group .sidebar-overlay.show {display:block;}
body.page-group ::-webkit-scrollbar {width:4px;}
body.page-group ::-webkit-scrollbar-track {background:transparent;}
body.page-group ::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
@media(max-width:680px){
body.page-group .topbar {height:52px;padding:0 12px;gap:6px;}
body.page-group .back-btn {padding:5px 10px;font-size:0.76rem;}
body.page-group .back-btn span {display:none;}
body.page-group .topbar-peer-av {width:30px;height:30px;}
body.page-group .topbar-peer-name {font-size:0.84rem;}
body.page-group .sidebar {
position:fixed;top:0;right:0;bottom:0;z-index:16;width:260px;
transform:translateX(100%);border-left:none;border-right:1px solid var(--border);
}
body.page-group .sidebar.open {transform:translateX(0);}
body.page-group .sidebar-toggle {display:flex;}
body.page-group .bubble-wrap {max-width:82%;}
body.page-group .bubble {padding:9px 12px;font-size:0.88rem;border-radius:16px;}
body.page-group .msg-av {width:24px;height:24px;font-size:0.68rem;}
body.page-group .input-area {padding:8px 12px;}
body.page-group .btn-attach {width:36px;height:36px;}
body.page-group .send-btn {width:38px;height:38px;}
body.page-group .modal-box {padding:22px 18px;border-radius:18px;}
}
@media(prefers-reduced-motion:reduce){
body.page-group, body.page-group *, body.page-group *::before, body.page-group *::after {animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}
/* ================= index.html ================= */
html.page-index {
--black: #ffffff;
--dark: #f5f5f7;
--card: #ffffff;
--border: rgba(0,0,0,0.08);
--text: #1c1c1e;
--muted: #8e8e93;
--primary: #0071e3;
--primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08);
--primary-mid: rgba(0,113,227,0.15);
--primary-border: rgba(0,113,227,0.25);
--accent: #0071e3;
--mine-bg: rgba(0,113,227,0.08);
--mine-border: rgba(0,113,227,0.12);
--their-bg: rgba(0,0,0,0.03);
--their-border: rgba(0,0,0,0.06);
--topbar-bg: rgba(255,255,255,0.72);
--input-bg: #f2f2f7;
--modal-bg: #ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--post-bg: #ffffff;
--sort-btn-bg: rgba(0,0,0,0.04);
--badge-verified-fill: var(--primary);
--badge-verified-check: #ffffff;
--glass-bg: rgba(255,255,255,0.65);
--glass-bg-strong: rgba(255,255,255,0.82);
--glass-border: rgba(255,255,255,0.4);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(255,255,255,0);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--success: #34c759;
--warning: #ff9500;
--danger: #ff3b30;
--surface-elevated: #ffffff;
}
[data-theme="dark"].page-index {
--black: #000000;
--dark: #121212;
--card: #1c1c1e;
--border: rgba(255,255,255,0.08);
--text: #f5f5f7;
--muted: #8e8e93;
--primary: #0a84ff;
--primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12);
--primary-mid: rgba(10,132,255,0.2);
--primary-border: rgba(10,132,255,0.3);
--accent: #0a84ff;
--mine-bg: rgba(10,132,255,0.12);
--mine-border: rgba(10,132,255,0.18);
--their-bg: rgba(255,255,255,0.04);
--their-border: rgba(255,255,255,0.06);
--topbar-bg: rgba(0,0,0,0.65);
--input-bg: #1c1c1e;
--modal-bg: #1c1c1e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
--post-bg: #1c1c1e;
--sort-btn-bg: rgba(255,255,255,0.04);
--badge-verified-fill: var(--primary);
--badge-verified-check: #000000;
--glass-bg: rgba(28,28,30,0.72);
--glass-bg-strong: rgba(28,28,30,0.88);
--glass-border: rgba(255,255,255,0.08);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(0,0,0,0);
--surface-elevated: #2c2c2e;
}
body.page-index, body.page-index * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html.page-index {scroll-behavior:smooth;}
body.page-index {
background: var(--black);
color:var(--text);
font-family:'Cairo',sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transition:background var(--transition-slow), color var(--transition-slow);
line-height:1.6;
}
/* Smooth color transitions when wallpaper changes theme colors */
html.has-wallpaper body.page-index * {
transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
body.page-index::before {
content: '';
position: fixed;
inset: 0;
z-index: -3;
background:
radial-gradient(ellipse at 20% 20%, rgba(0,113,227,0.04) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(94,92,230,0.03) 0%, transparent 50%),
var(--black);
pointer-events: none;
transition: opacity var(--transition-slow);
}
[data-theme="dark"].page-index body.page-index::before {
background:
radial-gradient(ellipse at 20% 20%, rgba(10,132,255,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(94,92,230,0.04) 0%, transparent 50%),
var(--black);
}
body.page-index .wallpaper-bg {
position:fixed;inset:0;z-index:-2;
background-image:var(--wallpaper-img);
background-size:cover;background-position:center;background-repeat:no-repeat;
opacity:0;transition:opacity 0.6s ease;
transform:scale(1.02);
}
html.has-wallpaper body.page-index .wallpaper-bg {opacity:1;}
body.page-index .wallpaper-overlay {
position:fixed;inset:0;z-index:-1;
background:var(--wallpaper-overlay);
pointer-events:none;
transition:background 0.6s ease;
}
html.has-wallpaper body.page-index .topbar {background:var(--glass-bg-strong)!important;backdrop-filter:blur(var(--glass-blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);border-bottom-color:var(--glass-border);}
html.has-wallpaper body.page-index .topbar.scrolled {background:var(--glass-bg-strong)!important;}
html.has-wallpaper body.page-index .post-card {background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);border-color:var(--glass-border);}
html.has-wallpaper body.page-index .modal-box {background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);border-color:var(--glass-border);}
html.has-wallpaper body.page-index .lang-menu, html.has-wallpaper body.page-index .user-dropdown, html.has-wallpaper body.page-index .react-menu, html.has-wallpaper body.page-index .comment-input {background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);border-color:var(--glass-border);}
html.has-wallpaper body.page-index .icon-btn {background:var(--glass-bg);border-color:var(--glass-border);}
html.has-wallpaper body.page-index .btn-post {background:var(--glass-bg);}
html.has-wallpaper body.page-index {background:transparent;}
body.page-index .topbar {
position:fixed;
top:0;
left:0;
right:0;
height:64px;
background:var(--topbar-bg);
backdrop-filter:blur(24px) saturate(1.3);
-webkit-backdrop-filter:blur(24px) saturate(1.3);
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
z-index:100;
transition:background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
body.page-index .topbar.scrolled {
background:var(--black);
box-shadow: var(--shadow);
}
body.page-index .topbar-left {display:flex;align-items:center;gap:12px;}
body.page-index .topbar-logo {width:36px;height:36px;border-radius:var(--radius-sm);object-fit:cover;transition:transform var(--transition-fast);}
body.page-index .topbar-logo:hover {transform:scale(1.05);}
body.page-index .topbar-title {font-weight:800;font-size:1rem;color:var(--text);white-space:nowrap;letter-spacing:-0.02em;}
body.page-index .topbar-right {display:flex;align-items:center;gap:6px;}
body.page-index .icon-btn {
position:relative;
width:40px;
height:40px;
border-radius:var(--radius-full);
background:var(--sort-btn-bg);
border:1px solid var(--border);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:var(--muted);
transition:all var(--transition-fast);
text-decoration:none;
flex-shrink:0;
}
body.page-index .icon-btn:hover {
background:var(--primary-light);
color:var(--primary);
border-color:var(--primary-border);
transform:translateY(-1px);
}
body.page-index .icon-btn:active {transform:scale(0.92) translateY(0);}
body.page-index .icon-btn svg {width:18px;height:18px;transition:transform var(--transition-fast);}
body.page-index .icon-btn .badge {
position:absolute;
top:2px;
right:2px;
min-width:18px;
height:18px;
background:var(--danger);
border-radius:var(--radius-full);
font-size:0.65rem;
font-weight:800;
color:#fff;
display:none;
align-items:center;
justify-content:center;
padding:0 5px;
border:2.5px solid var(--black);
box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
body.page-index .notif-dropdown {
position:absolute;top:54px;left:0;
background:var(--modal-bg);
backdrop-filter:blur(32px) saturate(1.2);
-webkit-backdrop-filter:blur(32px) saturate(1.2);
border:1px solid var(--border);
border-radius:var(--radius-lg);
min-width:320px;max-width:380px;
max-height:480px;
display:flex;flex-direction:column;
opacity:0;visibility:hidden;
transform:translateY(-12px) scale(0.95);
transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
z-index:30;
box-shadow:var(--shadow-lg);
overflow:hidden;
}
body.page-index .notif-dropdown.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-index .notif-head {display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);font-size:0.88rem;font-weight:800;color:var(--text);flex-shrink:0;}
body.page-index .notif-markall {background:none;border:none;color:var(--primary);font-family:'Cairo',sans-serif;font-size:0.75rem;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:background var(--transition-fast);}
body.page-index .notif-markall:hover {background:var(--primary-light);text-decoration:none;}
body.page-index .notif-list {overflow-y:auto;max-height:400px;}
body.page-index .notif-item {display:flex;gap:12px;padding:12px 18px;cursor:pointer;transition:background var(--transition-fast);border-bottom:1px solid var(--border);position:relative;align-items:flex-start;}
body.page-index .notif-item:last-child {border-bottom:none;}
body.page-index .notif-item:hover {background:rgba(128,128,128,0.04);}
body.page-index .notif-item.unread {background:var(--primary-light);}
body.page-index .notif-item.unread::before {content:'';position:absolute;top:18px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
body.page-index .notif-avatar {width:40px;height:40px;border-radius:var(--radius-full);background:var(--avatar-gradient);color:var(--black);font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:0.95rem;flex-shrink:0;}
body.page-index .notif-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-index .notif-body {flex:1;min-width:0;}
body.page-index .notif-text {font-size:0.85rem;color:var(--text);line-height:1.6;}
body.page-index .notif-text b {font-weight:800;}
body.page-index .notif-time {font-size:0.72rem;color:var(--muted);margin-top:4px;font-weight:500;}
body.page-index .notif-del {background:none;border:none;color:var(--muted);cursor:pointer;flex-shrink:0;padding:4px;border-radius:var(--radius-sm);opacity:0;transition:all var(--transition-fast);}
body.page-index .notif-item:hover .notif-del {opacity:1;}
body.page-index .notif-del:hover {color:var(--danger);background:rgba(255,59,48,0.08);}
body.page-index .notif-del svg {width:14px;height:14px;}
body.page-index .mention-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity var(--transition-fast);}
body.page-index .mention-tag:hover {text-decoration:underline;opacity:0.8;}
body.page-index .hashtag-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity var(--transition-fast);}
body.page-index .hashtag-tag:hover {text-decoration:underline;opacity:0.8;}
body.page-index .post-opts-wrap {position:relative;}
body.page-index .post-opts-menu {
position:absolute;top:42px;left:0;
background:var(--modal-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid var(--border);border-radius:var(--radius-md);min-width:180px;
opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.96);
transition:all 0.2s cubic-bezier(0.16,1,0.3,1);z-index:25;box-shadow:var(--shadow-lg);overflow:hidden;
}
body.page-index .post-opts-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-index .post-opts-menu button {display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;background:none;border:none;color:var(--text);font-family:'Cairo',sans-serif;font-size:0.82rem;font-weight:600;cursor:pointer;text-align:right;transition:all var(--transition-fast);}
body.page-index .post-opts-menu button:hover {background:rgba(128,128,128,0.06);padding-right:20px;}
body.page-index .post-opts-menu button.danger {color:var(--danger);}
body.page-index .post-opts-menu button.danger:hover {background:rgba(255,59,48,0.08);}
body.page-index .post-opts-menu svg {width:16px;height:16px;flex-shrink:0;}
body.page-index .lang-selector {position:relative;}
body.page-index .lang-menu {
position:absolute;
top:50px;
left:0;
background:var(--modal-bg);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:6px 0;
min-width:150px;
opacity:0;
visibility:hidden;
transform:translateY(-8px) scale(0.96);
transition:all 0.22s cubic-bezier(0.16,1,0.3,1);
z-index:20;
box-shadow:var(--shadow-lg);
overflow:hidden;
}
body.page-index .lang-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-index .lang-menu button {
display:flex;align-items:center;gap:10px;
width:100%;padding:10px 18px;
background:none;border:none;
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.86rem;
cursor:pointer;
transition:all var(--transition-fast);
text-align:right;
}
body.page-index .lang-menu button:hover {background:var(--primary-light);color:var(--primary);}
body.page-index .lang-menu button .flag {display:inline-flex;width:18px;height:18px;flex-shrink:0;}
body.page-index .lang-menu button .flag svg {width:100%;height:100%;border-radius:50%;}
body.page-index .btn-login {
display:flex;
align-items:center;
gap:8px;
background:var(--primary);
border:none;
color:#fff;
padding:9px 18px;
border-radius:var(--radius-full);
cursor:pointer;
font-family:'Cairo',sans-serif;
font-size:0.85rem;
font-weight:700;
transition:all var(--transition-fast);
white-space:nowrap;
box-shadow:0 2px 8px rgba(0,113,227,0.25);
}
body.page-index .btn-login:hover {
background:var(--primary-h);
transform:translateY(-1px);
box-shadow:0 4px 16px rgba(0,113,227,0.35);
}
body.page-index .btn-login:active {transform:scale(0.96);}
body.page-index .btn-login svg {width:16px;height:16px;}
body.page-index .user-badge-wrap {position:relative;}
body.page-index .user-badge {
width:40px;height:40px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
color:#fff;
font-weight:800;
display:flex;align-items:center;justify-content:center;
cursor:pointer;overflow:hidden;font-size:1rem;
transition:all var(--transition-fast);
border:2.5px solid transparent;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
body.page-index .user-badge:hover {transform:scale(1.08);box-shadow:0 0 0 4px var(--primary-light), 0 4px 12px rgba(0,0,0,0.15);}
body.page-index .user-badge img {width:100%;height:100%;object-fit:cover;}
body.page-index .user-dropdown {
position:absolute;top:54px;left:0;
background:var(--modal-bg);
backdrop-filter:blur(32px) saturate(1.2);
-webkit-backdrop-filter:blur(32px) saturate(1.2);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:8px 0;
min-width:220px;
opacity:0;visibility:hidden;
transform:translateY(-12px) scale(0.95);
transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
z-index:10;
box-shadow:var(--shadow-lg);
overflow:hidden;
}
body.page-index .user-dropdown.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-index .dropdown-name {padding:14px 20px;font-size:0.88rem;color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:6px;font-weight:700;}
body.page-index .account-switcher {display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;overflow-x:auto;}
body.page-index .acc-item {flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;position:relative;width:48px;transition:transform var(--transition-fast);}
body.page-index .acc-item:hover {transform:translateY(-2px);}
body.page-index .acc-av {width:42px;height:42px;border-radius:var(--radius-full);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;overflow:hidden;border:2.5px solid transparent;transition:all var(--transition-fast);}
body.page-index .acc-item.current .acc-av {border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
body.page-index .acc-av img {width:100%;height:100%;object-fit:cover;}
body.page-index .acc-label {font-size:0.65rem;color:var(--muted);max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
body.page-index .acc-remove {position:absolute;top:-4px;left:-4px;width:16px;height:16px;border-radius:var(--radius-full);background:var(--card);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all var(--transition-fast);}
body.page-index .acc-remove:hover {background:var(--danger);color:#fff;border-color:var(--danger);}
body.page-index .acc-add .acc-av {background:var(--input-bg);color:var(--muted);border:2px dashed var(--border);transition:all var(--transition-fast);}
body.page-index .acc-add:hover .acc-av {border-color:var(--primary);color:var(--primary);background:var(--primary-light);}
body.page-index .user-dropdown button {
width:100%;text-align:right;padding:11px 20px;
background:none;border:none;color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.9rem;display:flex;align-items:center;gap:12px;
transition:all var(--transition-fast);
}
body.page-index .user-dropdown button:hover {background:var(--primary-light);color:var(--primary);padding-right:24px;}
body.page-index .user-dropdown button svg {flex-shrink:0;width:17px;height:17px;}
body.page-index .user-dropdown .dropdown-sep {height:1px;background:var(--border);margin:6px 0;}
body.page-index .user-dropdown a#reelsBtn {
width:100%;text-align:right;padding:11px 20px;
background:none;border:none;color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.9rem;display:flex;align-items:center;gap:12px;
transition:all var(--transition-fast);text-decoration:none;
}
body.page-index .user-dropdown a#reelsBtn:hover {background:var(--primary-light);color:var(--primary);padding-right:24px;}
body.page-index .user-dropdown a#reelsBtn svg {flex-shrink:0;width:17px;height:17px;}
body.page-index .user-dropdown .lang-selector {
width:100%;text-align:right;padding:11px 20px;
background:none;color:var(--muted);position:relative;
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.9rem;display:flex;align-items:center;gap:12px;
transition:all var(--transition-fast);
}
body.page-index .user-dropdown .lang-selector:hover {background:var(--primary-light);color:var(--primary);padding-right:24px;}
body.page-index .user-dropdown .lang-selector svg {flex-shrink:0;width:17px;height:17px;}
body.page-index .user-dropdown .lang-selector .lang-menu {
position:static;display:none;min-width:auto;
box-shadow:none;border:none;background:transparent;
margin:4px 0 0;padding:0 8px 0 0;
opacity:1;visibility:visible;transform:none;
}
body.page-index .user-dropdown .lang-selector .lang-menu.show {display:block;}
body.page-index .user-dropdown .lang-selector .lang-menu button {padding:9px 20px;font-size:0.84rem;}
.ti-icon {display:contents;}
body.page-index .user-dropdown {
z-index:60;
max-height:calc(100vh - 90px);
overflow-y:auto;
overflow-x:hidden;
}
html.has-wallpaper body.page-index .user-dropdown {
background:var(--modal-bg) !important;
backdrop-filter:blur(28px) saturate(1.3);
-webkit-backdrop-filter:blur(28px) saturate(1.3);
}
body.page-index .page-header {padding:110px 20px 48px;text-align:center;position:relative;}
body.page-index .page-header::before {
content:'';
position:absolute;top:0;left:50%;transform:translateX(-50%);
width:600px;height:1px;
background:linear-gradient(90deg,transparent,var(--border),transparent);
}
body.page-index .page-header h1 {
font-size:clamp(1.8rem,5.5vw,3rem);
font-weight:900;
background:linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
line-height:1.2;
letter-spacing:-0.03em;
}
body.page-index .page-header p {color:var(--muted);margin-top:12px;font-size:0.95rem;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.7;font-weight:500;}
body.page-index .search-wrap {max-width:520px;margin:28px auto 0;position:relative;}
body.page-index .search-wrap input {
width:100%;padding:14px 22px 14px 52px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.95rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-index .search-wrap input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light), 0 4px 12px rgba(0,0,0,0.08);}
body.page-index .search-wrap input::placeholder {color:var(--muted);font-weight:400;}
body.page-index .search-icon {position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:color var(--transition-fast);}
body.page-index .search-wrap input:focus + .search-icon, body.page-index .search-wrap input:focus ~ .search-icon {color:var(--primary);}
body.page-index .search-icon svg {width:18px;height:18px;}
body.page-index .action-bar {
max-width:820px;margin:0 auto;padding:0 24px;
display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;
}
body.page-index .sort-group {
display:flex;gap:4px;background:var(--sort-btn-bg);
padding:4px;border-radius:var(--radius-md);border:1px solid var(--border);
flex-wrap:wrap;
}
body.page-index .sort-btn {
padding:8px 16px;border-radius:var(--radius-sm);border:none;
background:transparent;color:var(--muted);
font-family:'Cairo',sans-serif;font-size:0.8rem;font-weight:700;
cursor:pointer;transition:all var(--transition-fast);
display:flex;align-items:center;gap:6px;
white-space:nowrap;
}
body.page-index .sort-btn:hover {color:var(--text);background:rgba(128,128,128,0.06);}
body.page-index .sort-btn.active {background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(0,113,227,0.25);}
body.page-index .sort-btn svg {width:15px;height:15px;}
body.page-index .btn-post {
display:inline-flex;align-items:center;gap:8px;
background:var(--primary);
border:none;
color:#fff;
padding:10px 20px;border-radius:var(--radius-md);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;font-weight:700;
transition:all var(--transition-fast);white-space:nowrap;
box-shadow:0 2px 8px rgba(0,113,227,0.25);
}
body.page-index .btn-post:hover {background:var(--primary-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,113,227,0.35);}
body.page-index .btn-post:active {transform:scale(0.96) translateY(0);}
body.page-index .btn-post svg {width:16px;height:16px;}
body.page-index .feed {max-width:820px;margin:24px auto 100px;padding:0 24px;display:flex;flex-direction:column;gap:24px;}
body.page-index .stories-rail {max-width:820px;margin:20px auto 0;padding:0 24px;}
body.page-index .stories-track {display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:6px 4px 14px;scrollbar-width:none;}
body.page-index .stories-track::-webkit-scrollbar {display:none;}
body.page-index .story-item {flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:76px;cursor:pointer;transition:transform var(--transition-fast);}
body.page-index .story-item:hover {transform:translateY(-3px);}
body.page-index .story-ring {width:68px;height:68px;border-radius:var(--radius-full);padding:3px;background:linear-gradient(135deg,#f9a825,#e53935,#8e24aa);display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast);}
body.page-index .story-ring.seen {background:var(--border);}
body.page-index .story-ring-create {background:var(--border);}
body.page-index .story-avatar {width:100%;height:100%;border-radius:var(--radius-full);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;overflow:hidden;border:3px solid var(--card);transition:all var(--transition-fast);}
body.page-index .story-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-index .story-avatar-create {background:var(--input-bg);color:var(--muted);position:relative;}
body.page-index .story-plus {position:absolute;bottom:-3px;right:-3px;width:22px;height:22px;border-radius:var(--radius-full);background:var(--primary);color:var(--card);display:flex;align-items:center;justify-content:center;border:2.5px solid var(--card);box-shadow:0 2px 6px rgba(0,0,0,0.2);transition:transform var(--transition-fast);}
body.page-index .story-item:hover .story-plus {transform:scale(1.1);}
body.page-index .story-plus svg {width:13px;height:13px;}
body.page-index .story-label {font-size:0.74rem;color:var(--muted);text-align:center;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
@media(min-width:1240px){
body.page-index .stories-rail {
position:fixed;top:110px;inset-inline-end:calc(50% - 410px - 100px);
max-width:92px;margin:0;padding:0;z-index:5;
}
body.page-index .stories-track {flex-direction:column;overflow:visible;padding:0;gap:24px;align-items:center;max-height:75vh;overflow-y:auto;}
body.page-index .story-item {width:76px;}
}
body.page-index .reel-card {position:relative;width:100%;max-width:260px;aspect-ratio:9/16;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform var(--transition-fast), box-shadow var(--transition-fast);}
body.page-index .reel-card:hover {transform:scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,0.4);}
body.page-index .reel-thumb-video {width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
body.page-index .reel-play-badge {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:var(--radius-full);background:rgba(0,0,0,0.5);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);transition:all var(--transition-fast);}
body.page-index .reel-card:hover .reel-play-badge {transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,0.6);}
body.page-index .reel-tag {position:absolute;top:12px;inset-inline-start:12px;background:rgba(0,0,0,0.6);color:#fff;font-size:0.74rem;font-weight:700;padding:5px 12px;border-radius:var(--radius-full);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.1);}
body.page-index .reel-detect-badge {display:flex;align-items:center;gap:8px;margin-top:10px;font-size:0.82rem;color:var(--primary);font-weight:700;background:var(--primary-light);padding:6px 12px;border-radius:var(--radius-sm);width:fit-content;}
body.page-index .reel-detect-badge svg {flex:0 0 auto;}
body.page-index .story-upload-zone {border:2px dashed var(--border);border-radius:var(--radius-lg);min-height:220px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:var(--input-bg);transition:all var(--transition-fast);}
body.page-index .story-upload-zone:hover {border-color:var(--primary);background:var(--primary-light);}
body.page-index .story-upload-placeholder {display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:0.9rem;padding:24px;text-align:center;}
body.page-index .story-upload-placeholder svg {opacity:0.5;width:40px;height:40px;}
body.page-index .story-media-preview {width:100%;max-height:360px;display:flex;}
body.page-index .story-media-preview img, body.page-index .story-media-preview video {width:100%;max-height:360px;object-fit:contain;background:#000;border-radius:var(--radius-md);}
body.page-index .story-viewer {position:fixed;inset:0;background:#000;z-index:999;display:none;flex-direction:column;}
body.page-index .story-viewer.show {display:flex;}
body.page-index .story-viewer-progress {display:flex;gap:6px;padding:14px 16px 0;}
body.page-index .story-progress-bar {flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,0.25);overflow:hidden;}
body.page-index .story-progress-fill {height:100%;width:0%;background:#fff;border-radius:3px;}
body.page-index .story-progress-bar.done .story-progress-fill {width:100%;}
body.page-index .story-viewer-head {display:flex;align-items:center;justify-content:space-between;padding:14px 16px;}
body.page-index .story-viewer-user {display:flex;align-items:center;gap:12px;}
body.page-index .story-viewer-avatar {width:38px;height:38px;border-radius:var(--radius-full);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;border:2px solid rgba(255,255,255,0.2);}
body.page-index .story-viewer-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-index .story-viewer-name {color:#fff;font-weight:800;font-size:0.95rem;}
body.page-index .story-viewer-time {color:rgba(255,255,255,0.6);font-size:0.76rem;font-weight:500;}
body.page-index .story-viewer-actions {display:flex;align-items:center;gap:16px;}
body.page-index .story-viewer-delete, body.page-index .story-viewer-close {background:none;border:none;color:#fff;cursor:pointer;padding:6px;display:flex;border-radius:var(--radius-full);transition:background var(--transition-fast);}
body.page-index .story-viewer-delete:hover, body.page-index .story-viewer-close:hover {background:rgba(255,255,255,0.15);}
body.page-index .story-viewer-media {flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
body.page-index .story-viewer-media img, body.page-index .story-viewer-media video {max-width:100%;max-height:100%;object-fit:contain;}
body.page-index .story-viewer-caption {color:#fff;text-align:center;padding:12px 24px 24px;font-size:0.92rem;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,0.5);}
body.page-index .story-viewer-nav {position:absolute;inset:0;display:flex;pointer-events:none;}
body.page-index .story-nav-zone {flex:1;pointer-events:auto;}
@media(max-width:1239px){ body.page-index .stories-rail {position:static;max-width:820px;} }
body.page-index .post-card {
background:var(--post-bg);
border:1px solid var(--border);
border-radius:var(--radius-lg);
overflow:hidden;
transition:all var(--transition-base);
position:relative;
}
body.page-index .post-card:hover {border-color:var(--primary-border);transform:translateY(-3px);box-shadow:var(--shadow-lg);}
body.page-index .card-img {width:100%;max-height:380px;object-fit:cover;display:block;transition:transform var(--transition-slow);}
body.page-index .post-card:hover .card-img {transform:scale(1.01);}
body.page-index .card-video {
width:100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--radius-md);
box-shadow: var(--shadow);
object-fit: contain;
display:block;
}
body.page-index .card-body {padding:22px 26px;}
body.page-index .pub-row {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
body.page-index .pub-info {display:flex;align-items:center;gap:14px;flex:1;min-width:0;}
body.page-index .pub-avatar {
width:48px;height:48px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;
font-size:1.2rem;cursor:pointer;transition:all var(--transition-fast);
border:2.5px solid var(--border);
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
body.page-index .pub-avatar:hover {transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,0.15);}
body.page-index .pub-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-index .pub-meta {min-width:0;}
body.page-index .pub-name {
font-weight:800;font-size:1rem;color:var(--text);
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
cursor:pointer;transition:color var(--transition-fast);
}
body.page-index .pub-name:hover {color:var(--primary);}
body.page-index .pub-date {font-size:0.78rem;color:var(--muted);margin-top:4px;font-weight:500;}
body.page-index .role-badge {
display:inline-flex;align-items:center;gap:5px;
padding:3px 12px;border-radius:var(--radius-full);
font-size:0.7rem;font-weight:800;flex-shrink:0;
letter-spacing:0.02em;
}
body.page-index .badge-admin {background:var(--primary-light);color:var(--primary);border:1.5px solid var(--primary-border);}
body.page-index .badge-member {background:rgba(128,128,128,0.06);color:var(--muted);border:1.5px solid var(--border);}
body.page-index .badge-verified {display:inline-flex;align-items:center;}
body.page-index .badge-verified svg {width:16px;height:16px;}
body.page-index .pub-actions {display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-index .btn-icon {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:9px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;
}
body.page-index .btn-icon:hover {background:var(--primary-light);color:var(--primary);}
body.page-index .btn-icon:active {transform:scale(0.88);}
body.page-index .btn-icon svg {width:17px;height:17px;}
body.page-index .post-text {
font-family:'Noto Naskh Arabic',serif;
line-height:2;color:var(--text);font-size:1.05rem;
letter-spacing:0.02px;
white-space:pre-wrap;margin-bottom:18px;word-break:break-word;
text-wrap:pretty;
}
body.page-index .post-html h2 {font-size:1.3rem;font-weight:900;color:var(--text);margin:12px 0 8px;}
body.page-index .post-html h3 {font-size:1.1rem;font-weight:800;color:var(--text);margin:10px 0 6px;}
body.page-index .post-html blockquote {border-right:3px solid var(--primary);padding-right:16px;color:var(--muted);margin:12px 0;font-style:italic;background:var(--sort-btn-bg);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
body.page-index .post-html ul {padding-right:24px;margin:10px 0;}
body.page-index .post-html li {margin:5px 0;}
body.page-index .post-html hr {border:none;border-top:1.5px solid var(--border);margin:14px 0;}
body.page-index .post-html b, body.page-index .post-html strong {color:var(--text);font-weight:800;}
body.page-index .post-html em {color:var(--muted);}
body.page-index .post-html a {color:var(--primary);text-decoration:none;border-bottom:1.5px solid var(--primary-border);transition:all var(--transition-fast);}
body.page-index .post-html a:hover {border-color:var(--primary);opacity:0.8;}
body.page-index .post-html a.post-link {word-break:break-all;}
body.page-index .link-preview-card {
display:block;margin-top:12px;border:1.5px solid var(--border);border-radius:var(--radius-md);
overflow:hidden;background:var(--card);text-decoration:none !important;color:inherit;max-width:440px;
transition:all var(--transition-fast);
}
body.page-index .link-preview-card:hover {border-color:var(--primary-border);transform:translateY(-2px);box-shadow:var(--shadow);}
body.page-index .link-preview-img {width:100%;max-height:220px;object-fit:cover;display:block;background:var(--dark);transition:transform var(--transition-slow);}
body.page-index .link-preview-card:hover .link-preview-img {transform:scale(1.02);}
body.page-index .link-preview-body {padding:12px 16px;}
body.page-index .link-preview-site {font-size:0.7rem;color:var(--primary);font-weight:800;text-transform:uppercase;margin-bottom:4px;letter-spacing:0.05em;}
body.page-index .link-preview-title {font-size:0.95rem;font-weight:800;line-height:1.4;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-index .link-preview-desc {font-size:0.82rem;color:var(--muted);margin-top:5px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
body.page-index .reactions-row {display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
body.page-index .react-wrap {position:relative;display:inline-flex;align-items:center;}
body.page-index .react-main-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-index .react-main-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-index .react-main-btn.reacted {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
body.page-index .react-main-btn:active {transform:scale(0.94);}
body.page-index .react-main-btn svg {width:16px;height:16px;}
body.page-index .react-menu {
position:absolute;bottom:calc(100% + 12px);right:0;
background:var(--modal-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
padding:8px 12px;display:none;gap:6px;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
z-index:10;white-space:nowrap;
box-shadow:var(--shadow-lg);
animation:index-menuPop 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes index-menuPop{from{opacity:0;transform:translateY(8px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
body.page-index .react-menu.show {display:flex;}
body.page-index .react-emoji-btn {
background:none;border:none;cursor:pointer;
padding:8px 10px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);line-height:1;
display:flex;align-items:center;justify-content:center;
color:var(--muted);
}
body.page-index .react-emoji-btn:hover {background:var(--primary-light);transform:scale(1.25);color:var(--primary);}
body.page-index .react-emoji-btn.active {background:var(--primary-light);color:var(--primary);}
body.page-index .react-emoji-btn svg {width:20px;height:20px;}
body.page-index .react-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-index .react-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-index .react-btn:active {transform:scale(0.94);}
body.page-index .react-btn svg {width:16px;height:16px;}
body.page-index .comments-section {border-top:1.5px solid var(--border);padding-top:16px;margin-top:6px;}
body.page-index .comments-toggle {
display:flex;align-items:center;gap:8px;
background:none;border:none;color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;padding:4px 0;margin-bottom:14px;
transition:all var(--transition-fast);font-weight:700;
}
body.page-index .comments-toggle:hover {color:var(--primary);}
body.page-index .comments-toggle svg {width:16px;height:16px;transition:transform var(--transition-base);}
body.page-index .comments-toggle.expanded svg {transform:rotate(180deg);}
body.page-index .comments-list {display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
body.page-index .comment {display:flex;gap:12px;align-items:flex-start;animation:index-fadeIn 0.35s ease;}
@keyframes index-fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
body.page-index .c-avatar {
width:36px;height:36px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:0.9rem;color:#fff;
flex-shrink:0;overflow:hidden;
border:2px solid var(--border);
box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
body.page-index .c-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-index .c-bubble {background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:12px 16px;flex:1;min-width:0;transition:all var(--transition-fast);}
body.page-index .c-bubble:hover {background:rgba(128,128,128,0.08);}
body.page-index .c-name {font-weight:800;font-size:0.85rem;color:var(--text);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.page-index .c-text {
font-size:0.9rem;
color:var(--muted);
line-height:1.8;
word-break:break-word;
}
body.page-index .c-del {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);
font-size:0.78rem;font-family:'Cairo',sans-serif;
transition:all var(--transition-fast);margin-right:auto;
font-weight:600;
}
body.page-index .c-del:hover {color:var(--danger);background:rgba(255,59,48,0.08);}
body.page-index .comment-input-row {display:flex;gap:10px;align-items:center;}
body.page-index .comment-input {
flex:1;padding:11px 18px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.9rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-index .comment-input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-index .comment-input::placeholder {color:var(--muted);font-weight:400;}
body.page-index .btn-send-comment {
width:40px;height:40px;
background:var(--primary);
border:none;border-radius:var(--radius-full);
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);flex-shrink:0;
box-shadow:0 2px 8px rgba(0,113,227,0.25);
}
body.page-index .btn-send-comment:hover {background:var(--primary-h);transform:scale(1.1);box-shadow:0 4px 16px rgba(0,113,227,0.35);}
body.page-index .btn-send-comment:active {transform:scale(0.92);}
body.page-index .btn-send-comment svg {width:16px;height:16px;stroke:#fff;}
body.page-index .spinner {width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:index-spin 0.8s linear infinite;margin:0 auto 16px;}
@keyframes index-spin{to{transform:rotate(360deg);}}
body.page-index .loading {text-align:center;padding:70px 24px;color:var(--muted);}
body.page-index .empty {text-align:center;padding:70px 24px;color:var(--muted);font-size:1rem;}
body.page-index .empty svg {width:56px;height:56px;margin-bottom:16px;opacity:0.25;}
body.page-index .load-more-btn {display:block;width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--radius-md, 14px);background:var(--card, transparent);color:var(--text);font-family:'Cairo',sans-serif;font-weight:800;font-size:0.88rem;cursor:pointer;transition:all 0.2s;}
body.page-index .load-more-btn:hover {background:var(--primary, #0071e3);color:#fff;border-color:transparent;}
html.splash-seen body.page-index .splash-screen {display:none!important;}
body.page-index .splash-screen {
position:fixed;inset:0;z-index:3000;
background:var(--black);
display:flex;align-items:center;justify-content:center;
padding:24px;text-align:center;
opacity:1;visibility:visible;
transition:opacity 0.5s ease, visibility 0.5s ease;
}
body.page-index .splash-screen.dismissed {opacity:0;visibility:hidden;pointer-events:none;}
html.has-wallpaper body.page-index .splash-screen {
background:var(--glass-bg-strong);
backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
}
body.page-index .splash-inner {max-width:420px;width:100%;animation:index-splashPop 0.6s cubic-bezier(0.16,1,0.3,1);}
@keyframes index-splashPop{from{opacity:0;transform:translateY(20px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}
body.page-index .splash-avatar {
width:96px;height:96px;border-radius:var(--radius-xl);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-size:2.2rem;font-weight:900;color:#fff;
margin:0 auto 28px;overflow:hidden;
box-shadow:var(--shadow-lg), 0 0 0 6px var(--primary-light);
}
body.page-index .splash-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-index .splash-greeting {font-size:1.6rem;font-weight:900;color:var(--text);margin-bottom:12px;line-height:1.4;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
body.page-index .splash-greeting-icon {display:inline-flex;color:var(--primary);}
body.page-index .splash-sub {color:var(--muted);font-size:0.95rem;margin-bottom:32px;line-height:1.7;font-weight:500;}
body.page-index .splash-actions {display:flex;flex-direction:column;gap:12px;}
body.page-index .splash-btn-primary {
width:100%;padding:16px;background:var(--primary);color:#fff;
font-weight:800;border:none;border-radius:var(--radius-md);cursor:pointer;
font-family:'Cairo',sans-serif;font-size:0.96rem;transition:all var(--transition-fast);
box-shadow:0 4px 16px rgba(0,113,227,0.3);
}
body.page-index .splash-btn-primary:hover {background:var(--primary-h);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,113,227,0.4);}
body.page-index .splash-btn-primary:active {transform:scale(0.97);}
body.page-index .splash-btn-secondary {
width:100%;padding:16px;background:var(--sort-btn-bg);color:var(--text);
font-weight:700;border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;
font-family:'Cairo',sans-serif;font-size:0.92rem;transition:all var(--transition-fast);
}
body.page-index .splash-btn-secondary:hover {background:rgba(128,128,128,0.1);border-color:var(--primary-border);color:var(--primary);}
body.page-index .splash-hint {margin-top:28px;color:var(--muted);font-size:0.82rem;font-weight:500;}
body.page-index .splash-skip {background:none;border:none;color:var(--muted);font-size:0.85rem;cursor:pointer;text-decoration:underline;font-family:'Cairo',sans-serif;transition:color var(--transition-fast);}
body.page-index .splash-skip:hover {color:var(--primary);}
@media (max-width:480px){
body.page-index .splash-greeting {font-size:1.4rem;}
body.page-index .splash-avatar {width:80px;height:80px;font-size:1.9rem;}
}
body.page-index .modal-bd {
position:fixed;inset:0;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
display:flex;align-items:center;justify-content:center;
z-index:200;opacity:0;visibility:hidden;
transition:all var(--transition-base);padding:20px;
}
body.page-index .modal-bd.show {opacity:1;visibility:visible;}
body.page-index .modal-box {
background:var(--modal-bg);
border:1px solid var(--border);
border-radius:var(--radius-xl);
padding:32px 28px;
width:100%;max-width:460px;
transform:translateY(20px) scale(0.96);
transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
max-height:90vh;overflow-y:auto;
box-shadow:var(--shadow-lg);
}
body.page-index .modal-bd.show .modal-box {transform:translateY(0) scale(1);}
body.page-index .modal-box.wide {max-width:640px;}
body.page-index .modal-t {font-size:1.15rem;font-weight:900;color:var(--text);margin-bottom:24px;display:flex;align-items:center;gap:12px;}
body.page-index .modal-t svg {width:22px;height:22px;color:var(--primary);}
body.page-index .tabs {display:flex;gap:4px;background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:4px;margin-bottom:24px;}
body.page-index .tab {
flex:1;padding:10px;border:none;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;font-weight:800;
background:none;color:var(--muted);
transition:all var(--transition-fast);
}
body.page-index .tab.active {background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(0,113,227,0.2);}
body.page-index .tab:hover:not(.active) {color:var(--text);}
body.page-index .tab-pane {display:none;}
body.page-index .tab-pane.active {display:block;animation:index-fadeIn 0.35s ease;}
body.page-index .fg {margin-bottom:18px;}
body.page-index .fg label {display:block;margin-bottom:7px;color:var(--muted);font-size:0.86rem;font-weight:700;}
body.page-index .fg input {
width:100%;padding:13px 16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.92rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-index .fg input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-index .fg input::placeholder {color:var(--muted);font-weight:400;}
body.page-index .err {
background:var(--primary-light);
color:var(--primary);
padding:12px 16px;border-radius:var(--radius-md);
font-size:0.88rem;margin-bottom:16px;
display:none;border:1.5px solid var(--primary-border);
font-weight:700;
}
body.page-index .btn-submit {
width:100%;padding:14px;
background:var(--primary);
color:#fff;
font-weight:800;border:none;border-radius:var(--radius-md);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.95rem;transition:all var(--transition-fast);margin-top:6px;
box-shadow:0 2px 8px rgba(0,113,227,0.25);
}
body.page-index .btn-submit:hover {background:var(--primary-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,113,227,0.35);}
body.page-index .btn-submit:active {transform:translateY(0) scale(0.97);}
body.page-index .btn-submit:disabled {opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
body.page-index .post-editor {
width:100%;min-height:160px;max-height:360px;overflow-y:auto;
padding:16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Noto Naskh Arabic',serif;
font-size:1.02rem;line-height:2;
outline:none;transition:all var(--transition-fast);resize:vertical;
}
body.page-index .post-editor:focus {border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-index .post-editor[placeholder]:empty:before {content:attr(placeholder);color:var(--muted);pointer-events:none;font-weight:400;}
body.page-index .post-editor h2 {font-size:1.35rem;font-weight:900;color:var(--text);margin:10px 0 6px;}
body.page-index .post-editor h3 {font-size:1.15rem;font-weight:800;color:var(--text);margin:8px 0 6px;}
body.page-index .post-editor blockquote {border-right:3px solid var(--primary);padding-right:14px;color:var(--muted);margin:10px 0;font-style:italic;}
body.page-index .post-editor ul {padding-right:22px;margin:8px 0;}
body.page-index .post-editor hr {border:none;border-top:1.5px solid var(--border);margin:12px 0;}
body.page-index .fmt-bar {display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center;padding:8px;background:var(--sort-btn-bg);border-radius:var(--radius-md);border:1.5px solid var(--border);}
body.page-index .fmt-btn {
background:var(--black);
border:1.5px solid var(--border);
color:var(--muted);
padding:7px 12px;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.8rem;font-weight:700;
transition:all var(--transition-fast);
display:flex;align-items:center;justify-content:center;
min-width:36px;height:36px;
}
body.page-index .fmt-btn:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-index .fmt-btn:active {transform:scale(0.9);}
body.page-index .fmt-btn svg {width:15px;height:15px;}
body.page-index .fmt-sep {width:1px;background:var(--border);margin:0 4px;height:22px;}
body.page-index .modal-footer {display:flex;gap:12px;justify-content:flex-end;margin-top:24px;}
body.page-index .btn-ghost {
padding:12px 22px;
background:var(--sort-btn-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.9rem;font-weight:700;
transition:all var(--transition-fast);
}
body.page-index .btn-ghost:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-index .btn-ghost:active {transform:scale(0.95);}
body.page-index .media-preview-wrap {position:relative;margin-bottom:16px;display:none;}
body.page-index .media-preview-wrap img {max-width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;}
body.page-index .media-preview-wrap video {max-width:100%;max-height:220px;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;background:#000;}
body.page-index .media-preview-wrap .remove-media {
position:absolute;top:10px;left:10px;
background:rgba(0,0,0,0.75);
border:none;color:#fff;
border-radius:var(--radius-full);width:32px;height:32px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
body.page-index .media-preview-wrap .remove-media:hover {background:var(--danger);transform:scale(1.1);}
body.page-index .media-preview-wrap .remove-media svg {width:14px;height:14px;}
body.page-index .toast {
position:fixed;bottom:28px;left:50%;
transform:translateX(-50%) translateY(24px);
padding:14px 26px;border-radius:var(--radius-lg);
font-size:0.9rem;font-weight:700;
z-index:999;
border:1px solid var(--border);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
opacity:0;visibility:hidden;
transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
white-space:nowrap;max-width:90vw;text-align:center;
box-shadow:var(--shadow-lg);
}
body.page-index .toast.show {opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
body.page-index .toast-success {background:var(--modal-bg);color:var(--text);border-color:var(--border);}
body.page-index .toast-error {background:var(--danger);color:#fff;border-color:var(--danger);}
body.page-index ::-webkit-scrollbar {width:6px;}
body.page-index ::-webkit-scrollbar-track {background:transparent;}
body.page-index ::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-index ::-webkit-scrollbar-thumb:hover {background:var(--muted);}
@media(max-width:768px){
body.page-index .topbar {height:58px;padding:0 16px;}
body.page-index .topbar-title {font-size:0.88rem;}
body.page-index .topbar-logo {width:32px;height:32px;}
body.page-index .icon-btn {width:38px;height:38px;}
body.page-index .btn-login {padding:8px 14px;font-size:0.82rem;}
body.page-index .user-badge {width:38px;height:38px;}
body.page-index .user-dropdown {min-width:200px;border-radius:var(--radius-lg);}
body.page-index .page-header {padding:90px 18px 36px;}
body.page-index .page-header h1 {font-size:clamp(1.5rem,6.5vw,2.2rem);}
body.page-index .page-header p {font-size:0.88rem;}
body.page-index .search-wrap {margin-top:20px;}
body.page-index .search-wrap input {padding:12px 18px 12px 46px;font-size:0.9rem;}
body.page-index .stories-rail {padding:0 16px;margin-top:16px;}
body.page-index .story-item {width:68px;}
body.page-index .story-ring {width:62px;height:62px;}
body.page-index .reel-card {max-width:240px;}
body.page-index .action-bar {padding:0 18px;gap:12px;flex-direction:column;align-items:stretch;}
body.page-index .sort-group {justify-content:center;}
body.page-index .btn-post {width:100%;justify-content:center;padding:11px;}
body.page-index .feed {padding:0 18px;margin:18px auto 70px;gap:18px;}
body.page-index .post-card {border-radius:var(--radius-md);}
body.page-index .card-img {max-height:260px;}
body.page-index .card-video {max-height:280px;border-radius:var(--radius-sm);}
body.page-index .card-body {padding:18px 20px;}
body.page-index .pub-avatar {width:42px;height:42px;}
body.page-index .pub-name {font-size:0.9rem;}
body.page-index .pub-date {font-size:0.74rem;}
body.page-index .role-badge {font-size:0.64rem;padding:2px 8px;}
body.page-index .btn-icon {padding:7px;}
body.page-index .btn-icon svg {width:16px;height:16px;}
body.page-index .post-text {font-size:0.98rem;line-height:1.95;}
body.page-index .reactions-row {gap:8px;}
body.page-index .react-main-btn, body.page-index .react-btn {padding:7px 12px;font-size:0.8rem;}
body.page-index .c-avatar {width:32px;height:32px;font-size:0.85rem;}
body.page-index .c-bubble {padding:10px 14px;border-radius:var(--radius-sm);}
body.page-index .c-name {font-size:0.8rem;}
body.page-index .c-text {font-size:0.87rem;}
body.page-index .comment-input {padding:10px 16px;font-size:0.87rem;}
body.page-index .btn-send-comment {width:36px;height:36px;}
body.page-index .modal-box {padding:24px 20px;border-radius:var(--radius-lg);}
body.page-index .modal-t {font-size:1.05rem;}
body.page-index .fmt-bar {padding:6px;}
body.page-index .fmt-btn {min-width:30px;height:30px;padding:6px 10px;}
body.page-index .post-editor {min-height:130px;padding:14px;font-size:0.98rem;}
body.page-index .toast {bottom:20px;padding:12px 20px;font-size:0.87rem;}
}
@media(max-width:400px){
body.page-index .topbar {padding:0 12px;}
body.page-index .topbar-title {display:none;}
body.page-index .btn-login span {display:none;}
body.page-index .btn-login {padding:9px;}
body.page-index .btn-login svg {margin:0;}
body.page-index .feed {padding:0 14px;}
body.page-index .card-body {padding:16px 16px;}
body.page-index .pub-row {flex-wrap:wrap;}
body.page-index .pub-actions {width:100%;justify-content:flex-end;margin-top:8px;}
body.page-index .sort-btn {font-size:0.74rem;padding:6px 11px;}
}
@media(prefers-reduced-motion:reduce){
body.page-index, body.page-index *, body.page-index *::before, body.page-index *::after {animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}
/* ================= login.html ================= */
html.page-login {
--black:#ffffff; --card:#ffffff; --border:rgba(0,0,0,0.08); --text:#1c1c1e; --muted:#8e8e93;
--primary:#0071e3; --primary-h:#0051a2; --primary-light: rgba(0,113,227,0.08); --input-bg:#f2f2f7;
--danger:#ff3b30; --success:#34c759;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"].page-login {
--black:#000000; --card:#1c1c1e; --border:rgba(255,255,255,0.08); --text:#f5f5f7; --muted:#8e8e93;
--primary:#0a84ff; --primary-h:#409cff; --primary-light: rgba(10,132,255,0.12); --input-bg:#1c1c1e;
--danger:#ff3b30; --success:#34c759;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}
body.page-login, body.page-login * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html.page-login, body.page-login {height:100%;}
body.page-login {
background:radial-gradient(circle at 18% 16%,rgba(0,113,227,0.05),transparent 22%),var(--black);
color:var(--text); font-family:'Cairo',sans-serif;
display:flex; align-items:center; justify-content:center; padding:20px;
transition:background var(--transition-base) ease,color var(--transition-base) ease;
}
body.page-login .wrap { width:100%; max-width:400px; }
body.page-login .back-link {
display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none;
font-size:.85rem; margin-bottom:18px; font-weight:600;
}
body.page-login .back-link:hover { color:var(--primary); }
body.page-login .logo {
display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:26px;
}
body.page-login .logo img { width:42px; height:42px; border-radius:var(--radius-sm); object-fit:cover; }
body.page-login .logo span { font-size:1.5rem; font-weight:900; }
body.page-login .box {
background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl);
padding:28px 24px; box-shadow:var(--shadow);
}
[data-theme="dark"].page-login body.page-login .box { box-shadow:var(--shadow); }
body.page-login .tabs { display:flex; gap:6px; background:var(--input-bg); border-radius:var(--radius-md); padding:5px; margin-bottom:22px; }
body.page-login .tab {
flex:1; text-align:center; padding:10px 0; border:none; background:transparent; cursor:pointer;
font-family:inherit; font-weight:700; font-size:.88rem; color:var(--muted); border-radius:var(--radius-sm); transition:var(--transition-fast);
}
body.page-login .tab.active { background:var(--card); color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
body.page-login .pane { display:none; }
body.page-login .pane.active { display:block; }
body.page-login .fg { margin-bottom:14px; }
body.page-login .fg label { display:block; font-size:.8rem; font-weight:700; color:var(--muted); margin-bottom:6px; }
body.page-login .fg input {
width:100%; padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--border);
background:var(--input-bg); color:var(--text); font-family:inherit; font-size:.92rem; outline:none;
transition:border-color var(--transition-fast);
}
body.page-login .fg input:focus { border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-light); }
body.page-login .fg input[dir="ltr"] { text-align:left; }
body.page-login .code-input {
text-align:center; letter-spacing:10px; font-size:1.3rem; font-weight:800;
}
body.page-login .btn {
width:100%; padding:13px; border:none; border-radius:var(--radius-md); background:var(--primary); color:#fff;
font-family:inherit; font-weight:800; font-size:.95rem; cursor:pointer; margin-top:6px; transition:all var(--transition-fast);
box-shadow: 0 4px 16px rgba(0,113,227,0.25);
}
body.page-login .btn:hover { background:var(--primary-h); transform:translateY(-1px); box-shadow: 0 6px 20px rgba(0,113,227,0.3); }
body.page-login .btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
body.page-login .btn-ghost {
width:100%; padding:11px; border:1px solid var(--border); border-radius:var(--radius-md); background:transparent;
color:var(--text); font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; margin-top:10px; transition:var(--transition-fast);
}
body.page-login .btn-ghost:hover { border-color:var(--primary-light); color:var(--primary); }
body.page-login .btn-ghost:disabled { opacity:.5; cursor:not-allowed; }
body.page-login .err {
display:none; background:rgba(255,59,48,0.08); color:var(--danger); border:1px solid rgba(255,59,48,0.2);
border-radius:var(--radius-sm); padding:10px 12px; font-size:.8rem; margin-bottom:14px; font-weight:600; line-height:1.6;
}
body.page-login .ok {
display:none; background:rgba(52,199,89,0.1); color:var(--success); border:1px solid rgba(52,199,89,0.25);
border-radius:var(--radius-sm); padding:10px 12px; font-size:.8rem; margin-bottom:14px; font-weight:600; line-height:1.6;
}
body.page-login .hint { font-size:.78rem; color:var(--muted); text-align:center; margin-top:14px; line-height:1.7; }
body.page-login .hint b { color:var(--text); }
body.page-login .step-title { font-weight:800; font-size:1rem; margin-bottom:4px; }
body.page-login .step-sub { font-size:.8rem; color:var(--muted); margin-bottom:18px; line-height:1.7; }
body.page-login .spinner {
width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
display:inline-block; animation:login-spin .7s linear infinite; vertical-align:middle;
}
@keyframes login-spin{ to{ transform:rotate(360deg); } }
/* ================= page.html ================= */
html.page-page {
/* === Hostaka UI Design System v2.0 === */
--black: #ffffff;
--dark: #f5f5f7;
--card: #ffffff;
--border: rgba(0,0,0,0.08);
--text: #1c1c1e;
--muted: #8e8e93;
--primary: #0071e3;
--primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08);
--primary-border: rgba(0,113,227,0.25);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--danger: #ff3b30;
--bg: var(--dark);
}
[data-theme="dark"].page-page {
--black: #000000;
--dark: #121212;
--card: #1c1c1e;
--border: rgba(255,255,255,0.08);
--text: #f5f5f7;
--muted: #8e8e93;
--primary: #0a84ff;
--primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12);
--primary-border: rgba(10,132,255,0.3);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}
body.page-page, body.page-page * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body.page-page {font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background var(--transition-base),color var(--transition-base);}
body.page-page a {color:inherit;text-decoration:none;}
body.page-page .topbar {position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--topbar-bg,rgba(255,255,255,0.72));backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom:1px solid var(--border);}
[data-theme="dark"].page-page body.page-page .topbar {background:rgba(0,0,0,0.65);}
body.page-page .back-btn {width:36px;height:36px;border-radius:var(--radius-full);background:var(--primary-light);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all var(--transition-fast);}
body.page-page .back-btn:hover {background:var(--primary-border);color:var(--primary);}
body.page-page .topbar-title {font-weight:800;}
body.page-page .cover {height:150px;background:var(--avatar-gradient);position:relative;}
body.page-page .cover img {width:100%;height:100%;object-fit:cover;}
body.page-page .page-head {max-width:700px;margin:0 auto;padding:0 20px;position:relative;}
body.page-page .page-avatar {width:92px;height:92px;border-radius:var(--radius-lg);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;border:4px solid var(--card);margin-top:-46px;overflow:hidden;box-shadow:var(--shadow-lg);}
body.page-page .page-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-page .page-info {padding:14px 0 18px;}
body.page-page .page-name {font-size:1.4rem;font-weight:900;display:flex;align-items:center;gap:8px;}
body.page-page .page-handle {color:var(--muted);font-size:0.85rem;margin-top:2px;}
body.page-page .page-bio {margin-top:10px;font-size:0.9rem;line-height:1.7;color:var(--text);}
body.page-page .page-stats {display:flex;gap:18px;margin-top:12px;font-size:0.85rem;color:var(--muted);}
body.page-page .page-stats b {color:var(--text);}
body.page-page .page-actions {display:flex;gap:10px;margin-top:14px;}
body.page-page .btn {padding:10px 22px;border-radius:var(--radius-md);border:none;font-weight:700;font-size:0.85rem;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;transition:all var(--transition-fast);}
body.page-page .btn-primary {background:var(--primary);color:#fff;box-shadow:0 4px 16px rgba(0,113,227,0.25);}
body.page-page .btn-primary:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-page .btn-primary.following {background:var(--card);color:var(--text);border:1.5px solid var(--border);box-shadow:none;}
body.page-page .btn-ghost {background:var(--primary-light);color:var(--text);}
body.page-page .btn-ghost:hover {background:var(--primary-border);}
body.page-page .posts-wrap {max-width:700px;margin:10px auto 60px;padding:0 20px;display:flex;flex-direction:column;gap:16px;}
body.page-page .post-card {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;transition:all var(--transition-base);}
body.page-page .post-card:hover {border-color:var(--primary-border);box-shadow:var(--shadow-lg);}
body.page-page .post-head {display:flex;align-items:center;gap:10px;margin-bottom:10px;}
body.page-page .post-av {width:38px;height:38px;border-radius:var(--radius-full);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;flex:0 0 auto;}
body.page-page .post-av img {width:100%;height:100%;object-fit:cover;}
body.page-page .post-name {font-weight:800;font-size:0.9rem;}
body.page-page .post-date {font-size:0.72rem;color:var(--muted);}
body.page-page .post-content {font-size:0.92rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;}
body.page-page .post-media {margin-top:10px;border-radius:var(--radius-md);overflow:hidden;max-height:420px;}
body.page-page .post-media img, body.page-page .post-media video {width:100%;max-height:420px;object-fit:cover;display:block;}
body.page-page .empty {text-align:center;color:var(--muted);padding:50px 20px;font-size:0.9rem;}
body.page-page .loader-wrap {display:flex;justify-content:center;padding:60px;}
body.page-page .spinner {width:30px;height:30px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:page-spin 0.8s linear infinite;}
@keyframes page-spin{to{transform:rotate(360deg);}}
/* نافذة إدارة الصفحة (تعديل) */
body.page-page .modal-bg {position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(20px);z-index:60;display:none;align-items:flex-end;justify-content:center;}
body.page-page .modal-bg.show {display:flex;}
body.page-page .modal-box {background:var(--card);width:100%;max-width:460px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
@media(min-width:600px){body.page-page .modal-bg {align-items:center;}body.page-page .modal-box {border-radius:var(--radius-lg);}}
body.page-page .modal-title {font-weight:800;font-size:1.05rem;margin-bottom:16px;}
body.page-page .field {margin-bottom:12px;}
body.page-page .field label {display:block;font-size:0.78rem;color:var(--muted);margin-bottom:6px;font-weight:700;}
body.page-page .field input, body.page-page .field textarea {width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-family:inherit;font-size:0.88rem;background:var(--bg);color:var(--text);transition:border-color var(--transition-fast);}
body.page-page .field input:focus, body.page-page .field textarea:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-page .field textarea {min-height:80px;resize:vertical;}
body.page-page .modal-footer {display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
body.page-page .err {color:var(--danger);font-size:0.8rem;margin-bottom:8px;display:none;}
/* ================= profile.html ================= */
/* ... نفس الأنماط السابقة (تم حذفها للاختصار، ولكن يجب تضمينها كاملة) ... */
html.page-profile {
--black: #ffffff;
--dark: #f7f7f8;
--card: #ffffff;
--border: #e5e5e5;
--text: #1a1a1a;
--muted: #6b7280;
--primary: #000000;
--primary-h: #333333;
--primary-light: rgba(0,0,0,0.08);
--primary-mid: rgba(0,0,0,0.15);
--primary-border: rgba(0,0,0,0.25);
--accent: #000000;
--mine-bg: rgba(0,0,0,0.08);
--mine-border: rgba(0,0,0,0.12);
--their-bg: rgba(0,0,0,0.04);
--their-border: rgba(0,0,0,0.06);
--topbar-bg: rgba(255,255,255,0.75);
--input-bg: #f7f7f8;
--modal-bg: #ffffff;
--shadow: 0 8px 32px rgba(0,0,0,0.3);
--avatar-gradient: linear-gradient(145deg, var(--primary), var(--primary-h));
--badge-verified-fill: var(--primary);
--badge-verified-check: #ffffff;
}
[data-theme="dark"].page-profile {
--black: #0d0d0d;
--dark: #141414;
--card: #1a1a1a;
--border: #2a2a2a;
--text: #e5e5e5;
--muted: #8d8d8d;
--primary: #ffffff;
--primary-h: #dddddd;
--primary-light: rgba(255,255,255,0.08);
--primary-mid: rgba(255,255,255,0.15);
--primary-border: rgba(255,255,255,0.25);
--accent: #ffffff;
--mine-bg: rgba(255,255,255,0.08);
--mine-border: rgba(255,255,255,0.12);
--their-bg: rgba(255,255,255,0.04);
--their-border: rgba(255,255,255,0.06);
--topbar-bg: rgba(13,13,13,0.85);
--input-bg: #222222;
--modal-bg: #1a1a1a;
--shadow: 0 8px 32px rgba(0,0,0,0.7);
--avatar-gradient: linear-gradient(145deg, #ffffff, #dddddd);
--badge-verified-fill: var(--primary);
--badge-verified-check: #000000;
}
body.page-profile, body.page-profile * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html.page-profile {scroll-behavior:smooth;}
body.page-profile {
background:radial-gradient(circle at 18% 16%,rgba(128,128,128,0.05),transparent 22%),var(--black);
color:var(--text);
font-family:'Cairo',sans-serif;
min-height:100vh;
-webkit-font-smoothing:antialiased;
transition:background 0.3s ease, color 0.3s ease;
}
/* باقي الأنماط كما هي (نفس الإصدار السابق) */
body.page-profile .topbar {position:fixed;top:0;left:0;right:0;height:56px;background:var(--topbar-bg);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:100;transition:background 0.3s ease, border-color 0.3s ease;}
body.page-profile .topbar.scrolled {background:var(--black);}
body.page-profile .topbar-left {display:flex;align-items:center;gap:8px;}
body.page-profile .topbar-right {display:flex;align-items:center;gap:6px;}
body.page-profile .back-btn {display:inline-flex;align-items:center;gap:7px;background:rgba(128,128,128,0.08);border:1px solid var(--border);color:var(--muted);padding:7px 14px;border-radius:999px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:0.82rem;text-decoration:none;transition:all 0.2s;font-weight:600;}
body.page-profile .back-btn:hover {background:rgba(128,128,128,0.15);color:var(--text);border-color:var(--border);}
body.page-profile .back-btn:active {transform:scale(0.95);}
body.page-profile .back-btn svg {width:14px;height:14px;}
body.page-profile .topbar-title {font-weight:800;font-size:0.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
body.page-profile .icon-btn {width:36px;height:36px;border-radius:50%;background:rgba(128,128,128,0.08);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all 0.2s ease;text-decoration:none;flex-shrink:0;}
body.page-profile .icon-btn:hover, body.page-profile .icon-btn:active {background:rgba(128,128,128,0.15);color:var(--text);border-color:var(--border);}
body.page-profile .icon-btn svg {width:16px;height:16px;}
body.page-profile .lang-selector {position:relative;}
body.page-profile .lang-menu {position:absolute;top:42px;left:0;background:var(--modal-bg);border:1px solid var(--border);border-radius:12px;padding:6px 0;min-width:140px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(0.96);transition:all 0.2s cubic-bezier(0.16,1,0.3,1);z-index:20;box-shadow:var(--shadow);}
body.page-profile .lang-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-profile .lang-menu button {display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;background:none;border:none;color:var(--text);font-family:'Cairo',sans-serif;font-size:0.85rem;cursor:pointer;transition:background 0.15s;text-align:right;}
body.page-profile .lang-menu button:hover {background:rgba(128,128,128,0.08);}
body.page-profile .lang-menu button .flag {font-size:1.1rem;}
body.page-profile .cover-wrap {position:relative;width:100%;height:220px;margin-top:56px;background:var(--card);overflow:hidden;cursor:pointer;transition:height 0.3s;}
body.page-profile .cover-img {width:100%;height:100%;object-fit:cover;display:block;}
body.page-profile .cover-placeholder {width:100%;height:100%;background:linear-gradient(135deg,#0d0d0e 0%,#1a1a1e 50%,#0d0d0e 100%);display:flex;align-items:center;justify-content:center;color:#333;}
body.page-profile .cover-placeholder svg {width:48px;height:48px;}
body.page-profile .cover-edit-btn {position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);color:#fff;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:0.72rem;display:none;align-items:center;gap:5px;transition:all 0.2s;font-weight:600;}
body.page-profile .cover-edit-btn:hover {background:rgba(0,0,0,0.9);}
body.page-profile .cover-edit-btn svg {width:12px;height:12px;}
body.page-profile .cover-wrap:hover .cover-edit-btn {display:flex;}
body.page-profile .profile-section {max-width:720px;margin:0 auto;padding:0 18px;}
body.page-profile .avatar-pull {position:relative;margin-top:-48px;margin-bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
body.page-profile .avatar-big {width:96px;height:96px;border-radius:50%;background:var(--avatar-gradient);display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;color:var(--black);overflow:hidden;border:3px solid var(--black);flex-shrink:0;position:relative;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;}
body.page-profile .avatar-big:hover {transform:scale(1.03);box-shadow:0 0 0 4px var(--primary-light);}
body.page-profile .avatar-big img {width:100%;height:100%;object-fit:cover;}
body.page-profile .av-overlay {position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;border-radius:50%;}
body.page-profile .avatar-big:hover .av-overlay {opacity:1;}
body.page-profile .av-overlay svg {width:18px;height:18px;}
body.page-profile .profile-actions {display:flex;gap:8px;padding-bottom:4px;flex-wrap:wrap;justify-content:flex-end;}
body.page-profile .btn-edit {display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(128,128,128,0.08);border:1px solid var(--border);border-radius:10px;color:var(--muted);cursor:pointer;font-family:'Cairo',sans-serif;font-size:0.82rem;font-weight:700;transition:all 0.18s;}
body.page-profile .btn-edit:hover {background:rgba(128,128,128,0.15);color:var(--text);border-color:var(--border);}
body.page-profile .btn-edit:active {transform:scale(0.95);}
body.page-profile .btn-edit svg {width:13px;height:13px;}
body.page-profile .btn-msg {display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--primary-light);border:1px solid var(--primary-border);border-radius:10px;color:var(--primary);cursor:pointer;font-family:'Cairo',sans-serif;font-size:0.82rem;font-weight:700;transition:all 0.18s;text-decoration:none;}
body.page-profile .btn-msg:hover {background:var(--primary-mid);transform:translateY(-1px);}
body.page-profile .btn-msg:active {transform:scale(0.95);}
body.page-profile .btn-msg svg {width:13px;height:13px;}
body.page-profile .btn-follow {display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;border:1px solid var(--primary-border);cursor:pointer;font-family:'Cairo',sans-serif;font-size:0.82rem;font-weight:700;transition:all 0.18s;background:var(--primary);color:var(--black);}
body.page-profile .btn-follow:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-profile .btn-follow.following {background:rgba(128,128,128,0.08);color:var(--text);border-color:var(--border);}
body.page-profile .btn-follow.following:hover {background:rgba(128,128,128,0.15);}
body.page-profile .btn-follow:active {transform:scale(0.95);}
body.page-profile .btn-follow svg {width:13px;height:13px;}
body.page-profile .btn-more-wrap {position:relative;}
body.page-profile .btn-more {display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(128,128,128,0.08);border:1px solid var(--border);border-radius:10px;color:var(--muted);cursor:pointer;transition:all 0.18s;}
body.page-profile .btn-more:hover {background:rgba(128,128,128,0.15);color:var(--text);}
body.page-profile .btn-more svg {width:15px;height:15px;}
body.page-profile .more-menu {position:absolute;top:42px;left:0;background:var(--modal-bg,var(--card));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:12px;min-width:180px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.96);transition:all 0.18s cubic-bezier(0.16,1,0.3,1);z-index:25;box-shadow:0 8px 32px rgba(0,0,0,0.3);overflow:hidden;}
body.page-profile .more-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-profile .more-menu button {display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:none;border:none;color:var(--text);font-family:'Cairo',sans-serif;font-size:0.8rem;font-weight:600;cursor:pointer;text-align:right;transition:background 0.15s;}
body.page-profile .more-menu button:hover {background:rgba(128,128,128,0.08);}
body.page-profile .more-menu button.danger {color:#dc2626;}
body.page-profile .more-menu svg {width:14px;height:14px;flex-shrink:0;}
body.page-profile .profile-meta {padding:4px 0 16px;}
body.page-profile .meta-name {font-size:1.3rem;font-weight:900;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.page-profile .verified-icon {flex-shrink:0;}
body.page-profile .verified-icon svg {width:18px;height:18px;}
body.page-profile .meta-un {font-size:0.85rem;color:var(--muted);margin-top:2px;}
body.page-profile .role-badge {display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:0.68rem;font-weight:700;margin-top:6px;}
body.page-profile .badge-admin {background:var(--primary-light);color:var(--primary);border:1px solid var(--primary-border);}
body.page-profile .badge-admin svg {width:10px;height:10px;}
body.page-profile .badge-member {background:rgba(128,128,128,0.08);color:var(--muted);border:1px solid var(--border);}
body.page-profile .meta-bio {color:var(--muted);font-size:0.9rem;line-height:1.8;margin-top:12px;font-family:'Noto Naskh Arabic',serif;word-break:break-word;}
body.page-profile .meta-info {display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;}
body.page-profile .info-item {display:flex;align-items:center;gap:5px;font-size:0.8rem;color:var(--muted);}
body.page-profile .info-item strong {color:var(--text);}
body.page-profile .info-item svg {width:12px;height:12px;}
body.page-profile .meta-stats {display:flex;gap:24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
body.page-profile .stat {cursor:default;transition:transform 0.15s;}
body.page-profile .stat:hover {transform:translateY(-1px);}
body.page-profile .stat-n {font-size:1.1rem;font-weight:800;color:var(--text);}
body.page-profile .stat-l {font-size:0.74rem;color:var(--muted);}
body.page-profile .stat-clickable {cursor:pointer;}
body.page-profile .stat-clickable:hover .stat-n {color:var(--primary);}
body.page-profile .tabs-bar {display:flex;border-bottom:1px solid var(--border);margin-top:16px;}
body.page-profile .tab-btn {flex:1;padding:12px;text-align:center;font-family:'Cairo',sans-serif;font-size:0.85rem;font-weight:700;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all 0.2s;margin-bottom:-1px;position:relative;}
body.page-profile .tab-btn.active {color:var(--text);border-bottom-color:var(--primary);}
body.page-profile .tab-btn:hover:not(.active) {color:var(--text);}
body.page-profile .posts-tab {padding:16px 0;}
body.page-profile .post-card {background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:14px;transition:all 0.2s ease;position:relative;}
body.page-profile .post-card:hover {border-color:var(--border);}
body.page-profile .post-img {width:100%;border-radius:10px;max-height:260px;object-fit:cover;margin-bottom:12px;display:block;}
body.page-profile .post-text {font-family:'Noto Naskh Arabic',serif;color:var(--text);font-size:0.95rem;line-height:1.9;word-break:break-word;}
body.page-profile .post-text h2 {font-size:1.1rem;font-weight:800;color:var(--text);margin:6px 0 4px;}
body.page-profile .post-text h3 {font-size:1rem;font-weight:700;color:var(--text);margin:4px 0 2px;}
body.page-profile .post-text blockquote {border-right:3px solid var(--primary);padding-right:12px;color:var(--muted);font-style:italic;margin:8px 0;background:rgba(128,128,128,0.05);padding:8px 12px;border-radius:0 8px 8px 0;}
body.page-profile .post-text ul {padding-right:20px;margin:6px 0;}
body.page-profile .post-text hr {border:none;border-top:1px solid var(--border);margin:10px 0;}
body.page-profile .post-text b, body.page-profile .post-text strong {color:var(--text);}
body.page-profile .post-text a {color:var(--primary);text-decoration:none;border-bottom:1px solid var(--primary-border);transition:border-color 0.2s;}
body.page-profile .post-text a:hover {border-color:var(--primary);}
body.page-profile .post-date {font-size:0.74rem;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:5px;}
body.page-profile .post-date svg {width:11px;height:11px;}
body.page-profile .post-share {background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;transition:all 0.15s;display:flex;align-items:center;justify-content:center;margin-right:auto;}
body.page-profile .post-share:hover {color:var(--text);background:rgba(128,128,128,0.08);}
body.page-profile .post-share:active {transform:scale(0.9);}
body.page-profile .post-share svg {width:13px;height:13px;}
body.page-profile .post-empty {text-align:center;padding:60px 24px;color:var(--muted);font-size:0.9rem;}
body.page-profile .post-empty svg {width:40px;height:40px;margin-bottom:12px;opacity:0.3;}
body.page-profile .edit-section {padding:16px 0;animation:profile-fadeIn 0.3s ease;}
@keyframes profile-fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
body.page-profile .fg {margin-bottom:14px;}
body.page-profile .fg label {display:block;margin-bottom:6px;color:var(--muted);font-size:0.82rem;font-weight:600;}
body.page-profile .fg input, body.page-profile .fg textarea {width:100%;padding:11px 14px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Cairo',sans-serif;font-size:0.9rem;transition:all 0.2s;}
body.page-profile .fg input:focus, body.page-profile .fg textarea:focus {outline:none;border-color:var(--border);background:var(--input-bg);box-shadow:0 0 0 3px rgba(128,128,128,0.08);}
body.page-profile .fg input::placeholder, body.page-profile .fg textarea::placeholder {color:var(--muted);}
body.page-profile .fg textarea {resize:vertical;min-height:80px;line-height:1.7;}
body.page-profile .fg-row {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
body.page-profile .alert {padding:11px 14px;border-radius:10px;font-size:0.84rem;margin-bottom:14px;display:none;font-weight:600;animation:profile-fadeIn 0.2s ease;}
body.page-profile .alert-err {background:var(--primary-light);color:var(--primary);border:1px solid var(--primary-border);}
body.page-profile .alert-ok {background:rgba(34,197,94,0.08);color:#4ade80;border:1px solid rgba(34,197,94,0.18);}
body.page-profile .btn-save {display:inline-flex;align-items:center;gap:7px;padding:11px 24px;background:var(--primary);color:var(--black);border:none;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-weight:800;font-size:0.88rem;transition:all 0.2s;}
body.page-profile .btn-save:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-profile .btn-save:active {transform:translateY(0);}
body.page-profile .btn-save:disabled {opacity:0.5;cursor:not-allowed;transform:none;}
body.page-profile .btn-save svg {width:14px;height:14px;}
body.page-profile .not-logged {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 24px;gap:14px;text-align:center;animation:profile-fadeIn 0.4s ease;}
body.page-profile .not-logged h2 {font-size:1.2rem;font-weight:800;color:var(--text);}
body.page-profile .not-logged p {color:var(--muted);font-size:0.85rem;max-width:300px;line-height:1.6;}
body.page-profile .btn-go {display:inline-flex;align-items:center;gap:6px;padding:11px 24px;background:var(--primary);color:var(--black);border-radius:10px;font-weight:800;font-size:0.88rem;text-decoration:none;transition:all 0.2s;}
body.page-profile .btn-go:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-profile .btn-go:active {transform:scale(0.97);}
body.page-profile .modal-bd {position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;visibility:hidden;transition:all 0.25s ease;padding:20px;}
body.page-profile .modal-bd.show {opacity:1;visibility:visible;}
body.page-profile .modal-box {background:var(--modal-bg);border:1px solid var(--border);border-radius:24px;padding:24px;width:100%;max-width:440px;max-height:80vh;transform:translateY(16px) scale(0.97);transition:all 0.3s cubic-bezier(0.16,1,0.3,1);overflow-y:auto;box-shadow:var(--shadow);}
body.page-profile .modal-bd.show .modal-box {transform:translateY(0) scale(1);}
body.page-profile .modal-title {font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
body.page-profile .modal-title svg {width:20px;height:20px;color:var(--primary);}
body.page-profile .modal-close {background:none;border:none;color:var(--muted);cursor:pointer;margin-right:auto;padding:4px;}
body.page-profile .modal-close:hover {color:var(--text);}
body.page-profile .modal-user-item {display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;transition:background 0.15s;cursor:pointer;border-bottom:1px solid var(--border);}
body.page-profile .modal-user-item:hover {background:rgba(128,128,128,0.06);}
body.page-profile .modal-user-item .u-av {width:40px;height:40px;border-radius:50%;background:var(--avatar-gradient);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.9rem;color:var(--black);flex-shrink:0;overflow:hidden;}
body.page-profile .modal-user-item .u-av img {width:100%;height:100%;object-fit:cover;}
body.page-profile .modal-user-item .u-info {flex:1;min-width:0;}
body.page-profile .modal-user-item .u-name {font-weight:700;color:var(--text);}
body.page-profile .modal-user-item .u-un {font-size:0.75rem;color:var(--muted);}
body.page-profile .modal-empty {text-align:center;padding:40px 20px;color:var(--muted);font-size:0.9rem;}
@keyframes profile-spin{to{transform:rotate(360deg);}}
body.page-profile .profile-spin {width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:profile-spin 0.8s linear infinite;margin:80px auto 14px;}
body.page-profile .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 22px;border-radius:14px;font-size:0.88rem;font-weight:600;z-index:999;border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);white-space:nowrap;max-width:90vw;text-align:center;}
body.page-profile .toast.show {opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
body.page-profile .toast-success {background:var(--modal-bg);color:var(--text);border-color:var(--border);}
body.page-profile .toast-error {background:var(--primary);color:var(--black);border-color:var(--primary);}
body.page-profile ::-webkit-scrollbar {width:6px;}
body.page-profile ::-webkit-scrollbar-track {background:transparent;}
body.page-profile ::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-profile ::-webkit-scrollbar-thumb:hover {background:var(--muted);}
@media(max-width:768px){
body.page-profile .topbar {height:52px;padding:0 12px;}
body.page-profile .back-btn {padding:6px 12px;font-size:0.78rem;}
body.page-profile .back-btn svg {width:12px;height:12px;}
body.page-profile .topbar-title {font-size:0.82rem;max-width:140px;}
body.page-profile .cover-wrap {height:160px;margin-top:52px;}
body.page-profile .cover-placeholder svg {width:36px;height:36px;}
body.page-profile .cover-edit-btn {padding:5px 10px;font-size:0.7rem;}
body.page-profile .profile-section {padding:0 14px;}
body.page-profile .avatar-pull {margin-top:-40px;}
body.page-profile .avatar-big {width:78px;height:78px;font-size:1.8rem;border-width:2px;}
body.page-profile .av-overlay svg {width:14px;height:14px;}
body.page-profile .profile-actions {gap:6px;}
body.page-profile .btn-edit, body.page-profile .btn-msg, body.page-profile .btn-follow {padding:6px 12px;font-size:0.78rem;}
body.page-profile .meta-name {font-size:1.1rem;}
body.page-profile .verified-icon svg {width:15px;height:15px;}
body.page-profile .meta-bio {font-size:0.85rem;}
body.page-profile .meta-info {gap:12px;}
body.page-profile .meta-stats {gap:18px;}
body.page-profile .stat-n {font-size:1rem;}
body.page-profile .tab-btn {padding:10px;font-size:0.82rem;}
body.page-profile .post-card {padding:14px;border-radius:14px;}
body.page-profile .post-img {max-height:200px;}
body.page-profile .post-text {font-size:0.9rem;}
body.page-profile .fg-row {grid-template-columns:1fr;}
body.page-profile .fg input, body.page-profile .fg textarea {padding:10px 12px;}
body.page-profile .btn-save {padding:10px 20px;}
body.page-profile .not-logged {padding:80px 20px;}
body.page-profile .modal-box {padding:18px;max-width:100%;}
}
@media(max-width:400px){
body.page-profile .topbar {padding:0 10px;}
body.page-profile .topbar-title {max-width:100px;}
body.page-profile .cover-wrap {height:130px;}
body.page-profile .avatar-pull {flex-wrap:wrap;}
body.page-profile .profile-actions {width:100%;justify-content:flex-start;}
body.page-profile .meta-stats {gap:14px;}
body.page-profile .stat-n {font-size:0.95rem;}
body.page-profile .tab-btn {padding:8px;font-size:0.78rem;}
}
@media(prefers-reduced-motion:reduce){
body.page-profile, body.page-profile *, body.page-profile *::before, body.page-profile *::after {animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}
/* ================= shiziai.html ================= */
html.page-shiziai {
/* === Hostaka UI Design System v2.0 === */
--black: #ffffff;
--dark: #f5f5f7;
--card: #ffffff;
--border: rgba(0,0,0,0.08);
--text: #1c1c1e;
--muted: #8e8e93;
--primary: #0071e3;
--primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08);
--primary-mid: rgba(0,113,227,0.15);
--primary-border: rgba(0,113,227,0.25);
--accent: #0071e3;
--mine-bg: linear-gradient(135deg, var(--primary), var(--primary-h));
--mine-border: rgba(0,113,227,0.12);
--their-bg: var(--card);
--their-border: rgba(0,0,0,0.06);
--topbar-bg: rgba(255,255,255,0.72);
--input-bg: #f2f2f7;
--modal-bg: #ffffff;
--post-bg: #ffffff;
--sort-btn-bg: rgba(0,0,0,0.04);
--surface-elevated: #ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--glass-bg: rgba(255,255,255,0.65);
--glass-bg-strong: rgba(255,255,255,0.82);
--glass-border: rgba(255,255,255,0.4);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(255,255,255,0);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--success: #34c759;
--warning: #ff9500;
--danger: #ff3b30;
/* === توافق مع الأسماء القديمة (لا تُحذف) === */
--pink: var(--primary);
--pink-h: var(--primary-h);
--shizi-bg: var(--primary-light);
--shizi-border: var(--primary-border);
--shizi-gradient: var(--avatar-gradient);
}
[data-theme="dark"].page-shiziai {
--black: #000000;
--dark: #121212;
--card: #1c1c1e;
--border: rgba(255,255,255,0.08);
--text: #f5f5f7;
--muted: #8e8e93;
--primary: #0a84ff;
--primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12);
--primary-mid: rgba(10,132,255,0.2);
--primary-border: rgba(10,132,255,0.3);
--accent: #0a84ff;
--mine-bg: linear-gradient(135deg, var(--primary), var(--primary-h));
--mine-border: rgba(10,132,255,0.18);
--their-bg: var(--card);
--their-border: rgba(255,255,255,0.06);
--topbar-bg: rgba(0,0,0,0.65);
--input-bg: #1c1c1e;
--modal-bg: #1c1c1e;
--post-bg: #1c1c1e;
--sort-btn-bg: rgba(255,255,255,0.04);
--surface-elevated: #2c2c2e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
--glass-bg: rgba(28,28,30,0.72);
--glass-bg-strong: rgba(28,28,30,0.88);
--glass-border: rgba(255,255,255,0.08);
--glass-blur: 24px;
--wallpaper-img: none;
--wallpaper-overlay: rgba(0,0,0,0);
--pink: var(--primary);
--pink-h: var(--primary-h);
--shizi-bg: var(--primary-light);
--shizi-border: var(--primary-border);
--shizi-gradient: var(--avatar-gradient);
}
body.page-shiziai, body.page-shiziai * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html.page-shiziai, body.page-shiziai {height:100%;overflow:hidden;}
body.page-shiziai {
background:radial-gradient(circle at 18% 16%,rgba(128,128,128,0.06),transparent 22%),var(--black);
color:var(--text);
font-family:'Cairo',sans-serif;
display:flex;flex-direction:column;
-webkit-font-smoothing:antialiased;
transition:background var(--transition-slow), color var(--transition-slow);
}
html.has-wallpaper body.page-shiziai * {
transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
/* ===== خلفية المنصة (Wallpaper) ===== */
body.page-shiziai .wallpaper-bg {
position:fixed;inset:0;z-index:-2;
background-image:var(--wallpaper-img);
background-size:cover;background-position:center;background-repeat:no-repeat;
opacity:0;transition:opacity 0.6s ease;
transform:scale(1.02);
}
html.has-wallpaper body.page-shiziai .wallpaper-bg {opacity:1;}
body.page-shiziai .wallpaper-overlay {
position:fixed;inset:0;z-index:-1;
background:var(--wallpaper-overlay);
pointer-events:none;
transition:background 0.6s ease;
}
html.has-wallpaper body.page-shiziai .topbar {
background:var(--glass-bg)!important;
backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
border-color:var(--glass-border)!important;
}
html.has-wallpaper body.page-shiziai {background:transparent;}
/* ===== نافذة إعداد الخلفية ===== */
body.page-shiziai .wp-overlay {position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;visibility:hidden;transition:all .25s ease;padding:20px;}
body.page-shiziai .wp-overlay.show {opacity:1;visibility:visible;}
body.page-shiziai .wp-box {background:var(--modal-bg);border:1px solid var(--border);border-radius:22px;padding:26px 22px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;transform:translateY(14px) scale(.97);transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow);}
body.page-shiziai .wp-overlay.show .wp-box {transform:translateY(0) scale(1);}
body.page-shiziai .wp-title {font-weight:800;font-size:1.02rem;color:var(--text);display:flex;align-items:center;gap:9px;margin-bottom:14px;}
body.page-shiziai .wp-title svg {width:19px;height:19px;color:var(--accent);flex-shrink:0;}
body.page-shiziai .wp-desc {color:var(--muted);font-size:.8rem;line-height:1.7;margin-bottom:14px;}
body.page-shiziai .wp-preview {width:100%;height:110px;border-radius:14px;border:1px solid var(--border);background:var(--input-bg);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.78rem;margin-bottom:14px;overflow:hidden;}
body.page-shiziai .wp-upload-btn {width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(128,128,128,.08);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:12px;font-family:'Cairo',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s;margin-bottom:14px;}
body.page-shiziai .wp-upload-btn:hover {background:rgba(128,128,128,.14);}
body.page-shiziai .wp-row {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
body.page-shiziai .wp-row label {font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-shiziai .wp-row input[type=range] {flex:1;accent-color:var(--accent);}
body.page-shiziai .wp-check {display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);margin-bottom:16px;cursor:pointer;}
body.page-shiziai .wp-check input {accent-color:var(--accent);}
body.page-shiziai .wp-footer {display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}
body.page-shiziai .wp-btn-ghost {background:none;border:1px solid var(--border);color:var(--muted);padding:9px 16px;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:6px;transition:all .2s;}
body.page-shiziai .wp-btn-ghost:hover {color:var(--text);border-color:var(--text);}
body.page-shiziai .wp-btn-primary {background:var(--accent);color:var(--black);border:none;padding:9px 20px;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:800;transition:all .2s;}
body.page-shiziai .wp-btn-primary:hover {opacity:.88;}
body.page-shiziai .topbar {
height:56px;background:var(--topbar-bg);
backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px);
border-bottom:1px solid var(--border);
display:flex;align-items:center;padding:0 16px;gap:10px;
flex-shrink:0;z-index:20;transition:background 0.3s, border-color 0.3s;
}
body.page-shiziai .topbar-left {display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
body.page-shiziai .topbar-right {display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-shiziai .back-btn {
display:flex;align-items:center;gap:6px;
color:var(--muted);font-size:0.82rem;cursor:pointer;
padding:6px 12px;border-radius:999px;
background:rgba(128,128,128,0.06);border:1px solid var(--border);
font-family:'Cairo';font-weight:600;text-decoration:none;white-space:nowrap;
transition:all 0.18s;
}
body.page-shiziai .back-btn:hover {color:var(--text);background:rgba(128,128,128,0.12);}
body.page-shiziai .back-btn:active {transform:scale(0.95);}
body.page-shiziai .back-btn svg {width:14px;height:14px;}
body.page-shiziai .shizi-brand {display:flex;align-items:center;gap:9px;min-width:0;}
body.page-shiziai .shizi-av {
width:34px;height:34px;border-radius:50%;
background:var(--shizi-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:1rem;color:var(--black);flex-shrink:0;
box-shadow:0 4px 14px rgba(0,0,0,0.25);
overflow:hidden;
}
body.page-shiziai .shizi-av img {width:100%;height:100%;object-fit:cover;}
body.page-shiziai .shizi-name {font-weight:800;font-size:0.92rem;color:var(--text);white-space:nowrap;}
body.page-shiziai .shizi-status {font-size:0.68rem;color:var(--pink);font-weight:700;display:flex;align-items:center;gap:4px;}
body.page-shiziai .shizi-status .dot {width:6px;height:6px;border-radius:50%;background:var(--pink);animation:shiziai-pulse 2s ease-in-out infinite;}
@keyframes shiziai-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
body.page-shiziai .icon-btn {
width:36px;height:36px;border-radius:50%;
background:rgba(128,128,128,0.06);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--muted);transition:all 0.2s;flex-shrink:0;
}
body.page-shiziai .icon-btn:hover, body.page-shiziai .icon-btn:active {background:rgba(128,128,128,0.12);color:var(--text);}
body.page-shiziai .icon-btn svg {width:16px;height:16px;}
body.page-shiziai .lang-selector {position:relative;}
body.page-shiziai .lang-menu {
position:absolute;top:42px;left:0;
background:var(--modal-bg);border:1px solid var(--border);border-radius:12px;
padding:6px 0;min-width:140px;
opacity:0;visibility:hidden;transform:translateY(-6px) scale(0.96);
transition:all 0.2s cubic-bezier(0.16,1,0.3,1);z-index:30;box-shadow:var(--shadow);
}
body.page-shiziai .lang-menu.show {opacity:1;visibility:visible;transform:translateY(0) scale(1);}
body.page-shiziai .lang-menu button {
display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;
background:none;border:none;color:var(--text);
font-family:'Cairo',sans-serif;font-size:0.85rem;cursor:pointer;
transition:background 0.15s;text-align:right;
}
body.page-shiziai .lang-menu button:hover {background:rgba(128,128,128,0.08);}
body.page-shiziai .lang-menu button .flag {font-size:1.1rem;}
body.page-shiziai .chat-main {flex:1;display:flex;flex-direction:column;min-height:0;position:relative;}
body.page-shiziai .msgs-area {
flex:1;overflow-y:auto;padding:18px 14px;
display:flex;flex-direction:column;gap:4px;min-height:0;
}
body.page-shiziai .msgs-area::-webkit-scrollbar {width:4px;}
body.page-shiziai .msgs-area::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
body.page-shiziai .welcome {
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;color:var(--muted);text-align:center;padding:20px;animation:shiziai-fadeIn 0.5s ease;
}
@keyframes shiziai-fadeIn{from{opacity:0;}to{opacity:1;}}
body.page-shiziai .welcome .shizi-big {
width:76px;height:76px;border-radius:50%;
background:var(--shizi-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:2rem;color:var(--black);
box-shadow:0 10px 30px rgba(0,0,0,0.25);
overflow:hidden;
}
body.page-shiziai .welcome .shizi-big img {width:100%;height:100%;object-fit:cover;}
body.page-shiziai .welcome h2 {font-size:1.15rem;color:var(--text);font-weight:800;}
body.page-shiziai .welcome p {font-size:0.85rem;max-width:320px;line-height:1.7;}
body.page-shiziai .suggestions {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:420px;margin-top:6px;}
body.page-shiziai .suggestion-chip {
padding:8px 14px;border-radius:999px;
background:var(--shizi-bg);border:1px solid var(--shizi-border);
color:var(--pink);font-size:0.78rem;font-weight:700;cursor:pointer;
font-family:'Cairo';transition:all 0.18s;
}
body.page-shiziai .suggestion-chip:hover {background:var(--shizi-border);transform:translateY(-1px);}
body.page-shiziai .msg-row {display:flex;align-items:flex-end;gap:8px;margin-bottom:8px;animation:shiziai-msgIn 0.25s cubic-bezier(0.16,1,0.3,1);}
@keyframes shiziai-msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
body.page-shiziai .msg-row.mine {flex-direction:row-reverse;}
body.page-shiziai .msg-av {
width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:0.75rem;color:#fff;flex-shrink:0;overflow:hidden;
}
body.page-shiziai .msg-av.shizi {background:var(--shizi-gradient);color:var(--black);}
body.page-shiziai .msg-av.shizi img {width:100%;height:100%;object-fit:cover;}
body.page-shiziai .msg-av.user {background:linear-gradient(145deg,#333,#111);}
body.page-shiziai .bubble-wrap {display:flex;flex-direction:column;max-width:74%;min-width:0;}
body.page-shiziai .msg-row.mine .bubble-wrap {align-items:flex-end;}
body.page-shiziai .bubble {
padding:11px 15px;border-radius:18px;font-size:0.9rem;line-height:1.7;
word-break:break-word;white-space:pre-wrap;
transition:background-color 0.3s ease, box-shadow 0.15s ease;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
body.page-shiziai .msg-row.mine .bubble {background:var(--mine-bg);color:#fff;border-bottom-left-radius:5px;box-shadow:0 2px 8px rgba(0,113,227,0.22);}
body.page-shiziai .msg-row.theirs .bubble {background:var(--card);border:1px solid var(--shizi-border);border-bottom-right-radius:5px;}
body.page-shiziai .msg-time {font-size:0.62rem;color:var(--muted);padding:3px 5px;font-weight:600;}
body.page-shiziai .typing-row {display:flex;align-items:flex-end;gap:8px;margin-bottom:8px;}
body.page-shiziai .typing-bubble {
background:var(--shizi-bg);border:1px solid var(--shizi-border);
border-radius:18px;border-bottom-right-radius:5px;
padding:13px 16px;display:flex;gap:4px;align-items:center;
}
body.page-shiziai .typing-dot {width:6px;height:6px;border-radius:50%;background:var(--pink);animation:shiziai-typingBounce 1.2s infinite ease-in-out;}
body.page-shiziai .typing-dot:nth-child(2) {animation-delay:0.15s;}
body.page-shiziai .typing-dot:nth-child(3) {animation-delay:0.3s;}
@keyframes shiziai-typingBounce{0%,60%,100%{transform:translateY(0);opacity:0.5;}30%{transform:translateY(-5px);opacity:1;}}
body.page-shiziai .input-area {
padding:12px 14px;border-top:1px solid var(--border);
display:flex;align-items:flex-end;gap:8px;
background:var(--topbar-bg);flex-shrink:0;
}
body.page-shiziai .msg-input {
flex:1;padding:12px 16px;background:var(--input-bg);
border:1px solid var(--border);border-radius:20px;
color:var(--text);font-family:'Cairo';font-size:0.9rem;
resize:none;max-height:120px;line-height:1.5;
transition:all 0.2s;
}
body.page-shiziai .msg-input:focus {outline:none;box-shadow:0 0 0 3px var(--shizi-border);}
body.page-shiziai .msg-input::placeholder {color:var(--muted);}
body.page-shiziai .send-btn {
width:42px;height:42px;border-radius:50%;flex-shrink:0;
background:var(--shizi-gradient);border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all 0.2s;box-shadow:0 4px 14px rgba(0,0,0,0.25);
}
body.page-shiziai .send-btn:hover {transform:translateY(-2px);}
body.page-shiziai .send-btn:active {transform:translateY(0);}
body.page-shiziai .send-btn:disabled {opacity:0.5;cursor:not-allowed;transform:none;}
body.page-shiziai .send-btn svg {width:17px;height:17px;}
body.page-shiziai .not-logged {
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;padding:80px 20px;text-align:center;
}
body.page-shiziai .not-logged svg {width:44px;height:44px;color:var(--muted);}
body.page-shiziai .not-logged h2 {font-size:1.1rem;color:var(--text);font-weight:800;}
body.page-shiziai .not-logged p {color:var(--muted);font-size:0.85rem;max-width:280px;}
body.page-shiziai .btn-go {
margin-top:6px;display:inline-flex;align-items:center;gap:8px;
background:var(--shizi-gradient);color:var(--black);padding:10px 22px;
border-radius:12px;text-decoration:none;font-weight:700;font-size:0.85rem;
}
body.page-shiziai .toast {
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
padding:12px 22px;border-radius:14px;font-size:0.88rem;font-weight:600;
z-index:999;border:1px solid var(--border);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
opacity:0;visibility:hidden;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
white-space:nowrap;max-width:90vw;text-align:center;
}
body.page-shiziai .toast.show {opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
body.page-shiziai .toast-success {background:var(--modal-bg);color:var(--text);border-color:var(--border);}
body.page-shiziai .toast-error {background:#ef4444;color:#fff;border-color:#ef4444;}
body.page-shiziai ::-webkit-scrollbar {width:4px;}
body.page-shiziai ::-webkit-scrollbar-track {background:transparent;}
body.page-shiziai ::-webkit-scrollbar-thumb {background:var(--border);border-radius:3px;}
@media(max-width:680px){
body.page-shiziai .topbar {height:52px;padding:0 12px;gap:6px;}
body.page-shiziai .back-btn span {display:none;}
body.page-shiziai .back-btn {padding:6px;}
body.page-shiziai .shizi-av {width:30px;height:30px;font-size:0.9rem;}
body.page-shiziai .shizi-name {font-size:0.86rem;}
body.page-shiziai .bubble-wrap {max-width:86%;}
body.page-shiziai .bubble {padding:10px 13px;font-size:0.88rem;}
body.page-shiziai .input-area {padding:9px 10px;}
body.page-shiziai .msg-input {padding:10px 14px;font-size:0.86rem;}
body.page-shiziai .send-btn {width:38px;height:38px;}
}
@media(prefers-reduced-motion:reduce){
body.page-shiziai, body.page-shiziai *, body.page-shiziai *::before, body.page-shiziai *::after {animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}
/* ================= short.html ================= */
/* ملاحظة: هذه الصفحة تحاكي عارض القصص (Story Viewer) في نظام Hostaka UI v2.0،
لذا تبقى خلفيتها داكنة دائماً بغض النظر عن الثيم، لتجربة مشاهدة غامرة. */
html.page-short {
--radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--danger: #ff3b30;
}
body.page-short, body.page-short * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html.page-short, body.page-short {height:100%;background:#000;overscroll-behavior:none;}
body.page-short {font-family:'Cairo',sans-serif;color:#fff;}
body.page-short .topbar {
position:fixed;top:0;left:0;right:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
background:linear-gradient(rgba(0,0,0,0.55),transparent);
pointer-events:none;
}
body.page-short .topbar > * {pointer-events:auto;}
body.page-short .back-btn {width:38px;height:38px;border-radius:var(--radius-full);background:rgba(255,255,255,0.12);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);}
body.page-short .topbar-title {font-weight:800;font-size:1rem;display:flex;align-items:center;gap:6px;}
body.page-short .reels-feed {height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;}
body.page-short .reels-feed::-webkit-scrollbar {display:none;}
body.page-short .reel-slide {
height:100dvh;width:100%;position:relative;scroll-snap-align:start;
display:flex;align-items:center;justify-content:center;background:#0a0a0a;overflow:hidden;
}
body.page-short .reel-slide video {width:100%;height:100%;object-fit:contain;background:#000;}
body.page-short .reel-load-more-slide {display:flex;align-items:center;justify-content:center;}
body.page-short .reel-load-more-slide .load-more-btn {padding:14px 32px;border:1.5px solid rgba(255,255,255,0.3);border-radius:999px;background:rgba(255,255,255,0.08);color:#fff;font-family:'Cairo',sans-serif;font-weight:800;font-size:0.92rem;cursor:pointer;backdrop-filter:blur(10px);}
body.page-short .reel-load-more-slide .load-more-btn:hover {background:rgba(255,255,255,0.18);}
body.page-short .reel-tap-layer {position:absolute;inset:0;z-index:2;}
body.page-short .reel-mute-hint {
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:60px;height:60px;border-radius:var(--radius-full);background:rgba(0,0,0,0.4);
display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast);pointer-events:none;z-index:3;
}
body.page-short .reel-mute-hint.show {opacity:1;}
body.page-short .reel-gradient-bottom {position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(transparent,rgba(0,0,0,0.75));pointer-events:none;z-index:1;}
body.page-short .reel-info {
position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));inset-inline-start:14px;
inset-inline-end:78px;z-index:4;
}
body.page-short .reel-pub {display:flex;align-items:center;gap:8px;margin-bottom:8px;}
body.page-short .reel-avatar {width:36px;height:36px;border-radius:var(--radius-full);overflow:hidden;background:linear-gradient(145deg,#fff,#ccc);color:#000;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;}
body.page-short .reel-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-short .reel-pub-name {font-weight:800;font-size:0.92rem;display:flex;align-items:center;gap:4px;}
body.page-short .reel-caption {font-size:0.86rem;line-height:1.6;color:rgba(255,255,255,0.92);max-height:4.8em;overflow:hidden;}
body.page-short .reel-actions {
position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));inset-inline-end:10px;z-index:4;
display:flex;flex-direction:column;align-items:center;gap:20px;
}
body.page-short .reel-act-btn {background:none;border:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;}
body.page-short .reel-act-circle {width:46px;height:46px;border-radius:var(--radius-full);background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:transform var(--transition-fast);}
body.page-short .reel-act-btn:active .reel-act-circle {transform:scale(0.88);}
body.page-short .reel-act-btn.liked .reel-act-circle {background:rgba(229,57,53,0.25);color:#e53935;}
body.page-short .reel-act-count {font-size:0.72rem;font-weight:700;}
body.page-short .empty-state {position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,0.6);text-align:center;padding:20px;}
body.page-short .empty-state svg {opacity:0.5;}
body.page-short .loader {position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:100;}
body.page-short .spinner {width:34px;height:34px;border-radius:var(--radius-full);border:3px solid rgba(255,255,255,0.2);border-top-color:#fff;animation:short-spin 0.8s linear infinite;}
@keyframes short-spin{to{transform:rotate(360deg);}}
/* ===== ورقة التعليقات السفلية ===== */
body.page-short .comments-sheet-bd {position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:80;opacity:0;visibility:hidden;transition:all var(--transition-fast);}
body.page-short .comments-sheet-bd.show {opacity:1;visibility:visible;}
body.page-short .comments-sheet {
position:fixed;left:0;right:0;bottom:0;max-height:70vh;background:#141414;border-radius:20px 20px 0 0;
z-index:81;display:flex;flex-direction:column;transform:translateY(100%);transition:transform var(--transition-base) cubic-bezier(0.16,1,0.3,1);
padding-bottom:env(safe-area-inset-bottom);
}
body.page-short .comments-sheet-bd.show .comments-sheet {transform:translateY(0);}
body.page-short .comments-head {display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #262626;font-weight:800;}
body.page-short .comments-head button {background:none;border:none;color:#fff;cursor:pointer;display:flex;}
body.page-short .comments-list {flex:1;overflow-y:auto;padding:10px 18px;}
body.page-short .comment-row {display:flex;gap:10px;margin-bottom:16px;}
body.page-short .comment-avatar {width:32px;height:32px;border-radius:var(--radius-full);background:#333;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;overflow:hidden;}
body.page-short .comment-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-short .comment-name {font-size:0.8rem;font-weight:700;color:rgba(255,255,255,0.6);margin-bottom:2px;}
body.page-short .comment-text {font-size:0.9rem;line-height:1.5;}
body.page-short .comment-empty {text-align:center;color:rgba(255,255,255,0.4);padding:30px 10px;font-size:0.85rem;}
body.page-short .comments-input-row {display:flex;gap:10px;padding:12px 14px;border-top:1px solid #262626;align-items:center;}
body.page-short .comments-input-row input {flex:1;background:#222;border:none;border-radius:22px;padding:11px 16px;color:#fff;font-family:inherit;font-size:0.88rem;outline:none;}
body.page-short .comments-input-row button {width:40px;height:40px;border-radius:var(--radius-full);background:#fff;color:#000;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
/* ================= support.html ================= */
html.page-support {
/* === Hostaka UI Design System v2.0 === */
--black: #ffffff; --dark: #f5f5f7; --card: #ffffff; --border: rgba(0,0,0,0.08);
--text: #1c1c1e; --muted: #8e8e93; --primary: #0071e3; --primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08); --primary-border: rgba(0,113,227,0.25);
--topbar-bg: rgba(255,255,255,0.72); --input-bg: #f2f2f7; --modal-bg:#ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--danger: #ff3b30;
}
[data-theme="dark"].page-support {
--black: #000000; --dark: #121212; --card: #1c1c1e; --border: rgba(255,255,255,0.08);
--text: #f5f5f7; --muted: #8e8e93; --primary: #0a84ff; --primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12); --primary-border: rgba(10,132,255,0.3);
--topbar-bg: rgba(0,0,0,0.65); --input-bg: #1c1c1e; --modal-bg:#1c1c1e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
}
body.page-support, body.page-support * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body.page-support {background:var(--black);color:var(--text);font-family:'Cairo',sans-serif;min-height:100vh;transition:background var(--transition-base),color var(--transition-base);}
body.page-support .topbar {position:fixed;top:0;left:0;right:0;height:60px;background:var(--topbar-bg);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:50;}
body.page-support .back-btn {display:flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;font-weight:800;font-size:0.95rem;}
body.page-support .icon-btn {width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all var(--transition-fast);}
body.page-support .icon-btn:hover {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);}
body.page-support .wrap {max-width:640px;margin:0 auto;padding:84px 16px 60px;}
body.page-support .page-title {font-size:1.35rem;font-weight:900;margin-bottom:4px;}
body.page-support .page-sub {color:var(--muted);font-size:0.88rem;margin-bottom:22px;}
body.page-support .tabs {display:flex;gap:6px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px;margin-bottom:20px;}
body.page-support .tab-btn {flex:1;padding:9px;border:none;background:none;border-radius:var(--radius-sm);font-family:'Cairo';font-weight:700;font-size:0.85rem;color:var(--muted);cursor:pointer;transition:all var(--transition-fast);}
body.page-support .tab-btn.active {background:var(--card);color:var(--primary);box-shadow:var(--shadow);}
body.page-support .card {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;transition:all var(--transition-base);}
body.page-support .f-label {display:block;font-size:0.82rem;font-weight:700;color:var(--muted);margin-bottom:6px;}
body.page-support select.f-input, body.page-support .f-input {width:100%;padding:11px 13px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';font-size:0.88rem;margin-bottom:14px;transition:border-color var(--transition-fast);}
body.page-support textarea.f-input {resize:vertical;min-height:110px;}
body.page-support .f-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-support .btn-submit {width:100%;padding:12px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-family:'Cairo';font-weight:800;font-size:0.92rem;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 16px rgba(0,113,227,0.25);}
body.page-support .btn-submit:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-support .btn-submit:disabled {opacity:0.5;cursor:default;transform:none;}
body.page-support .ticket {border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:12px;background:var(--card);transition:all var(--transition-base);}
body.page-support .ticket:hover {border-color:var(--primary-border);box-shadow:var(--shadow);}
body.page-support .ticket-top {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
body.page-support .ticket-type {font-size:0.72rem;font-weight:700;color:var(--muted);}
body.page-support .ticket-status {font-size:0.7rem;font-weight:800;padding:2px 10px;border-radius:var(--radius-full);}
body.page-support .st-pending {background:rgba(255,149,0,0.12);color:#a16207;}
[data-theme="dark"].page-support body.page-support .st-pending {color:#ff9500;}
body.page-support .st-resolved {background:rgba(52,199,89,0.12);color:#15803d;}
[data-theme="dark"].page-support body.page-support .st-resolved {color:#34c759;}
body.page-support .st-dismissed {background:rgba(255,59,48,0.1);color:#b91c1c;}
[data-theme="dark"].page-support body.page-support .st-dismissed {color:#ff6961;}
body.page-support .ticket-subject {font-weight:800;font-size:0.9rem;margin-bottom:4px;}
body.page-support .ticket-reason {font-size:0.83rem;color:var(--muted);line-height:1.6;margin-bottom:6px;}
body.page-support .ticket-reply {background:var(--input-bg);border-radius:var(--radius-sm);padding:10px 12px;font-size:0.83rem;line-height:1.6;margin-top:8px;}
body.page-support .ticket-reply b {display:block;margin-bottom:3px;font-size:0.76rem;color:var(--muted);}
body.page-support .ticket-date {font-size:0.7rem;color:var(--muted);margin-top:6px;}
body.page-support .empty-state {text-align:center;padding:50px 10px;color:var(--muted);font-size:0.88rem;}
body.page-support .login-gate {text-align:center;padding:60px 20px;}
body.page-support .login-gate a {display:inline-block;margin-top:14px;padding:10px 22px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none;font-weight:800;font-size:0.86rem;transition:all var(--transition-fast);}
body.page-support .login-gate a:hover {background:var(--primary-h);}
body.page-support .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:11px 22px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:700;z-index:999;opacity:0;transition:opacity var(--transition-base);pointer-events:none;box-shadow:var(--shadow-lg);}
body.page-support .toast.show {opacity:1;}
body.page-support .toast.toast-error {background:var(--danger);color:#fff;}
/* ============================================================
صفحة إدارة الحساب — /manager
============================================================ */
html.page-manager {
--black: #ffffff; --dark: #f5f5f7; --card: #ffffff; --border: rgba(0,0,0,0.08);
--text: #1c1c1e; --muted: #8e8e93; --primary: #0071e3; --primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08); --primary-border: rgba(0,113,227,0.25);
--topbar-bg: rgba(255,255,255,0.72); --input-bg: #f2f2f7; --modal-bg:#ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--danger: #ff3b30; --success: #34c759;
}
[data-theme="dark"].page-manager {
--black: #000000; --dark: #121212; --card: #1c1c1e; --border: rgba(255,255,255,0.08);
--text: #f5f5f7; --muted: #8e8e93; --primary: #0a84ff; --primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12); --primary-border: rgba(10,132,255,0.3);
--topbar-bg: rgba(0,0,0,0.65); --input-bg: #1c1c1e; --modal-bg:#1c1c1e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
}
body.page-manager, body.page-manager * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body.page-manager {background:var(--black);color:var(--text);font-family:'Cairo',sans-serif;min-height:100vh;transition:background var(--transition-base),color var(--transition-base);}
body.page-manager .topbar {position:fixed;top:0;left:0;right:0;height:60px;background:var(--topbar-bg);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:50;}
body.page-manager .back-btn {display:flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;font-weight:800;font-size:0.95rem;}
body.page-manager .icon-btn {width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all var(--transition-fast);}
body.page-manager .icon-btn:hover {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);}
body.page-manager .wrap {max-width:640px;margin:0 auto;padding:84px 16px 60px;}
body.page-manager .page-title {font-size:1.35rem;font-weight:900;margin-bottom:4px;}
body.page-manager .page-sub {color:var(--muted);font-size:0.88rem;margin-bottom:22px;}
body.page-manager .acc-summary {display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow);}
body.page-manager .acc-avatar {width:58px;height:58px;border-radius:var(--radius-full);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;overflow:hidden;flex-shrink:0;}
body.page-manager .acc-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-manager .acc-name {font-weight:900;font-size:1.05rem;display:flex;align-items:center;gap:5px;}
body.page-manager .acc-name .badge-verified svg {width:15px;height:15px;color:#0071e3;flex-shrink:0;}
body.page-manager .acc-meta {color:var(--muted);font-size:0.8rem;margin-top:3px;}
body.page-manager .section {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;transition:all var(--transition-base);}
body.page-manager .section-title {font-weight:800;font-size:0.95rem;display:flex;align-items:center;gap:8px;margin-bottom:4px;}
body.page-manager .section-title svg {width:17px;height:17px;color:var(--primary);flex-shrink:0;}
body.page-manager .section-hint {color:var(--muted);font-size:0.78rem;line-height:1.6;margin-bottom:14px;}
body.page-manager .section.danger-zone {border-color:rgba(255,59,48,0.3);}
body.page-manager .section.danger-zone .section-title svg {color:var(--danger);}
body.page-manager .fg {margin-bottom:12px;}
body.page-manager .f-label {display:block;font-size:0.8rem;font-weight:700;color:var(--muted);margin-bottom:6px;}
body.page-manager .f-input, body.page-manager select.f-input {width:100%;padding:11px 13px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';font-size:0.88rem;transition:border-color var(--transition-fast);}
body.page-manager .f-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-manager .f-input:disabled {opacity:0.6;}
body.page-manager .f-current {font-size:0.8rem;color:var(--muted);margin-bottom:10px;}
body.page-manager .f-current b {color:var(--text);font-weight:700;}
body.page-manager .btn-submit {padding:11px 20px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 16px rgba(0,113,227,0.2);}
body.page-manager .btn-submit:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-manager .btn-submit:disabled {opacity:0.5;cursor:default;transform:none;}
body.page-manager .btn-ghost {padding:11px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text);font-family:'Cairo';font-weight:700;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-manager .btn-ghost:hover {background:var(--input-bg);}
body.page-manager .btn-danger {padding:11px 20px;border:none;border-radius:var(--radius-sm);background:var(--danger);color:#fff;font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-manager .btn-danger:hover {background:#d9291e;}
body.page-manager .btn-danger:disabled {opacity:0.5;cursor:default;}
body.page-manager .btn-outline-danger {padding:11px 20px;border:1.5px solid var(--danger);border-radius:var(--radius-sm);background:transparent;color:var(--danger);font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-manager .btn-outline-danger:hover {background:rgba(255,59,48,0.08);}
body.page-manager .verify-status {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
body.page-manager .status-pill {font-size:0.75rem;font-weight:800;padding:4px 12px;border-radius:var(--radius-full);}
body.page-manager .st-verified {background:rgba(52,199,89,0.12);color:#15803d;}
[data-theme="dark"].page-manager .st-verified {color:#34c759;}
body.page-manager .st-pending {background:rgba(255,149,0,0.12);color:#a16207;}
[data-theme="dark"].page-manager .st-pending {color:#ff9500;}
body.page-manager .st-none {background:var(--input-bg);color:var(--muted);}
body.page-manager .login-gate {text-align:center;padding:60px 20px;}
body.page-manager .login-gate a {display:inline-block;margin-top:14px;padding:10px 22px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none;font-weight:800;font-size:0.86rem;transition:all var(--transition-fast);}
body.page-manager .login-gate a:hover {background:var(--primary-h);}
body.page-manager .err {display:none;color:var(--danger);font-size:0.8rem;margin-bottom:10px;padding:8px 12px;background:rgba(255,59,48,0.08);border-radius:var(--radius-sm);}
body.page-manager .err.show {display:block;}
body.page-manager .modal-bd {position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
body.page-manager .modal-bd.show {display:flex;}
body.page-manager .modal-box {background:var(--modal-bg);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
body.page-manager .modal-t {display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.05rem;margin-bottom:14px;}
body.page-manager .modal-t svg {color:var(--primary);flex-shrink:0;}
body.page-manager .modal-t.danger-t svg {color:var(--danger);}
body.page-manager .modal-footer {display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
body.page-manager .otp-input {width:100%;padding:14px;text-align:center;letter-spacing:8px;font-size:1.4rem;font-weight:800;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';margin-bottom:12px;}
body.page-manager .otp-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-manager .otp-actions {display:flex;align-items:center;justify-content:space-between;font-size:0.78rem;color:var(--muted);}
body.page-manager .link-btn {background:none;border:none;color:var(--primary);font-family:'Cairo';font-weight:700;font-size:0.78rem;cursor:pointer;padding:0;}
body.page-manager .link-btn:disabled {color:var(--muted);cursor:default;}
body.page-manager .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:11px 22px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:700;z-index:999;opacity:0;transition:opacity var(--transition-base);pointer-events:none;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center;}
body.page-manager .toast.show {opacity:1;}
body.page-manager .toast.toast-error {background:var(--danger);color:#fff;}
@media (max-width: 480px) {
body.page-manager .verify-status {flex-direction:column;align-items:stretch;}
body.page-manager .verify-status .btn-submit {width:100%;}
}
body.page-profile .reel-card {position:relative;width:100%;max-width:260px;aspect-ratio:9/16;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform var(--transition-fast), box-shadow var(--transition-fast);}
body.page-profile .reel-card:hover {transform:scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,0.4);}
body.page-profile .reel-thumb-video {width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
body.page-profile .reel-play-badge {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:var(--radius-full);background:rgba(0,0,0,0.5);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);transition:all var(--transition-fast);}
body.page-profile .reel-card:hover .reel-play-badge {transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,0.6);}
body.page-profile .reel-tag {position:absolute;top:12px;inset-inline-start:12px;background:rgba(0,0,0,0.6);color:#fff;font-size:0.74rem;font-weight:700;padding:5px 12px;border-radius:var(--radius-full);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.1);}
body.page-profile .reel-detect-badge {display:flex;align-items:center;gap:8px;margin-top:10px;font-size:0.82rem;color:var(--primary);font-weight:700;background:var(--primary-light);padding:6px 12px;border-radius:var(--radius-sm);width:fit-content;}
body.page-profile .post-card {
background:var(--post-bg);
border:1px solid var(--border);
border-radius:var(--radius-lg);
overflow:hidden;
transition:all var(--transition-base);
position:relative;
}
body.page-profile .post-card:hover {border-color:var(--primary-border);transform:translateY(-3px);box-shadow:var(--shadow-lg);}
body.page-profile .card-img {width:100%;max-height:380px;object-fit:cover;display:block;transition:transform var(--transition-slow);}
body.page-profile .post-card:hover .card-img {transform:scale(1.01);}
body.page-profile .card-video {
width:100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--radius-md);
box-shadow: var(--shadow);
object-fit: contain;
display:block;
}
body.page-profile .card-body {padding:22px 26px;}
body.page-profile .pub-row {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
body.page-profile .pub-info {display:flex;align-items:center;gap:14px;flex:1;min-width:0;}
body.page-profile .pub-avatar {
width:48px;height:48px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;
font-size:1.2rem;cursor:pointer;transition:all var(--transition-fast);
border:2.5px solid var(--border);
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
body.page-profile .pub-avatar:hover {transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,0.15);}
body.page-profile .pub-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-profile .pub-meta {min-width:0;}
body.page-profile .pub-name {
font-weight:800;font-size:1rem;color:var(--text);
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
cursor:pointer;transition:color var(--transition-fast);
}
body.page-profile .pub-name:hover {color:var(--primary);}
body.page-profile .pub-date {font-size:0.78rem;color:var(--muted);margin-top:4px;font-weight:500;}
body.page-profile .role-badge {
display:inline-flex;align-items:center;gap:5px;
padding:3px 12px;border-radius:var(--radius-full);
font-size:0.7rem;font-weight:800;flex-shrink:0;
letter-spacing:0.02em;
}
body.page-profile .badge-admin {background:var(--primary-light);color:var(--primary);border:1.5px solid var(--primary-border);}
body.page-profile .badge-member {background:rgba(128,128,128,0.06);color:var(--muted);border:1.5px solid var(--border);}
body.page-profile .badge-verified {display:inline-flex;align-items:center;}
body.page-profile .badge-verified svg {width:16px;height:16px;}
body.page-profile .pub-actions {display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-profile .btn-icon {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:9px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;
}
body.page-profile .btn-icon:hover {background:var(--primary-light);color:var(--primary);}
body.page-profile .btn-icon:active {transform:scale(0.88);}
body.page-profile .btn-icon svg {width:17px;height:17px;}
body.page-profile .react-wrap {position:relative;display:inline-flex;align-items:center;}
body.page-profile .react-main-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-profile .react-main-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-profile .react-main-btn.reacted {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
body.page-profile .react-main-btn:active {transform:scale(0.94);}
body.page-profile .react-main-btn svg {width:16px;height:16px;}
body.page-profile .react-menu {
position:absolute;bottom:calc(100% + 12px);right:0;
background:var(--modal-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
padding:8px 12px;display:none;gap:6px;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
z-index:10;white-space:nowrap;
box-shadow:var(--shadow-lg);
animation:index-menuPop 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes index-menuPop{from{opacity:0;transform:translateY(8px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
body.page-profile .react-menu.show {display:flex;}
body.page-profile .react-emoji-btn {
background:none;border:none;cursor:pointer;
padding:8px 10px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);line-height:1;
display:flex;align-items:center;justify-content:center;
color:var(--muted);
}
body.page-profile .react-emoji-btn:hover {background:var(--primary-light);transform:scale(1.25);color:var(--primary);}
body.page-profile .react-emoji-btn.active {background:var(--primary-light);color:var(--primary);}
body.page-profile .react-emoji-btn svg {width:20px;height:20px;}
body.page-profile .react-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-profile .react-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-profile .react-btn:active {transform:scale(0.94);}
body.page-profile .react-btn svg {width:16px;height:16px;}
body.page-profile .comments-section {border-top:1.5px solid var(--border);padding-top:16px;margin-top:6px;}
body.page-profile .comments-toggle {
display:flex;align-items:center;gap:8px;
background:none;border:none;color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;padding:4px 0;margin-bottom:14px;
transition:all var(--transition-fast);font-weight:700;
}
body.page-profile .comments-toggle:hover {color:var(--primary);}
body.page-profile .comments-toggle svg {width:16px;height:16px;transition:transform var(--transition-base);}
body.page-profile .comments-toggle.expanded svg {transform:rotate(180deg);}
body.page-profile .comments-list {display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
body.page-profile .comment {display:flex;gap:12px;align-items:flex-start;animation:index-fadeIn 0.35s ease;}
@keyframes index-fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
body.page-profile .c-avatar {
width:36px;height:36px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:0.9rem;color:#fff;
flex-shrink:0;overflow:hidden;
border:2px solid var(--border);
box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
body.page-profile .c-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-profile .c-bubble {background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:12px 16px;flex:1;min-width:0;transition:all var(--transition-fast);}
body.page-profile .c-bubble:hover {background:rgba(128,128,128,0.08);}
body.page-profile .c-name {font-weight:800;font-size:0.85rem;color:var(--text);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.page-profile .c-text {
font-size:0.9rem;
color:var(--muted);
line-height:1.8;
word-break:break-word;
}
body.page-profile .c-del {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);
font-size:0.78rem;font-family:'Cairo',sans-serif;
transition:all var(--transition-fast);margin-right:auto;
font-weight:600;
}
body.page-profile .c-del:hover {color:var(--danger);background:rgba(255,59,48,0.08);}
body.page-profile .comment-input-row {display:flex;gap:10px;align-items:center;}
body.page-profile .comment-input {
flex:1;padding:11px 18px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.9rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-profile .comment-input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-profile .comment-input::placeholder {color:var(--muted);font-weight:400;}
body.page-profile .btn-send-comment {
width:40px;height:40px;
background:var(--primary);
border:none;border-radius:var(--radius-full);
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);flex-shrink:0;
box-shadow:0 2px 8px rgba(0,113,227,0.25);
}
body.page-profile .btn-send-comment:hover {background:var(--primary-h);transform:scale(1.1);box-shadow:0 4px 16px rgba(0,113,227,0.35);}
body.page-profile .btn-send-comment:active {transform:scale(0.92);}
body.page-profile .btn-send-comment svg {width:16px;height:16px;stroke:#fff;}
body.page-profile .load-more-btn {display:block;width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--radius-md, 14px);background:var(--card, transparent);color:var(--text);font-family:'Cairo',sans-serif;font-weight:800;font-size:0.88rem;cursor:pointer;transition:all 0.2s;}
body.page-profile .load-more-btn:hover {background:var(--primary, #0071e3);color:#fff;border-color:transparent;}
body.page-profile .modal-box.wide {max-width:640px;}
body.page-profile .modal-t {font-size:1.15rem;font-weight:900;color:var(--text);margin-bottom:24px;display:flex;align-items:center;gap:12px;}
body.page-profile .modal-t svg {width:22px;height:22px;color:var(--primary);}
body.page-profile .tabs {display:flex;gap:4px;background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:4px;margin-bottom:24px;}
body.page-profile .tab {
flex:1;padding:10px;border:none;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;font-weight:800;
background:none;color:var(--muted);
transition:all var(--transition-fast);
}
body.page-profile .tab.active {background:var(--primary);color:var(--black);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
body.page-profile .tab:hover:not(.active) {color:var(--text);}
body.page-profile .tab-pane {display:none;}
body.page-profile .tab-pane.active {display:block;animation:index-fadeIn 0.35s ease;}
body.page-profile .fg {margin-bottom:18px;}
body.page-profile .fg label {display:block;margin-bottom:7px;color:var(--muted);font-size:0.86rem;font-weight:700;}
body.page-profile .fg input {
width:100%;padding:13px 16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.92rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-profile .fg input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-profile .fg input::placeholder {color:var(--muted);font-weight:400;}
body.page-profile .err {
background:var(--primary-light);
color:var(--primary);
padding:12px 16px;border-radius:var(--radius-md);
font-size:0.88rem;margin-bottom:16px;
display:none;border:1.5px solid var(--primary-border);
font-weight:700;
}
body.page-profile .btn-submit {
width:100%;padding:14px;
background:var(--primary);
color:var(--black);
font-weight:800;border:none;border-radius:var(--radius-md);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.95rem;transition:all var(--transition-fast);margin-top:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
body.page-profile .btn-submit:hover {background:var(--primary-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,113,227,0.35);}
body.page-profile .btn-submit:active {transform:translateY(0) scale(0.97);}
body.page-profile .btn-submit:disabled {opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
body.page-profile .post-editor {
width:100%;min-height:160px;max-height:360px;overflow-y:auto;
padding:16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Noto Naskh Arabic',serif;
font-size:1.02rem;line-height:2;
outline:none;transition:all var(--transition-fast);resize:vertical;
}
body.page-profile .post-editor:focus {border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-profile .post-editor[placeholder]:empty:before {content:attr(placeholder);color:var(--muted);pointer-events:none;font-weight:400;}
body.page-profile .post-editor h2 {font-size:1.35rem;font-weight:900;color:var(--text);margin:10px 0 6px;}
body.page-profile .post-editor h3 {font-size:1.15rem;font-weight:800;color:var(--text);margin:8px 0 6px;}
body.page-profile .post-editor blockquote {border-right:3px solid var(--primary);padding-right:14px;color:var(--muted);margin:10px 0;font-style:italic;}
body.page-profile .post-editor ul {padding-right:22px;margin:8px 0;}
body.page-profile .post-editor hr {border:none;border-top:1.5px solid var(--border);margin:12px 0;}
body.page-profile .fmt-bar {display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center;padding:8px;background:var(--sort-btn-bg);border-radius:var(--radius-md);border:1.5px solid var(--border);}
body.page-profile .fmt-btn {
background:var(--black);
border:1.5px solid var(--border);
color:var(--muted);
padding:7px 12px;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.8rem;font-weight:700;
transition:all var(--transition-fast);
display:flex;align-items:center;justify-content:center;
min-width:36px;height:36px;
}
body.page-profile .fmt-btn:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-profile .fmt-btn:active {transform:scale(0.9);}
body.page-profile .fmt-btn svg {width:15px;height:15px;}
body.page-profile .fmt-sep {width:1px;background:var(--border);margin:0 4px;height:22px;}
body.page-profile .modal-footer {display:flex;gap:12px;justify-content:flex-end;margin-top:24px;}
body.page-profile .btn-ghost {
padding:12px 22px;
background:var(--sort-btn-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.9rem;font-weight:700;
transition:all var(--transition-fast);
}
body.page-profile .btn-ghost:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-profile .btn-ghost:active {transform:scale(0.95);}
body.page-profile .media-preview-wrap {position:relative;margin-bottom:16px;display:none;}
body.page-profile .media-preview-wrap img {max-width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;}
body.page-profile .media-preview-wrap video {max-width:100%;max-height:220px;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;background:#000;}
body.page-profile .media-preview-wrap .remove-media {
position:absolute;top:10px;left:10px;
background:rgba(0,0,0,0.75);
border:none;color:#fff;
border-radius:var(--radius-full);width:32px;height:32px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
body.page-profile .media-preview-wrap .remove-media:hover {background:var(--danger);transform:scale(1.1);}
body.page-profile .media-preview-wrap .remove-media svg {width:14px;height:14px;}
/* إعدادات النشر الجديدة: الخصوصية + الجدولة (صفحة البروفايل) */
body.page-profile .post-settings-box {background:var(--input-bg, rgba(0,0,0,0.03));border:1px solid var(--border);border-radius:var(--radius-md,14px);padding:14px;margin:14px 0;}
body.page-profile .privacy-choices {display:flex;gap:8px;flex-wrap:wrap;}
body.page-profile .privacy-opt {display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.82rem;cursor:pointer;transition:all 0.2s;}
body.page-profile .privacy-opt:hover {border-color:var(--primary-border);}
body.page-profile .privacy-opt.active {background:var(--primary);color:var(--black);border-color:transparent;}
body.page-profile .privacy-opt svg {flex-shrink:0;}
body.page-profile .schedule-input {width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm,10px);background:var(--card);color:var(--text);font-family:'Cairo',sans-serif;font-size:0.85rem;}
body.page-profile .schedule-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-profile #scheduleWrap {margin-top:12px;}
/* زر إنشاء منشور في تبويب المنشورات بالبروفايل */
body.page-profile .create-post-cta {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;margin-bottom:16px;border:none;border-radius:var(--radius-md,14px);background:var(--primary);color:var(--black);font-family:'Cairo',sans-serif;font-weight:800;font-size:0.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:all 0.2s;}
body.page-profile .create-post-cta:hover {background:var(--primary-h);transform:translateY(-1px);}
/* شارة حالة المنشور (خاص/مسودة/مجدول) */
body.page-profile .post-status-badge {display:inline-flex;align-items:center;gap:4px;font-size:0.7rem;font-weight:800;padding:3px 9px;border-radius:999px;margin-inline-start:6px;}
body.page-profile .post-status-badge.st-private {background:rgba(255,149,0,0.12);color:#a16207;}
body.page-profile .post-status-badge.st-draft {background:rgba(142,142,147,0.15);color:#636366;}
body.page-profile .post-status-badge.st-scheduled {background:rgba(10,132,255,0.12);color:#0071e3;}
/* الرد داخل التعليقات */
body.page-profile .reply-btn, body.page-index .reply-btn {background:none;border:none;color:var(--muted);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.74rem;cursor:pointer;padding:0;margin-inline-start:8px;}
body.page-profile .reply-btn:hover, body.page-index .reply-btn:hover {color:var(--primary);}
body.page-profile .replies-list, body.page-index .replies-list {margin-inline-start:38px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
body.page-profile .reply-input-row, body.page-index .reply-input-row {display:flex;gap:8px;margin-inline-start:38px;margin-top:6px;}
/* الرد داخل تعليقات الريلز */
body.page-short .reply-btn {background:none;border:none;color:rgba(255,255,255,0.6);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.72rem;cursor:pointer;padding:0;margin-inline-start:8px;}
body.page-short .reply-btn:hover {color:#fff;}
body.page-short .replies-list {margin-inline-start:30px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
/* اقتباس الرد داخل فقاعة الرسالة (خاص وجماعي) */
body.page-chat .msg-reply-quote, body.page-group .msg-reply-quote {
font-size:0.76rem; opacity:0.75; border-inline-start:2.5px solid currentColor;
padding-inline-start:8px; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
body.page-profile .post-text {
font-family:'Noto Naskh Arabic',serif;
line-height:2;color:var(--text);font-size:1.05rem;
letter-spacing:0.02px;
white-space:pre-wrap;margin-bottom:18px;word-break:break-word;
text-wrap:pretty;
}
body.page-profile .post-html h2 {font-size:1.3rem;font-weight:900;color:var(--text);margin:12px 0 8px;}
body.page-profile .post-html h3 {font-size:1.1rem;font-weight:800;color:var(--text);margin:10px 0 6px;}
body.page-profile .post-html blockquote {border-right:3px solid var(--primary);padding-right:16px;color:var(--muted);margin:12px 0;font-style:italic;background:var(--sort-btn-bg);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
body.page-profile .post-html ul {padding-right:24px;margin:10px 0;}
body.page-profile .post-html li {margin:5px 0;}
body.page-profile .post-html hr {border:none;border-top:1.5px solid var(--border);margin:14px 0;}
body.page-profile .post-html b, body.page-profile .post-html strong {color:var(--text);font-weight:800;}
body.page-profile .post-html em {color:var(--muted);}
body.page-profile .post-html a {color:var(--primary);text-decoration:none;border-bottom:1.5px solid var(--primary-border);transition:all var(--transition-fast);}
body.page-profile .post-html a:hover {border-color:var(--primary);opacity:0.8;}
body.page-profile .post-html a.post-link {word-break:break-all;}
body.page-profile .link-preview-card {
display:block;margin-top:12px;border:1.5px solid var(--border);border-radius:var(--radius-md);
overflow:hidden;background:var(--card);text-decoration:none !important;color:inherit;max-width:440px;
transition:all var(--transition-fast);
}
body.page-profile .link-preview-card:hover {border-color:var(--primary-border);transform:translateY(-2px);box-shadow:var(--shadow);}
body.page-profile .link-preview-img {width:100%;max-height:220px;object-fit:cover;display:block;background:var(--dark);transition:transform var(--transition-slow);}
body.page-profile .link-preview-card:hover .link-preview-img {transform:scale(1.02);}
body.page-profile .link-preview-body {padding:12px 16px;}
body.page-profile .link-preview-site {font-size:0.7rem;color:var(--primary);font-weight:800;text-transform:uppercase;margin-bottom:4px;letter-spacing:0.05em;}
body.page-profile .link-preview-title {font-size:0.95rem;font-weight:800;line-height:1.4;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-profile .link-preview-desc {font-size:0.82rem;color:var(--muted);margin-top:5px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
body.page-profile .reactions-row {display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
body.page-profile .mention-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity 0.15s;}
body.page-profile .mention-tag:hover {text-decoration:underline;opacity:0.8;}
body.page-profile .hashtag-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity 0.15s;}
body.page-profile .hashtag-tag:hover {text-decoration:underline;opacity:0.8;}
/* إصلاح توافق القوائم المنسدلة مع الوضع الإنجليزي LTR (كانت مثبتة left:0 بافتراض RTL فقط) */
html[dir="ltr"].page-index .user-dropdown,
html[dir="ltr"].page-index .notif-dropdown,
html[dir="ltr"].page-index .post-opts-menu,
html[dir="ltr"].page-index .lang-menu {
left: auto;
right: 0;
}
/* زر الحفظ (bookmark) في المنشورات */
body.page-index .save-btn.saved, body.page-profile .save-btn.saved, body.page-short .save-btn.saved {color:#f5a623;}
/* التثبيت والحفظ في البروفايل */
body.page-profile .pin-btn.pinned {color:var(--primary);}
body.page-profile .post-status-badge.st-pinned {background:rgba(0,113,227,0.12);color:var(--primary);display:inline-flex;align-items:center;gap:3px;}
body.page-profile .post-status-badge.st-pinned svg {width:10px;height:10px;}
html.page-save {
--black: #ffffff; --dark: #f5f5f7; --card: #ffffff; --border: rgba(0,0,0,0.08);
--text: #1c1c1e; --muted: #8e8e93; --primary: #0071e3; --primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08); --primary-border: rgba(0,113,227,0.25);
--topbar-bg: rgba(255,255,255,0.72); --input-bg: #f2f2f7; --modal-bg:#ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--danger: #ff3b30; --success: #34c759;
}
[data-theme="dark"].page-save {
--black: #000000; --dark: #121212; --card: #1c1c1e; --border: rgba(255,255,255,0.08);
--text: #f5f5f7; --muted: #8e8e93; --primary: #0a84ff; --primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12); --primary-border: rgba(10,132,255,0.3);
--topbar-bg: rgba(0,0,0,0.65); --input-bg: #1c1c1e; --modal-bg:#1c1c1e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
}
body.page-save, body.page-save * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body.page-save {background:var(--black);color:var(--text);font-family:'Cairo',sans-serif;min-height:100vh;transition:background var(--transition-base),color var(--transition-base);}
body.page-save .topbar {position:fixed;top:0;left:0;right:0;height:60px;background:var(--topbar-bg);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:50;}
body.page-save .back-btn {display:flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;font-weight:800;font-size:0.95rem;}
body.page-save .icon-btn {width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all var(--transition-fast);}
body.page-save .icon-btn:hover {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);}
body.page-save .wrap {max-width:640px;margin:0 auto;padding:84px 16px 60px;}
body.page-save .page-title {font-size:1.35rem;font-weight:900;margin-bottom:4px;}
body.page-save .page-sub {color:var(--muted);font-size:0.88rem;margin-bottom:22px;}
body.page-save .acc-summary {display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow);}
body.page-save .acc-avatar {width:58px;height:58px;border-radius:var(--radius-full);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;overflow:hidden;flex-shrink:0;}
body.page-save .acc-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-save .acc-name {font-weight:900;font-size:1.05rem;display:flex;align-items:center;gap:5px;}
body.page-save .acc-name .badge-verified svg {width:15px;height:15px;color:#0071e3;flex-shrink:0;}
body.page-save .acc-meta {color:var(--muted);font-size:0.8rem;margin-top:3px;}
body.page-save .section {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;transition:all var(--transition-base);}
body.page-save .section-title {font-weight:800;font-size:0.95rem;display:flex;align-items:center;gap:8px;margin-bottom:4px;}
body.page-save .section-title svg {width:17px;height:17px;color:var(--primary);flex-shrink:0;}
body.page-save .section-hint {color:var(--muted);font-size:0.78rem;line-height:1.6;margin-bottom:14px;}
body.page-save .section.danger-zone {border-color:rgba(255,59,48,0.3);}
body.page-save .section.danger-zone .section-title svg {color:var(--danger);}
body.page-save .fg {margin-bottom:12px;}
body.page-save .f-label {display:block;font-size:0.8rem;font-weight:700;color:var(--muted);margin-bottom:6px;}
body.page-save .f-input, body.page-save select.f-input {width:100%;padding:11px 13px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';font-size:0.88rem;transition:border-color var(--transition-fast);}
body.page-save .f-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-save .f-input:disabled {opacity:0.6;}
body.page-save .f-current {font-size:0.8rem;color:var(--muted);margin-bottom:10px;}
body.page-save .f-current b {color:var(--text);font-weight:700;}
body.page-save .btn-submit {padding:11px 20px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 16px rgba(0,113,227,0.2);}
body.page-save .btn-submit:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-save .btn-submit:disabled {opacity:0.5;cursor:default;transform:none;}
body.page-save .btn-ghost {padding:11px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text);font-family:'Cairo';font-weight:700;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-save .btn-ghost:hover {background:var(--input-bg);}
body.page-save .btn-danger {padding:11px 20px;border:none;border-radius:var(--radius-sm);background:var(--danger);color:#fff;font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-save .btn-danger:hover {background:#d9291e;}
body.page-save .btn-danger:disabled {opacity:0.5;cursor:default;}
body.page-save .btn-outline-danger {padding:11px 20px;border:1.5px solid var(--danger);border-radius:var(--radius-sm);background:transparent;color:var(--danger);font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-save .btn-outline-danger:hover {background:rgba(255,59,48,0.08);}
body.page-save .verify-status {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
body.page-save .status-pill {font-size:0.75rem;font-weight:800;padding:4px 12px;border-radius:var(--radius-full);}
body.page-save .st-verified {background:rgba(52,199,89,0.12);color:#15803d;}
[data-theme="dark"].page-save .st-verified {color:#34c759;}
body.page-save .st-pending {background:rgba(255,149,0,0.12);color:#a16207;}
[data-theme="dark"].page-save .st-pending {color:#ff9500;}
body.page-save .st-none {background:var(--input-bg);color:var(--muted);}
body.page-save .login-gate {text-align:center;padding:60px 20px;}
body.page-save .login-gate a {display:inline-block;margin-top:14px;padding:10px 22px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none;font-weight:800;font-size:0.86rem;transition:all var(--transition-fast);}
body.page-save .login-gate a:hover {background:var(--primary-h);}
body.page-save .err {display:none;color:var(--danger);font-size:0.8rem;margin-bottom:10px;padding:8px 12px;background:rgba(255,59,48,0.08);border-radius:var(--radius-sm);}
body.page-save .err.show {display:block;}
body.page-save .modal-bd {position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
body.page-save .modal-bd.show {display:flex;}
body.page-save .modal-box {background:var(--modal-bg);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
body.page-save .modal-t {display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.05rem;margin-bottom:14px;}
body.page-save .modal-t svg {color:var(--primary);flex-shrink:0;}
body.page-save .modal-t.danger-t svg {color:var(--danger);}
body.page-save .modal-footer {display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
body.page-save .otp-input {width:100%;padding:14px;text-align:center;letter-spacing:8px;font-size:1.4rem;font-weight:800;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';margin-bottom:12px;}
body.page-save .otp-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-save .otp-actions {display:flex;align-items:center;justify-content:space-between;font-size:0.78rem;color:var(--muted);}
body.page-save .link-btn {background:none;border:none;color:var(--primary);font-family:'Cairo';font-weight:700;font-size:0.78rem;cursor:pointer;padding:0;}
body.page-save .link-btn:disabled {color:var(--muted);cursor:default;}
body.page-save .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:11px 22px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:700;z-index:999;opacity:0;transition:opacity var(--transition-base);pointer-events:none;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center;}
body.page-save .toast.show {opacity:1;}
body.page-save .toast.toast-error {background:var(--danger);color:#fff;}
body.page-save .reel-card {position:relative;width:100%;max-width:260px;aspect-ratio:9/16;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform var(--transition-fast), box-shadow var(--transition-fast);}
body.page-save .reel-card:hover {transform:scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,0.4);}
body.page-save .reel-thumb-video {width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
body.page-save .reel-play-badge {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:var(--radius-full);background:rgba(0,0,0,0.5);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);transition:all var(--transition-fast);}
body.page-save .reel-card:hover .reel-play-badge {transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,0.6);}
body.page-save .reel-tag {position:absolute;top:12px;inset-inline-start:12px;background:rgba(0,0,0,0.6);color:#fff;font-size:0.74rem;font-weight:700;padding:5px 12px;border-radius:var(--radius-full);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.1);}
body.page-save .reel-detect-badge {display:flex;align-items:center;gap:8px;margin-top:10px;font-size:0.82rem;color:var(--primary);font-weight:700;background:var(--primary-light);padding:6px 12px;border-radius:var(--radius-sm);width:fit-content;}
body.page-save .post-card {
background:var(--post-bg);
border:1px solid var(--border);
border-radius:var(--radius-lg);
overflow:hidden;
transition:all var(--transition-base);
position:relative;
}
body.page-save .post-card:hover {border-color:var(--primary-border);transform:translateY(-3px);box-shadow:var(--shadow-lg);}
body.page-save .card-img {width:100%;max-height:380px;object-fit:cover;display:block;transition:transform var(--transition-slow);}
body.page-save .post-card:hover .card-img {transform:scale(1.01);}
body.page-save .card-video {
width:100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--radius-md);
box-shadow: var(--shadow);
object-fit: contain;
display:block;
}
body.page-save .card-body {padding:22px 26px;}
body.page-save .pub-row {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
body.page-save .pub-info {display:flex;align-items:center;gap:14px;flex:1;min-width:0;}
body.page-save .pub-avatar {
width:48px;height:48px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;
font-size:1.2rem;cursor:pointer;transition:all var(--transition-fast);
border:2.5px solid var(--border);
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
body.page-save .pub-avatar:hover {transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,0.15);}
body.page-save .pub-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-save .pub-meta {min-width:0;}
body.page-save .pub-name {
font-weight:800;font-size:1rem;color:var(--text);
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
cursor:pointer;transition:color var(--transition-fast);
}
body.page-save .pub-name:hover {color:var(--primary);}
body.page-save .pub-date {font-size:0.78rem;color:var(--muted);margin-top:4px;font-weight:500;}
body.page-save .role-badge {
display:inline-flex;align-items:center;gap:5px;
padding:3px 12px;border-radius:var(--radius-full);
font-size:0.7rem;font-weight:800;flex-shrink:0;
letter-spacing:0.02em;
}
body.page-save .badge-admin {background:var(--primary-light);color:var(--primary);border:1.5px solid var(--primary-border);}
body.page-save .badge-member {background:rgba(128,128,128,0.06);color:var(--muted);border:1.5px solid var(--border);}
body.page-save .badge-verified {display:inline-flex;align-items:center;}
body.page-save .badge-verified svg {width:16px;height:16px;}
body.page-save .pub-actions {display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-save .btn-icon {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:9px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;
}
body.page-save .btn-icon:hover {background:var(--primary-light);color:var(--primary);}
body.page-save .btn-icon:active {transform:scale(0.88);}
body.page-save .btn-icon svg {width:17px;height:17px;}
body.page-save .react-wrap {position:relative;display:inline-flex;align-items:center;}
body.page-save .react-main-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-save .react-main-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-save .react-main-btn.reacted {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
body.page-save .react-main-btn:active {transform:scale(0.94);}
body.page-save .react-main-btn svg {width:16px;height:16px;}
body.page-save .react-menu {
position:absolute;bottom:calc(100% + 12px);right:0;
background:var(--modal-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
padding:8px 12px;display:none;gap:6px;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
z-index:10;white-space:nowrap;
box-shadow:var(--shadow-lg);
animation:index-menuPop 0.25s cubic-bezier(0.16,1,0.3,1);
}
body.page-save .react-menu.show {display:flex;}
body.page-save .react-emoji-btn {
background:none;border:none;cursor:pointer;
padding:8px 10px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);line-height:1;
display:flex;align-items:center;justify-content:center;
color:var(--muted);
}
body.page-save .react-emoji-btn:hover {background:var(--primary-light);transform:scale(1.25);color:var(--primary);}
body.page-save .react-emoji-btn.active {background:var(--primary-light);color:var(--primary);}
body.page-save .react-emoji-btn svg {width:20px;height:20px;}
body.page-save .react-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-save .react-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-save .react-btn:active {transform:scale(0.94);}
body.page-save .react-btn svg {width:16px;height:16px;}
body.page-save .comments-section {border-top:1.5px solid var(--border);padding-top:16px;margin-top:6px;}
body.page-save .comments-toggle {
display:flex;align-items:center;gap:8px;
background:none;border:none;color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;padding:4px 0;margin-bottom:14px;
transition:all var(--transition-fast);font-weight:700;
}
body.page-save .comments-toggle:hover {color:var(--primary);}
body.page-save .comments-toggle svg {width:16px;height:16px;transition:transform var(--transition-base);}
body.page-save .comments-toggle.expanded svg {transform:rotate(180deg);}
body.page-save .comments-list {display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
body.page-save .comment {display:flex;gap:12px;align-items:flex-start;animation:index-fadeIn 0.35s ease;}
body.page-save .c-avatar {
width:36px;height:36px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:0.9rem;color:#fff;
flex-shrink:0;overflow:hidden;
border:2px solid var(--border);
box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
body.page-save .c-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-save .c-bubble {background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:12px 16px;flex:1;min-width:0;transition:all var(--transition-fast);}
body.page-save .c-bubble:hover {background:rgba(128,128,128,0.08);}
body.page-save .c-name {font-weight:800;font-size:0.85rem;color:var(--text);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.page-save .c-text {
font-size:0.9rem;
color:var(--muted);
line-height:1.8;
word-break:break-word;
}
body.page-save .c-del {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);
font-size:0.78rem;font-family:'Cairo',sans-serif;
transition:all var(--transition-fast);margin-right:auto;
font-weight:600;
}
body.page-save .c-del:hover {color:var(--danger);background:rgba(255,59,48,0.08);}
body.page-save .comment-input-row {display:flex;gap:10px;align-items:center;}
body.page-save .comment-input {
flex:1;padding:11px 18px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.9rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-save .comment-input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-save .comment-input::placeholder {color:var(--muted);font-weight:400;}
body.page-save .btn-send-comment {
width:40px;height:40px;
background:var(--primary);
border:none;border-radius:var(--radius-full);
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);flex-shrink:0;
box-shadow:0 2px 8px rgba(0,113,227,0.25);
}
body.page-save .btn-send-comment:hover {background:var(--primary-h);transform:scale(1.1);box-shadow:0 4px 16px rgba(0,113,227,0.35);}
body.page-save .btn-send-comment:active {transform:scale(0.92);}
body.page-save .btn-send-comment svg {width:16px;height:16px;stroke:#fff;}
body.page-save .load-more-btn {display:block;width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--radius-md, 14px);background:var(--card, transparent);color:var(--text);font-family:'Cairo',sans-serif;font-weight:800;font-size:0.88rem;cursor:pointer;transition:all 0.2s;}
body.page-save .load-more-btn:hover {background:var(--primary, #0071e3);color:#fff;border-color:transparent;}
body.page-save .modal-box.wide {max-width:640px;}
body.page-save .modal-t {font-size:1.15rem;font-weight:900;color:var(--text);margin-bottom:24px;display:flex;align-items:center;gap:12px;}
body.page-save .modal-t svg {width:22px;height:22px;color:var(--primary);}
body.page-save .tabs {display:flex;gap:4px;background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:4px;margin-bottom:24px;}
body.page-save .tab {
flex:1;padding:10px;border:none;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;font-weight:800;
background:none;color:var(--muted);
transition:all var(--transition-fast);
}
body.page-save .tab.active {background:var(--primary);color:var(--black);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
body.page-save .tab:hover:not(.active) {color:var(--text);}
body.page-save .tab-pane {display:none;}
body.page-save .tab-pane.active {display:block;animation:index-fadeIn 0.35s ease;}
body.page-save .fg {margin-bottom:18px;}
body.page-save .fg label {display:block;margin-bottom:7px;color:var(--muted);font-size:0.86rem;font-weight:700;}
body.page-save .fg input {
width:100%;padding:13px 16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.92rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-save .fg input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-save .fg input::placeholder {color:var(--muted);font-weight:400;}
body.page-save .err {
background:var(--primary-light);
color:var(--primary);
padding:12px 16px;border-radius:var(--radius-md);
font-size:0.88rem;margin-bottom:16px;
display:none;border:1.5px solid var(--primary-border);
font-weight:700;
}
body.page-save .btn-submit {
width:100%;padding:14px;
background:var(--primary);
color:var(--black);
font-weight:800;border:none;border-radius:var(--radius-md);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.95rem;transition:all var(--transition-fast);margin-top:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
body.page-save .btn-submit:hover {background:var(--primary-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,113,227,0.35);}
body.page-save .btn-submit:active {transform:translateY(0) scale(0.97);}
body.page-save .btn-submit:disabled {opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
body.page-save .post-editor {
width:100%;min-height:160px;max-height:360px;overflow-y:auto;
padding:16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Noto Naskh Arabic',serif;
font-size:1.02rem;line-height:2;
outline:none;transition:all var(--transition-fast);resize:vertical;
}
body.page-save .post-editor:focus {border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-save .post-editor[placeholder]:empty:before {content:attr(placeholder);color:var(--muted);pointer-events:none;font-weight:400;}
body.page-save .post-editor h2 {font-size:1.35rem;font-weight:900;color:var(--text);margin:10px 0 6px;}
body.page-save .post-editor h3 {font-size:1.15rem;font-weight:800;color:var(--text);margin:8px 0 6px;}
body.page-save .post-editor blockquote {border-right:3px solid var(--primary);padding-right:14px;color:var(--muted);margin:10px 0;font-style:italic;}
body.page-save .post-editor ul {padding-right:22px;margin:8px 0;}
body.page-save .post-editor hr {border:none;border-top:1.5px solid var(--border);margin:12px 0;}
body.page-save .fmt-bar {display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center;padding:8px;background:var(--sort-btn-bg);border-radius:var(--radius-md);border:1.5px solid var(--border);}
body.page-save .fmt-btn {
background:var(--black);
border:1.5px solid var(--border);
color:var(--muted);
padding:7px 12px;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.8rem;font-weight:700;
transition:all var(--transition-fast);
display:flex;align-items:center;justify-content:center;
min-width:36px;height:36px;
}
body.page-save .fmt-btn:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-save .fmt-btn:active {transform:scale(0.9);}
body.page-save .fmt-btn svg {width:15px;height:15px;}
body.page-save .fmt-sep {width:1px;background:var(--border);margin:0 4px;height:22px;}
body.page-save .modal-footer {display:flex;gap:12px;justify-content:flex-end;margin-top:24px;}
body.page-save .btn-ghost {
padding:12px 22px;
background:var(--sort-btn-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.9rem;font-weight:700;
transition:all var(--transition-fast);
}
body.page-save .btn-ghost:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-save .btn-ghost:active {transform:scale(0.95);}
body.page-save .media-preview-wrap {position:relative;margin-bottom:16px;display:none;}
body.page-save .media-preview-wrap img {max-width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;}
body.page-save .media-preview-wrap video {max-width:100%;max-height:220px;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;background:#000;}
body.page-save .media-preview-wrap .remove-media {
position:absolute;top:10px;left:10px;
background:rgba(0,0,0,0.75);
border:none;color:#fff;
border-radius:var(--radius-full);width:32px;height:32px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
body.page-save .media-preview-wrap .remove-media:hover {background:var(--danger);transform:scale(1.1);}
body.page-save .media-preview-wrap .remove-media svg {width:14px;height:14px;}
body.page-save .post-settings-box {background:var(--input-bg, rgba(0,0,0,0.03));border:1px solid var(--border);border-radius:var(--radius-md,14px);padding:14px;margin:14px 0;}
body.page-save .privacy-choices {display:flex;gap:8px;flex-wrap:wrap;}
body.page-save .privacy-opt {display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.82rem;cursor:pointer;transition:all 0.2s;}
body.page-save .privacy-opt:hover {border-color:var(--primary-border);}
body.page-save .privacy-opt.active {background:var(--primary);color:var(--black);border-color:transparent;}
body.page-save .privacy-opt svg {flex-shrink:0;}
body.page-save .schedule-input {width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm,10px);background:var(--card);color:var(--text);font-family:'Cairo',sans-serif;font-size:0.85rem;}
body.page-save .schedule-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-save #scheduleWrap {margin-top:12px;}
body.page-save .create-post-cta {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;margin-bottom:16px;border:none;border-radius:var(--radius-md,14px);background:var(--primary);color:var(--black);font-family:'Cairo',sans-serif;font-weight:800;font-size:0.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:all 0.2s;}
body.page-save .create-post-cta:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-save .post-status-badge {display:inline-flex;align-items:center;gap:4px;font-size:0.7rem;font-weight:800;padding:3px 9px;border-radius:999px;margin-inline-start:6px;}
body.page-save .post-status-badge.st-private {background:rgba(255,149,0,0.12);color:#a16207;}
body.page-save .post-status-badge.st-draft {background:rgba(142,142,147,0.15);color:#636366;}
body.page-save .post-status-badge.st-scheduled {background:rgba(10,132,255,0.12);color:#0071e3;}
body.page-save .reply-btn, body.page-index .reply-btn {background:none;border:none;color:var(--muted);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.74rem;cursor:pointer;padding:0;margin-inline-start:8px;}
body.page-save .reply-btn:hover, body.page-index .reply-btn:hover {color:var(--primary);}
body.page-save .replies-list, body.page-index .replies-list {margin-inline-start:38px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
body.page-save .reply-input-row, body.page-index .reply-input-row {display:flex;gap:8px;margin-inline-start:38px;margin-top:6px;}
body.page-save .post-text {
font-family:'Noto Naskh Arabic',serif;
line-height:2;color:var(--text);font-size:1.05rem;
letter-spacing:0.02px;
white-space:pre-wrap;margin-bottom:18px;word-break:break-word;
text-wrap:pretty;
}
body.page-save .post-html h2 {font-size:1.3rem;font-weight:900;color:var(--text);margin:12px 0 8px;}
body.page-save .post-html h3 {font-size:1.1rem;font-weight:800;color:var(--text);margin:10px 0 6px;}
body.page-save .post-html blockquote {border-right:3px solid var(--primary);padding-right:16px;color:var(--muted);margin:12px 0;font-style:italic;background:var(--sort-btn-bg);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
body.page-save .post-html ul {padding-right:24px;margin:10px 0;}
body.page-save .post-html li {margin:5px 0;}
body.page-save .post-html hr {border:none;border-top:1.5px solid var(--border);margin:14px 0;}
body.page-save .post-html b, body.page-save .post-html strong {color:var(--text);font-weight:800;}
body.page-save .post-html em {color:var(--muted);}
body.page-save .post-html a {color:var(--primary);text-decoration:none;border-bottom:1.5px solid var(--primary-border);transition:all var(--transition-fast);}
body.page-save .post-html a:hover {border-color:var(--primary);opacity:0.8;}
body.page-save .post-html a.post-link {word-break:break-all;}
body.page-save .link-preview-card {
display:block;margin-top:12px;border:1.5px solid var(--border);border-radius:var(--radius-md);
overflow:hidden;background:var(--card);text-decoration:none !important;color:inherit;max-width:440px;
transition:all var(--transition-fast);
}
body.page-save .link-preview-card:hover {border-color:var(--primary-border);transform:translateY(-2px);box-shadow:var(--shadow);}
body.page-save .link-preview-img {width:100%;max-height:220px;object-fit:cover;display:block;background:var(--dark);transition:transform var(--transition-slow);}
body.page-save .link-preview-card:hover .link-preview-img {transform:scale(1.02);}
body.page-save .link-preview-body {padding:12px 16px;}
body.page-save .link-preview-site {font-size:0.7rem;color:var(--primary);font-weight:800;text-transform:uppercase;margin-bottom:4px;letter-spacing:0.05em;}
body.page-save .link-preview-title {font-size:0.95rem;font-weight:800;line-height:1.4;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-save .link-preview-desc {font-size:0.82rem;color:var(--muted);margin-top:5px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
body.page-save .reactions-row {display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
body.page-save .mention-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity 0.15s;}
body.page-save .mention-tag:hover {text-decoration:underline;opacity:0.8;}
body.page-save .hashtag-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity 0.15s;}
body.page-save .hashtag-tag:hover {text-decoration:underline;opacity:0.8;}
body.page-index .save-btn.saved, body.page-save .save-btn.saved, body.page-short .save-btn.saved {color:#f5a623;}
body.page-save .pin-btn.pinned {color:var(--primary);}
body.page-save .post-status-badge.st-pinned {background:rgba(0,113,227,0.12);color:var(--primary);display:inline-flex;align-items:center;gap:3px;}
body.page-save .post-status-badge.st-pinned svg {width:10px;height:10px;}
/* الأجهزة/الجلسات وتنبيهات الأمان — /manager */
body.page-manager .session-row {display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
body.page-manager .session-row:last-child {border-bottom:none;}
body.page-manager .session-icon {width:38px;height:38px;border-radius:var(--radius-full);background:var(--input-bg);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;}
body.page-manager .session-info {flex:1;min-width:0;}
body.page-manager .session-name {font-weight:800;font-size:0.85rem;display:flex;align-items:center;flex-wrap:wrap;}
body.page-manager .session-meta {color:var(--muted);font-size:0.76rem;margin-top:2px;}
/* شارة الحساب الخاص + الحقول التعريفية الإضافية */
body.page-profile .private-badge {font-size:0.7rem;font-weight:800;background:rgba(142,142,147,0.15);color:var(--muted);padding:3px 9px;border-radius:999px;margin-inline-start:6px;}
body.page-profile .about-chips {display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
body.page-profile .about-chip {display:inline-flex;align-items:center;gap:4px;font-size:0.76rem;font-weight:700;color:var(--muted);background:var(--input-bg, rgba(0,0,0,0.04));padding:5px 11px;border-radius:999px;}
body.page-profile .about-chip svg {width:12px;height:12px;}
/* إعدادات الخصوصية بالبروفايل: صف تبديل، قائمة، سويتش */
body.page-profile .privacy-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;}
body.page-profile .privacy-row-title {font-weight:800;font-size:0.88rem;}
body.page-profile .privacy-row-hint {color:var(--muted);font-size:0.78rem;margin-top:2px;}
body.page-profile .switch {position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;}
body.page-profile .switch input {opacity:0;width:0;height:0;}
body.page-profile .switch .slider {position:absolute;cursor:pointer;inset:0;background-color:var(--border, #ccc);transition:0.2s;border-radius:999px;}
body.page-profile .switch .slider:before {position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:white;transition:0.2s;border-radius:50%;}
body.page-profile .switch input:checked + .slider {background-color:var(--primary);}
body.page-profile .switch input:checked + .slider:before {transform:translateX(-20px);}
body.page-profile #fMsgPrivacy {width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--text);font-family:'Cairo',sans-serif;font-size:0.85rem;}
body.page-profile .post-status-badge.st-close-friends {background:rgba(220,38,127,0.1);color:#dc267f;}
/* صفوف الأصدقاء المقربين (نفس تصميم الأجهزة بصفحة إدارة الحساب) */
body.page-profile .session-row {display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
body.page-profile .session-row:last-child {border-bottom:none;}
body.page-profile .session-icon {width:36px;height:36px;border-radius:999px;background:var(--input-bg);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;overflow:hidden;font-weight:800;}
body.page-profile .session-info {flex:1;min-width:0;}
body.page-profile .session-name {font-weight:800;font-size:0.84rem;}
body.page-profile .session-meta {color:var(--muted);font-size:0.75rem;margin-top:1px;}
body.page-profile .btn-outline-danger {padding:7px 14px;border:1.5px solid var(--danger, #ff3b30);border-radius:10px;background:transparent;color:var(--danger, #ff3b30);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.78rem;cursor:pointer;flex-shrink:0;}
body.page-profile .btn-outline-danger:hover {background:rgba(255,59,48,0.08);}
html.page-post {
--black: #ffffff; --dark: #f5f5f7; --card: #ffffff; --border: rgba(0,0,0,0.08);
--text: #1c1c1e; --muted: #8e8e93; --primary: #0071e3; --primary-h: #0051a2;
--primary-light: rgba(0,113,227,0.08); --primary-border: rgba(0,113,227,0.25);
--topbar-bg: rgba(255,255,255,0.72); --input-bg: #f2f2f7; --modal-bg:#ffffff;
--shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--avatar-gradient: linear-gradient(145deg, #0071e3, #42a5f5);
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--danger: #ff3b30; --success: #34c759;
}
[data-theme="dark"].page-post {
--black: #000000; --dark: #121212; --card: #1c1c1e; --border: rgba(255,255,255,0.08);
--text: #f5f5f7; --muted: #8e8e93; --primary: #0a84ff; --primary-h: #409cff;
--primary-light: rgba(10,132,255,0.12); --primary-border: rgba(10,132,255,0.3);
--topbar-bg: rgba(0,0,0,0.65); --input-bg: #1c1c1e; --modal-bg:#1c1c1e;
--shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--avatar-gradient: linear-gradient(145deg, #0a84ff, #5e5ce6);
}
body.page-post, body.page-post * {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body.page-post {background:var(--black);color:var(--text);font-family:'Cairo',sans-serif;min-height:100vh;transition:background var(--transition-base),color var(--transition-base);}
body.page-post .topbar {position:fixed;top:0;left:0;right:0;height:60px;background:var(--topbar-bg);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:50;}
body.page-post .back-btn {display:flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;font-weight:800;font-size:0.95rem;}
body.page-post .icon-btn {width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all var(--transition-fast);}
body.page-post .icon-btn:hover {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);}
body.page-post .wrap {max-width:640px;margin:0 auto;padding:84px 16px 60px;}
body.page-post .page-title {font-size:1.35rem;font-weight:900;margin-bottom:4px;}
body.page-post .page-sub {color:var(--muted);font-size:0.88rem;margin-bottom:22px;}
body.page-post .acc-summary {display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow);}
body.page-post .acc-avatar {width:58px;height:58px;border-radius:var(--radius-full);background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;overflow:hidden;flex-shrink:0;}
body.page-post .acc-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-post .acc-name {font-weight:900;font-size:1.05rem;display:flex;align-items:center;gap:5px;}
body.page-post .acc-name .badge-verified svg {width:15px;height:15px;color:#0071e3;flex-shrink:0;}
body.page-post .acc-meta {color:var(--muted);font-size:0.8rem;margin-top:3px;}
body.page-post .section {background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;transition:all var(--transition-base);}
body.page-post .section-title {font-weight:800;font-size:0.95rem;display:flex;align-items:center;gap:8px;margin-bottom:4px;}
body.page-post .section-title svg {width:17px;height:17px;color:var(--primary);flex-shrink:0;}
body.page-post .section-hint {color:var(--muted);font-size:0.78rem;line-height:1.6;margin-bottom:14px;}
body.page-post .section.danger-zone {border-color:rgba(255,59,48,0.3);}
body.page-post .section.danger-zone .section-title svg {color:var(--danger);}
body.page-post .fg {margin-bottom:12px;}
body.page-post .f-label {display:block;font-size:0.8rem;font-weight:700;color:var(--muted);margin-bottom:6px;}
body.page-post .f-input, body.page-post select.f-input {width:100%;padding:11px 13px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';font-size:0.88rem;transition:border-color var(--transition-fast);}
body.page-post .f-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-post .f-input:disabled {opacity:0.6;}
body.page-post .f-current {font-size:0.8rem;color:var(--muted);margin-bottom:10px;}
body.page-post .f-current b {color:var(--text);font-weight:700;}
body.page-post .btn-submit {padding:11px 20px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 16px rgba(0,113,227,0.2);}
body.page-post .btn-submit:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-post .btn-submit:disabled {opacity:0.5;cursor:default;transform:none;}
body.page-post .btn-ghost {padding:11px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text);font-family:'Cairo';font-weight:700;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-post .btn-ghost:hover {background:var(--input-bg);}
body.page-post .btn-danger {padding:11px 20px;border:none;border-radius:var(--radius-sm);background:var(--danger);color:#fff;font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-post .btn-danger:hover {background:#d9291e;}
body.page-post .btn-danger:disabled {opacity:0.5;cursor:default;}
body.page-post .btn-outline-danger {padding:11px 20px;border:1.5px solid var(--danger);border-radius:var(--radius-sm);background:transparent;color:var(--danger);font-family:'Cairo';font-weight:800;font-size:0.86rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-post .btn-outline-danger:hover {background:rgba(255,59,48,0.08);}
body.page-post .verify-status {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
body.page-post .status-pill {font-size:0.75rem;font-weight:800;padding:4px 12px;border-radius:var(--radius-full);}
body.page-post .st-verified {background:rgba(52,199,89,0.12);color:#15803d;}
[data-theme="dark"].page-post .st-verified {color:#34c759;}
body.page-post .st-pending {background:rgba(255,149,0,0.12);color:#a16207;}
[data-theme="dark"].page-post .st-pending {color:#ff9500;}
body.page-post .st-none {background:var(--input-bg);color:var(--muted);}
body.page-post .login-gate {text-align:center;padding:60px 20px;}
body.page-post .login-gate a {display:inline-block;margin-top:14px;padding:10px 22px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none;font-weight:800;font-size:0.86rem;transition:all var(--transition-fast);}
body.page-post .login-gate a:hover {background:var(--primary-h);}
body.page-post .err {display:none;color:var(--danger);font-size:0.8rem;margin-bottom:10px;padding:8px 12px;background:rgba(255,59,48,0.08);border-radius:var(--radius-sm);}
body.page-post .err.show {display:block;}
body.page-post .modal-bd {position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
body.page-post .modal-bd.show {display:flex;}
body.page-post .modal-box {background:var(--modal-bg);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
body.page-post .modal-t {display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.05rem;margin-bottom:14px;}
body.page-post .modal-t svg {color:var(--primary);flex-shrink:0;}
body.page-post .modal-t.danger-t svg {color:var(--danger);}
body.page-post .modal-footer {display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
body.page-post .otp-input {width:100%;padding:14px;text-align:center;letter-spacing:8px;font-size:1.4rem;font-weight:800;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';margin-bottom:12px;}
body.page-post .otp-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-post .otp-actions {display:flex;align-items:center;justify-content:space-between;font-size:0.78rem;color:var(--muted);}
body.page-post .link-btn {background:none;border:none;color:var(--primary);font-family:'Cairo';font-weight:700;font-size:0.78rem;cursor:pointer;padding:0;}
body.page-post .link-btn:disabled {color:var(--muted);cursor:default;}
body.page-post .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:11px 22px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:700;z-index:999;opacity:0;transition:opacity var(--transition-base);pointer-events:none;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center;}
body.page-post .toast.show {opacity:1;}
body.page-post .toast.toast-error {background:var(--danger);color:#fff;}
body.page-post .reel-card {position:relative;width:100%;max-width:260px;aspect-ratio:9/16;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform var(--transition-fast), box-shadow var(--transition-fast);}
body.page-post .reel-card:hover {transform:scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,0.4);}
body.page-post .reel-thumb-video {width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
body.page-post .reel-play-badge {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:var(--radius-full);background:rgba(0,0,0,0.5);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);transition:all var(--transition-fast);}
body.page-post .reel-card:hover .reel-play-badge {transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,0.6);}
body.page-post .reel-tag {position:absolute;top:12px;inset-inline-start:12px;background:rgba(0,0,0,0.6);color:#fff;font-size:0.74rem;font-weight:700;padding:5px 12px;border-radius:var(--radius-full);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.1);}
body.page-post .reel-detect-badge {display:flex;align-items:center;gap:8px;margin-top:10px;font-size:0.82rem;color:var(--primary);font-weight:700;background:var(--primary-light);padding:6px 12px;border-radius:var(--radius-sm);width:fit-content;}
body.page-post .post-card {
background:var(--post-bg);
border:1px solid var(--border);
border-radius:var(--radius-lg);
overflow:hidden;
transition:all var(--transition-base);
position:relative;
}
body.page-post .post-card:hover {border-color:var(--primary-border);transform:translateY(-3px);box-shadow:var(--shadow-lg);}
body.page-post .card-img {width:100%;max-height:380px;object-fit:cover;display:block;transition:transform var(--transition-slow);}
body.page-post .post-card:hover .card-img {transform:scale(1.01);}
body.page-post .card-video {
width:100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--radius-md);
box-shadow: var(--shadow);
object-fit: contain;
display:block;
}
body.page-post .card-body {padding:22px 26px;}
body.page-post .pub-row {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
body.page-post .pub-info {display:flex;align-items:center;gap:14px;flex:1;min-width:0;}
body.page-post .pub-avatar {
width:48px;height:48px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;
font-size:1.2rem;cursor:pointer;transition:all var(--transition-fast);
border:2.5px solid var(--border);
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
body.page-post .pub-avatar:hover {transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,0.15);}
body.page-post .pub-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-post .pub-meta {min-width:0;}
body.page-post .pub-name {
font-weight:800;font-size:1rem;color:var(--text);
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
cursor:pointer;transition:color var(--transition-fast);
}
body.page-post .pub-name:hover {color:var(--primary);}
body.page-post .pub-date {font-size:0.78rem;color:var(--muted);margin-top:4px;font-weight:500;}
body.page-post .role-badge {
display:inline-flex;align-items:center;gap:5px;
padding:3px 12px;border-radius:var(--radius-full);
font-size:0.7rem;font-weight:800;flex-shrink:0;
letter-spacing:0.02em;
}
body.page-post .badge-admin {background:var(--primary-light);color:var(--primary);border:1.5px solid var(--primary-border);}
body.page-post .badge-member {background:rgba(128,128,128,0.06);color:var(--muted);border:1.5px solid var(--border);}
body.page-post .badge-verified {display:inline-flex;align-items:center;}
body.page-post .badge-verified svg {width:16px;height:16px;}
body.page-post .pub-actions {display:flex;align-items:center;gap:6px;flex-shrink:0;}
body.page-post .btn-icon {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:9px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;
}
body.page-post .btn-icon:hover {background:var(--primary-light);color:var(--primary);}
body.page-post .btn-icon:active {transform:scale(0.88);}
body.page-post .btn-icon svg {width:17px;height:17px;}
body.page-post .react-wrap {position:relative;display:inline-flex;align-items:center;}
body.page-post .react-main-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-post .react-main-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-post .react-main-btn.reacted {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
body.page-post .react-main-btn:active {transform:scale(0.94);}
body.page-post .react-main-btn svg {width:16px;height:16px;}
body.page-post .react-menu {
position:absolute;bottom:calc(100% + 12px);right:0;
background:var(--modal-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
padding:8px 12px;display:none;gap:6px;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
z-index:10;white-space:nowrap;
box-shadow:var(--shadow-lg);
animation:index-menuPop 0.25s cubic-bezier(0.16,1,0.3,1);
}
body.page-post .react-menu.show {display:flex;}
body.page-post .react-emoji-btn {
background:none;border:none;cursor:pointer;
padding:8px 10px;border-radius:var(--radius-sm);
transition:all var(--transition-fast);line-height:1;
display:flex;align-items:center;justify-content:center;
color:var(--muted);
}
body.page-post .react-emoji-btn:hover {background:var(--primary-light);transform:scale(1.25);color:var(--primary);}
body.page-post .react-emoji-btn.active {background:var(--primary-light);color:var(--primary);}
body.page-post .react-emoji-btn svg {width:20px;height:20px;}
body.page-post .react-btn {
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-full);
border:1.5px solid var(--border);
background:var(--sort-btn-bg);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.85rem;font-weight:700;
transition:all var(--transition-fast);user-select:none;
}
body.page-post .react-btn:hover {border-color:var(--primary-border);color:var(--primary);background:var(--primary-light);}
body.page-post .react-btn:active {transform:scale(0.94);}
body.page-post .react-btn svg {width:16px;height:16px;}
body.page-post .comments-section {border-top:1.5px solid var(--border);padding-top:16px;margin-top:6px;}
body.page-post .comments-toggle {
display:flex;align-items:center;gap:8px;
background:none;border:none;color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;padding:4px 0;margin-bottom:14px;
transition:all var(--transition-fast);font-weight:700;
}
body.page-post .comments-toggle:hover {color:var(--primary);}
body.page-post .comments-toggle svg {width:16px;height:16px;transition:transform var(--transition-base);}
body.page-post .comments-toggle.expanded svg {transform:rotate(180deg);}
body.page-post .comments-list {display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
body.page-post .comment {display:flex;gap:12px;align-items:flex-start;animation:index-fadeIn 0.35s ease;}
body.page-post .c-avatar {
width:36px;height:36px;border-radius:var(--radius-full);
background:var(--avatar-gradient);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:0.9rem;color:#fff;
flex-shrink:0;overflow:hidden;
border:2px solid var(--border);
box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
body.page-post .c-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-post .c-bubble {background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:12px 16px;flex:1;min-width:0;transition:all var(--transition-fast);}
body.page-post .c-bubble:hover {background:rgba(128,128,128,0.08);}
body.page-post .c-name {font-weight:800;font-size:0.85rem;color:var(--text);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.page-post .c-text {
font-size:0.9rem;
color:var(--muted);
line-height:1.8;
word-break:break-word;
}
body.page-post .c-del {
background:none;border:none;color:var(--muted);
cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);
font-size:0.78rem;font-family:'Cairo',sans-serif;
transition:all var(--transition-fast);margin-right:auto;
font-weight:600;
}
body.page-post .c-del:hover {color:var(--danger);background:rgba(255,59,48,0.08);}
body.page-post .comment-input-row {display:flex;gap:10px;align-items:center;}
body.page-post .comment-input {
flex:1;padding:11px 18px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-full);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.9rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-post .comment-input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-post .comment-input::placeholder {color:var(--muted);font-weight:400;}
body.page-post .btn-send-comment {
width:40px;height:40px;
background:var(--primary);
border:none;border-radius:var(--radius-full);
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);flex-shrink:0;
box-shadow:0 2px 8px rgba(0,113,227,0.25);
}
body.page-post .btn-send-comment:hover {background:var(--primary-h);transform:scale(1.1);box-shadow:0 4px 16px rgba(0,113,227,0.35);}
body.page-post .btn-send-comment:active {transform:scale(0.92);}
body.page-post .btn-send-comment svg {width:16px;height:16px;stroke:#fff;}
body.page-post .load-more-btn {display:block;width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--radius-md, 14px);background:var(--card, transparent);color:var(--text);font-family:'Cairo',sans-serif;font-weight:800;font-size:0.88rem;cursor:pointer;transition:all 0.2s;}
body.page-post .load-more-btn:hover {background:var(--primary, #0071e3);color:#fff;border-color:transparent;}
body.page-post .modal-box.wide {max-width:640px;}
body.page-post .modal-t {font-size:1.15rem;font-weight:900;color:var(--text);margin-bottom:24px;display:flex;align-items:center;gap:12px;}
body.page-post .modal-t svg {width:22px;height:22px;color:var(--primary);}
body.page-post .tabs {display:flex;gap:4px;background:var(--sort-btn-bg);border-radius:var(--radius-md);padding:4px;margin-bottom:24px;}
body.page-post .tab {
flex:1;padding:10px;border:none;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.88rem;font-weight:800;
background:none;color:var(--muted);
transition:all var(--transition-fast);
}
body.page-post .tab.active {background:var(--primary);color:var(--black);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
body.page-post .tab:hover:not(.active) {color:var(--text);}
body.page-post .tab-pane {display:none;}
body.page-post .tab-pane.active {display:block;animation:index-fadeIn 0.35s ease;}
body.page-post .fg {margin-bottom:18px;}
body.page-post .fg label {display:block;margin-bottom:7px;color:var(--muted);font-size:0.86rem;font-weight:700;}
body.page-post .fg input {
width:100%;padding:13px 16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Cairo',sans-serif;
font-size:0.92rem;
transition:all var(--transition-fast);
font-weight:500;
}
body.page-post .fg input:focus {outline:none;border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-post .fg input::placeholder {color:var(--muted);font-weight:400;}
body.page-post .err {
background:var(--primary-light);
color:var(--primary);
padding:12px 16px;border-radius:var(--radius-md);
font-size:0.88rem;margin-bottom:16px;
display:none;border:1.5px solid var(--primary-border);
font-weight:700;
}
body.page-post .btn-submit {
width:100%;padding:14px;
background:var(--primary);
color:var(--black);
font-weight:800;border:none;border-radius:var(--radius-md);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.95rem;transition:all var(--transition-fast);margin-top:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
body.page-post .btn-submit:hover {background:var(--primary-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,113,227,0.35);}
body.page-post .btn-submit:active {transform:translateY(0) scale(0.97);}
body.page-post .btn-submit:disabled {opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
body.page-post .post-editor {
width:100%;min-height:160px;max-height:360px;overflow-y:auto;
padding:16px;
background:var(--input-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--text);
font-family:'Noto Naskh Arabic',serif;
font-size:1.02rem;line-height:2;
outline:none;transition:all var(--transition-fast);resize:vertical;
}
body.page-post .post-editor:focus {border-color:var(--primary);background:var(--black);box-shadow:0 0 0 4px var(--primary-light);}
body.page-post .post-editor[placeholder]:empty:before {content:attr(placeholder);color:var(--muted);pointer-events:none;font-weight:400;}
body.page-post .post-editor h2 {font-size:1.35rem;font-weight:900;color:var(--text);margin:10px 0 6px;}
body.page-post .post-editor h3 {font-size:1.15rem;font-weight:800;color:var(--text);margin:8px 0 6px;}
body.page-post .post-editor blockquote {border-right:3px solid var(--primary);padding-right:14px;color:var(--muted);margin:10px 0;font-style:italic;}
body.page-post .post-editor ul {padding-right:22px;margin:8px 0;}
body.page-post .post-editor hr {border:none;border-top:1.5px solid var(--border);margin:12px 0;}
body.page-post .fmt-bar {display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center;padding:8px;background:var(--sort-btn-bg);border-radius:var(--radius-md);border:1.5px solid var(--border);}
body.page-post .fmt-btn {
background:var(--black);
border:1.5px solid var(--border);
color:var(--muted);
padding:7px 12px;border-radius:var(--radius-sm);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.8rem;font-weight:700;
transition:all var(--transition-fast);
display:flex;align-items:center;justify-content:center;
min-width:36px;height:36px;
}
body.page-post .fmt-btn:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-post .fmt-btn:active {transform:scale(0.9);}
body.page-post .fmt-btn svg {width:15px;height:15px;}
body.page-post .fmt-sep {width:1px;background:var(--border);margin:0 4px;height:22px;}
body.page-post .modal-footer {display:flex;gap:12px;justify-content:flex-end;margin-top:24px;}
body.page-post .btn-ghost {
padding:12px 22px;
background:var(--sort-btn-bg);
border:1.5px solid var(--border);
border-radius:var(--radius-md);
color:var(--muted);
cursor:pointer;font-family:'Cairo',sans-serif;
font-size:0.9rem;font-weight:700;
transition:all var(--transition-fast);
}
body.page-post .btn-ghost:hover {background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}
body.page-post .btn-ghost:active {transform:scale(0.95);}
body.page-post .media-preview-wrap {position:relative;margin-bottom:16px;display:none;}
body.page-post .media-preview-wrap img {max-width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;}
body.page-post .media-preview-wrap video {max-width:100%;max-height:220px;border-radius:var(--radius-md);border:1.5px solid var(--border);display:block;background:#000;}
body.page-post .media-preview-wrap .remove-media {
position:absolute;top:10px;left:10px;
background:rgba(0,0,0,0.75);
border:none;color:#fff;
border-radius:var(--radius-full);width:32px;height:32px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all var(--transition-fast);backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
body.page-post .media-preview-wrap .remove-media:hover {background:var(--danger);transform:scale(1.1);}
body.page-post .media-preview-wrap .remove-media svg {width:14px;height:14px;}
body.page-post .post-settings-box {background:var(--input-bg, rgba(0,0,0,0.03));border:1px solid var(--border);border-radius:var(--radius-md,14px);padding:14px;margin:14px 0;}
body.page-post .privacy-choices {display:flex;gap:8px;flex-wrap:wrap;}
body.page-post .privacy-opt {display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.82rem;cursor:pointer;transition:all 0.2s;}
body.page-post .privacy-opt:hover {border-color:var(--primary-border);}
body.page-post .privacy-opt.active {background:var(--primary);color:var(--black);border-color:transparent;}
body.page-post .privacy-opt svg {flex-shrink:0;}
body.page-post .schedule-input {width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm,10px);background:var(--card);color:var(--text);font-family:'Cairo',sans-serif;font-size:0.85rem;}
body.page-post .schedule-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
body.page-post #scheduleWrap {margin-top:12px;}
body.page-post .create-post-cta {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;margin-bottom:16px;border:none;border-radius:var(--radius-md,14px);background:var(--primary);color:var(--black);font-family:'Cairo',sans-serif;font-weight:800;font-size:0.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:all 0.2s;}
body.page-post .create-post-cta:hover {background:var(--primary-h);transform:translateY(-1px);}
body.page-post .post-status-badge {display:inline-flex;align-items:center;gap:4px;font-size:0.7rem;font-weight:800;padding:3px 9px;border-radius:999px;margin-inline-start:6px;}
body.page-post .post-status-badge.st-private {background:rgba(255,149,0,0.12);color:#a16207;}
body.page-post .post-status-badge.st-draft {background:rgba(142,142,147,0.15);color:#636366;}
body.page-post .post-status-badge.st-scheduled {background:rgba(10,132,255,0.12);color:#0071e3;}
body.page-post .reply-btn, body.page-index .reply-btn {background:none;border:none;color:var(--muted);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.74rem;cursor:pointer;padding:0;margin-inline-start:8px;}
body.page-post .reply-btn:hover, body.page-index .reply-btn:hover {color:var(--primary);}
body.page-post .replies-list, body.page-index .replies-list {margin-inline-start:38px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
body.page-post .reply-input-row, body.page-index .reply-input-row {display:flex;gap:8px;margin-inline-start:38px;margin-top:6px;}
body.page-post .post-text {
font-family:'Noto Naskh Arabic',serif;
line-height:2;color:var(--text);font-size:1.05rem;
letter-spacing:0.02px;
white-space:pre-wrap;margin-bottom:18px;word-break:break-word;
text-wrap:pretty;
}
body.page-post .post-html h2 {font-size:1.3rem;font-weight:900;color:var(--text);margin:12px 0 8px;}
body.page-post .post-html h3 {font-size:1.1rem;font-weight:800;color:var(--text);margin:10px 0 6px;}
body.page-post .post-html blockquote {border-right:3px solid var(--primary);padding-right:16px;color:var(--muted);margin:12px 0;font-style:italic;background:var(--sort-btn-bg);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
body.page-post .post-html ul {padding-right:24px;margin:10px 0;}
body.page-post .post-html li {margin:5px 0;}
body.page-post .post-html hr {border:none;border-top:1.5px solid var(--border);margin:14px 0;}
body.page-post .post-html b, body.page-post .post-html strong {color:var(--text);font-weight:800;}
body.page-post .post-html em {color:var(--muted);}
body.page-post .post-html a {color:var(--primary);text-decoration:none;border-bottom:1.5px solid var(--primary-border);transition:all var(--transition-fast);}
body.page-post .post-html a:hover {border-color:var(--primary);opacity:0.8;}
body.page-post .post-html a.post-link {word-break:break-all;}
body.page-post .link-preview-card {
display:block;margin-top:12px;border:1.5px solid var(--border);border-radius:var(--radius-md);
overflow:hidden;background:var(--card);text-decoration:none !important;color:inherit;max-width:440px;
transition:all var(--transition-fast);
}
body.page-post .link-preview-card:hover {border-color:var(--primary-border);transform:translateY(-2px);box-shadow:var(--shadow);}
body.page-post .link-preview-img {width:100%;max-height:220px;object-fit:cover;display:block;background:var(--dark);transition:transform var(--transition-slow);}
body.page-post .link-preview-card:hover .link-preview-img {transform:scale(1.02);}
body.page-post .link-preview-body {padding:12px 16px;}
body.page-post .link-preview-site {font-size:0.7rem;color:var(--primary);font-weight:800;text-transform:uppercase;margin-bottom:4px;letter-spacing:0.05em;}
body.page-post .link-preview-title {font-size:0.95rem;font-weight:800;line-height:1.4;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-post .link-preview-desc {font-size:0.82rem;color:var(--muted);margin-top:5px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
body.page-post .reactions-row {display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
body.page-post .mention-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity 0.15s;}
body.page-post .mention-tag:hover {text-decoration:underline;opacity:0.8;}
body.page-post .hashtag-tag {color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;transition:opacity 0.15s;}
body.page-post .hashtag-tag:hover {text-decoration:underline;opacity:0.8;}
body.page-index .save-btn.saved, body.page-post .save-btn.saved, body.page-short .save-btn.saved {color:#f5a623;}
body.page-post .pin-btn.pinned {color:var(--primary);}
body.page-post .post-status-badge.st-pinned {background:rgba(0,113,227,0.12);color:var(--primary);display:inline-flex;align-items:center;gap:3px;}
body.page-post .post-status-badge.st-pinned svg {width:10px;height:10px;}
/* ============================================================
تحديث الرسائل: مؤشر الكتابة + مؤشر القراءة + صفحة إعدادات المحادثة
(نفس أسلوب مؤشر الكتابة المستخدم في Shizi AI، بقوالب غير شفافة/صلبة)
============================================================ */
body.page-chat .typing-row, body.page-group .typing-row {
display:flex; align-items:flex-end; gap:8px; margin-bottom:8px;
}
body.page-chat .typing-bubble, body.page-group .typing-bubble {
background:var(--card); border:1px solid var(--border);
border-radius:18px; border-bottom-right-radius:5px;
padding:12px 15px; display:flex; gap:5px; align-items:center;
max-width:fit-content;
}
body.page-chat .typing-dot, body.page-group .typing-dot {
width:6px; height:6px; border-radius:50%; background:var(--primary);
animation:shiziai-typingBounce 1.2s infinite ease-in-out;
}
body.page-chat .typing-dot:nth-child(2), body.page-group .typing-dot:nth-child(2) { animation-delay:0.15s; }
body.page-chat .typing-dot:nth-child(3), body.page-group .typing-dot:nth-child(3) { animation-delay:0.3s; }
body.page-group .typing-name {
font-size:0.72rem; font-weight:700; color:var(--muted); margin-left:4px;
}
/* مؤشر قراءة الرسائل (صورة صغيرة تحت آخر رسالة مقروءة) */
.seen-receipt {
display:flex; gap:2px; justify-content:flex-end; margin-top:2px;
}
.seen-av {
width:14px; height:14px; border-radius:50%; overflow:hidden;
background:var(--border); display:flex; align-items:center; justify-content:center;
font-size:0.55rem; font-weight:700; color:var(--muted); border:1px solid var(--card);
}
.seen-av img { width:100%; height:100%; object-fit:cover; }
/* صفحة/لوحة إعدادات المحادثة الخاصة - قوالب صلبة غير شفافة */
.cs-box { background:var(--modal-bg, var(--card)); opacity:1; }
.cs-head {
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:10px 0 18px; cursor:pointer;
}
.cs-av {
width:64px; height:64px; border-radius:50%; overflow:hidden;
background:var(--border); display:flex; align-items:center; justify-content:center;
font-size:1.4rem; font-weight:700; color:var(--muted);
}
.cs-av img { width:100%; height:100%; object-fit:cover; }
.cs-headname { font-weight:800; font-size:1rem; }
.cs-headuser { font-size:0.78rem; color:var(--muted); }
.cs-nick-row { display:flex; gap:8px; margin-bottom:16px; }
.cs-nick-row .m-input { flex:1; }
.cs-actions { display:flex; flex-direction:column; gap:2px; }
.cs-actions button, .cs-toggle-row {
display:flex; align-items:center; gap:10px; width:100%;
background:transparent; border:none; text-align:right;
padding:12px 6px; font-size:0.88rem; font-weight:600; color:var(--text);
border-radius:10px; cursor:pointer; opacity:1;
}
.cs-actions button:hover, .cs-toggle-row:hover { background:rgba(128,128,128,0.08); }
.cs-actions button.danger { color:#ff3b30; }
.cs-actions button svg { flex-shrink:0; }
.cs-toggle-row { justify-content:space-between; cursor:default; }
.cs-toggle-row input[type="checkbox"] { width:38px; height:22px; accent-color:var(--primary); cursor:pointer; }
/* وسائط المحادثة */
.media-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
max-height:360px; overflow-y:auto; margin:8px 0;
}
.media-grid-item {
aspect-ratio:1/1; border-radius:8px; overflow:hidden; cursor:pointer; background:var(--border);
}
.media-grid-item img { width:100%; height:100%; object-fit:cover; }
/* ============================================================
Hostaka Video — بطاقة الفيديو داخل الفيد (مثل يوتيوب)
تُستخدم في صفحات: الرئيسية / الملف الشخصي / المحفوظات / المنشور
============================================================ */
.video-card {
position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden;
background:#000; cursor:pointer; box-shadow:var(--shadow); display:block;
}
.video-card .video-thumb-video {width:100%;aspect-ratio:16/9;object-fit:cover;display:block;pointer-events:none;background:#000;}
.video-card .video-play-badge {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:54px; height:54px; border-radius:50%; background:rgba(0,0,0,0.5); color:#fff;
display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.15); transition:all var(--transition-fast);
}
.video-card:hover .video-play-badge {transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,0.65);}
.video-card .video-tag {
position:absolute; top:12px; inset-inline-start:12px; background:rgba(0,0,0,0.65); color:#fff;
font-size:0.74rem; font-weight:700; padding:5px 12px; border-radius:var(--radius-full);
backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; gap:5px;
}
.video-card .video-tag svg {width:12px;height:12px;}
/* ============================================================
صفحة Hostaka Video — /video (تصفح + مشغّل بطريقة يوتيوب)
============================================================ */
body.page-video {background:var(--bg);color:var(--text);min-height:100vh;font-family:'Cairo',sans-serif;}
body.page-video .topbar {
position:sticky; top:0; left:0; right:0; height:58px; background:var(--topbar-bg);
backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;
padding:0 16px; z-index:50;
}
body.page-video .back-btn {
width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--card);
display:flex; align-items:center; justify-content:center; color:var(--text); flex-shrink:0; text-decoration:none;
}
body.page-video .icon-btn {
width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--card);
display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
transition:all var(--transition-fast);
}
body.page-video .icon-btn:hover {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);}
body.page-video .video-brand {display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.05rem;color:var(--text);}
body.page-video .video-brand svg {color:var(--primary);}
body.page-video .video-page-wrap {max-width:1100px;margin:0 auto;padding:18px 16px 60px;}
/* شبكة تصفح الفيديوهات (الصفحة الرئيسية لـ Hostaka Video) */
body.page-video .video-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px 16px;}
body.page-video .vg-card {cursor:pointer;}
body.page-video .vg-thumb-wrap {position:relative;border-radius:var(--radius-md);overflow:hidden;background:#000;box-shadow:var(--shadow);}
body.page-video .vg-thumb {width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000;pointer-events:none;}
body.page-video .vg-play {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast);background:rgba(0,0,0,0.25);color:#fff;}
body.page-video .vg-card:hover .vg-play {opacity:1;}
body.page-video .vg-meta {display:flex;gap:10px;margin-top:10px;}
body.page-video .vg-avatar {width:36px;height:36px;border-radius:50%;background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;overflow:hidden;cursor:pointer;}
body.page-video .vg-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-video .vg-info {min-width:0;}
body.page-video .vg-title {font-weight:800;font-size:0.92rem;line-height:1.4;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-video .vg-sub {font-size:0.78rem;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
body.page-video .vg-sub .dot {width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block;}
/* عرض تشغيل فيديو محدد (مثل صفحة مشاهدة يوتيوب) */
body.page-video .video-watch-layout {display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:920px) {
body.page-video .video-watch-layout {grid-template-columns:minmax(0,1fr) 340px;align-items:start;}
}
body.page-video .video-player-wrap {background:#000;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
body.page-video .video-player {width:100%;max-height:70vh;display:block;background:#000;}
body.page-video .video-watch-title {font-weight:900;font-size:1.15rem;line-height:1.5;margin-top:16px;}
body.page-video .video-watch-pubrow {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
body.page-video .video-watch-pub {display:flex;align-items:center;gap:12px;}
body.page-video .video-watch-avatar {width:44px;height:44px;border-radius:50%;background:var(--avatar-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden;cursor:pointer;flex-shrink:0;}
body.page-video .video-watch-avatar img {width:100%;height:100%;object-fit:cover;}
body.page-video .video-watch-name {font-weight:800;font-size:0.95rem;display:flex;align-items:center;gap:6px;cursor:pointer;}
body.page-video .video-watch-date {font-size:0.78rem;color:var(--muted);margin-top:2px;}
body.page-video .video-watch-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
body.page-video .vw-action-btn {display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--card);color:var(--text);font-family:'Cairo';font-weight:700;font-size:0.84rem;cursor:pointer;transition:all var(--transition-fast);}
body.page-video .vw-action-btn:hover {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);}
body.page-video .vw-action-btn.active {background:var(--primary-light);border-color:var(--primary-border);color:var(--primary);}
body.page-video .video-watch-desc {margin-top:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;font-size:0.88rem;line-height:1.8;color:var(--text);}
body.page-video .video-comments {margin-top:22px;}
body.page-video .video-comments-head {font-weight:800;font-size:0.95rem;margin-bottom:14px;}
body.page-video .video-comment-input-row {display:flex;gap:10px;margin-bottom:18px;}
body.page-video .video-comment-input-row input {flex:1;padding:11px 14px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-family:'Cairo';font-size:0.86rem;outline:none;}
body.page-video .video-comment-input-row input:focus {border-color:var(--primary);}
body.page-video .video-comment-input-row button {width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
body.page-video .vc-up-next-title {font-weight:800;font-size:0.98rem;margin-bottom:12px;}
body.page-video .vc-up-next-list {display:flex;flex-direction:column;gap:12px;}
body.page-video .vun-card {display:flex;gap:10px;cursor:pointer;}
body.page-video .vun-thumb-wrap {position:relative;width:150px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:#000;}
body.page-video .vun-thumb {width:100%;aspect-ratio:16/9;object-fit:cover;display:block;pointer-events:none;}
body.page-video .vun-info {min-width:0;}
body.page-video .vun-title {font-weight:700;font-size:0.84rem;line-height:1.4;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-video .vun-sub {font-size:0.74rem;color:var(--muted);margin-top:4px;}
body.page-video .video-empty {text-align:center;padding:70px 20px;color:var(--muted);}
body.page-video .video-empty svg {opacity:0.4;margin-bottom:10px;}
body.page-video .loader {position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100;}
body.page-video .spinner {width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:video-spin 0.8s linear infinite;}
@keyframes video-spin {to {transform:rotate(360deg);}}
body.page-video .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:11px 22px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:700;z-index:999;opacity:0;transition:opacity var(--transition-base);pointer-events:none;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center;}
body.page-video .toast.show {opacity:1;}
body.page-video .toast.toast-error {background:var(--danger);color:#fff;}
body.page-video .login-gate {text-align:center;padding:60px 20px;}
body.page-video .login-gate a {display:inline-block;margin-top:14px;padding:10px 22px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none;font-weight:800;font-size:0.86rem;}
@media (max-width:640px) {
body.page-video .video-grid {grid-template-columns:1fr 1fr;gap:14px 10px;}
body.page-video .vg-avatar {display:none;}
body.page-video .vg-title {font-size:0.82rem;}
body.page-video .vun-thumb-wrap {width:120px;}
}
/* ============================================================
مجموعات الحفظ الخاصة — /save (Save Collections)
============================================================ */
body.page-save .collections-bar {display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:14px;margin-bottom:18px;scrollbar-width:none;}
body.page-save .collections-bar::-webkit-scrollbar {display:none;}
body.page-save .collection-chip {
flex-shrink:0; display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius-full);
border:1px solid var(--border); background:var(--card); color:var(--text); font-family:'Cairo'; font-weight:700;
font-size:0.84rem; cursor:pointer; transition:all var(--transition-fast); white-space:nowrap;
}
body.page-save .collection-chip.active {background:var(--primary);border-color:var(--primary);color:#fff;}
body.page-save .collection-chip .cc-count {opacity:0.7;font-size:0.76rem;}
body.page-save .collection-chip-add {border-style:dashed;color:var(--primary);border-color:var(--primary-border);}
body.page-save .collection-chip-del {background:none;border:none;color:inherit;opacity:0.6;display:flex;align-items:center;padding:0;margin-inline-start:2px;cursor:pointer;}
body.page-save .collection-chip-del:hover {opacity:1;}
body.page-save .save-item-menu-wrap {position:relative;}
body.page-save .save-item-menu-btn {width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;}
body.page-save .save-item-menu {
position:absolute; top:calc(100% + 6px); inset-inline-end:0; background:var(--modal-bg); border:1px solid var(--border);
border-radius:var(--radius-md); box-shadow:var(--shadow-lg); min-width:200px; z-index:60; padding:8px; display:none;
}
body.page-save .save-item-menu.show {display:block;}
body.page-save .save-item-menu-label {font-size:0.72rem;color:var(--muted);font-weight:700;padding:6px 8px 2px;}
body.page-save .save-item-menu button {width:100%;text-align:right;background:none;border:none;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text);font-family:'Cairo';font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;}
body.page-save .save-item-menu button:hover {background:var(--input-bg);}
body.page-save .save-item-menu button.active {color:var(--primary);font-weight:800;}
body.page-save .collection-modal-input {width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-family:'Cairo';font-size:0.9rem;outline:none;margin-bottom:14px;}
body.page-save .collection-modal-input:focus {border-color:var(--primary);}