/* ================= 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: #8B5E3C;
    --primary-h: #6D4A2E;
    --primary-light: rgba(139,94,60,0.08);
    --primary-border: rgba(139,94,60,0.25);
    --avatar-gradient: linear-gradient(145deg, #8B5E3C, #C9986B);
    --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);
  }
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(139,94,60,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;}
/* نافذة إدارة الصفحة (تعديل) */
  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;position:sticky;bottom:0;padding-top:10px;background:var(--modal-bg);z-index:2;}
body.page-page .err {color:var(--danger);font-size:0.8rem;margin-bottom:8px;display:none;}