/* =========================================================
   Damadam global layout + shared post styles
   ========================================================= */


/* ---------- Base ---------- */
body {
    background-color: #f0edf5;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #111111;
    width: 100%;
}

.app-shell {
    width: 100%;
    background-color: #f0edf5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: 50px;
}

.dynamic-content-area { flex: 1; box-sizing: border-box; width: 100%; background-color: #f0edf5; }

/* ---------- Top header ---------- */
.brand-header { background: linear-gradient(to right, #00c3ff, #0088ff); display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 12px; height: 38px; box-sizing: border-box; width: 100%; }
.brand-logo { color: #ffffff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; font-weight: 800; text-decoration: none; letter-spacing: -0.2px; padding-left: 12px; }
.header-actions-group { display: flex; gap: 1px; height: 100%; align-items: stretch; }
.btn-header-action { background: rgba(255,255,255,0.18); color: white; border: none; border-left: 1px solid rgba(255,255,255,0.2); font-size: 11px; font-weight: bold; text-transform: uppercase; padding: 0 16px; border-radius: 0 !important; text-decoration: none; text-align: center; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; line-height: 1.1; }
.btn-header-action:hover { background: rgba(255,255,255,0.28); }
.badge-notification { font-size: 9px; color: #ffd814; font-weight: bold; margin-top: 1px; }

/* ---------- Yellow sub-navigation bar ---------- */
.yellow-sub-bar { background-color: #ffd814; display: flex; width: 100%; height: 28px; box-sizing: border-box; border-bottom: 1px solid #e0be00; }
.sub-bar-tab { flex: 1; text-align: center; line-height: 28px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #7a5e00; text-decoration: none; box-sizing: border-box; position: relative; letter-spacing: 0.3px; }
.sub-bar-tab.active { color: #000000 !important; }
.sub-bar-tab.active::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; background-color: #000000 !important; }

/* ---------- Sticky footer ---------- */
.sticky-footer-menu { position: fixed; bottom: 0; left: 0; background-color: #ffffff; width: 100%; display: flex; border-top: 1px solid #dcdcdc; height: 48px; box-sizing: border-box; z-index: 9999; }
.footer-navigation-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666666; text-decoration: none; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.footer-navigation-tab .tab-icon-label { font-size: 13px; margin-bottom: 1px; }
.footer-navigation-tab.active { color: #0088ff !important; }

/* ---------- Container ---------- */
.posts-container { max-width: 760px; width: 100%; margin: 8px auto; padding: 0 6px 12px 6px; box-sizing: border-box; }

/* ---------- Post card ---------- */
.damadam-post-card { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 4px; margin-bottom: 6px; padding: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.post-author-box { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.post-avatar-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.post-avatar-fallback { width: 26px; height: 26px; border-radius: 50%; background-color: #0a8bf5; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; }
.post-author-name { font-weight: bold; font-size: 12px; color: #111111; text-decoration: none; }
.post-timestamp { font-size: 10px; color: #888888; font-weight: normal; }
.expiry-tag { font-size: 10px; color: #ff5722; font-weight: bold; background: #fff3e0; padding: 2px 6px; border-radius: 3px; border: 1px solid #ffe0b2; }

/* ---------- Post body (Only Font Changed) ---------- */
.post-image-attachment { width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; display: block; }
.post-caption-inline-row {
    margin: 6px 0 4px 0;
    font-size: 17px;
    color: #111111;
    line-height: 1.4;
    word-break: break-all;
    overflow-wrap: break-word;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
}
.post-caption-text { display: inline; word-break: break-all; overflow-wrap: break-word; }
.post-caption-text-urdu { display: block; text-align: right; direction: rtl; font-size: 15px; margin-top: 4px; }

.post-content-body {
    font-size: 17px;
    color: #111111;
    line-height: 1.4;
    margin: 8px 0;
    word-break: break-all;
    overflow-wrap: break-word;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
}
.post-content-urdu { font-size: 15px; color: #111111; line-height: 1.5; text-align: right; direction: rtl; margin: 8px 0; }

/* ---------- Action buttons ---------- */
.post-action-buttons { display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
.action-btn {
    border: 1px solid #cbd5e1; border-radius: 4px; background: white;
    padding: 1px 5px; font-size: 9px; font-weight: bold; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 42px; height: 30px; text-decoration: none; box-sizing: border-box; cursor: pointer;
}
.action-btn .btn-icon { font-size: 10px; margin-bottom: 1px; }
.action-btn .btn-number { font-size: 10px; font-weight: bold; margin-bottom: 1px; color: #0891b2; }

.btn-follow-post { border-color: #b19ddb; color: #7f51f9; }
.btn-follow-post.is-following { border-color: #ff5722; color: #ff5722; }
.btn-like { border-color: #fca5a5; color: #ef4444; }
.btn-1on1 { border-color: #2bbcfa; color: #2bbcfa; }
.btn-replies { border-color: #67e8f9; color: #0891b2; }
.btn-report { border-color: #fde047; color: #ca8a04; }
.btn-block-post { border-color: #d32f2f; color: #d32f2f; }
.btn-delete { border-color: #ef4444; color: #dc2626; background-color: #fef2f2; }
/* ---------- Trending Badge & Likes Styling ---------- */
.trending-fire-badge {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
 .posts-container {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: 0 6px 12px 6px;
        box-sizing: border-box;
    }

    /* Horizontal Category Explore Ribbon - Flush Against Sub-Bar */
    .explore-bar-container {
        display: flex;
        align-items: center;
        gap: 5px;
        background: #ffffff;
        padding: 6px 8px;
        margin-top: 0;
        margin-bottom: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-bottom: 1px solid #dcdcdc;
    }
    .explore-bar-container::-webkit-scrollbar { display: none; }

    .btn-explore-main {
        display: inline-flex;
        align-items: center;
        background: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #111111;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        font-style: italic;
        height: 24px;
        box-sizing: border-box;
    }

    .pill-category-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #333333;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        height: 24px;
        box-sizing: border-box;
    }

    /* Notification Box Style */
    .damadam-notif-box {
        background: #ffffff;
        border: 1px solid #00a2e8;
        border-radius: 6px;
        margin-top: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }
    .notif-body-content {
        padding: 6px 10px;
        line-height: 1.4;
    }

    /* POST Title Row with Divider Line & Direct Post Link */
    .notif-post-title {
        font-size: 12px;
        color: #3ca1c3;
        padding-bottom: 4px;
        margin-bottom: 4px;
        font-weight: 600;
        word-wrap: break-word;
        border-bottom: 1px solid #e0f2fe;
    }
    .notif-post-title-link {
        color: #3ca1c3;
        text-decoration: none;
    }
    .notif-post-title-link:hover {
        text-decoration: underline;
    }

    .notif-post-urdu {
        direction: rtl;
        text-align: right;
        font-size: 14px;
        color: #2b7a97;
        font-family: "Jameel Noori Nastaliq", "Urdu Typesetting", "Segoe UI", sans-serif;
    }

    .notif-user-line {
        font-size: 12px;
        font-weight: bold;
        color: #0f172a;
        margin-top: 4px;
        margin-bottom: 2px;
    }
    .notif-user-link {
        color: #111111;
        text-decoration: none;
        font-weight: 800;
    }
    .notif-user-link:hover {
        color: #0088cc;
        text-decoration: underline;
    }
    .notif-text-link {
        color: #111111;
        text-decoration: none;
        font-weight: bold;
    }

    .notif-time {
        font-size: 10px;
        color: #8a8a8a;
        font-weight: normal;
        margin-left: 6px;
    }
    .notif-you-context {
        font-size: 11px;
        color: #777777;
        margin-top: 2px;
    }

    /* Collapsible Accordion Setup for Reply Bar */
    .notif-reply-accordion summary {
        list-style: none;
        user-select: none;
        outline: none;
    }
    .notif-reply-accordion summary::-webkit-details-marker { display: none; }

    .btn-notif-reply-bar {
        background: #00a2e8;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
        padding: 3px 0;
        text-transform: uppercase;
        cursor: pointer;
        border: none;
        width: 100%;
        display: block;
        text-decoration: none;
        letter-spacing: 0.5px;
    }

    .inline-notif-reply {
        padding: 5px;
        background: #f8fafc;
        border-top: 1px solid #00a2e8;
        margin-top: 0 !important;
    }

    /* Post Card Wrapper */
    .damadam-post-card {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 8px 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }
    .post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .post-author-box { display: flex; align-items: center; gap: 6px; }
    .post-avatar-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
    .post-avatar-fallback { width: 26px; height: 26px; border-radius: 50%; background-color: #0a8bf5; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; }
    .post-author-name { font-weight: bold; font-size: 12px; color: #111111; text-decoration: none; }
    .post-timestamp { font-size: 10px; color: #888888; font-weight: normal; margin-left: 4px; }

    .post-content-body { font-size: 13px; color: #111111; line-height: 1.4; margin: 6px 0; word-wrap: break-word; }
    .post-content-urdu { font-size: 15px; color: #111111; line-height: 1.5; text-align: right; direction: rtl; margin: 6px 0; }
    .post-image-attachment { width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; }

    /* Action Buttons Row */
    .post-action-buttons { display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
    .action-btn {
        border: 1px solid #cbd5e1; border-radius: 4px; background: white;
        padding: 2px 6px; font-size: 10px; font-weight: bold; text-transform: uppercase;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 48px; height: 36px; text-decoration: none; box-sizing: border-box; cursor: pointer;
    }
    .btn-follow-post { border-color: #c084fc; color: #9333ea; }
    .btn-like { border-color: #fca5a5; color: #ef4444; }
    .btn-1on1 { border-color: #38bdf8; color: #0284c7; }
    .btn-report { border-color: #fde047; color: #ca8a04; }

    /* Reply Input Bar */
    .reply-input-bar { display: flex; margin-top: 6px; border: 1px solid #cccccc; border-radius: 3px; overflow: hidden; }
    .reply-text-field { flex: 1; border: none; padding: 5px 8px; font-size: 11px; outline: none; background: #fafafa; }
    .reply-submit-btn { background: #00a2e8; color: white; border: none; padding: 0 14px; font-weight: bold; font-size: 11px; cursor: pointer; }

/* ---------- Yellow Sub-Bar Segment Toggle Fix ---------- */
.yellow-sub-bar {
    background-color: #ffd814;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border-bottom: 1px solid #e0be00;
    gap: 12px;
    padding: 0 8px;
}

.yellow-sub-bar .sub-bar-tab {
    flex: initial;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #333333;
    text-decoration: none;
    border-radius: 4px;
    box-sizing: border-box;
    letter-spacing: 0.3px;
    transition: all 0.15s ease;
}
/* ---------- View All Replies Link Styling ---------- */
.view-all-replies-wrap {
    text-align: center;
    margin-top: 8px;
    padding-top: 4px;
}

.view-all-replies-link {
    font-size: 11px;
    color: #0a8bf5;
    font-weight: bold;
    text-decoration: none;
}

.view-all-replies-link:hover {
    text-decoration: underline;
}
.yellow-sub-bar .sub-bar-tab.active {
    background-color: #ffffff !important;
    color: #00bfa5 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.yellow-sub-bar .sub-bar-tab.active::before {
    display: none !important; /* Removes default home sub-bar underline on buttons */
}
.action-btn.is-liked {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.btn-owner-likes {
    border-color: #fbcfe8;
    color: #db2777;
    background: #fdf2f8;
}
/* ---------- Reply input bar ---------- */
.reply-input-bar { display: flex; margin:0px; border: 1px solid #cccccc; border-radius: 3px; overflow: hidden; }
.reply-text-field { flex: 1; border: none; padding: 5px 8px; font-size: 11px; outline: none; background: #fafafa; }
.reply-submit-btn { background: #00a2e8; color: white; border: none; padding: 0 14px; font-weight: bold; font-size: 11px; cursor: pointer; text-transform: lowercase; }
.disabled-reply-box { background-color: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; font-size: 11px; text-align: center; padding: 6px; border-radius: 3px; margin-top: 6px; font-weight: bold; }

/* ---------- Comments sneak peek ---------- */
.comments-list-section { margin-top: 8px; border-top: 1px dashed #e0e0e0; padding-top: 6px; }
.comment-row { padding: 5px 0; border-bottom: 1px dotted #eeeeee; font-size: 12px; color: #222222; }
.comment-main-line { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.comment-author-text { font-size: 12px; word-break: break-all; }
.comment-author-name { font-weight: bold; color: #111111; text-decoration: none; }
.comment-action-pills { display: inline-flex; gap: 3px; vertical-align: middle; }
.btn-pill { font-size: 9px; font-weight: bold; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; border: 1px solid #d0d0d0; background: #ffffff; color: #888888; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn-pill-block { border-color: #fca5a5; color: #ef4444; }
.btn-pill-1on1 { border-color: #2bbcfa; color: #2bbcfa; }
.btn-pill-reply { border-color: #67e8f9; color: #0891b2; }
.comment-target-line { font-size: 10px; color: #888888; margin-top: 2px; }
.comment-hidden-notice { font-size: 11px; color: #aaaaaa; padding: 3px 0; font-style: italic; }

/* ---------- Inline reply ---------- */
.inline-reply-box { display: none; margin-top: 5px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 4px; padding: 5px; }
.inline-reply-form { display: flex; gap: 4px; align-items: center; }
.inline-reply-input { flex: 1; border: 1px solid #cbd5e1; border-radius: 3px; padding: 5px 8px; font-size: 11px; outline: none; }
.inline-reply-send { background: #00bfa5; color: white; border: none; padding: 5px 10px; font-weight: bold; font-size: 10px; border-radius: 3px; cursor: pointer; text-transform: lowercase; }
.inline-reply-close { background: #ef4444; color: white; border: none; padding: 5px 8px; font-weight: bold; font-size: 10px; border-radius: 3px; cursor: pointer; }

/* ---------- Pagination ---------- */
.pagination-bar { display: flex; justify-content: center; gap: 8px; margin: 20px 0; align-items: center; }
.page-btn { padding: 6px 12px; background: #ffffff; border: 1px solid #cccccc; color: #333; text-decoration: none; font-size: 12px; font-weight: bold; border-radius: 3px; }
.page-btn.active { background: #00bfa5; color: white; border-color: #00bfa5; }

/* ---------- Trending / Latest switcher ---------- */
.damadam-switcher-container { display: flex; justify-content: center; margin: 12px 0; padding: 0 10px; }
.damadam-tab-group { display: inline-flex; background-color: #f7f7f7; border: 1px solid #dcdcdc; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.damadam-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; font-size: 11px; font-weight: 700; color: #4b6b94; text-transform: uppercase; text-decoration: none; background-color: #f7f7f7; border-right: 1px solid #e0e0e0; transition: all 0.2s ease; letter-spacing: 0.3px; }
.damadam-tab-btn:last-child { border-right: none; }
.damadam-tab-btn.active { background-color: #ffffff; color: #008ba3; box-shadow: inset 0 -3px 0 0 #00bfa5; }
.damadam-tab-btn .tab-icon { font-size: 13px; line-height: 1; }

/* ---------- Profile / Posts toggle ---------- */
.profile-toggle-container { display: flex; justify-content: center; align-items: center; margin: 10px 0 8px 0; }
.profile-toggle-wrap { display: inline-flex; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0; box-sizing: border-box; }
.profile-toggle-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 14px; text-decoration: none; border-radius: 5px; min-width: 50px; box-sizing: border-box; transition: all 0.15s ease; border: 1px solid transparent; }
.profile-toggle-tab.active { background-color: #ffffff; border: 1px solid #00bfa5; color: #00bfa5; box-shadow: 0 1px 2px rgba(0,0,0,0.04); margin: -1px; }
.profile-toggle-tab.active .tab-count-number { color: #00bfa5; font-size: 13px; font-weight: 700; line-height: 1.1; }
.profile-toggle-tab.active .tab-title-text { color: #00bfa5; font-size: 9px; font-weight: 800; letter-spacing: 0.3px; }
.profile-toggle-tab.inactive { background-color: transparent; border: 1px solid transparent; color: #94a3b8; }
.profile-toggle-tab.inactive .tab-svg-icon { fill: #94a3b8; }
.profile-toggle-tab.inactive .tab-title-text { color: #94a3b8; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; }
.tab-svg-icon { width: 17px; height: 17px; margin-bottom: 1px; transition: fill 0.15s ease; }

/* ---------- Home feed: explore ribbon ---------- */
.explore-bar-container { display: flex; align-items: center; gap: 5px; background: #ffffff; padding: 6px 8px; margin-bottom: 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; border-bottom: 1px solid #dcdcdc; }
.explore-bar-container::-webkit-scrollbar { display: none; }
.btn-explore-main,
.pill-category-btn { display: inline-flex; align-items: center; background: #e2e8f0; border: 1px solid #cbd5e1; padding: 2px 10px; border-radius: 12px; text-decoration: none; flex-shrink: 0; height: 24px; box-sizing: border-box; font-size: 11px; }
.btn-explore-main { color: #111111; font-weight: 700; font-style: italic; }
.pill-category-btn { gap: 4px; color: #333333; font-weight: 600; }

/* ---------- Home feed: notification box ---------- */
.damadam-notif-box { background: #ffffff; border: 1px solid #00a2e8; border-radius: 6px; margin: 10px 0; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.notif-body-content { padding: 6px 10px; line-height: 1.4; }
.notif-post-title { font-size: 12px; color: #3ca1c3; padding-bottom: 4px; margin-bottom: 4px; font-weight: 600; word-wrap: break-word; border-bottom: 1px solid #e0f2fe; }
.notif-post-urdu { direction: rtl; text-align: right; font-size: 14px; color: #2b7a97; font-family: "Jameel Noori Nastaliq", "Urdu Typesetting", "Segoe UI", sans-serif; }
.notif-user-line { font-size: 12px; font-weight: bold; color: #0f172a; margin-top: 4px; margin-bottom: 2px; }
.notif-time { font-size: 10px; color: #8a8a8a; font-weight: normal; margin-left: 6px; }
.notif-you-context { font-size: 11px; color: #777777; margin-top: 2px; }
.notif-reply-accordion summary { list-style: none; user-select: none; outline: none; }
.notif-reply-accordion summary::-webkit-details-marker { display: none; }
.btn-notif-reply-bar { background: #00a2e8; color: #ffffff; text-align: center; font-weight: bold; font-size: 11px; padding: 3px 0; text-transform: uppercase; cursor: pointer; border: none; width: 100%; display: block; text-decoration: none; letter-spacing: 0.5px; }
.inline-notif-reply { padding: 5px; background: #f8fafc; border-top: 1px solid #00a2e8; margin-top: 0 !important; }
.inbox-badge { background: #ff0000 !important; color: #ffffff !important; font-size: 9px; font-weight: bold; padding: 1px 5px; border-radius: 10px; margin-left: 2px; }
.btn-follow-post.is-pending { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
/* ---------- 1 On 1 chat ---------- */
.chat-wrap { max-width: 560px; margin: 8px auto; padding: 0 6px 12px; box-sizing: border-box; font-size: 13px; color: #111; }
.chat-title { font-size: 14px; font-weight: 800; color: #1e293b; padding: 6px 0; border-bottom: 2px solid #00a2e8; margin-bottom: 8px; }
.chat-subtitle { font-size: 12px; font-weight: 700; color: #64748b; margin: 12px 0 6px; }
.chat-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px; margin-bottom: 8px; box-sizing: border-box; }
.chat-card label { display: block; font-size: 12px; color: #475569; font-weight: 700; margin-bottom: 8px; }
.chat-card textarea,
.chat-card select,
.chat-card input[type=file],
.chat-card input[type=text] { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 7px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; font-family: inherit; background: #fafafa; outline: none; }
.chat-card textarea { resize: vertical; min-height: 60px; }
.chat-card textarea:focus,
.chat-card select:focus { border-color: #00a2e8; background: #fff; }
.chat-card .chat-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 9px 12px; margin-top: 4px; }
.chat-card small { display: block; margin-top: 8px; font-size: 11px; line-height: 1.4; }
.chat-muted { color: #94a3b8; }
.chat-note { font-size: 11px; margin: 0 0 8px; }
.chat-links { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.chat-btn { display: inline-block; background: #00a2e8; color: #fff; border: none; border-radius: 4px; padding: 6px 12px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; }
.chat-btn-green { background: #1cb841; }
.chat-btn-red { background: #ef4444; }
.chat-btn-grey { background: #94a3b8; }
.chat-inline-form { display: inline-block; margin: 4px 4px 0 0; }
.chat-inline-form select { width: auto; display: inline-block; margin: 0 4px 4px 0; padding: 5px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px; }
.chat-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; text-decoration: none; color: #111; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: #0a8bf5; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.chat-row-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-row-main small { color: #888; font-size: 11px; }
.chat-head { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px 10px; margin-bottom: 8px; }
.chat-head-main { flex: 1; display: flex; flex-direction: column; }
.chat-head-main small { color: #888; font-size: 11px; }
.chat-back, .chat-refresh { color: #00a2e8; text-decoration: none; font-weight: 700; }
.chat-replying, .chat-quote { background: #f1f5f9; border-left: 3px solid #00a2e8; padding: 3px 6px; font-size: 11px; color: #475569; margin: 4px 0; }
.chat-feelings { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-feel-btn { background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.chat-msg { border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; max-width: 88%; word-wrap: break-word; overflow-wrap: anywhere; box-sizing: border-box; }
.chat-msg.mine { background: #dbeafe; margin-left: auto; }
.chat-msg.theirs { background: #fff; border: 1px solid #e0e0e0; }
.chat-msg-head small, .chat-system small { color: #888; font-size: 10px; }
.chat-img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 4px 0; }
.chat-msg-actions { display: flex; gap: 8px; align-items: center; font-size: 11px; margin-top: 4px; }
.chat-msg-actions a { color: #0284c7; text-decoration: none; }
.chat-del-form { display: inline; margin: 0; }
.chat-link-btn { background: none; border: none; color: #ef4444; font-size: 11px; cursor: pointer; padding: 0; font-family: inherit; }
.chat-system { text-align: center; font-size: 12px; color: #475569; background: #f8fafc; border-radius: 12px; padding: 4px 10px; margin: 6px 0; }
.chat-new { box-shadow: -3px 0 0 #ff0000; }
/* ===== Stars overflow (generic) ===== */
.dynamic-content-area { overflow-x: hidden; }
.dynamic-content-area a, .dynamic-content-area span, .dynamic-content-area div, .dynamic-content-area p { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* ===== Home notification: skip + block row ===== */
.notif-actions-row { display: flex; gap: 6px; padding: 6px 8px; background: #f8fafc; border-top: 1px solid #e0f2fe; }
.notif-act { flex: 1; text-align: center; font-size: 13px; font-weight: 800; text-decoration: none; padding: 9px 4px; border-radius: 4px; color: #fff; text-transform: uppercase; }
.notif-act-skip { background: #475569; }
.notif-act-block { background: #b91c1c; }

/* ===== Comment reply boxes: input no longer squeezes the button ===== */
.inline-reply-form, .reply-input-bar { display: flex; align-items: stretch; gap: 6px; }
.inline-reply-input, .reply-text-field { flex: 1 1 auto; min-width: 0; width: 100%; height: 42px; box-sizing: border-box; font-size: 14px; padding: 6px 10px; }
.inline-reply-send, .inline-reply-close, .reply-submit-btn { flex: 0 0 auto; height: 42px; min-width: 68px; padding: 0 14px; font-size: 14px; font-weight: 700; border-radius: 4px; }
.inline-reply-close { min-width: 44px; padding: 0 10px; }

/* ===== Post detail top bar ===== */
.detail-topbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; position: sticky; top: 0; z-index: 50; }
.detail-back { background: #0369a1; color: #fff; text-decoration: none; font-size: 14px; font-weight: 800; padding: 8px 14px; border-radius: 4px; flex-shrink: 0; }
.detail-topbar-title { font-size: 14px; font-weight: 800; color: #0f172a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 1 On 1: better contrast + notifications ===== */
.chat-title { color: #0f172a; border-bottom-color: #0369a1; }
.chat-btn { background: #0369a1; }
.chat-btn-green { background: #15803d; }
.chat-btn-red { background: #b91c1c; }
.chat-btn-grey { background: #475569; }
.chat-muted, .chat-row-main small, .chat-head-main small, .chat-msg-head small, .chat-system small { color: #475569; }
.chat-card, .chat-row, .chat-head { border-color: #64748b; }
.chat-row, .chat-row-main b { color: #0f172a; }
.chat-msg.mine { background: #bfdbfe; color: #0f172a; border: 2px solid #3b82f6; }
.chat-msg.theirs { background: #fff; color: #0f172a; border-color: #64748b; }
.chat-quote, .chat-replying { background: #e2e8f0; color: #0f172a; border-left-color: #0369a1; }
.chat-system { background: #e2e8f0; color: #0f172a; }
.chat-feel-btn { color: #0f172a; background: #f1f5f9; border-color: #475569; }
.chat-msg-actions a { color: #0369a1; }
.chat-link-btn { color: #b91c1c; }
.chat-back, .chat-refresh { color: #0369a1; }
.chat-notif { border-left: 6px solid #0369a1; }
.chat-notif-actions { display: flex; gap: 8px; margin-top: 8px; }
.chat-notif-actions .chat-btn { flex: 1; text-align: center; }

/* Shared Damadam theme: deep ocean blue, warm gold, high contrast surfaces. */
:root {
  --brand-900: #12324a;
  --brand-800: #164665;
  --brand-700: #075985;
  --brand-600: #0369a1;
  --brand-accent: #f2c14e;
  --brand-danger: #b42318;
  --brand-success: #176b45;
  --brand-text: #172b3a;
  --brand-muted: #536777;
  --brand-border: #c7d2dc;
  --brand-surface: #ffffff;
  --brand-canvas: #f3f6f8;
}
body, .app-shell, .dynamic-content-area { background-color: var(--brand-canvas); color: var(--brand-text); }
.brand-header { background: linear-gradient(110deg, var(--brand-900), var(--brand-700)); }
.brand-logo { color: #fff; }
.btn-header-action { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.btn-header-action:hover, .btn-header-action:focus-visible { background: rgba(255,255,255,.24); }
.yellow-sub-bar { background: var(--brand-accent); border-color: #bf8e14; }
.sub-bar-tab { color: #3b2b06; }
.sub-bar-tab.active { color: #142b3d !important; }
.sub-bar-tab.active::before { background: #142b3d !important; }
.sticky-footer-menu { background: var(--brand-900); border-top: 1px solid #33566e; box-shadow: 0 -4px 16px rgba(18,50,74,.16); }
.footer-navigation-tab { color: #e6edf2; }
.footer-navigation-tab.active { color: var(--brand-accent) !important; }
.footer-navigation-tab:focus-visible, .sub-bar-tab:focus-visible, .btn-header-action:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.inbox-badge { background: #b42318 !important; color: #fff !important; }
.action-btn, .chat-btn, .btn-submit, .btn-submit-share, .edit-profile-btn-submit { transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.action-btn { border-color: var(--brand-border); color: var(--brand-700); background: #fff; }
.action-btn:hover, .chat-btn:hover, .btn-submit:hover, .btn-submit-share:hover { filter: brightness(.94); }
.btn-follow-post, .btn-1on1, .btn-replies { border-color: var(--brand-700); color: var(--brand-700); }
.btn-like { border-color: #b42318; color: #a11d16; }
.btn-like.is-liked { color: #8f1712; border-color: #b42318; background: #fff1ef; }
.btn-report { border-color: #8a6410; color: #674800; background: #fff8e2; }
.btn-block-post, .btn-delete { border-color: var(--brand-danger); color: var(--brand-danger); }
.chat-btn, .btn-submit, .btn-submit-share, .edit-profile-btn-submit { background: var(--brand-700); color: #fff; }
.chat-btn-green { background: var(--brand-success); color: #fff; }
.chat-btn-red, .btn-action-block, .btn-submit-block { background: var(--brand-danger); color: #fff; }
.chat-btn-grey { background: #475569; color: #fff; }
.damadam-notif-box, .chat-notif { border-color: var(--brand-700); }
.notif-actions-row { background: #e8eef2; border-color: var(--brand-border); }
.notif-act-skip { background: #405466; }
.notif-act-block { background: var(--brand-danger); }
.chat-msg.mine { background: #dcebf3; border-color: #6b9ab3; color: var(--brand-text); }
.chat-msg.theirs { background: #fff; border-color: var(--brand-border); color: var(--brand-text); }
.chat-msg-actions a, .chat-back, .chat-refresh { color: var(--brand-700); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #d99e12; outline-offset: 2px; }
.damadam-post-card, .chat-card, .chat-row, .chat-head { border-color: var(--brand-border); }
.post-caption-inline-row, .post-content-body { overflow-wrap: anywhere; word-break: normal; }
.post-content-urdu, .post-caption-text-urdu { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Urdu Typesetting", serif; }
.page-text_posts_feed .damadam-tab-btn.active, .page-image_posts_feed .damadam-tab-btn.active { background: #fff; color: var(--brand-700); }
.page-text_posts_feed .tab-trending.active, .page-image_posts_feed .tab-trending.active, .page-user_posts .trending-label { color: var(--brand-danger); }
.page-text_posts_feed .post-feed-copy { display: block; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.page-text_posts_feed .post-content-urdu.post-feed-copy { direction: rtl; text-align: right; font-size: 17px; }
.page-text_posts_feed .post-content-body.post-feed-copy { color: var(--brand-text); }
.page-post_detail .btn-like.is-liked { background: #fff1ef; border-color: #b42318; color: #8f1712; }
.page-post_detail .inline-reply-box.is-open { display: block; }
.page-mehfil-create_confirm .confirm-rule { display: inline-block; vertical-align: top; width: 100%; }
.page-mehfil-create_confirm .confirm-rule.first { padding-left: 6px; }
.page-mehfil-create_confirm .confirm-rule.next { padding-left: 58px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.u-main-7d5b0910db{display:inline-flex !important;align-items:center !important;gap:4px !important}
.u-main-96f03d2eb2{color:#ffd700 !important;font-size:10px !important;font-weight:bold !important}
.u-main-7a1ca8b3c2{background:#ff3b30 !important;color:#ffffff !important;font-size:9px !important;font-weight:800 !important;padding:2px 6px !important;border-radius:10px !important;display:inline-flex !important;align-items:center !important;gap:4px !important;line-height:1.2 !important;text-transform:uppercase !important}
.u-main-a930c23d0e{color:#ffffff !important;text-decoration:none !important}
.u-main-c38b9dda5d{color:#ffffff !important;text-decoration:none !important;font-size:11px !important;font-weight:900 !important;line-height:1 !important}

/* Migrated from blocked_list.html, scoped to .page-blocked_list */
body.page-blocked_list .profile-owner-heading{
        text-align: center; font-size: 18px; font-weight: bold; color: #222; margin: 15px 0;
    }body.page-blocked_list .info-block-box{ background-color: #ffffff; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; margin-bottom: 12px; }body.page-blocked_list .info-block-header{
        background-color: #fcfcfc; color: #9a9a9a; font-size: 14px; font-weight: bold;
        text-align: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0;
    }body.page-blocked_list .blocked-row{
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 16px; border-bottom: 1px solid #f9f9f9; font-size: 14px; flex-wrap: wrap; gap: 8px;
    }body.page-blocked_list .blocked-row:last-child{ border-bottom: none; }body.page-blocked_list .user-info{ display: flex; flex-direction: column; gap: 2px; }body.page-blocked_list .username-text{ font-weight: bold; color: #333; text-decoration: none; }body.page-blocked_list .duration-badge{ font-size: 11px; color: #d32f2f; font-weight: 500; text-transform: uppercase; }body.page-blocked_list .action-group{ display: flex; align-items: center; gap: 6px; }body.page-blocked_list /* Matched Red & Equal Action Button Styling */
    .btn-action-matched{
        background-color: #d32f2f; color: white; border: none; border-radius: 4px;
        padding: 6px 12px; font-size: 11px; font-weight: bold; text-transform: uppercase;
        text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; box-sizing: border-box; height: 28px;
    }body.page-blocked_list .btn-action-matched:hover{
        background-color: #b71c1c; color: white;
    }body.page-blocked_list .no-data{ text-align: center; color: #aaa; font-size: 13px; padding: 20px 0; }
.u-main-b9270eba65{display:flex !important;flex-direction:column !important}
.u-main-f7fccd5e97{margin:0 !important;display:inline !important}
.u-main-10f467358a{text-align:center !important;margin-top:15px !important}
.u-main-818416bcfa{font-size:13px !important;color:#7f51f9 !important;text-decoration:none !important;font-weight:bold !important}

/* Migrated from blocked_user_follow.html, scoped to .page-blocked_user_follow */
body.page-blocked_user_follow .profile-owner-heading{
        text-align: center; font-size: 18px; font-weight: bold; color: #222; margin: 15px 0;
    }body.page-blocked_user_follow .main-card{
        background-color: #ffffff; width: 90%; max-width: 440px; margin: 0 auto;
        border-radius: 4px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box; text-align: center;
        border: 1px solid #e0e0e0;
    }body.page-blocked_user_follow .warning-icon{ font-size: 36px; margin-bottom: 10px; display: block; }body.page-blocked_user_follow .instruction-text{
        color: #333; font-size: 14px; margin-bottom: 15px; font-weight: bold; line-height: 1.5;
    }body.page-blocked_user_follow .duration-highlight{
        color: #d32f2f; font-weight: bold; font-size: 15px; display: block; margin-top: 6px;
    }body.page-blocked_user_follow .btn-return{
        background-color: #00bfa5; color: white; border: none; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 12px 0; width: 100%;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; margin-top: 15px; box-sizing: border-box;
    }
.u-main-1129e53785{color:#d32f2f !important}

/* Migrated from blocked_user_message.html, scoped to .page-blocked_user_message */
body.page-blocked_user_message .profile-owner-heading{
        text-align: center; font-size: 18px; font-weight: bold; color: #222; margin: 15px 0;
    }body.page-blocked_user_message .main-card{
        background-color: #ffffff; width: 90%; max-width: 440px; margin: 0 auto;
        border-radius: 4px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box; text-align: center;
        border: 1px solid #e0e0e0;
    }body.page-blocked_user_message .warning-icon{ font-size: 36px; margin-bottom: 10px; display: block; }body.page-blocked_user_message .instruction-text{
        color: #333; font-size: 14px; margin-bottom: 15px; font-weight: bold; line-height: 1.5;
    }body.page-blocked_user_message .duration-highlight{
        color: #d32f2f; font-weight: bold; font-size: 15px; display: block; margin-top: 6px;
    }body.page-blocked_user_message .btn-return{
        background-color: #00bfa5; color: white; border: none; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 12px 0; width: 100%;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; margin-top: 15px; box-sizing: border-box;
    }

/* Migrated from blocker_user_follow.html, scoped to .page-blocker_user_follow */
body.page-blocker_user_follow .profile-owner-heading{
        text-align: center; font-size: 18px; font-weight: bold; color: #222; margin: 15px 0;
    }body.page-blocker_user_follow .main-card{
        background-color: #ffffff; width: 90%; max-width: 440px; margin: 0 auto;
        border-radius: 4px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box; text-align: center;
        border: 1px solid #e0e0e0;
    }body.page-blocker_user_follow .warning-icon{ font-size: 36px; margin-bottom: 10px; display: block; }body.page-blocker_user_follow .instruction-text{
        color: #333; font-size: 14px; margin-bottom: 15px; font-weight: bold; line-height: 1.5;
    }body.page-blocker_user_follow .duration-highlight{
        color: #d32f2f; font-weight: bold; font-size: 15px; display: block; margin-top: 6px;
    }body.page-blocker_user_follow .btn-return{
        background-color: #00bfa5; color: white; border: none; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 12px 0; width: 100%;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; margin-top: 15px; box-sizing: border-box;
    }

/* Migrated from blocker_user_message.html, scoped to .page-blocker_user_message */
body.page-blocker_user_message .profile-owner-heading{
        text-align: center; font-size: 18px; font-weight: bold; color: #222; margin: 15px 0;
    }body.page-blocker_user_message .main-card{
        background-color: #ffffff; width: 90%; max-width: 440px; margin: 0 auto;
        border-radius: 4px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box; text-align: center;
        border: 1px solid #e0e0e0;
    }body.page-blocker_user_message .warning-icon{ font-size: 36px; margin-bottom: 10px; display: block; }body.page-blocker_user_message .instruction-text{
        color: #333; font-size: 14px; margin-bottom: 15px; font-weight: bold; line-height: 1.5;
    }body.page-blocker_user_message .duration-highlight{
        color: #d32f2f; font-weight: bold; font-size: 15px; display: block; margin-top: 6px;
    }body.page-blocker_user_message .btn-return{
        background-color: #00bfa5; color: white; border: none; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 12px 0; width: 100%;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; margin-top: 15px; box-sizing: border-box;
    }

/* Migrated from block_action.html, scoped to .page-block_action */
body.page-block_action .profile-owner-heading{
        text-align: center; font-size: 18px; font-weight: bold; color: #222; margin: 15px 0;
    }body.page-block_action .main-card{
        background-color: #ffffff; width: 90%; max-width: 440px; margin: 0 auto;
        border-radius: 4px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box; text-align: center;
        border: 1px solid #e0e0e0;
    }body.page-block_action .instruction-text{
        color: #333; font-size: 14px; margin-bottom: 15px; font-weight: bold; line-height: 1.4;
    }body.page-block_action .duration-select{
        width: 100%; padding: 10px; font-size: 14px; font-weight: bold; color: #d32f2f;
        border: 1px solid #d32f2f; border-radius: 4px; background: #fff; margin-bottom: 20px; outline: none; box-sizing: border-box;
    }body.page-block_action .btn-submit-block{
        background-color: #d32f2f; color: white; border: none; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 12px 0; width: 100%;
        border-radius: 4px; cursor: pointer; letter-spacing: 0.5px; text-decoration: none; display: inline-block;
    }body.page-block_action .btn-cancel{
        background-color: #f2f2f2; color: #555; border: 1px solid #dcdcdc; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 10px 0; width: 100%;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; margin-top: 10px; box-sizing: border-box;
    }

/* Migrated from category_posts.html, scoped to .page-category_posts */
body.page-category_posts .posts-container{
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: 0 6px 12px 6px;
        box-sizing: border-box;
    }body.page-category_posts /* Horizontal Category Explore Ribbon - Drag & Wheel Scroll */
    .explore-bar-container{
        display: flex;
        align-items: center;
        gap: 5px;
        background: #ffffff;
        padding: 6px 8px;
        margin-top: 0;
        margin-bottom: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-bottom: 1px solid #dcdcdc;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }body.page-category_posts .explore-bar-container:active{
        cursor: grabbing;
    }body.page-category_posts .explore-bar-container::-webkit-scrollbar{ display: none; }body.page-category_posts .btn-explore-main{
        display: inline-flex;
        align-items: center;
        background: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #111111;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        height: 24px;
        box-sizing: border-box;
    }body.page-category_posts .pill-category-btn{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #333333;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        height: 24px;
        box-sizing: border-box;
    }body.page-category_posts .pill-category-btn.active{
        background-color: #00a2e8;
        color: #ffffff;
        border-color: #0088cc;
    }body.page-category_posts /* Category Header Card & Intro Description */
    .category-header-card{
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        text-align: center;
        padding: 12px 10px;
        margin: 10px 0 8px 0;
    }body.page-category_posts .category-title{
        margin: 0;
        font-size: 16px;
        color: #1e293b;
        font-weight: 800;
    }body.page-category_posts .category-description{
        margin: 6px 0 0 0;
        font-size: 12px;
        color: #64748b;
        line-height: 1.4;
        font-weight: 600;
    }body.page-category_posts /* Segment Toggle Bar (LATEST vs TRENDING) */
    .tab-toggle-bar{
        display: flex;
        background: #e2e8f0;
        border-radius: 6px;
        padding: 3px;
        margin-bottom: 12px;
    }body.page-category_posts .tab-btn{
        flex: 1;
        text-align: center;
        padding: 6px 0;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
        border-radius: 4px;
    }body.page-category_posts .tab-btn.active-latest{
        background: #ffffff;
        color: #0284c7;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }body.page-category_posts .tab-btn.active-trending{
        background: #ffffff;
        color: #ef4444;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }body.page-category_posts .tab-btn.inactive{
        color: #64748b;
    }body.page-category_posts /* Post Card Wrapper */
    .damadam-post-card{
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 0; /* Ensures full flush edges for header ribbon */
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-category_posts /* Flush Full-Width Header Ribbon Across Post Top */
    .post-category-header-ribbon{
        width: 100%;
        background: #f0f9ff;
        border-bottom: 1px solid #bae6fd;
        padding: 5px 10px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }body.page-category_posts .post-category-ribbon-link{
        font-size: 11px;
        font-weight: 800;
        color: #0284c7;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }body.page-category_posts .post-category-ribbon-link:hover{
        text-decoration: underline;
    }body.page-category_posts .post-inner-content{
        padding: 8px 10px;
    }body.page-category_posts .post-author-box{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }body.page-category_posts .post-avatar-img{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }body.page-category_posts .post-avatar-fallback{ width: 26px; height: 26px; border-radius: 50%; background-color: #0a8bf5; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; }body.page-category_posts .post-author-name{ font-weight: bold; font-size: 12px; color: #111111; text-decoration: none; }body.page-category_posts .post-caption-inline-row{
        margin: 6px 0 4px 0;
        font-size: 14px;
        color: #111111;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
    }body.page-category_posts .post-image-attachment{ width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; display: block; }body.page-category_posts /* Action Buttons Row */
    .post-action-buttons{ display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; align-items: center; }body.page-category_posts .action-btn{
        border: 1px solid #cbd5e1; border-radius: 4px; background: white;
        padding: 2px 6px; font-size: 10px; font-weight: bold; text-transform: uppercase;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 48px; height: 36px; text-decoration: none; box-sizing: border-box; cursor: pointer;
    }body.page-category_posts .btn-follow-post{ border-color: #c084fc; color: #9333ea; }body.page-category_posts .btn-like{ border-color: #fca5a5; color: #ef4444; }body.page-category_posts .btn-1on1{ border-color: #38bdf8; color: #0284c7; }body.page-category_posts .btn-report{ border-color: #fde047; color: #ca8a04; }body.page-category_posts .reply-input-bar{ display: flex; margin-top: 6px; border: 1px solid #cccccc; border-radius: 3px; overflow: hidden; }body.page-category_posts .reply-text-field{ flex: 1; border: none; padding: 5px 8px; font-size: 11px; outline: none; background: #fafafa; }body.page-category_posts .reply-submit-btn{ background: #00a2e8; color: white; border: none; padding: 0 14px; font-weight: bold; font-size: 11px; cursor: pointer; }
.u-main-d9c7761b27{font-size:10px !important;font-weight:bold !important;color:#ef4444 !important}
.u-main-7eb7d04338{color:#888888 !important;font-weight:normal !important;font-size:11px !important;margin:0 4px !important}
.u-main-5ad66eb56c{color:inherit !important;text-decoration:none !important}
.u-main-38965f9b18{margin:0 !important}
.u-main-d48fc7b561{margin:0 !important;display:inline !important}
.u-main-aaba91d3a4{text-align:center !important;padding:40px 0 !important;color:#64748b !important;font-size:13px !important;background:#ffffff !important;border:1px solid #e0e0e0 !important;border-radius:4px !important}

/* Migrated from change_block_duration.html, scoped to .page-change_block_duration */
body.page-change_block_duration .profile-owner-heading{
        text-align: center; font-size: 18px; font-weight: bold; color: #222; margin: 15px 0;
    }body.page-change_block_duration .main-card{
        background-color: #ffffff; width: 90%; max-width: 440px; margin: 0 auto;
        border-radius: 4px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box; text-align: center;
        border: 1px solid #e0e0e0;
    }body.page-change_block_duration .instruction-text{
        color: #333; font-size: 14px; margin-bottom: 15px; font-weight: bold; line-height: 1.4;
    }body.page-change_block_duration .duration-select{
        width: 100%; padding: 10px; font-size: 14px; font-weight: bold; color: #d32f2f;
        border: 1px solid #d32f2f; border-radius: 4px; background: #fff; margin-bottom: 20px; outline: none; box-sizing: border-box;
    }body.page-change_block_duration .btn-submit-block{
        background-color: #d32f2f; color: white; border: none; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 12px 0; width: 100%;
        border-radius: 4px; cursor: pointer; letter-spacing: 0.5px; text-decoration: none; display: inline-block;
    }body.page-change_block_duration .btn-cancel{
        background-color: #f2f2f2; color: #555; border: 1px solid #dcdcdc; font-size: 13px;
        font-weight: bold; text-transform: uppercase; padding: 10px 0; width: 100%;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; margin-top: 10px; box-sizing: border-box;
    }
.u-main-9fc46885cb{font-size:12px !important;color:#777 !important;font-weight:normal !important}

/* Migrated from edit_profile.html, scoped to .page-edit_profile */
body.page-edit_profile .edit-profile-wrapper{ padding: 16px; background-color: #ffffff; }body.page-edit_profile .edit-profile-title{ font-size: 15px; font-weight: bold; margin-bottom: 16px; color: #9c9c9c; text-transform: uppercase; border-bottom: 1px solid #f0f0f0; padding-bottom: 6px; text-align: center; }body.page-edit_profile .edit-profile-input-group{ margin-bottom: 14px; display: flex; flex-direction: column; }body.page-edit_profile .edit-profile-input-group label{ font-size: 12px; font-weight: bold; color: #777777; margin-bottom: 4px; text-transform: uppercase; }body.page-edit_profile .edit-profile-input-control{ padding: 10px; border: 1px solid #dcdcdc; border-radius: 3px; font-size: 14px; color: #333333; outline: none; background-color: #fafafa; font-family: inherit; }body.page-edit_profile textarea.edit-profile-input-control{ resize: vertical; min-height: 80px; }body.page-edit_profile .checkbox-row{ display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: #555; }body.page-edit_profile .char-counter{ font-size: 11px; color: #888; text-align: right; margin-top: 3px; }body.page-edit_profile .edit-profile-btn-submit{
        background: linear-gradient(to right, #1cc1fa, #0a8bf5); color: #ffffff; border: none;
        padding: 12px 0; font-size: 13px; font-weight: bold; text-transform: uppercase;
        border-radius: 3px; width: 100%; cursor: pointer; margin-top: 10px;
    }
.u-main-8f0494a375{text-transform:none !important;font-weight:normal !important;margin-bottom:0 !important;cursor:pointer !important}

/* Migrated from followers_list.html, scoped to .page-followers_list */
body.page-followers_list .followers-wrapper{ padding: 16px; background-color: #ffffff; }body.page-followers_list .followers-title{ 
        font-size: 15px; font-weight: bold; margin-bottom: 16px; color: #777; 
        text-transform: uppercase; border-bottom: 1px solid #f0f0f0; padding-bottom: 6px; text-align: center; 
    }body.page-followers_list .follower-card{
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 12px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 8px; background-color: #fafafa;
    }body.page-followers_list .follower-info{ display: flex; align-items: center; gap: 10px; }body.page-followers_list .follower-avatar{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e0e0e0; }body.page-followers_list .follower-name{ font-size: 14px; font-weight: bold; color: #333; text-decoration: none; }body.page-followers_list .btn-remove-follower{
        background-color: #ff5722; color: white; border: none; padding: 6px 12px;
        font-size: 11px; font-weight: bold; border-radius: 3px; cursor: pointer; text-transform: uppercase;
    }body.page-followers_list .empty-followers{ text-align: center; color: #aaa; font-size: 13px; padding: 30px 0; }body.page-followers_list .back-btn{
        display: block; text-align: center; margin-top: 15px; font-size: 12px; 
        color: #00bfa5; text-decoration: none; font-weight: bold;
    }
.u-main-02419cffd4{margin:0 !important}

/* Migrated from following_list.html, scoped to .page-following_list */
body.page-following_list .list-wrapper{ padding: 16px; background-color: #ffffff; }body.page-following_list .list-title{ 
        font-size: 15px; font-weight: bold; margin-bottom: 16px; color: #777; 
        text-transform: uppercase; border-bottom: 1px solid #f0f0f0; padding-bottom: 6px; text-align: center; 
    }body.page-following_list .user-card{
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 12px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 8px; background-color: #fafafa;
    }body.page-following_list .user-info{ display: flex; align-items: center; gap: 10px; }body.page-following_list .user-avatar{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e0e0e0; }body.page-following_list .user-name{ font-size: 14px; font-weight: bold; color: #333; text-decoration: none; }body.page-following_list .actions-group{ display: flex; gap: 6px; }body.page-following_list .btn-action-unfollow{
        background-color: #ff5722; color: white; border: none; padding: 6px 10px;
        font-size: 11px; font-weight: bold; border-radius: 3px; cursor: pointer; text-transform: uppercase;
    }body.page-following_list .btn-action-block{
        background-color: #333333; color: white; border: none; padding: 6px 10px;
        font-size: 11px; font-weight: bold; border-radius: 3px; cursor: pointer; text-transform: uppercase;
    }body.page-following_list .empty-state{ text-align: center; color: #aaa; font-size: 13px; padding: 30px 0; }body.page-following_list .back-btn{
        display: block; text-align: center; margin-top: 15px; font-size: 12px; 
        color: #00bfa5; text-decoration: none; font-weight: bold;
    }
.u-main-c8fdb43cc3{max-width:480px !important;margin:20px auto !important;background:#fff !important;padding:15px !important;border-radius:6px !important;border:1px solid #e0e0e0 !important}
.u-main-1c233671d7{text-align:center !important;color:#0a8bf5 !important;font-size:16px !important;margin-bottom:15px !important}
.u-main-d5aef0ca3c{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:8px 0 !important;border-bottom:1px solid #f1f5f9 !important}
.u-main-378e76576a{display:flex !important;align-items:center !important;gap:8px !important}
.u-main-e3f319fe86{width:30px !important;height:30px !important;border-radius:50% !important;object-fit:cover !important}
.u-main-cc05f77c01{width:30px !important;height:30px !important;border-radius:50% !important;background:#0a8bf5 !important;color:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;font-weight:bold !important}
.u-main-238dc3efbf{font-weight:bold !important;color:#111 !important;font-size:13px !important;text-decoration:none !important}
.u-main-9a4acadd4f{display:flex !important;gap:4px !important;margin:0 !important}
.u-main-256233d08a{background:#00bfa5 !important;color:white !important;border:none !important;padding:4px 10px !important;font-size:11px !important;font-weight:bold !important;border-radius:3px !important;cursor:pointer !important}
.u-main-d63986514b{background:#ef4444 !important;color:white !important;border:none !important;padding:4px 10px !important;font-size:11px !important;font-weight:bold !important;border-radius:3px !important;cursor:pointer !important}
.u-main-35438cd5a5{text-align:center !important;color:#888 !important;font-size:13px !important;padding:20px 0 !important}

/* Migrated from for_me.html, scoped to .page-for_me */
body.page-for_me .posts-container{
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: 0 6px 12px 6px;
        box-sizing: border-box;
    }body.page-for_me /* Horizontal Category Explore Ribbon - Flush Against Sub-Bar */
    .explore-bar-container{
        display: flex;
        align-items: center;
        gap: 5px;
        background: #ffffff;
        padding: 6px 8px;
        margin-top: 0;
        margin-bottom: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-bottom: 1px solid #dcdcdc;
    }body.page-for_me .explore-bar-container::-webkit-scrollbar{ display: none; }body.page-for_me .btn-explore-main{
        display: inline-flex;
        align-items: center;
        background: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #111111;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        font-style: italic;
        height: 24px;
        box-sizing: border-box;
    }body.page-for_me .pill-category-btn{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #333333;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        height: 24px;
        box-sizing: border-box;
        cursor: pointer;
    }body.page-for_me .pill-category-btn.active{
        background-color: #00a2e8;
        color: #ffffff;
        border-color: #0088cc;
    }body.page-for_me /* Notification Box Style */
    .damadam-notif-box{
        background: #ffffff;
        border: 1px solid #00a2e8;
        border-radius: 6px;
        margin-top: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-for_me .notif-body-content{
        padding: 6px 10px;
        line-height: 1.4;
    }body.page-for_me /* POST Title Row with Divider Line & Direct Post Link */
    .notif-post-title{
        font-size: 12px;
        color: #3ca1c3;
        padding-bottom: 4px;
        margin-bottom: 4px;
        font-weight: 600;
        word-wrap: break-word;
        border-bottom: 1px solid #e0f2fe;
    }body.page-for_me .notif-post-title-link{
        color: #3ca1c3;
        text-decoration: none;
    }body.page-for_me .notif-post-title-link:hover{
        text-decoration: underline;
    }body.page-for_me .notif-post-urdu{
        direction: rtl;
        text-align: right;
        font-size: 14px;
        color: #2b7a97;
        font-family: "Jameel Noori Nastaliq", "Urdu Typesetting", "Segoe UI", sans-serif;
    }body.page-for_me .notif-user-line{
        font-size: 12px;
        font-weight: bold;
        color: #0f172a;
        margin-top: 4px;
        margin-bottom: 2px;
    }body.page-for_me .notif-user-link{
        color: #111111;
        text-decoration: none;
        font-weight: 800;
    }body.page-for_me .notif-user-link:hover{
        color: #0088cc;
        text-decoration: underline;
    }body.page-for_me .notif-text-link{
        color: #111111;
        text-decoration: none;
        font-weight: bold;
    }body.page-for_me .notif-time{
        font-size: 10px;
        color: #8a8a8a;
        font-weight: normal;
        margin-left: 6px;
    }body.page-for_me .notif-you-context{
        font-size: 11px;
        color: #777777;
        margin-top: 2px;
    }body.page-for_me /* Collapsible Accordion Setup for Reply Bar */
    .notif-reply-accordion summary{
        list-style: none;
        user-select: none;
        outline: none;
    }body.page-for_me .notif-reply-accordion summary::-webkit-details-marker{ display: none; }body.page-for_me .btn-notif-reply-bar{
        background: #00a2e8;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
        padding: 3px 0;
        text-transform: uppercase;
        cursor: pointer;
        border: none;
        width: 100%;
        display: block;
        text-decoration: none;
        letter-spacing: 0.5px;
    }body.page-for_me .inline-notif-reply{
        padding: 5px;
        background: #f8fafc;
        border-top: 1px solid #00a2e8;
        margin-top: 0 !important;
    }body.page-for_me /* Post Card Wrapper */
    .damadam-post-card{
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 0; /* Flush edges for header ribbon */
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-for_me /* Flush Full-Width Header Ribbon Across Post Top */
    .post-category-header-ribbon{
        width: 100%;
        background: #f0f9ff;
        border-bottom: 1px solid #bae6fd;
        padding: 5px 10px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }body.page-for_me .post-category-ribbon-link{
        font-size: 11px;
        font-weight: 800;
        color: #0284c7;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }body.page-for_me .post-category-ribbon-link:hover{
        text-decoration: underline;
    }body.page-for_me .post-inner-content{
        padding: 8px 10px;
    }body.page-for_me .post-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }body.page-for_me .post-author-box{ display: flex; align-items: center; gap: 6px; }body.page-for_me .post-avatar-img{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }body.page-for_me .post-avatar-fallback{ width: 26px; height: 26px; border-radius: 50%; background-color: #0a8bf5; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; }body.page-for_me .post-author-name{ font-weight: bold; font-size: 12px; color: #111111; text-decoration: none; }body.page-for_me .post-timestamp{ font-size: 10px; color: #888888; font-weight: normal; margin-left: 4px; }body.page-for_me .post-content-body{ font-size: 13px; color: #111111; line-height: 1.4; margin: 6px 0; word-wrap: break-word; }body.page-for_me .post-content-urdu{ font-size: 15px; color: #111111; line-height: 1.5; text-align: right; direction: rtl; margin: 6px 0; }body.page-for_me .post-image-attachment{ width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; max-width: 450px; display: block; margin-left: auto; margin-right: auto; }body.page-for_me /* Action Buttons Row */
    .post-action-buttons{ display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; align-items: center; }body.page-for_me .action-btn{
        border: 1px solid #cbd5e1; border-radius: 4px; background: white;
        padding: 2px 6px; font-size: 10px; font-weight: bold; text-transform: uppercase;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 48px; height: 36px; text-decoration: none; box-sizing: border-box; cursor: pointer;
    }body.page-for_me .btn-follow-post{ border-color: #c084fc; color: #9333ea; }body.page-for_me .btn-like{ border-color: #fca5a5; color: #ef4444; }body.page-for_me .btn-1on1{ border-color: #38bdf8; color: #0284c7; }body.page-for_me .btn-report{ border-color: #fde047; color: #ca8a04; }body.page-for_me /* Reply Input Bar */
    .reply-input-bar{ display: flex; margin-top: 6px; border: 1px solid #cccccc; border-radius: 3px; overflow: hidden; }body.page-for_me .reply-text-field{ flex: 1; border: none; padding: 5px 8px; font-size: 11px; outline: none; background: #fafafa; }body.page-for_me .reply-submit-btn{ background: #00a2e8; color: white; border: none; padding: 0 14px; font-weight: bold; font-size: 11px; cursor: pointer; }
.u-main-c761a82161{font-weight:bold !important;color:#0088cc !important}
.u-main-98781402ac{padding:0 !important}
.u-main-7684c5f55a{background-color:#f8fafc !important;border:1px solid #e2e8f0 !important;color:#64748b !important;font-size:11px !important;text-align:center !important;padding:6px !important;border-radius:3px !important;margin-top:6px !important;font-weight:bold !important}
.u-main-5ee325c24a{text-align:center !important;padding:50px 20px !important;color:#64748b !important;font-size:14px !important;background:#ffffff !important;border:1px solid #e0e0e0 !important;border-radius:4px !important}

/* Migrated from image_posts_feed.html, scoped to .page-image_posts_feed */
body.page-image_posts_feed .posts-container{
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: 0 6px 12px 6px;
        box-sizing: border-box;
    }body.page-image_posts_feed /* Horizontal Category Explore Ribbon - PC Mouse Drag & Wheel Scroll */
    .explore-bar-container{
        display: flex;
        align-items: center;
        gap: 5px;
        background: #ffffff;
        padding: 6px 8px;
        margin-top: 0;
        margin-bottom: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-bottom: 1px solid #dcdcdc;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }body.page-image_posts_feed .explore-bar-container:active{
        cursor: grabbing;
    }body.page-image_posts_feed .explore-bar-container::-webkit-scrollbar{ display: none; }body.page-image_posts_feed .btn-explore-main{
        display: inline-flex;
        align-items: center;
        background: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #111111;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        font-style: italic;
        height: 24px;
        box-sizing: border-box;
    }body.page-image_posts_feed .pill-category-btn{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #e2e8f0;
        border: 1px solid #cbd5e1;
        color: #333333;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 12px;
        text-decoration: none;
        flex-shrink: 0;
        height: 24px;
        box-sizing: border-box;
    }body.page-image_posts_feed /* Switcher Container */
    .damadam-switcher-container{
        display: flex;
        justify-content: center;
        margin: 12px 0;
    }body.page-image_posts_feed .damadam-tab-group{
        display: inline-flex;
        background-color: #f7f7f7;
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }body.page-image_posts_feed .damadam-tab-btn{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 18px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color: #64748b;
    }body.page-image_posts_feed .damadam-tab-btn.active{
        background: #ffffff;
        color: #0284c7;
    }body.page-image_posts_feed /* Notification Box Style */
    .damadam-notif-box{
        background: #ffffff;
        border: 1px solid #00a2e8;
        border-radius: 6px;
        margin: 10px 0;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-image_posts_feed .notif-body-content{
        padding: 6px 10px;
        line-height: 1.4;
    }body.page-image_posts_feed .notif-post-title{
        font-size: 12px;
        color: #3ca1c3;
        padding-bottom: 4px;
        margin-bottom: 4px;
        font-weight: 600;
        word-wrap: break-word;
        border-bottom: 1px solid #e0f2fe;
    }body.page-image_posts_feed .notif-post-title-link{
        color: #3ca1c3;
        text-decoration: none;
    }body.page-image_posts_feed .notif-post-title-link:hover{
        text-decoration: underline;
    }body.page-image_posts_feed .notif-post-urdu{
        direction: rtl;
        text-align: right;
        font-size: 14px;
        color: #2b7a97;
        font-family: "Jameel Noori Nastaliq", "Urdu Typesetting", "Segoe UI", sans-serif;
    }body.page-image_posts_feed .notif-user-line{
        font-size: 12px;
        font-weight: bold;
        color: #0f172a;
        margin-top: 4px;
        margin-bottom: 2px;
    }body.page-image_posts_feed .notif-user-link{
        color: #111111;
        text-decoration: none;
        font-weight: 800;
    }body.page-image_posts_feed .notif-user-link:hover{
        color: #0088cc;
        text-decoration: underline;
    }body.page-image_posts_feed .notif-text-link{
        color: #111111;
        text-decoration: none;
        font-weight: bold;
    }body.page-image_posts_feed .notif-time{
        font-size: 10px;
        color: #8a8a8a;
        font-weight: normal;
        margin-left: 6px;
    }body.page-image_posts_feed .notif-you-context{
        font-size: 11px;
        color: #777777;
        margin-top: 2px;
    }body.page-image_posts_feed .notif-reply-accordion summary{
        list-style: none;
        user-select: none;
        outline: none;
    }body.page-image_posts_feed .notif-reply-accordion summary::-webkit-details-marker{ display: none; }body.page-image_posts_feed .btn-notif-reply-bar{
        background: #00a2e8;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
        padding: 3px 0;
        text-transform: uppercase;
        cursor: pointer;
        border: none;
        width: 100%;
        display: block;
        text-decoration: none;
        letter-spacing: 0.5px;
    }body.page-image_posts_feed .inline-notif-reply{
        padding: 5px;
        background: #f8fafc;
        border-top: 1px solid #00a2e8;
        margin-top: 0 !important;
    }body.page-image_posts_feed /* Post Card Wrapper */
    .damadam-post-card{
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 0; /* Flush header ribbon edges */
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-image_posts_feed /* Category Header Ribbon on Top of Every Post Card */
    .post-category-header-ribbon{
        width: 100%;
        background: #f0f9ff;
        border-bottom: 1px solid #bae6fd;
        padding: 5px 10px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }body.page-image_posts_feed .post-category-ribbon-link{
        font-size: 11px;
        font-weight: 800;
        color: #0284c7;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }body.page-image_posts_feed .post-category-ribbon-link:hover{
        text-decoration: underline;
    }body.page-image_posts_feed .post-inner-content{
        padding: 8px 10px;
    }body.page-image_posts_feed .post-author-box{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }body.page-image_posts_feed .post-avatar-img{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }body.page-image_posts_feed .post-avatar-fallback{ width: 26px; height: 26px; border-radius: 50%; background-color: #0a8bf5; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; }body.page-image_posts_feed .post-author-name{ font-weight: bold; font-size: 12px; color: #111111; text-decoration: none; }body.page-image_posts_feed .post-caption-inline-row{
        margin: 6px 0 4px 0;
        font-size: 14px;
        color: #111111;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
    }body.page-image_posts_feed .post-caption-text{ display: inline; word-break: break-word; overflow-wrap: break-word; }body.page-image_posts_feed .post-caption-text-urdu{ display: inline-block; text-align: right; direction: rtl; font-size: 15px; }body.page-image_posts_feed /* Centered Image Attachment with max-width: 450px and height: auto */
    .post-image-container{
        text-align: center;
        width: 100%;
        margin-bottom: 6px;
    }body.page-image_posts_feed .post-image-attachment{
        max-width: 450px;
        width: 100%;
        height: auto;
        border-radius: 4px;
        display: inline-block;
        object-fit: contain;
    }body.page-image_posts_feed /* Action Buttons Row */
    .post-action-buttons{ display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; align-items: center; }body.page-image_posts_feed .action-btn{
        border: 1px solid #cbd5e1; border-radius: 4px; background: white;
        padding: 2px 6px; font-size: 10px; font-weight: bold; text-transform: uppercase;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 48px; height: 36px; text-decoration: none; box-sizing: border-box; cursor: pointer;
    }body.page-image_posts_feed .btn-follow-post{ border-color: #c084fc; color: #9333ea; }body.page-image_posts_feed .btn-like{ border-color: #fca5a5; color: #ef4444; }body.page-image_posts_feed .btn-1on1{ border-color: #38bdf8; color: #0284c7; }body.page-image_posts_feed .btn-report{ border-color: #fde047; color: #ca8a04; }body.page-image_posts_feed /* Reply Input Bar */
    .reply-input-bar{ display: flex; margin-top: 6px; border: 1px solid #cccccc; border-radius: 3px; overflow: hidden; }body.page-image_posts_feed .reply-text-field{ flex: 1; border: none; padding: 5px 8px; font-size: 11px; outline: none; background: #fafafa; }body.page-image_posts_feed .reply-submit-btn{ background: #00a2e8; color: white; border: none; padding: 0 14px; font-weight: bold; font-size: 11px; cursor: pointer; }body.page-image_posts_feed /* Pagination Bar */
    .pagination-bar{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 20px 0;
    }body.page-image_posts_feed .page-btn{
        padding: 6px 12px;
        font-size: 11px;
        font-weight: bold;
        color: #0284c7;
        background: #ffffff;
        border: 1px solid #bae6fd;
        border-radius: 4px;
        text-decoration: none;
    }body.page-image_posts_feed .page-btn.active{
        background: #0284c7;
        color: #ffffff;
        border-color: #0284c7;
    }
.u-main-d6c2df5d80{font-size:9px !important;color:#ff5722 !important;font-weight:bold !important;background:#fff3e0 !important;padding:1px 4px !important;border-radius:3px !important;border:1px solid #ffe0b2 !important}
.u-main-cd076ec482{text-align:center !important;padding:40px 0 !important;color:#999 !important}

/* Migrated from inbox.html, scoped to .page-inbox */
body.page-inbox .inbox-container{
        max-width: 760px;
        width: 100%;
        margin: 10px auto;
        padding: 0 6px 12px 6px;
        box-sizing: border-box;
    }body.page-inbox .inbox-header-title{
        font-size: 14px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 10px;
        padding-bottom: 4px;
        border-bottom: 2px solid #00a2e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }body.page-inbox /* Notification Box */
    .damadam-notif-box{
        background: #ffffff;
        border: 1px solid #00a2e8;
        border-radius: 6px;
        margin-bottom: 10px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-inbox .notif-body-content{
        padding: 6px 10px;
        line-height: 1.4;
    }body.page-inbox /* POST Title Row with Divider Line */
    .notif-post-title-row{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 4px;
        margin-bottom: 4px;
        border-bottom: 1px solid #e0f2fe;
    }body.page-inbox .notif-post-title-link{
        font-size: 12px;
        color: #3ca1c3;
        font-weight: 600;
        text-decoration: none;
        word-wrap: break-word;
        flex: 1;
    }body.page-inbox .notif-post-title-link:hover{
        text-decoration: underline;
    }body.page-inbox .notif-post-urdu{
        direction: rtl;
        text-align: right;
        font-size: 14px;
        color: #2b7a97;
        font-family: "Jameel Noori Nastaliq", "Urdu Typesetting", "Segoe UI", sans-serif;
    }body.page-inbox /* Skip/Dismiss Action Button */
    .btn-skip-notif{
        font-size: 10px;
        color: #94a3b8;
        text-decoration: none;
        font-weight: bold;
        padding: 1px 4px;
        border-radius: 3px;
        margin-left: 6px;
        flex-shrink: 0;
    }body.page-inbox .btn-skip-notif:hover{
        color: #ef4444;
        background-color: #fee2e2;
    }body.page-inbox /* User Comment Line & Profile Link */
    .notif-user-line{
        font-size: 12px;
        font-weight: bold;
        color: #0f172a;
        margin-top: 2px;
        margin-bottom: 2px;
    }body.page-inbox .notif-user-link{
        color: #111111;
        text-decoration: none;
        font-weight: 800;
    }body.page-inbox .notif-user-link:hover{
        color: #0088cc;
        text-decoration: underline;
    }body.page-inbox .notif-time{
        font-size: 10px;
        color: #8a8a8a;
        font-weight: normal;
        margin-left: 6px;
    }body.page-inbox .notif-action-btn{
        display: inline-block;
        margin-top: 6px;
        background-color: #00bfa5;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 4px;
        text-decoration: none;
        text-transform: uppercase;
    }body.page-inbox .notif-action-btn:hover{
        background-color: #009688;
    }body.page-inbox /* Collapsible Reply Bar Accordion */
    .notif-reply-accordion summary{
        list-style: none;
        user-select: none;
        outline: none;
    }body.page-inbox .notif-reply-accordion summary::-webkit-details-marker{ display: none; }body.page-inbox .btn-notif-reply-bar{
        background: #00a2e8;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
        padding: 3px 0;
        text-transform: uppercase;
        cursor: pointer;
        border: none;
        width: 100%;
        display: block;
        text-decoration: none;
        letter-spacing: 0.5px;
    }body.page-inbox .inline-notif-reply{
        padding: 5px;
        background: #f8fafc;
        border-top: 1px solid #00a2e8;
        margin-top: 0 !important;
    }body.page-inbox .reply-input-bar{ display: flex; border: 1px solid #cccccc; border-radius: 3px; overflow: hidden; }body.page-inbox .reply-text-field{ flex: 1; border: none; padding: 5px 8px; font-size: 11px; outline: none; background: #fafafa; }body.page-inbox .reply-submit-btn{ background: #00a2e8; color: white; border: none; padding: 0 14px; font-weight: bold; font-size: 11px; cursor: pointer; text-transform: lowercase; }
.u-main-1e0e9d4609{color:#111111 !important;text-decoration:none !important}
.u-main-a464ad97f4{font-size:11px !important;color:#777 !important;margin-top:2px !important}
.u-main-5d1330172c{color:#00bfa5 !important}
.u-main-c040a2f862{font-weight:normal !important;color:#333 !important}
.u-main-c98a9f1869{margin-top:4px !important}
.u-main-c17dac1d9c{text-align:center !important;padding:50px 0 !important;color:#94a3b8 !important;font-size:14px !important;background:#ffffff !important;border-radius:6px !important;border:1px solid #e2e8f0 !important}

/* Migrated from login.html, scoped to .page-login */
body.page-login{
            background: linear-gradient(135deg, #2bbcfa 0%, #7f51f9 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }body.page-login .brand-title{
            color: white;
            font-size: 34px;
            font-weight: 500;
            margin-top: 50px;
            margin-bottom: 2px;
            letter-spacing: 1px;
            text-align: center;
        }body.page-login .brand-subtitle{
            color: rgba(255, 255, 255, 0.9);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 25px;
            text-align: center;
        }body.page-login .main-card{
            background-color: #ffd814;
            width: 90%;
            max-width: 440px;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            box-sizing: border-box;
            text-align: center;
        }body.page-login .card-header{
            color: #111111;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            padding-bottom: 12px;
            margin-bottom: 20px;
            letter-spacing: 0.5px;
        }body.page-login .input-wrapper{
            position: relative;
            background: white;
            border: 1px solid #ccc;
            border-radius: 2px;
            display: flex;
            align-items: center;
            padding: 6px 10px;
            margin-bottom: 15px;
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
        }body.page-login .input-icon{
            font-size: 20px;
            margin-right: 10px;
            user-select: none;
        }body.page-login .input-field{
            border: none;
            outline: none;
            width: 100%;
            font-size: 16px;
            color: #111;
            background: transparent;
        }body.page-login .btn-login{
            background: linear-gradient(to right, #ff2a6d, #cc20af);
            color: white;
            border: none;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            padding: 12px 0;
            width: 100%;
            max-width: 320px;
            border-radius: 25px;
            cursor: pointer;
            letter-spacing: 1px;
            display: inline-block;
            margin-top: 10px;
        }body.page-login .or-divider{
            color: white;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            margin: 15px 0;
            position: relative;
            width: 90%;
            max-width: 440px;
            display: flex;
            align-items: center;
            justify-content: center;
        }body.page-login .or-divider::before,body.page-login .or-divider::after{
            content: "";
            flex: 1;
            background: rgba(255,255,255,0.4);
            height: 1px;
            margin: 0 10px;
        }body.page-login .btn-register{
            background-color: rgba(255, 255, 255, 0.4);
            color: #222;
            border: 1px solid rgba(255, 255, 255, 0.3);
            font-size: 13px;
            font-weight: bold;
            text-transform: uppercase;
            padding: 12px 0;
            width: 90%;
            max-width: 440px;
            border-radius: 25px;
            cursor: pointer;
            letter-spacing: 0.5px;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }body.page-login .error-msg{
            background-color: #ff3860;
            color: white;
            font-size: 13px;
            padding: 8px;
            border-radius: 3px;
            margin-bottom: 15px;
        }

/* Migrated from more.html, scoped to .page-more */
body.page-more .more-container{
        max-width: 760px;
        width: 100%;
        margin: 10px auto;
        padding: 0 10px 20px 10px;
        box-sizing: border-box;
    }body.page-more .more-header{
        font-size: 15px;
        font-weight: 800;
        color: #1e293b;
        text-align: center;
        margin-bottom: 16px;
        position: relative;
    }body.page-more .more-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }body.page-more .more-card{
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 22px 10px;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }body.page-more .more-card:hover{
        border-color: #00a2e8;
        background: #f8fafc;
    }body.page-more .more-icon{
        font-size: 24px;
        margin-bottom: 8px;
        color: #00a2e8;
    }body.page-more .more-label{
        font-size: 12px;
        font-weight: 800;
        color: #1e293b;
        letter-spacing: 0.5px;
    }body.page-more .more-footer-links{
        border-top: 1px solid #e2e8f0;
        padding-top: 16px;
        display: flex;
        justify-content: center;
        gap: 20px;
        font-size: 13px;
        font-weight: 600;
    }body.page-more .more-footer-links a{
        text-decoration: none;
        color: #0088cc;
    }body.page-more .more-footer-links a.logout-link{
        color: #ef4444;
    }body.page-more .more-footer-links a:hover{
        text-decoration: underline;
    }
.u-main-ecb25e2e86{color:#16a34a !important;font-size:11px !important}
.u-main-55d62c62e8{max-width:760px !important;width:100% !important;margin:0 auto !important;padding:0 6px 12px 6px !important}
.u-main-5803212ba2{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:12px 14px !important;background:#f0fdf4 !important;border:1px solid #bbf7d0 !important;border-radius:6px !important;margin-bottom:10px !important}
.u-main-8e9d08bda3{margin:0 !important;font-size:15px !important;color:#16a34a !important;font-weight:800 !important}
.u-main-68d080c74c{font-size:11px !important;font-weight:bold !important;color:#0284c7 !important;background:#ffffff !important;border:1px solid #bae6fd !important;padding:4px 10px !important;border-radius:4px !important;text-decoration:none !important}
.u-main-e346854fdc{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:10px 12px !important;background:#ffffff !important;border:1px solid #e0e0e0 !important;border-radius:4px !important;margin-bottom:8px !important}
.u-main-0c1a7e49a0{display:flex !important;align-items:center !important;gap:10px !important}
.u-main-ef82dd2ecb{width:34px !important;height:34px !important;border-radius:50% !important;object-fit:cover !important}
.u-main-0bdf4365fb{width:34px !important;height:34px !important;border-radius:50% !important;background-color:#0a8bf5 !important;color:white !important;display:flex !important;align-items:center !important;justify-content:center !important;font-weight:bold !important;font-size:13px !important}
.u-main-268d25592f{font-weight:bold !important;font-size:14px !important;color:#111111 !important;text-decoration:none !important}
.u-main-3633e433a1{display:flex !important;gap:6px !important}
.u-main-4fc14cb5cf{padding:4px 10px !important;font-size:10px !important;text-decoration:none !important;color:#0284c7 !important;background-color:#f0f9ff !important;border:1px solid #bae6fd !important;border-radius:4px !important;font-weight:bold !important}
.u-main-4e706d8fcb{padding:4px 10px !important;font-size:10px !important;text-decoration:none !important;color:#16a34a !important;background-color:#f0fdf4 !important;border:1px solid #bbf7d0 !important;border-radius:4px !important;font-weight:bold !important}
.u-main-c9cecf4c14{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:12px 14px !important;background:#f8fafc !important;border:1px solid #e2e8f0 !important;border-radius:6px !important;margin-bottom:10px !important}
.u-main-90aad37d89{margin:0 !important;font-size:15px !important;color:#475569 !important;font-weight:800 !important}
.u-main-065bf65ddd{font-size:11px !important;font-weight:bold !important;color:#16a34a !important;background:#ffffff !important;border:1px solid #bbf7d0 !important;padding:4px 10px !important;border-radius:4px !important;text-decoration:none !important}
.u-main-571bcac72f{font-size:10px !important;color:#94a3b8 !important;margin-top:2px !important}

/* Migrated from post_detail.html, scoped to .page-post_detail */
body.page-post_detail .posts-container{
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: 0 6px 12px 6px;
        box-sizing: border-box;
    }body.page-post_detail /* Top Detail Header Bar */
    .detail-topbar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 8px 12px;
        margin-bottom: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-post_detail .detail-back{
        font-size: 13px;
        font-weight: 800;
        color: #0284c7;
        text-decoration: none;
    }body.page-post_detail .detail-back:hover{ text-decoration: underline; }body.page-post_detail .detail-topbar-title{
        font-size: 13px;
        font-weight: 700;
        color: #334155;
    }body.page-post_detail /* Post Card Wrapper */
    .damadam-post-card{
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 0;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-post_detail /* Flush Full-Width Header Ribbon Across Post Top */
    .post-category-header-ribbon{
        width: 100%;
        background: #f0f9ff;
        border-bottom: 1px solid #bae6fd;
        padding: 5px 10px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }body.page-post_detail .post-category-ribbon-link{
        font-size: 11px;
        font-weight: 800;
        color: #0284c7;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }body.page-post_detail .post-category-ribbon-link:hover{
        text-decoration: underline;
    }body.page-post_detail .trending-indicator-badge{
        font-size: 10px;
        font-weight: 800;
        color: #ef4444;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }body.page-post_detail .post-inner-content{
        padding: 8px 10px;
    }body.page-post_detail .post-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }body.page-post_detail .post-author-box{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }body.page-post_detail .post-avatar-img{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }body.page-post_detail .post-avatar-fallback{ width: 26px; height: 26px; border-radius: 50%; background-color: #0a8bf5; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; }body.page-post_detail .post-author-name{ font-weight: bold; font-size: 12px; color: #111111; text-decoration: none; }body.page-post_detail .post-timestamp{ font-size: 10px; color: #888888; font-weight: normal; }body.page-post_detail .post-caption-inline-row{
        margin: 6px 0 4px 0;
        font-size: 14px;
        color: #111111;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
    }body.page-post_detail .post-caption-text{ display: inline; word-break: break-word; overflow-wrap: break-word; }body.page-post_detail .post-caption-text-urdu{ display: inline-block; text-align: right; direction: rtl; font-size: 15px; }body.page-post_detail .post-content-body{ font-size: 13px; color: #111111; line-height: 1.4; margin: 6px 0; word-wrap: break-word; }body.page-post_detail .post-content-urdu{ font-size: 15px; color: #111111; line-height: 1.5; text-align: right; direction: rtl; margin: 6px 0; }body.page-post_detail .post-image-attachment{ width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; display: block; }body.page-post_detail /* Action Buttons Row */
    .post-action-buttons{ display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; align-items: center; }body.page-post_detail .action-btn{
        border: 1px solid #cbd5e1; border-radius: 4px; background: white;
        padding: 2px 6px; font-size: 10px; font-weight: bold; text-transform: uppercase;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 48px; height: 36px; text-decoration: none; box-sizing: border-box; cursor: pointer;
    }body.page-post_detail .btn-follow-post{ border-color: #c084fc; color: #9333ea; }body.page-post_detail .btn-follow-post.is-pending{ border-color: #f59e0b; color: #d97706; background-color: #fffbeb; }body.page-post_detail .btn-like{ border-color: #fca5a5; color: #ef4444; }body.page-post_detail .btn-1on1{ border-color: #38bdf8; color: #0284c7; }body.page-post_detail .btn-report{ border-color: #fde047; color: #ca8a04; }body.page-post_detail /* Main Reply Input Bar (Fixed for Mobile Widths) */
    .reply-input-bar{
        display: flex;
        align-items: center;
        margin-top: 6px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        overflow: hidden;
        background: #ffffff;
    }body.page-post_detail .reply-text-field{
        flex: 1;
        min-width: 0; /* Prevents text input overflow on narrow screens */
        border: none;
        padding: 8px;
        font-size: 12px;
        outline: none;
        background: #fafafa;
        box-sizing: border-box;
    }body.page-post_detail .reply-submit-btn{
        background: #00a2e8;
        color: #ffffff;
        border: none;
        padding: 0 16px;
        height: 34px;
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        cursor: pointer;
        flex-shrink: 0; /* Keeps button legible and wide enough */
        white-space: nowrap;
    }body.page-post_detail /* Comment Section Styling */
    .comments-list-section{ margin-top: 12px; }body.page-post_detail .comment-row{ padding: 8px 0; border-bottom: 1px solid #f1f5f9; }body.page-post_detail .comment-main-line{ display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 12px; }body.page-post_detail .comment-author-name{ font-weight: bold; color: #0f172a; text-decoration: none; }body.page-post_detail .comment-action-pills{ display: flex; gap: 4px; flex-shrink: 0; }body.page-post_detail .btn-pill{ font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-decoration: none; border: 1px solid #cbd5e1; background: #ffffff; color: #475569; cursor: pointer; }body.page-post_detail .btn-pill-block{ border-color: #fca5a5; color: #ef4444; }body.page-post_detail .btn-pill-1on1{ border-color: #7dd3fc; color: #0284c7; }body.page-post_detail .btn-pill-reply{ border-color: #38bdf8; background: #00a2e8; color: #ffffff; }body.page-post_detail .comment-target-line{ font-size: 10px; color: #94a3b8; margin-top: 2px; }body.page-post_detail /* Inline Reply Box (Mobile Optimized) */
    .inline-reply-box{
        display: none;
        margin-top: 6px;
        padding: 6px;
        background: #f8fafc;
        border-radius: 4px;
        border: 1px solid #cbd5e1;
    }body.page-post_detail .inline-reply-form{
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
    }body.page-post_detail .inline-reply-input{
        flex: 1;
        min-width: 0; /* Ensures box scales smoothly on small screens */
        border: 1px solid #cbd5e1;
        border-radius: 3px;
        padding: 6px 8px;
        font-size: 12px;
        outline: none;
        box-sizing: border-box;
    }body.page-post_detail .inline-reply-send{
        background: #00a2e8;
        color: white;
        border: none;
        border-radius: 3px;
        padding: 0 12px;
        height: 30px;
        font-weight: bold;
        font-size: 11px;
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
    }body.page-post_detail .inline-reply-close{
        background: #e2e8f0;
        color: #475569;
        border: none;
        border-radius: 3px;
        padding: 0 10px;
        height: 30px;
        font-size: 11px;
        font-weight: bold;
        cursor: pointer;
        flex-shrink: 0;
    }
.u-main-699236c396{font-size:10px !important;color:#888888 !important;margin-bottom:8px !important;display:flex !important;align-items:center !important;gap:6px !important}
.u-main-5c21cef8a2{font-size:11px !important;color:#94a3b8 !important;font-style:italic !important;padding:4px 0 !important}
.u-main-09893eff18{text-align:center !important;padding:15px 0 !important;color:#999 !important;font-size:13px !important}
.u-main-ce812b14c8{display:flex !important;justify-content:center !important;gap:8px !important;margin-top:14px !important}
.u-main-a00fa2e708{padding:4px 10px !important;font-size:11px !important;border:1px solid #cbd5e1 !important;border-radius:3px !important;text-decoration:none !important;color:#0284c7 !important}
.u-main-fec1f17df5{padding:4px 10px !important;font-size:11px !important;background:#0284c7 !important;color:white !important;border-radius:3px !important;font-weight:bold !important}

/* Migrated from post_image.html, scoped to .page-post_image */
body.page-post_image .post-form-container{ max-width: 480px; margin: 15px auto; padding: 15px; box-sizing: border-box; }body.page-post_image .post-type-tabs{ display: flex; border-bottom: 2px solid #e2e8f0; margin-bottom: 15px; }body.page-post_image .post-tab{ flex: 1; text-align: center; padding: 10px; font-weight: bold; font-size: 12px; text-transform: uppercase; text-decoration: none; color: #64748b; }body.page-post_image .post-tab.active{ color: #0a8bf5; border-bottom: 3px solid #0a8bf5; background: #fff; }body.page-post_image .verify-box{
        background: #212529; color: white; padding: 15px; text-align: center; border-radius: 4px; margin-bottom: 20px; position: relative;
    }body.page-post_image .verify-title{ font-size: 14px; font-weight: bold; margin-bottom: 10px; }body.page-post_image .verify-btn{
        background: linear-gradient(to right, #ff2d55, #af52de); color: white; border: none;
        padding: 10px 20px; font-weight: bold; border-radius: 20px; font-size: 13px; cursor: pointer; text-transform: uppercase; display: inline-block; text-decoration: none;
    }body.page-post_image .help-badge{ position: absolute; top: 10px; right: 10px; background: #ffd700; color: #000; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: bold; }body.page-post_image .form-step-title{ color: #0a8bf5; font-size: 14px; font-weight: bold; margin: 15px 0 6px 0; }body.page-post_image .file-input-box{ border: 1px solid #7dd3fc; background: #e0f2fe; padding: 10px; border-radius: 4px; }body.page-post_image .text-input-box{ width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; box-sizing: border-box; font-size: 14px; height: 90px; resize: none; }body.page-post_image .choice-group{ border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; background: white; }body.page-post_image .choice-row{ padding: 10px 12px; border-bottom: 1px solid #e2e8f0; font-size: 13px; display: flex; align-items: center; gap: 8px; color: #333; cursor: pointer; }body.page-post_image .choice-row:last-child{ border-bottom: none; }body.page-post_image .btn-submit-share{
        background: linear-gradient(to right, #ff2d55, #af52de); color: white; border: none;
        width: 100%; padding: 12px; font-weight: bold; font-size: 14px; text-transform: uppercase;
        border-radius: 25px; margin-top: 20px; cursor: pointer;
    }
.u-main-2f06100c53{text-align:center !important;font-weight:bold !important;font-size:15px !important;margin-bottom:10px !important}
.u-main-d0dac923d4{height:40px !important;padding:5px 10px !important}
.u-main-c56222acea{font-size:11px !important;color:#888 !important;text-align:right !important;margin-top:2px !important}

/* Migrated from post_text.html, scoped to .page-post_text */
body.page-post_text .post-form-container{ max-width: 480px; margin: 15px auto; padding: 15px; box-sizing: border-box; }body.page-post_text .post-type-tabs{ display: flex; border-bottom: 2px solid #e2e8f0; margin-bottom: 15px; }body.page-post_text .post-tab{ flex: 1; text-align: center; padding: 10px; font-weight: bold; font-size: 12px; text-transform: uppercase; text-decoration: none; color: #64748b; }body.page-post_text .post-tab.active{ color: #0a8bf5; border-bottom: 3px solid #0a8bf5; background: #fff; }body.page-post_text .verify-box{
        background: #212529; color: white; padding: 15px; text-align: center; border-radius: 4px; margin-bottom: 20px; position: relative;
    }body.page-post_text .verify-title{ font-size: 14px; font-weight: bold; margin-bottom: 10px; }body.page-post_text .verify-btn{
        background: linear-gradient(to right, #ff2d55, #af52de); color: white; border: none;
        padding: 10px 20px; font-weight: bold; border-radius: 20px; font-size: 13px; cursor: pointer; text-transform: uppercase; display: inline-block; text-decoration: none;
    }body.page-post_text .help-badge{ position: absolute; top: 10px; right: 10px; background: #ffd700; color: #000; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: bold; }body.page-post_text .form-step-title{ color: #0a8bf5; font-size: 14px; font-weight: bold; margin: 15px 0 6px 0; }body.page-post_text .text-input-box{ width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; box-sizing: border-box; font-size: 14px; height: 130px; resize: none; }body.page-post_text .choice-group{ border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; background: white; }body.page-post_text .choice-row{ padding: 10px 12px; border-bottom: 1px solid #e2e8f0; font-size: 13px; display: flex; align-items: center; gap: 8px; color: #333; cursor: pointer; }body.page-post_text .choice-row:last-child{ border-bottom: none; }body.page-post_text .btn-submit-share{
        background: linear-gradient(to right, #ff2d55, #af52de); color: white; border: none;
        width: 100%; padding: 12px; font-weight: bold; font-size: 14px; text-transform: uppercase;
        border-radius: 25px; margin-top: 20px; cursor: pointer;
    }

/* Migrated from privacy_settings.html, scoped to .page-privacy_settings */
body.page-privacy_settings .privacy-container{
        max-width: 480px;
        margin: 20px auto;
        background: #ffffff;
        padding: 16px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        box-sizing: border-box;
    }body.page-privacy_settings .privacy-title{
        text-align: center;
        color: #0284c7;
        font-size: 16px;
        font-weight: 800;
        margin-bottom: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }body.page-privacy_settings /* Message Alert Banners */
    .alert-banner{
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 15px;
    }body.page-privacy_settings .alert-success{
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }body.page-privacy_settings .alert-error{
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fca5a5;
    }body.page-privacy_settings .privacy-field-group{
        margin-bottom: 18px;
        background: #f8fafc;
        padding: 12px;
        border-radius: 6px;
        border: 1px solid #cbd5e1;
    }body.page-privacy_settings .privacy-label{
        display: block;
        font-size: 12px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 6px;
        text-transform: uppercase;
    }body.page-privacy_settings .privacy-select{
        width: 100%;
        padding: 8px 10px;
        font-size: 13px;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        background-color: #ffffff;
        outline: none;
        box-sizing: border-box;
    }body.page-privacy_settings .checkbox-row{
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
    }body.page-privacy_settings .btn-save-privacy{
        background: linear-gradient(to right, #00bfa5, #0284c7);
        color: white;
        border: none;
        width: 100%;
        padding: 11px;
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        border-radius: 20px;
        cursor: pointer;
        letter-spacing: 0.5px;
    }

/* Migrated from profile.html, scoped to .page-profile */
body.page-profile /* Fixed Flush Dual-Segment Toggle Bar (No Double White Padding) */
    .profile-toggle-container{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0 8px 0;
    }body.page-profile .profile-toggle-wrap{
        display: inline-flex;
        background-color: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 0;
        box-sizing: border-box;
    }body.page-profile .profile-toggle-tab{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px 14px;
        text-decoration: none;
        border-radius: 5px;
        min-width: 50px;
        box-sizing: border-box;
        transition: all 0.15s ease;
        border: 1px solid transparent; /* Keeps sizing identical */
    }body.page-profile /* Active Tab - Seamless 4-Side Teal Border directly on wrapper bounds */
    .profile-toggle-tab.active{
        background-color: #ffffff;
        border: 1px solid #00bfa5;
        color: #00bfa5;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        margin: -1px; /* Extends border flush over container edges */
    }body.page-profile .profile-toggle-tab.active .tab-svg-icon{
        fill: #00bfa5;
    }body.page-profile .profile-toggle-tab.active .tab-title-text{
        color: #00bfa5;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.3px;
    }body.page-profile /* Inactive Tab */
    .profile-toggle-tab.inactive{
        background-color: transparent;
        border: 1px solid transparent;
        color: #94a3b8;
    }body.page-profile .profile-toggle-tab.inactive .tab-svg-icon{
        fill: #94a3b8;
    }body.page-profile .profile-toggle-tab.inactive .tab-count-number{
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;
    }body.page-profile .profile-toggle-tab.inactive .tab-title-text{
        color: #94a3b8;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }body.page-profile /* Profile Icon Sizing */
    .tab-svg-icon{
        width: 17px;
        height: 17px;
        margin-bottom: 1px;
        transition: fill 0.15s ease;
    }body.page-profile .profile-owner-heading{
        text-align: center; font-size: 16px; font-weight: bold; color: #222; margin: 8px 0 10px 0;
    }body.page-profile .unverified-banner{
        background-color: #ff5722; color: white; text-align: center;
        padding: 5px 0; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
    }body.page-profile .profile-photo-section{
        background-color: #ffffff; text-align: center; width: 100%; padding-bottom: 6px;
    }body.page-profile .photo-label{ color: #9c9c9c; font-size: 13px; font-weight: bold; padding: 8px 0; display: block; background: #ffffff; }body.page-profile .profile-display-img{ width: 100%; max-width: 420px; height: auto; display: inline-block; }body.page-profile .owner-actions-container{ display: flex; flex-direction: column; width: 100%; }body.page-profile .btn-profile-action{
        text-align: center; padding: 10px 0; color: white; font-size: 12px;
        font-weight: bold; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.08);
    }body.page-profile .btn-edit-profile{ background: linear-gradient(to right, #00ced1, #00bfff); }body.page-profile .btn-change-password{ background: linear-gradient(to right, #4682b4, #5c7aad); }body.page-profile .btn-privacy-settings{ background: linear-gradient(to right, #e91e63, #ba55d3); }body.page-profile /* Public Action Row Layout */
    .public-actions-row{ display: flex; justify-content: center; gap: 6px; padding: 10px 0; background: #fff; border-bottom: 1px solid #e0e0e0; flex-wrap: wrap; align-items: center; }body.page-profile .btn-public-mini{
        border: 1px solid #b19ddb; border-radius: 4px; background: white; color: #7f51f9;
        font-size: 10px; font-weight: bold; text-transform: uppercase; text-decoration: none;
        display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
        gap: 4px; padding: 0 10px; height: 34px; box-sizing: border-box; cursor: pointer;
    }body.page-profile .btn-public-mini.is-following{ border-color: #ff5722; color: #ff5722; }body.page-profile .btn-public-mini.btn-block{ border-color: #d32f2f; color: #d32f2f; }body.page-profile .btn-public-mini.is-blocked{ background-color: #d32f2f; color: #ffffff; border-color: #d32f2f; }body.page-profile .mini-btn-blue{ border-color: #2bbcfa; color: #2bbcfa; }body.page-profile .info-block-box{ background-color: #ffffff; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; margin-bottom: 10px; }body.page-profile .info-block-header{
        background-color: #fcfcfc; color: #9a9a9a; font-size: 13px; font-weight: bold;
        text-align: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0;
    }body.page-profile .info-data-row{
        display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
        gap: 8px; padding: 8px 14px; border-bottom: 1px solid #f9f9f9; font-size: 13px; color: #707070; line-height: 1.4;
    }body.page-profile .info-data-row:last-child{ border-bottom: none; }body.page-profile .info-label{ color: #9c9c9c; font-weight: bold; text-align: left; white-space: nowrap; }body.page-profile .info-value{ font-weight: 500; color: #333333; text-align: left; }body.page-profile .bio-data-row{
        display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;
        gap: 8px; padding: 8px 14px; border-bottom: 1px solid #f9f9f9; font-size: 13px; color: #707070; line-height: 1.4;
    }body.page-profile .bio-text-content{
        font-weight: 500; color: #333333; text-align: left; flex: 1;
        word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
    }body.page-profile .info-value-urdu{
        font-size: 15px; color: #111111; font-weight: 500; text-align: right; direction: rtl; flex: 1;
        word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
    }body.page-profile .topics-tray-box{ padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; }body.page-profile .btn-unsubscribe-toggle{
        background-color: #f2f2f2; color: #707070; border: 1px solid #dcdcdc; border-radius: 4px;
        padding: 6px 0; font-size: 12px; font-weight: bold; width: 85%; text-align: center; text-decoration: none;
    }body.page-profile .btn-subscribe-toggle{
        background-color: #00bfa5; color: white; border: none; border-radius: 4px;
        padding: 6px 0; font-size: 12px; font-weight: bold; width: 85%; text-align: center; text-decoration: none;
    }body.page-profile .topic-gradient-badge{
        background: linear-gradient(to right, #4caf50, #ff5722); color: white; font-size: 12px; font-weight: bold;
        padding: 6px 0; width: 85%; border-radius: 4px; text-align: center; text-decoration: none;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    }body.page-profile .badge-teal-status{ background-color: #00bfa5; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; display: inline-block; text-decoration: none; }body.page-profile .badge-orange-status{ background-color: #ff5722; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-block; text-decoration: none; }body.page-profile .btn-view-posts{ background-color: #00bfa5; color: white; border: none; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; text-decoration: none; text-transform: lowercase; display: inline-block; }
.u-main-57ef49c5f0{display:flex !important;justify-content:center !important;padding:12px 0 !important}
.u-main-41cd2e42c3{border-radius:50% !important;background-color:#e2e8f0 !important}
.u-main-fc2635738b{border-color:#f59e0b !important;color:#d97706 !important}
.u-main-6f4d3184c0{font-size:12px !important;color:#aaa !important}
.u-main-a38a558733{margin-bottom:25px !important}
.u-main-0299426860{color:#111111 !important}
.u-main-a90282967b{color:#7f7f7f !important;font-size:12px !important;font-weight:normal !important}
.u-main-8a44fa13bb{font-size:12px !important;color:#707070 !important;text-decoration:none !important}
.u-main-dae35c4fca{font-size:12px !important;color:#707070 !important}
.u-main-1533898904{padding:12px !important;background:#ffffff !important;border:1px solid #e0e0e0 !important;border-radius:6px !important;margin-bottom:10px !important}
.u-main-a9c77021d6{display:flex !important;gap:8px !important}
.u-main-2d8d5b405c{flex:1 !important;padding:8px 12px !important;font-size:13px !important;border:1px solid #cbd5e1 !important;border-radius:4px !important;outline:none !important}
.u-main-0bf4881f45{background:#00a2e8 !important;color:white !important;border:none !important;padding:0 16px !important;font-weight:bold !important;border-radius:4px !important;cursor:pointer !important;font-size:12px !important}
.u-main-75ece06ee8{font-size:12px !important;font-weight:bold !important;color:#64748b !important;margin-bottom:8px !important}
.u-main-e765ce70d8{text-align:center !important;padding:30px 0 !important;color:#999 !important}
.u-main-93e23cb74e{font-size:12px !important;font-weight:bold !important;color:#64748b !important;margin:16px 0 8px 0 !important}
.u-main-ae8a9292b1{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:8px 12px !important;background:#fafafa !important;border:1px solid #e0e0e0 !important;border-radius:4px !important;margin-bottom:6px !important}
.u-main-f9be44458c{font-weight:bold !important;font-size:13px !important;color:#333333 !important;text-decoration:none !important}
.u-main-62c7fcf76b{font-size:10px !important;color:#0284c7 !important;text-decoration:none !important;font-weight:bold !important}
.u-main-e1679ab1a1{font-size:10px !important;color:#16a34a !important;text-decoration:none !important;font-weight:bold !important}
.u-main-13e191ad5e{font-size:12px !important;color:#ef4444 !important;text-decoration:none !important;font-weight:bold !important;margin-left:6px !important}

/* Migrated from select_categories.html, scoped to .page-select_categories */
body.page-select_categories /* Full width responsive layout for PC and mobile */
    .select-cat-wrapper{
        width: 100%;
        max-width: 900px; /* Allows a wider grid on PC screens */
        margin: 0 auto;
        padding: 15px 15px 90px 15px; /* Bottom padding prevents footer overlap */
        box-sizing: border-box;
    }body.page-select_categories .header-banner{
        background-color: #ffd814;
        width: 100%;
        padding: 15px 10px;
        text-align: center;
        box-sizing: border-box;
        border-radius: 4px;
        margin-bottom: 12px;
    }body.page-select_categories .header-title{ font-size: 18px; font-weight: bold; color: #111; margin: 0 0 5px 0; }body.page-select_categories .header-subtitle{ font-size: 13px; color: #333; margin: 0; }body.page-select_categories .counter-banner{
        background-color: #232f3e;
        color: white;
        width: 100%;
        padding: 8px 0;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        border-radius: 4px;
        margin-bottom: 15px;
    }body.page-select_categories .group-section{
        margin-bottom: 20px;
        background: #ffffff;
        padding: 12px 15px;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }body.page-select_categories .group-title{ font-size: 14px; font-weight: bold; color: #111; margin: 0 0 10px 0; }body.page-select_categories /* Flex wrap layout so items fill PC screens horizontally */
    .tags-flex{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }body.page-select_categories .hidden-checkbox{ display: none; }body.page-select_categories .tag-label{
        background-color: #f8fafc;
        color: #444;
        border: 1px solid #cbd5e1;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s ease;
    }body.page-select_categories .tag-label:hover{
        border-color: #0a8bf5;
    }body.page-select_categories /* Damadam Circular Text Avatar Badges */
    .damadam-text-avatar{
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
        margin-right: 8px;
        user-select: none;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }body.page-select_categories /* Color Themes for Category Groups */
    .group-funny{ background: #ff2a6d !important; }body.page-select_categories .group-poetry{ background: #7f51f9 !important; }body.page-select_categories .group-quotes{ background: #2bbcfa !important; }body.page-select_categories .group-celebrities{ background: #ff5722 !important; }body.page-select_categories .group-art{ background: #4caf50 !important; }body.page-select_categories .group-beauty{ background: #e91e63 !important; }body.page-select_categories .group-informative{ background: #00bcd4 !important; }body.page-select_categories .group-mind-exercise{ background: #3f51b5 !important; }body.page-select_categories .group-urdu-novels{ background: #9c27b0 !important; }body.page-select_categories .hidden-checkbox:checked + .tag-label{
        background-color: #232f3e;
        color: white;
        border-color: #232f3e;
    }body.page-select_categories .hidden-checkbox:checked + .tag-label .damadam-text-avatar{
        border-color: #ffd814;
        color: #ffd814;
    }body.page-select_categories /* Fixed Bottom Action Tray */
    .bottom-action-tray{
        position: fixed;
        bottom: 50px; /* Sits right above the sticky footer */
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 500px;
        background: transparent;
        padding: 10px 0;
        text-align: center;
        pointer-events: none;
        z-index: 100;
    }body.page-select_categories .btn-submit{
        background: linear-gradient(to right, #ff2a6d, #cc20af);
        color: white; border: none; font-size: 14px; font-weight: bold;
        text-transform: uppercase; padding: 12px 0; width: 85%;
        border-radius: 25px; cursor: pointer; letter-spacing: 1px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2); pointer-events: auto;
    }

/* Migrated from share_hub.html, scoped to .page-share_hub */
body.page-share_hub .share-container{
        max-width: 480px; margin: 20px auto; background: #ffffff; padding: 20px;
        box-sizing: border-box; text-align: center; border-radius: 4px; border: 1px solid #e0e0e0;
    }body.page-share_hub .share-title{ font-size: 16px; font-weight: bold; color: #333; margin-bottom: 15px; }body.page-share_hub .banner-box{
        background: linear-gradient(to right, #a855f7, #ec4899, #f97316); color: white;
        padding: 20px; border-radius: 6px; font-size: 14px; font-weight: bold; margin-bottom: 20px; line-height: 1.4;
    }body.page-share_hub .selection-grid{ display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }body.page-share_hub .select-card{
        background: white; width: 120px; height: 110px; border-radius: 8px; border: 2px solid #e2e8f0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.2s;
    }body.page-share_hub .select-card:hover{ border-color: #0a8bf5; }body.page-share_hub .card-icon{ font-size: 28px; margin-bottom: 8px; }body.page-share_hub .card-label{ font-size: 11px; font-weight: bold; text-transform: uppercase; color: #0a8bf5; }body.page-share_hub .help-banner{
        background: white; border: 1px solid #fca5a5; padding: 12px; border-radius: 4px;
        color: #ef4444; font-weight: bold; font-size: 13px; text-decoration: none; display: inline-block; width: 100%; box-sizing: border-box;
    }
.u-main-238b01822a{font-size:15px !important;font-weight:bold !important;color:#333 !important;margin-bottom:12px !important}

/* Migrated from signup.html, scoped to .page-signup */
body.page-signup{
            background: linear-gradient(135deg, #2bbcfa 0%, #7f51f9 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0; padding: 0; min-height: 100vh;
            display: flex; flex-direction: column; align-items: center;
        }body.page-signup .brand-title{
            color: white; font-size: 34px; font-weight: 500;
            margin-top: 30px; margin-bottom: 2px; text-align: center;
        }body.page-signup .brand-subtitle{
            color: rgba(255, 255, 255, 0.9); font-size: 11px;
            text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 25px; text-align: center;
        }body.page-signup .main-card{
            background-color: #ffd814; width: 90%; max-width: 440px;
            border-radius: 4px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            box-sizing: border-box; text-align: center;
        }body.page-signup .card-header{
            color: #111111; font-size: 16px; font-weight: bold; text-transform: uppercase;
            border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 12px; margin-bottom: 20px;
        }body.page-signup .instruction-text{
            color: #222222; font-size: 15px; margin-bottom: 15px; line-height: 1.4;
        }body.page-signup .sub-instruction{
            color: #444444; font-size: 13px; margin-bottom: 12px;
        }body.page-signup .input-wrapper{
            position: relative; background: white; border: 1px solid #ccc;
            border-radius: 2px; display: flex; align-items: center;
            padding: 6px 10px; margin-bottom: 20px; max-width: 320px; margin-left: auto; margin-right: auto;
        }body.page-signup .input-icon{ font-size: 20px; margin-right: 10px; user-select: none; }body.page-signup .input-field{ border: none; outline: none; width: 100%; font-size: 16px; color: #111; background: transparent; }body.page-signup .btn-next{
            background: linear-gradient(to right, #ff2a6d, #cc20af); color: white;
            border: none; font-size: 14px; font-weight: bold; text-transform: uppercase;
            padding: 12px 0; width: 100%; max-width: 320px; border-radius: 25px;
            cursor: pointer; letter-spacing: 1px; display: inline-block; text-decoration: none;
        }body.page-signup .or-divider{
            color: white; font-size: 12px; font-weight: bold; text-transform: uppercase;
            margin: 15px 0; position: relative; width: 90%; max-width: 440px;
            display: flex; align-items: center; justify-content: center;
        }body.page-signup .or-divider::before,body.page-signup .or-divider::after{
            content: ""; flex: 1; background: rgba(255,255,255,0.4); height: 1px; margin: 0 10px;
        }body.page-signup .btn-existing{
            background-color: rgba(255, 255, 255, 0.4); color: #222;
            border: 1px solid rgba(255, 255, 255, 0.3); font-size: 13px; font-weight: bold;
            text-transform: uppercase; padding: 12px 0; width: 90%; max-width: 440px;
            border-radius: 25px; cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
        }body.page-signup .error-msg{
            background-color: #ff3860; color: white; font-size: 13px; padding: 8px; border-radius: 3px; margin-bottom: 15px;
        }body.page-signup .highlight-text{ color: #e61c5d; font-weight: bold; }
.u-main-e5df40b91d{font-size:16px !important;margin-top:10px !important}
.u-main-da3f8db2b1{font-weight:bold !important}
.u-main-60ca75f2bb{font-size:14px !important;color:#333 !important}

/* Migrated from stars.html, scoped to .page-stars */
body.page-stars .red-star-card{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 8px;
        gap: 8px;
    }body.page-stars .red-star-user-info{
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
    }body.page-stars .red-star-user-details{
        min-width: 0;
        flex: 1;
    }body.page-stars .red-star-username-row{
        display: flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
    }body.page-stars .red-star-username-link{
        font-weight: bold;
        font-size: 14px;
        color: #111111;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }body.page-stars .red-star-stats{
        font-size: 11px;
        color: #64748b;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }body.page-stars .red-star-action-btn{
        padding: 5px 8px;
        font-size: 10px;
        text-decoration: none;
        color: #dc2626;
        background-color: #fef2f2;
        border: 1px solid #fca5a5;
        border-radius: 4px;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex-shrink: 0;
        white-space: nowrap;
    }body.page-stars /* Target iPhone SE and screens under 380px */
    @media (max-width: 380px){
        .red-star-card {
            padding: 8px 10px;
        }

        .red-star-stats {
            font-size: 10px;
        }

        .red-star-action-btn {
            padding: 4px 6px;
            font-size: 10px;
        }

        .red-star-btn-text {
            display: inline;
        }
    }
.u-main-c7e53752b0{max-width:760px !important;width:100% !important;margin:0 auto !important;padding:0 6px 12px 6px !important;box-sizing:border-box !important}
.u-main-1d51f24dee{text-align:center !important;padding:14px !important;background:linear-gradient(to right, #fff1f2, #ffe4e6) !important;border:1px solid #fecdd3 !important;border-radius:6px !important;margin-bottom:10px !important}
.u-main-348c8b4ca2{margin:0 0 4px 0 !important;font-size:17px !important;color:#e11d48 !important;font-weight:800 !important}
.u-main-d24271794b{margin:0 !important;font-size:11px !important;color:#9f1239 !important}
.u-main-31f80ef7b4{font-weight:800 !important;font-size:12px !important;color:#64748b !important;flex-shrink:0 !important}
.u-main-69271fc98e{flex-shrink:0 !important}
.u-main-eabbee21f9{width:32px !important;height:32px !important;border-radius:50% !important;object-fit:cover !important;display:block !important}
.u-main-8c1a2e0e41{width:32px !important;height:32px !important;border-radius:50% !important;background-color:#0a8bf5 !important;color:white !important;display:flex !important;align-items:center !important;justify-content:center !important;font-weight:bold !important;font-size:12px !important;text-decoration:none !important;flex-shrink:0 !important}
.u-main-13a7575070{color:#ff0000 !important;font-size:13px !important;font-weight:bold !important;flex-shrink:0 !important}
.u-main-9b0f7ab173{display:flex !important;align-items:center !important;gap:5px !important;background:#ffffff !important;padding:6px 8px !important;margin-bottom:0 !important;overflow-x:auto !important;white-space:nowrap !important;border-bottom:1px solid #dcdcdc !important;cursor:grab !important;user-select:none !important;-webkit-user-select:none !important}
.u-main-14db98e6ee{display:inline-flex !important;align-items:center !important;background:#e2e8f0 !important;border:1px solid #cbd5e1 !important;color:#111111 !important;font-size:11px !important;font-weight:700 !important;padding:2px 10px !important;border-radius:12px !important;text-decoration:none !important;flex-shrink:0 !important;font-style:italic !important;height:24px !important;box-sizing:border-box !important}
.u-main-bd80b418c7{display:inline-flex !important;align-items:center !important;gap:4px !important;background-color:#e2e8f0 !important;border:1px solid #cbd5e1 !important;color:#333333 !important;font-size:11px !important;font-weight:600 !important;padding:2px 10px !important;border-radius:12px !important;text-decoration:none !important;flex-shrink:0 !important;height:24px !important;box-sizing:border-box !important}
.u-main-6f24418f0f{display:flex !important;justify-content:center !important;margin:12px 0 !important;padding:0 10px !important}
.u-main-562dac1261{display:inline-flex !important;background-color:#f7f7f7 !important;border:1px solid #dcdcdc !important;border-radius:6px !important;overflow:hidden !important;box-shadow:0 1px 2px rgba(0,0,0,0.03) !important}
.u-main-fd5e59566a{background:#ffffff !important;border:1px solid #00a2e8 !important;border-radius:6px !important;margin:10px 0 !important;overflow:hidden !important;box-shadow:0 1px 2px rgba(0,0,0,0.02) !important}
.u-main-96b484f3e3{padding:6px 10px !important;line-height:1.4 !important}
.u-main-b15c9ccd69{color:#3ca1c3 !important;text-decoration:none !important}
.u-main-6cfc130039{font-size:12px !important;font-weight:bold !important;color:#0f172a !important;margin-top:4px !important;margin-bottom:2px !important}
.u-main-aab1565c07{color:#111111 !important;text-decoration:none !important;font-weight:800 !important}
.u-main-7a006740df{color:#111111 !important;text-decoration:none !important;font-weight:bold !important}
.u-main-210c907215{font-size:10px !important;color:#8a8a8a !important;font-weight:normal !important;margin-left:6px !important}
.u-main-6512549abd{font-size:11px !important;color:#777777 !important;margin-top:2px !important}
.u-main-ba2e7bb862{background:#00a2e8 !important;color:#ffffff !important;text-align:center !important;font-weight:bold !important;font-size:11px !important;padding:3px 0 !important;text-transform:uppercase !important;cursor:pointer !important}
.u-main-877eac944b{padding:5px !important;background:#f8fafc !important;border-top:1px solid #00a2e8 !important;display:flex !important}
.u-main-f1830c4683{flex:1 !important;border:none !important;padding:5px 8px !important;font-size:11px !important;outline:none !important;background:#fafafa !important}
.u-main-d6faa758a8{background:#00a2e8 !important;color:white !important;border:none !important;padding:0 14px !important;font-weight:bold !important;font-size:11px !important;cursor:pointer !important}
.u-main-0d62fd4c40{background:#ffffff !important;border:1px solid #e0e0e0 !important;border-radius:4px !important;margin-bottom:10px !important;padding:0 !important;overflow:hidden !important;box-shadow:0 1px 2px rgba(0,0,0,0.02) !important}
.u-main-3fb8ecf46c{width:100% !important;background:#f0f9ff !important;border-bottom:1px solid #bae6fd !important;padding:5px 10px !important;margin:0 !important;display:flex !important;align-items:center !important;justify-content:space-between !important;box-sizing:border-box !important}
.u-main-d0e38be357{font-size:11px !important;font-weight:800 !important;color:#0284c7 !important;text-decoration:none !important;text-transform:uppercase !important;letter-spacing:0.3px !important}
.u-main-255c3c0afb{font-size:11px !important;font-weight:800 !important;color:#0284c7 !important;text-transform:uppercase !important}
.u-main-1a651c3112{padding:8px 10px !important}
.u-main-0493aac0f4{display:flex !important;align-items:center !important;gap:4px !important;margin-bottom:6px !important;flex-wrap:wrap !important}
.u-main-f57d246256{width:24px !important;height:24px !important;border-radius:50% !important;object-fit:cover !important}
.u-main-6dddf26c06{width:24px !important;height:24px !important;border-radius:50% !important;background-color:#0a8bf5 !important;color:white !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;font-weight:bold !important;font-size:10px !important}
.u-main-97af447ec6{font-weight:bold !important;font-size:12px !important;color:#111111 !important;text-decoration:none !important}
.u-main-4795db3ac9{color:#888888 !important;font-weight:normal !important;font-size:10px !important}
.u-main-68bbe277f1{margin-bottom:8px !important;line-height:1.4 !important}
.u-main-45f75baeb8{display:flex !important;justify-content:center !important;gap:4px !important;margin:8px 0 !important;flex-wrap:wrap !important;align-items:center !important}
.u-main-b4213165f4{display:flex !important;margin:0 !important;border:1px solid #cccccc !important;border-radius:3px !important;overflow:hidden !important}
.u-main-f85475d3c5{text-align:center !important;padding:40px 0 !important;color:#999 !important;font-size:13px !important;background:#ffffff !important;border:1px solid #e0e0e0 !important;border-radius:4px !important}
.u-main-4b5f69e419{display:flex !important;justify-content:center !important;gap:8px !important;margin:20px 0 !important;align-items:center !important}

/* Migrated from trending_images.html, scoped to .page-trending_images */
body.page-trending_images /* Lightweight Content Components for the Trending Images Workspace Grid */
    .images-dashboard-panel{
        padding: 40px 16px;
        text-align: center;
        box-sizing: border-box;
        width: 100%;
    }body.page-trending_images .panel-heading-text{
        color: #cc20af;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }body.page-trending_images .panel-description-para{
        font-size: 13px;
        color: #666666;
        line-height: 1.5;
        margin-bottom: 25px;
    }body.page-trending_images .panel-action-routing-link{
        color: #0a8bf5;
        font-weight: bold;
        text-decoration: none;
        font-size: 14px;
    }body.page-trending_images .panel-action-routing-link:hover{
        text-decoration: underline;
    }

/* Migrated from user_posts.html, scoped to .page-user_posts */
body.page-user_posts .posts-container{
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: 0 6px 12px 6px;
        box-sizing: border-box;
    }body.page-user_posts /* Profile Segment Toggle Containers */
    .profile-toggle-container{
        display: flex;
        justify-content: center;
        margin-top: 8px;
        margin-bottom: 8px;
    }body.page-user_posts .profile-toggle-wrap{
        display: inline-flex;
        background-color: #f7f7f7;
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }body.page-user_posts .profile-toggle-tab{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color: #64748b;
    }body.page-user_posts .profile-toggle-tab.active{
        background: #ffffff;
        color: #0284c7;
    }body.page-user_posts .profile-toggle-tab.inactive{
        background: #f7f7f7;
        color: #64748b;
    }body.page-user_posts .tab-svg-icon{
        width: 14px;
        height: 14px;
        fill: currentColor;
    }body.page-user_posts /* Post Card Wrapper */
    .damadam-post-card{
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 0; /* Flush edges for header ribbon */
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }body.page-user_posts /* Flush Full-Width Header Ribbon Across Post Top */
    .post-category-header-ribbon{
        width: 100%;
        background: #f0f9ff;
        border-bottom: 1px solid #bae6fd;
        padding: 5px 10px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }body.page-user_posts .post-category-ribbon-link{
        font-size: 11px;
        font-weight: 800;
        color: #0284c7;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }body.page-user_posts .post-category-ribbon-link:hover{
        text-decoration: underline;
    }body.page-user_posts .post-inner-content{
        padding: 8px 10px;
    }body.page-user_posts .post-author-box{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }body.page-user_posts .post-avatar-img{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }body.page-user_posts .post-avatar-fallback{ width: 26px; height: 26px; border-radius: 50%; background-color: #0a8bf5; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; }body.page-user_posts .post-author-name{ font-weight: bold; font-size: 12px; color: #111111; text-decoration: none; }body.page-user_posts .post-caption-inline-row{
        margin: 6px 0 4px 0;
        font-size: 14px;
        color: #111111;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
    }body.page-user_posts .post-caption-text{ display: inline; word-break: break-word; overflow-wrap: break-word; }body.page-user_posts .post-caption-text-urdu{ display: inline-block; text-align: right; direction: rtl; font-size: 15px; }body.page-user_posts .post-image-attachment{
        width: 100%;
        max-width: 450px;
        height: auto;
        border-radius: 4px;
        margin-bottom: 6px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }body.page-user_posts /* Action Buttons Row */
    .post-action-buttons{ display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; align-items: center; }body.page-user_posts .action-btn{
        border: 1px solid #cbd5e1; border-radius: 4px; background: white;
        padding: 2px 6px; font-size: 10px; font-weight: bold; text-transform: uppercase;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 48px; height: 36px; text-decoration: none; box-sizing: border-box; cursor: pointer;
    }body.page-user_posts .btn-follow-post{ border-color: #c084fc; color: #9333ea; }body.page-user_posts .btn-like{ border-color: #fca5a5; color: #ef4444; }body.page-user_posts .btn-1on1{ border-color: #38bdf8; color: #0284c7; }body.page-user_posts .btn-report{ border-color: #fde047; color: #ca8a04; }body.page-user_posts /* Reply Input Bar */
    .reply-input-bar{ display: flex; margin-top: 6px; border: 1px solid #cccccc; border-radius: 3px; overflow: hidden; }body.page-user_posts .reply-text-field{ flex: 1; border: none; padding: 5px 8px; font-size: 11px; outline: none; background: #fafafa; }body.page-user_posts .reply-submit-btn{ background: #00a2e8; color: white; border: none; padding: 0 14px; font-weight: bold; font-size: 11px; cursor: pointer; }body.page-user_posts .empty-posts-notice{
        text-align: center;
        padding: 50px 20px;
        color: #64748b;
        font-size: 14px;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
    }
.u-main-68b7c25c54{margin-top:4px !important;margin-bottom:12px !important}
.u-main-073d3a529d{font-size:10px !important;padding:4px 0 !important}
.top-star{color:#b42318;font-size:13px;font-weight:800;margin-left:2px}
.home-notifications{margin:10px 0 14px;padding:10px;background:#f1f6fa;border:1px solid #cfdae3;border-radius:12px}
.home-notifications-title{margin:0 0 8px;color:#17384d;font-size:15px;font-weight:800}
.home-notif-card{margin:0 0 8px;border:1px solid #d7e1e8;border-radius:10px;background:#fff;box-shadow:0 2px 8px #17384d0c}
.home-notif-card:last-of-type{margin-bottom:8px}
.home-notif-card .notif-body-content{min-width:0;overflow-wrap:anywhere}
.home-notif-card .notif-post-title-link{display:block;line-height:1.4}
.home-notif-card .notif-user-line{display:flex;flex-wrap:wrap;gap:3px 5px;align-items:baseline;margin-top:4px;line-height:1.4}
.home-notif-card .notif-actions-row{justify-content:flex-end;margin-top:7px}
.home-notif-card .notif-action-btn{display:inline-flex;margin-top:6px;padding:5px 9px;border-radius:7px;background:#e8f2f8;color:#124866;font-size:12px;font-weight:700;text-decoration:none}
.home-notifications-all{display:block;padding:7px 2px 1px;color:#124866;font-size:13px;font-weight:800;text-align:center;text-decoration:none}
@media(max-width:420px){.home-notifications{padding:8px}.home-notif-card .notif-actions-row{gap:6px}.home-notifications-title{font-size:14px}}
.verified-badge{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:3px;border-radius:50%;background:#087f5b;color:#fff;font:800 10px/1 Arial,sans-serif;vertical-align:middle;box-shadow:0 0 0 1px #fff}
.notification-peek{width:calc(100% - 16px);max-width:760px;margin:7px auto 0;border:1px solid #b8cbd7;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(16,42,67,.08);overflow:hidden}
.notification-peek.is-empty{display:none}
.notification-peek-summary{min-height:48px;display:flex;align-items:center;gap:9px;padding:6px 10px;cursor:pointer;list-style:none;color:#fff;background:#12324a}
.notification-peek-summary::-webkit-details-marker{display:none}
.notification-peek-label{flex:none;display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;white-space:nowrap}
.notification-peek-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:#f2c14e;color:#172b3a;font-size:12px}
.notification-peek-sneak{min-width:0;flex:1;color:#f4f8fb;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-peek-chevron{font-size:18px;line-height:1;color:#f2c14e;transition:transform .15s ease}
.notification-peek[open] .notification-peek-chevron{transform:rotate(180deg)}
.notification-peek-panel{padding:7px;background:#edf3f6}
.notification-peek-all{display:inline-flex;align-items:center;min-height:36px;padding:0 8px;color:#075985;font-size:12px;font-weight:800;text-decoration:none}
.notification-peek-list{display:grid;gap:6px}
.notification-peek-item{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 9px;border:1px solid #d3e0e7;border-radius:9px;background:#fff;color:#17384d;line-height:1.4}
.notification-peek-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;font-size:13px}
.notification-peek-copy a{color:#075985;font-weight:700;text-decoration:none}
.notification-peek-copy a:hover,.notification-peek-all:hover{text-decoration:underline}
.notification-peek-link{color:#17384d!important;font-weight:600!important;text-decoration:none}
.notification-peek-sub{color:#40596b}
.notification-peek-time{color:#536777;font-size:11px}
.notification-peek-action{align-self:flex-start;min-height:34px;display:inline-flex;align-items:center;padding:0 9px;border-radius:7px;background:#e7f2f6;color:#075985!important}
.notification-peek-skip{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid #c7d2dc;border-radius:9px;background:#f7fafc;color:#8b2635!important;font-size:21px;text-decoration:none}
.notification-peek-skip:hover{background:#fdebec;border-color:#c2414d}
.top-star{color:#a61b1b}
.brand-header{background:linear-gradient(110deg,#102a43,#075985)}
.yellow-sub-bar{background:#f2c14e;border-color:#a27612}
.yellow-sub-bar .sub-bar-tab{min-height:42px;color:#243746}
.yellow-sub-bar .sub-bar-tab.active{background:#fff8df;color:#102a43}
.sticky-footer-menu{padding-bottom:env(safe-area-inset-bottom);height:calc(54px + env(safe-area-inset-bottom));background:#102a43;border-color:#34566d}
.footer-navigation-tab{min-height:48px;color:#e7f2f6}
.footer-navigation-tab.active{color:#ffe08a!important}
button,.btn,.action-btn,.chat-btn,.btn-header-action,.btn-pill,.notif-act,.reply-submit-btn{min-height:40px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d68b00;outline-offset:2px}
input,textarea,select{max-width:100%;font-size:16px}
.banned-page{min-height:100vh;display:grid;place-items:center;padding:18px;background:#edf3f6;color:#17384d;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.banned-card{width:min(100%,520px);padding:24px;border:1px solid #c7d2dc;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(16,42,67,.12)}
.banned-card h1{margin:0 0 10px;font-size:clamp(22px,5vw,30px)}
.banned-card p{margin:0 0 18px;color:#40596b}
.banned-logout{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:9px;background:#075985;color:#fff;font-weight:800;text-decoration:none}
body,.app-shell,.dynamic-content-area{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
@media(max-width:520px){.notification-peek{width:calc(100% - 10px);margin-top:5px;border-radius:10px}.notification-peek-summary{min-height:46px;padding:5px 8px;gap:7px}.notification-peek-label{font-size:12px}.notification-peek-sneak{font-size:11px}.notification-peek-item{padding:7px}.notification-peek-copy{font-size:12px}.notification-peek-skip{width:40px;height:40px}.brand-header{padding-left:4px}.header-actions-group{gap:4px}.sub-bar-tab{flex:1;justify-content:center}.dynamic-content-area{padding-left:4px;padding-right:4px}.sticky-footer-menu{height:calc(58px + env(safe-area-inset-bottom))}.footer-navigation-tab{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.public-home{width:calc(100% - 12px);max-width:760px;margin:10px auto 24px;color:#17384d}
.public-home-hero{padding:clamp(18px,5vw,34px);border:1px solid #c6d6df;border-radius:18px;background:linear-gradient(145deg,#fff 4%,#eaf3f6 100%);box-shadow:0 8px 24px rgba(16,42,67,.08)}
.public-home-kicker{margin:0 0 6px;color:#087f5b;font-size:13px;font-weight:800;letter-spacing:.03em}
.public-home-hero h1{margin:0;color:#102a43;font-size:clamp(30px,8vw,48px);line-height:1.1;letter-spacing:-.035em}
.public-home-lead{max-width:600px;margin:12px 0 18px;color:#334e60;font-size:clamp(16px,4vw,19px);line-height:1.55}
.public-home-actions{display:flex;flex-wrap:wrap;gap:9px}
.public-home-join,.public-home-login{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:10px;font-weight:800;text-decoration:none}
.public-home-join{background:#087f5b;color:#fff;box-shadow:0 3px 0 #07563f}
.public-home-login{border:1px solid #075985;background:#fff;color:#075985}
.public-home-features{display:grid;gap:7px;margin:20px 0 0;padding:0;list-style:none;color:#243f50;font-size:14px}
.public-home-features li{display:flex;align-items:flex-start;gap:8px}
.public-home-features li::before{content:"✓";flex:none;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#d9f2e6;color:#07563f;font-size:12px;font-weight:900}
.public-home-recent{margin-top:18px}
.public-home-recent h2{margin:0 0 9px;color:#102a43;font-size:20px}
.public-post-preview{margin:0 0 9px;padding:12px;border:1px solid #cfdae1;border-radius:12px;background:#fff;overflow-wrap:anywhere}
.public-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:#536777;font-size:12px}
.public-post-meta a{color:#075985;font-weight:800;text-decoration:none}
.public-post-meta span{padding:3px 7px;border-radius:20px;background:#eaf3f6;color:#17384d;font-weight:700}
.public-post-meta time{margin-left:auto}
.public-post-preview img{display:block;width:auto;max-width:100%;max-height:380px;margin:9px auto 0;border-radius:9px;object-fit:contain}
.public-post-preview p{margin:8px 0;color:#243f50;font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.public-post-open{display:inline-flex;min-height:36px;align-items:center;color:#075985;font-size:13px;font-weight:800;text-decoration:none}
@media(max-width:480px){.public-home{width:calc(100% - 8px);margin-top:6px}.public-home-hero{padding:18px 15px;border-radius:14px}.public-home-actions{display:grid}.public-home-join,.public-home-login{width:100%}.public-home-recent h2{font-size:18px}.public-post-preview{padding:10px}}

/* Small-screen layout fixes for the public home and matching auth pages. */
.app-shell,.dynamic-content-area,.public-home,.public-home-hero,.public-post-preview{min-width:0;max-width:100%;box-sizing:border-box}
.public-home{overflow:hidden}
.public-home-lead,.public-home-features,.public-post-preview p{overflow-wrap:anywhere}
.notification-peek-kind{display:inline-flex;align-self:flex-start;align-items:center;min-height:22px;padding:0 7px;border-radius:999px;background:#e2eef4;color:#075985;font-size:11px;font-weight:800;letter-spacing:.02em}
.notification-skip-form{display:inline-flex;max-width:100%;margin:0}
.notification-skip-form--grow{flex:1;min-width:0}
.notification-skip-form--grow button{width:100%;box-sizing:border-box}
.notification-peek-dismiss-form{flex:none;display:grid;margin:0}
.notification-peek-skip{padding:0;cursor:pointer;font-family:inherit}
.notification-peek-skip:disabled{opacity:.65;cursor:wait}
.notification-peek-action{background:#e3f1f5;color:#064b70!important;font-weight:800;text-decoration:none}
.notification-peek-action:focus-visible,.notification-peek-skip:focus-visible{outline:3px solid #b77900;outline-offset:2px}
.chat-notif .chat-btn{background:#075985;color:#fff;border:1px solid #064b70}
.chat-notif .chat-btn-green{background:#176b45;border-color:#125a39}
.chat-notif .chat-btn-red{background:#a61b1b;border-color:#851717}
body[class] .reply-submit-btn,body[class] .btn-submit,body[class] .btn-submit-share,body[class] .edit-profile-btn-submit{background:#075985;color:#fff;border-color:#064b70}
body[class] .reply-submit-btn:hover,body[class] .btn-submit:hover,body[class] .btn-submit-share:hover,body[class] .edit-profile-btn-submit:hover{background:#064b70}
.brand-header{min-width:0;overflow:hidden}
.brand-logo{flex:0 0 auto;padding-left:4px}
.header-actions-group{min-width:0;flex:0 1 auto;gap:2px}
.btn-header-action{min-width:0;padding-left:clamp(5px,2vw,12px);padding-right:clamp(5px,2vw,12px);font-size:clamp(9px,2.5vw,11px);white-space:nowrap}
body.page-login,body.page-signup{
    width:100%;min-height:100vh;min-height:100svh;box-sizing:border-box;
    padding:clamp(18px,6vh,48px) 16px 28px;align-items:center;justify-content:flex-start;
    background:linear-gradient(145deg,#075985 0%,#087f8c 48%,#176b62 100%);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
body.page-login .brand-title,body.page-signup .brand-title{margin:0 0 3px;font-size:clamp(30px,8vw,38px);font-weight:800;letter-spacing:-.03em}
body.page-login .brand-subtitle,body.page-signup .brand-subtitle{margin:0 0 22px;font-size:11px;letter-spacing:.12em}
body.page-login .main-card,body.page-signup .main-card{
    width:min(100%,440px);max-width:440px;margin:0;padding:clamp(18px,5vw,26px);
    border:1px solid rgba(255,255,255,.55);border-radius:16px;background:#fff;
    box-shadow:0 14px 38px rgba(4,30,48,.25);box-sizing:border-box;text-align:center;
}
body.page-login .card-header,body.page-signup .card-header{color:#17384d;border-bottom-color:#d9e4ea}
body.page-login .input-wrapper,body.page-signup .input-wrapper{width:100%;max-width:360px;min-width:0;min-height:48px;margin:0 auto 14px;padding:7px 11px;border:1px solid #9aafbd;border-radius:10px;box-sizing:border-box}
body.page-login .input-field,body.page-signup .input-field{min-width:0;width:100%;box-sizing:border-box;color:#17384d}
body.page-login .btn-login,body.page-signup .btn-next{width:100%;max-width:360px;min-height:48px;margin-top:4px;border-radius:10px;background:#087f5b;color:#fff;letter-spacing:.04em}
body.page-login .or-divider,body.page-signup .or-divider{width:min(100%,440px);max-width:440px;margin:17px 0;color:#f4f8fb}
body.page-login .btn-register,body.page-signup .btn-existing{width:min(100%,440px);max-width:440px;min-height:46px;padding:12px 16px;border:1px solid rgba(255,255,255,.7);border-radius:10px;background:#fff;color:#075985;box-sizing:border-box}
body.page-login .error-msg,body.page-signup .error-msg{border-radius:9px}
body.page-signup .instruction-text,body.page-signup .sub-instruction{color:#334e60}
body.page-signup .highlight-text{color:#9f1239}
@media(max-width:360px){.brand-logo{font-size:15px;padding-left:2px}.btn-header-action{padding-left:4px;padding-right:4px;font-size:9px}.public-home-hero{padding:16px 12px}.public-home-kicker{font-size:12px}}

/* Shared post and notification components: consistent borders, spacing and touch targets. */
.damadam-post-card,.public-post-preview,.home-notif-card,.damadam-notif-box,.notification-peek-item{
  border:1px solid var(--ui-border,#cbd8e0);border-radius:12px;background:var(--ui-surface,#fff);
  color:var(--ui-text,#17384d);box-shadow:0 2px 8px rgba(16,42,67,.07)
}
.damadam-post-card{margin:8px 0;padding:12px;border-radius:12px!important;border-color:var(--ui-border,#cbd8e0)!important}
.post-action-buttons{justify-content:flex-start;gap:6px;margin:10px 0;}
.action-btn{min-width:58px;min-height:40px;height:auto;padding:4px 8px;border:1px solid var(--ui-border,#cbd8e0)!important;border-radius:8px!important;background:var(--ui-surface,#fff);color:var(--ui-accent,#075985);font-size:10px;line-height:1.2}
.action-btn .btn-icon{font-size:12px}
.btn-follow-post,.btn-1on1,.btn-replies,.btn-like,.btn-report,.btn-block-post,.btn-delete{border-width:1px!important;border-style:solid!important;border-radius:8px!important}
.notification-peek-item{box-shadow:none}
.notification-peek-action,.notification-peek-skip,.notification-skip-form button,.chat-btn,.btn-submit,.btn-submit-share,.reply-submit-btn,.btn-login,.btn-next,.btn-register,.btn-existing,.btn-follow-post,.action-btn,.notif-action-btn{
  box-sizing:border-box;min-height:40px;border-radius:8px
}
.appearance-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,210px) minmax(140px,210px);align-items:center;gap:8px 12px;margin:10px 0;padding:13px;border:1px solid var(--ui-border,#cbd8e0);border-radius:12px;background:var(--ui-surface,#fff);color:var(--ui-text,#17384d);box-shadow:0 2px 8px rgba(16,42,67,.07)}
.appearance-settings-copy{grid-row:span 2}
.appearance-settings h2{margin:0;color:var(--ui-text,#17384d);font-size:16px}
.appearance-settings p{margin:3px 0 0;color:#526a79;font-size:12px;line-height:1.4}
.appearance-settings label{grid-column:2;font-size:12px;font-weight:800}
.appearance-settings select,.appearance-settings button{grid-column:3;min-height:42px;width:100%;padding:8px 10px;border:1px solid #71889a;border-radius:8px;background:#fff;color:#102a43;font:700 14px system-ui,sans-serif}
.appearance-settings button{background:var(--ui-accent,#075985);border-color:var(--ui-accent,#075985);color:#fff;cursor:pointer}
html[data-theme="ocean"]{--ui-accent:#075985;--ui-border:#bfd0da;--ui-highlight:#f2c14e}
html[data-theme="forest"]{--ui-accent:#176b45;--ui-border:#bfd8c8;--ui-highlight:#9bd5a9}
html[data-theme="plum"]{--ui-accent:#713b83;--ui-border:#d6c4df;--ui-highlight:#e3b5e8}
html[data-theme="sunset"]{--ui-accent:#a1431c;--ui-border:#e5cabb;--ui-highlight:#f3bf70}
html[data-theme="rose"]{--ui-accent:#9d3154;--ui-border:#e2c4cf;--ui-highlight:#f2a9bd}
html{--ui-surface:#fff;--ui-text:#17384d;color-scheme:light}
html[data-mode="dark"]{--ui-surface:#172633;--ui-text:#edf5f8;--ui-border:#425563;color-scheme:dark}
html[data-mode="dark"] body,html[data-mode="dark"] .app-shell,html[data-mode="dark"] .dynamic-content-area{background:#101b24;color:var(--ui-text)}
html[data-mode="dark"] .damadam-post-card,html[data-mode="dark"] .public-post-preview,html[data-mode="dark"] .home-notif-card,html[data-mode="dark"] .damadam-notif-box,html[data-mode="dark"] .chat-card,html[data-mode="dark"] .chat-row,html[data-mode="dark"] .profile-card,html[data-mode="dark"] .appearance-settings{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
html[data-mode="dark"] .post-author-name,html[data-mode="dark"] .post-content-body,html[data-mode="dark"] .post-content-urdu,html[data-mode="dark"] .post-caption-inline-row,html[data-mode="dark"] .post-caption-text,html[data-mode="dark"] .notif-user-link,html[data-mode="dark"] .notif-text-link,html[data-mode="dark"] .public-post-preview p,html[data-mode="dark"] .public-post-recent h2{color:var(--ui-text)}
html[data-mode="dark"] .action-btn,html[data-mode="dark"] .btn-pill,html[data-mode="dark"] .notification-peek-item,html[data-mode="dark"] .chat-feel-btn{background:#203442;color:#edf5f8;border-color:var(--ui-border)!important}
html[data-mode="dark"] .notification-peek-panel,html[data-mode="dark"] .explore-bar-container,html[data-mode="dark"] .damadam-tab-btn{background:#172633;color:var(--ui-text)}
html[data-mode="dark"] input,html[data-mode="dark"] textarea,html[data-mode="dark"] select{background:#172633;color:#edf5f8;border-color:#657988}
html[data-mode="dark"] .appearance-settings select{background:#172633;color:#edf5f8}
html[data-theme="forest"] .brand-header{background:linear-gradient(110deg,#123f31,#176b45)}
html[data-theme="plum"] .brand-header{background:linear-gradient(110deg,#452451,#713b83)}
html[data-theme="sunset"] .brand-header{background:linear-gradient(110deg,#6c321e,#a1431c)}
html[data-theme="rose"] .brand-header{background:linear-gradient(110deg,#62243b,#9d3154)}
html[data-theme]:not([data-theme="ocean"]) .notification-peek-summary{background:var(--ui-accent)}
html[data-theme] .appearance-settings button,html[data-theme] .chat-btn:not(.chat-btn-green):not(.chat-btn-red):not(.chat-btn-grey),html[data-theme] .btn-submit,html[data-theme] .btn-submit-share,html[data-theme] .reply-submit-btn,html[data-theme] .edit-profile-btn-submit{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff}
@media(max-width:520px){.appearance-settings{grid-template-columns:minmax(0,1fr) minmax(120px,42%)}.appearance-settings-copy{grid-column:1/-1;grid-row:auto}.appearance-settings label{grid-column:1}.appearance-settings select{grid-column:2}.appearance-settings button{grid-column:1/-1}.damadam-post-card{padding:10px}.post-action-buttons{gap:5px}.action-btn{min-width:54px;padding:4px 6px}}
html[data-theme="forest"] body.page-login,html[data-theme="forest"] body.page-signup{background:linear-gradient(145deg,#123f31,#176b45,#397c43)}
html[data-theme="plum"] body.page-login,html[data-theme="plum"] body.page-signup{background:linear-gradient(145deg,#452451,#713b83,#984e87)}
html[data-theme="sunset"] body.page-login,html[data-theme="sunset"] body.page-signup{background:linear-gradient(145deg,#6c321e,#a1431c,#c06b36)}
html[data-theme="rose"] body.page-login,html[data-theme="rose"] body.page-signup{background:linear-gradient(145deg,#62243b,#9d3154,#bb5772)}
html[data-mode="dark"] body.page-login .main-card,html[data-mode="dark"] body.page-signup .main-card{background:#172633;color:#edf5f8;border-color:#526977}
html[data-mode="dark"] body.page-login .card-header,html[data-mode="dark"] body.page-signup .card-header,html[data-mode="dark"] body.page-login .input-field,html[data-mode="dark"] body.page-signup .input-field{color:#edf5f8}

/* Final theme tokens cover older page-specific styles as well as shared components. */
html[data-theme] .brand-header{background:linear-gradient(110deg,color-mix(in srgb,var(--ui-accent) 72%,#102a43),var(--ui-accent))!important}
html[data-theme] .yellow-sub-bar{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
html[data-theme] .yellow-sub-bar .sub-bar-tab,html[data-theme] .yellow-sub-bar .sub-bar-tab.active{color:#fff!important}
html[data-theme] .yellow-sub-bar .sub-bar-tab.active{background:rgba(0,0,0,.18)!important}
html[data-theme] .sticky-footer-menu{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
html[data-theme] .footer-navigation-tab,html[data-theme] .footer-navigation-tab.active{color:#fff!important}
html[data-theme] .footer-navigation-tab.active{background:rgba(0,0,0,.18)!important}
html[data-theme] .notification-peek-summary{background:var(--ui-accent)!important}
html[data-theme] .damadam-post-card,html[data-theme] .home-notif-card,html[data-theme] .damadam-notif-box,html[data-theme] .notification-peek-item{border-color:var(--ui-border)!important}
html[data-theme] .post-author-name,html[data-theme] .notif-user-link,html[data-theme] .notif-text-link,html[data-theme] .notif-post-title-link,html[data-theme] .public-post-meta a,html[data-theme] .public-post-open{color:var(--ui-accent)!important}
html[data-theme] .action-btn,html[data-theme] .btn-pill,html[data-theme] .page-btn,html[data-theme] .pill-category-btn,html[data-theme] .btn-explore-main{border-color:var(--ui-accent)!important;color:var(--ui-accent)!important}
html[data-theme] .damadam-tab-btn.active,html[data-theme] .page-btn.active{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:#fff!important}
html[data-theme] .post-avatar-fallback{background:var(--ui-accent)!important;color:#fff!important}

html[data-mode="dark"] body[class]{background:#101b24!important;color:#edf5f8!important}
html[data-mode="dark"] body[class] *{background-color:transparent!important;color:#e8f1f5!important;border-color:#435765!important;box-shadow:none!important}
html[data-mode="dark"] body[class] :is(.app-shell,.dynamic-content-area,.posts-container,.more-container,.profile-container,.chat-container,.mehfil-container){background-color:#101b24!important;color:#edf5f8!important}
html[data-mode="dark"] body[class] :is(.damadam-post-card,.public-post-preview,.home-notif-card,.damadam-notif-box,.notification-peek-item,.notification-peek-panel,.chat-card,.chat-row,.chat-head,.more-card,.profile-card,.appearance-settings,.main-card,.banned-card,.inbox-item,.mehfil-card,.mehfil-room-card,.form-card,.settings-card){background:#172633!important;color:#edf5f8!important;border-color:#435765!important}
html[data-mode="dark"] body[class] :is(input,textarea,select,.input-field,.edit-profile-input-control,.reply-text-field){background:#172633!important;color:#edf5f8!important;border:1px solid #657988!important}
html[data-mode="dark"] body[class] :is(button,.btn,.action-btn,.chat-btn,.btn-pill,.notif-act,.page-btn,.more-card,.btn-return,.btn-action-matched,.btn-remove-follower,.btn-action-unfollow,.btn-submit-block,.btn-cancel,.back-btn){background:#263b48!important;color:#f4f8fb!important;border:1px solid #728796!important}
html[data-mode="dark"] body[class] :is(.btn-submit,.btn-submit-share,.reply-submit-btn,.chat-btn:not(.chat-btn-green):not(.chat-btn-red):not(.chat-btn-grey),.appearance-settings button,.banned-logout){background:var(--ui-accent)!important;color:#fff!important;border:1px solid var(--ui-accent)!important}
html[data-mode="dark"] body[class] :is(.chat-btn-green,.btn-action-follow,.btn-follow,.btn-accept){background:#176b45!important;color:#fff!important}
html[data-mode="dark"] body[class] :is(.chat-btn-red,.btn-action-block,.btn-submit-block,.btn-delete,.btn-reject){background:#a61b1b!important;color:#fff!important}
html[data-mode="dark"] body[class] :is(a,.notif-action-btn,.notification-peek-action,.notification-peek-all,.notification-peek-copy a){color:#9cdef7!important}
html[data-mode="dark"] body[class] :is(.brand-header,.yellow-sub-bar,.sticky-footer-menu,.notification-peek-summary){background:var(--ui-accent)!important;color:#fff!important}
html[data-mode="dark"] body[class] :is(.brand-header a,.yellow-sub-bar a,.sticky-footer-menu a,.notification-peek-summary *, .btn-header-action){color:#fff!important}
html[data-mode="dark"] body[class] :is(.badge,.inbox-badge,.notification-peek-count,.trending-fire-badge,.expiry-tag){background:#f2c14e!important;color:#172b3a!important;border-color:#f2c14e!important}
html[data-mode="dark"] body[class] :is(.post-caption-urdu,.post-content-urdu,.notif-post-urdu){color:#edf5f8!important}
html[data-mode="dark"] body[class] img,html[data-mode="dark"] body[class] video{background-color:transparent!important}

/* Theme tokens reach nested widgets and browser-native controls, including border rules. */
html[data-theme="ocean"]{--ui-border:#bfd0da;--ui-muted:#526a79}
html[data-theme="forest"]{--ui-border:#bfd8c8;--ui-muted:#426354}
html[data-theme="plum"]{--ui-border:#d6c4df;--ui-muted:#67516f}
html[data-theme="sunset"]{--ui-border:#e5cabb;--ui-muted:#705346}
html[data-theme="rose"]{--ui-border:#e2c4cf;--ui-muted:#704b58}
html[data-theme] body :where(.card,.panel,.box,.form-card,.settings-card,.mehfil-presence,.msg,.comment-row,.comment-hidden-notice,.reply-input-bar,.inline-reply-box,.pagination-bar,.explore-filter select,.explore-search input){border-color:var(--ui-border)!important}
html[data-mode="dark"] body :where(.card,.panel,.box,.form-card,.settings-card,.mehfil-presence,.msg,.comment-row,.comment-hidden-notice,.reply-input-bar,.inline-reply-box,.pagination-bar,.explore-filter select,.explore-search input){border-color:var(--ui-border)!important;color:var(--ui-text)}
html[data-mode="dark"] body *{border-color:var(--ui-border)}
html[data-theme] body *{border-color:var(--ui-border)!important}
.account-ban-notice{position:relative;z-index:5;padding:9px 14px;background:#7f1d1d;color:#fff;text-align:center;font:600 13px/1.45 system-ui,sans-serif}
.post-owner-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin:12px 0;padding:10px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface);color:var(--ui-text)}
.post-edit-form{display:grid;gap:6px;flex:1 1 100%}.post-edit-form textarea{width:100%;min-height:90px;box-sizing:border-box;border:1px solid var(--ui-border);border-radius:8px;padding:9px;background:var(--ui-surface);color:var(--ui-text)}
.comment-action-pills form,.admin-inline-action{display:inline-flex;margin:0}.comment-edit-form input{max-width:150px;min-height:30px;box-sizing:border-box;border:1px solid var(--ui-border);border-radius:6px;background:var(--ui-surface);color:var(--ui-text)}
.mehfil-presence{display:grid;gap:7px;margin:10px 0;padding:10px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface);color:var(--ui-text);font-size:12px}
.mehfil-presence>div,.mehfil-presence details>div{display:flex;flex-wrap:wrap;gap:6px}.mehfil-presence a,.mehfil-presence details span{padding:3px 7px;border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text);text-decoration:none}.mehfil-presence details summary{cursor:pointer}
html[data-mode="dark"] body .account-ban-notice{border-color:#b91c1c;color:#fff;background:#7f1d1d}
.post-video-attachment{display:block;width:100%;max-height:70vh;border-radius:12px;background:#09131a;object-fit:contain}
.post-gif-attachment{display:block;width:100%;max-height:70vh;border-radius:12px;object-fit:contain}
.post-voice-attachment{display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface);color:var(--ui-text)}
.post-voice-attachment audio{width:min(100%,440px);height:40px}
.media-share-card{max-width:620px;margin:14px auto;padding:clamp(14px,4vw,24px);border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);color:var(--ui-text)}
.media-share-card form{display:grid;gap:10px}.media-share-card h1{margin:0}.media-share-card p,.voice-recorder [data-voice-status]{color:var(--ui-muted,#526a79);font-size:13px;line-height:1.5}
.media-share-card input,.media-share-card select,.media-share-card textarea{box-sizing:border-box;width:100%;min-height:44px;padding:10px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-surface);color:var(--ui-text)}
.voice-recorder{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.voice-recorder button{min-height:42px;padding:8px 14px;border:0;border-radius:9px;background:var(--ui-accent);color:#fff;font-weight:800}
.media-locked{opacity:.8;border:1px dashed var(--ui-border);background:var(--ui-surface);color:var(--ui-text)}
.emoji-picker{display:grid;gap:6px;margin:4px 0 8px;padding:8px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface);color:var(--ui-text)}
.emoji-picker-title{font-size:11px;font-weight:800}.emoji-picker-grid{display:grid;grid-template-columns:repeat(10,minmax(28px,1fr));gap:3px;max-height:116px;overflow:auto}
.emoji-picker-item{min-width:28px;min-height:30px;padding:2px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:19px;cursor:pointer}.emoji-picker-item:hover,.emoji-picker-item:focus-visible{background:var(--ui-border);outline:2px solid var(--ui-accent)}
.profile-mehfils{margin:16px 0}.profile-mehfils h2,.online-invite-list h2{display:flex;align-items:center;gap:8px;color:var(--ui-text);font-size:18px}.profile-mehfils h2 span,.online-invite-list h2 span{padding:3px 8px;border:1px solid var(--ui-border);border-radius:999px;font-size:11px}
.online-invite-list{margin:14px 0}.online-invite-list>p{font-size:13px;color:var(--ui-muted,#526a79)}.online-invite-list .listrow form{margin:0}.online-invite-list .btn{min-width:70px;min-height:36px}
html[data-mode="dark"] .emoji-picker{border-color:var(--ui-border);background:var(--ui-surface);color:var(--ui-text)}
@media(max-width:480px){.emoji-picker-grid{grid-template-columns:repeat(8,minmax(28px,1fr))}.post-voice-attachment audio{width:calc(100% - 42px)}}
.post-owner-tools > summary,
.comment-manage-options > summary { cursor: pointer; color: var(--ui-accent, #075985); font-weight: 700; padding: .45rem .7rem; border: 1px solid var(--ui-border, #c8d4dd); border-radius: 999px; list-style-position: inside; }
.post-owner-tools { display: block; width: fit-content; max-width: 100%; }
.post-owner-tools-content, .comment-manage-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; padding: .6rem 0; }
.comment-manage-options { flex-basis: 100%; }
.edit-content-page { width: min(100% - 1rem, 44rem); margin: 1rem auto; padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--ui-border, #c8d4dd); border-radius: 1rem; background: var(--ui-surface, #fff); color: var(--ui-text, #18232d); box-shadow: 0 8px 28px rgb(20 40 60 / 8%); }
.edit-content-page h1 { margin: .8rem 0 .35rem; font-size: clamp(1.35rem, 4vw, 1.8rem); }
.edit-content-page p { color: var(--ui-muted, #526574); }
.edit-content-form { display: grid; gap: .65rem; margin-top: 1.2rem; }
.edit-content-form textarea { width: 100%; min-height: 8rem; resize: vertical; padding: .8rem; border: 1px solid var(--ui-border, #c8d4dd); border-radius: .75rem; background: var(--ui-surface, #fff); color: var(--ui-text, #18232d); font: inherit; }
.edit-content-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }

/* Compact mobile feed rhythm: author and time share a tidy metadata row. */
.damadam-post-card { margin: 6px 0; padding: 8px; border-radius: 10px !important; }
.post-inner-content { padding: 6px 8px !important; }
.post-category-header-ribbon { min-height: 30px; padding: 4px 8px; gap: 6px; }
.post-header-line, .post-author-box { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.post-header-line { margin-bottom: 5px; }
.post-header-line .post-avatar-img, .post-author-box .post-avatar-img { width: 28px; height: 28px; flex: 0 0 28px; }
.post-header-line .post-author-name, .post-author-box .post-author-name { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.post-header-line time, .post-header-line > span:not(.expiry-tag), .post-author-box > span:not(.expiry-tag) { margin-left: auto; color: var(--ui-muted, #526a79); font-size: 10px; white-space: nowrap; }
.post-caption-inline-row { display: grid; gap: 4px; margin: 5px 0; font-size: 13px; line-height: 1.4; }
.post-author-box { width: 100%; }
.post-caption-text, .post-feed-copy { display: block; overflow-wrap: anywhere; word-break: normal; font-size: 14px; line-height: 1.45; }
.post-content-body, .post-content-urdu { overflow-wrap: anywhere; line-height: 1.5; }
.post-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; margin: 7px 0; }
.post-action-buttons form { display: inline-flex; margin: 0; }
.post-owner-tools { display: block; width: fit-content; max-width: 100%; margin: 3px 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.post-owner-tools > summary, .comment-manage-options > summary { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 8px; border-radius: 7px; font-size: 11px; line-height: 1.2; }
.post-owner-tools-content, .comment-manage-actions { gap: 5px; padding: 5px 0; }
.comment-action-pills { flex-wrap: wrap; justify-content: flex-end; }
.comment-manage-options { flex-basis: auto; }
.comment-content { min-width: 0; overflow-wrap: anywhere; }
.reply-input-bar { margin-top: 5px; }
.reply-text-field { min-height: 36px; padding: 6px 8px; font-size: 13px; }
.reply-submit-btn { min-height: 36px; height: 36px; padding: 0 11px; font-size: 11px; }
.notification-peek-summary { min-height: 40px; padding: 4px 8px; gap: 6px; }
.notification-peek-item { padding: 6px 7px; }
.inbox-badge, .notification-peek-count { min-width: 18px; height: 18px; font-size: 10px; }
.content-link { color: var(--ui-accent, #075985); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; font-weight: 650; }
.link-preview-card { width: min(100%, 28rem); margin: 8px 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); }
.link-preview-card.is-loading { min-height: 0; padding: 8px 10px; color: var(--ui-muted, #526a79); font-size: 11px; }
.link-preview-heading { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 3px 7px; padding: 8px 10px; }
.link-preview-provider { color: var(--ui-accent); font-size: 10px; font-weight: 800; }
.link-preview-title { min-width: 0; color: var(--ui-text); font-size: 12px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; text-decoration: none; }
.link-preview-author { grid-column: 2; color: var(--ui-muted, #526a79); font-size: 10px; }
.link-preview-play { position: relative; display: grid; place-items: center; width: 100%; min-height: 42px; padding: 0; overflow: hidden; border: 0; border-top: 1px solid var(--ui-border); border-radius: 0; background: #0f1e29; color: #fff; cursor: pointer; }
.link-preview-play img { display: block; width: 100%; max-height: 250px; aspect-ratio: 16/9; object-fit: cover; }
.link-preview-play-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 6px 10px; border-radius: 999px; background: rgb(10 25 36 / 85%); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.link-preview-player { width: 100%; aspect-ratio: 16/9; background: #0b1720; }
.link-preview-player--tiktok, .link-preview-player--instagram { width: min(100%, 340px); aspect-ratio: 9/16; margin: 0 auto; }
.link-preview-player iframe { width: 100%; height: 100%; border: 0; }
body[class] :is(.action-btn,.btn-pill,.chat-feel-btn,.notification-peek-action,.notif-act,.page-btn) { box-sizing: border-box; min-height: 34px; padding: 5px 8px; border: 1px solid var(--ui-border) !important; border-radius: 7px !important; background: var(--ui-surface) !important; color: var(--ui-text) !important; font-size: 11px; line-height: 1.15; }
body[class] :is(.btn,.chat-btn,.sendbtn,.act) { box-sizing: border-box; max-width: 100%; }
body[class] .chat-btn { min-height: 36px; padding: 6px 10px; border-radius: 8px; font-size: 12px; }
body[class*="page-mehfil"] .btn { min-height: 38px; padding: 8px 12px; border-width: 1px; border-radius: 9px; font-size: 12px; letter-spacing: .04em; margin-bottom: 8px; }
body[class*="page-mehfil"] .sendbtn { min-height: 36px; padding: 7px 11px; font-size: 13px; letter-spacing: .03em; }
body[class*="page-mehfil"] .msg .nm { font-size: 13px; }
body[class*="page-mehfil"] .msg .txt, body[class*="page-mehfil"] .msg .body { font-size: 14px; line-height: 1.45; }
body[class] :is(.btn-submit,.btn-submit-share,.reply-submit-btn,.chat-btn-green,.appearance-settings button,.btn-primary) { background: var(--ui-accent) !important; border: 1px solid var(--ui-accent) !important; color: #fff !important; }
body[class] :is(.btn-delete,.btn-block-post,.btn-pill-block,.btn-report,.btn-delete-post,.chat-btn-red) { border-color: #b42332 !important; background: #fff3f3 !important; color: #8e1725 !important; }
html[data-mode="dark"] body[class] :is(.action-btn,.btn-pill,.chat-feel-btn,.notification-peek-action,.notif-act,.page-btn) { background: #203442 !important; border-color: #637a89 !important; color: #f4f8fb !important; }
html[data-mode="dark"] body[class] :is(.btn-delete,.btn-block-post,.btn-pill-block,.btn-report,.btn-delete-post,.chat-btn-red) { background: #48272e !important; border-color: #b85a67 !important; color: #ffe5e8 !important; }
html[data-mode="dark"] body[class] .link-preview-card { background: #172633 !important; color: #edf5f8 !important; border-color: #637a89 !important; }
html[data-mode="dark"] body[class] .link-preview-play { background: #0b1720 !important; color: #fff !important; }
@media (max-width: 520px) {
  .damadam-post-card { margin: 5px 0; padding: 6px; }
  .post-inner-content { padding: 5px 6px !important; }
  .post-action-buttons { gap: 4px; margin: 5px 0; }
  body[class] .post-action-buttons .action-btn { min-width: 0; min-height: 34px; padding: 5px 7px; font-size: 10px; }
  .notification-peek { width: calc(100% - 8px); margin-top: 4px; border-radius: 9px; }
  .notification-peek-summary { min-height: 38px; }
  .notification-peek-skip { width: 34px; height: 34px; }
  .sticky-footer-menu { height: calc(54px + env(safe-area-inset-bottom)); }
  .footer-navigation-tab { gap: 1px; font-size: 9px; }
  .btn-header-action { min-height: 32px; padding: 4px 7px; font-size: 10px; }
  .post-header-line .post-author-name, .post-author-box .post-author-name { font-size: 11px; }
  .post-caption-inline-row { gap: 3px; }
  .post-caption-text, .post-feed-copy, .post-content-body { font-size: 13px; }
  .post-video-attachment, .post-gif-attachment { max-height: 55vh; }
  .public-home-actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
  .public-home-actions > a { box-sizing: border-box; width: 100%; min-width: 0; justify-content: center; }
  .public-home-lead { width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .sub-bar-tab { min-width: 0; padding: 5px 2px; font-size: 10px; }
}
@media (max-width: 360px) {
  .post-category-header-ribbon { padding: 3px 6px; }
  .post-category-ribbon-link { font-size: 9px; }
  .post-header-line .post-avatar-img, .post-author-box .post-avatar-img { width: 25px; height: 25px; flex-basis: 25px; }
  .notification-peek-label { font-size: 10px; }
  .notification-peek-sneak { font-size: 10px; }
}

.detail-topbar { background: var(--ui-surface); border-color: var(--ui-border); }
body.page-post_detail .detail-back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  text-decoration: none;
}
body.page-post_detail .detail-back:hover,
body.page-post_detail .detail-back:focus-visible {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
.emoji-field { position: relative; width: 100%; min-width: 0; }
.emoji-field > :is(input[type="text"], textarea) { padding-right: 48px; }
.emoji-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 20px;
  cursor: pointer;
}
.emoji-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.emoji-field > .emoji-picker { position: relative; z-index: 2; width: 100%; }
.comment-action-pills { display: flex; align-items: center; gap: 5px; }
.comment-action-pills > form { display: inline-flex; margin: 0; }
.comment-manage-actions > form { display: inline-flex; margin: 0; }
.comment-manage-actions .btn-pill { display: inline-flex; align-items: center; justify-content: center; }
.chat-wrap { color: var(--ui-text); }
.chat-title { color: var(--ui-text); border-color: var(--ui-accent); }
.chat-card, .chat-row, .chat-head {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}
.chat-row-main small, .chat-head-main small, .chat-msg-head small, .chat-system small { color: var(--ui-muted); }
.chat-msg { padding: 8px 11px; font-size: 14px; line-height: 1.5; }
.chat-msg.mine {
  background: #e8f1f8;
  background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface));
  color: var(--ui-text);
}
.chat-msg.theirs { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.chat-system, .chat-replying, .chat-quote { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }
.chat-card textarea, .chat-card select, .chat-card input[type="text"] {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}
html[data-mode="dark"] .chat-msg.mine { background: #203442; }