:root {
            --q-red: #b92b27; --q-blue: #1DA1F2; --q-blue-light: #e8f5fd; --q-bg: #f8f9fa; --q-surface: #ffffff;
            --q-border: #e2e8f0; --q-text: #0f1419; --q-muted: #536471; --feed-w: 680px;
        }
        * { box-sizing: border-box; }
        body { margin: 0; background: var(--q-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--q-text); line-height: 1.5; }
        a { text-decoration: none; color: inherit; }
        .opn-wrapper { padding-top: 0px; }

        .app-container { max-width: 1050px; margin: 24px auto; display: grid; grid-template-columns: 1fr 320px; gap: 30px; padding: 0 15px; align-items: start; }
        .main-feed { max-width: var(--feed-w); width: 100%; margin: 0 auto; }
        aside { position: sticky; top: 80px; }

        .cat-swiper-container { 
            background: #ffffff; 
            border-bottom: 1px solid var(--q-border); 
            position: sticky; 
            top: 0; 
            z-index: 99; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.03); 
        }

        .cat-swiper { 
            display: flex; overflow-x: auto; white-space: nowrap; max-width: 1050px; margin: 0 auto; padding: 0 10px; scrollbar-width: none; -ms-overflow-style: none;
        }
        .cat-swiper::-webkit-scrollbar { display: none; }
        .cat-item { display: inline-block; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--q-muted); border-bottom: 2px solid transparent; transition: all 0.25s ease; margin-right: 5px; cursor: pointer; text-decoration: none; user-select: none; }
        .cat-item:hover { color: var(--q-text); background-color: rgba(29, 161, 242, 0.05); border-radius: 8px 8px 0 0; }
        .cat-item.active { color: var(--q-blue); font-weight: 700; border-bottom: 2px solid var(--q-blue); }

        .card { background: #fff; border: 1px solid var(--q-border); border-radius: 16px; margin-bottom: 16px; padding: 20px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
        .user-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; position: relative; z-index: 2; padding-right: 40px; }
        .user-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
        .user-name { font-weight: 700; font-size: 16px; color: var(--q-text); display: flex; align-items: center; }
        .user-name:hover { text-decoration: underline; }
        .user-meta { font-size: 14px; color: var(--q-muted); }
        .op-text { font-size: 18px; color: var(--q-text); margin-bottom: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
        
        .del-btn { display: <?= $is_owner ? 'flex' : 'none' ?>; position: absolute; top: 15px; right: 15px; background: #f0f2f5; border: none; color: var(--q-muted); cursor: pointer; font-size: 16px; transition: 0.2s; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; z-index: 5; }
        .del-btn:hover { color: #e0245e; background: #fee7e7; }

        .ap-link-card { border: 1px solid var(--q-border); border-radius: 12px; overflow: hidden; margin: 12px 0; background: #fff; display: flex; align-items: center; cursor: pointer; transition: 0.2s; }
        .ap-link-card:hover { background: #f8f9fa; }
        .ap-link-icon { background: #f0f2f5; padding: 15px; font-size: 24px; border-right: 1px solid var(--q-border); }
        .ap-link-info { padding: 12px 15px; }
        .ap-link-title { font-weight: 700; font-size: 14px; color: var(--q-text); }
        .ap-link-url { font-size: 13px; color: var(--q-muted); }
        
        .post-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;border-radius: 12px;margin-top: 10px;border: 1px solid var(--q-border); }
        
        .action-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; border-top: 1px solid #f0f2f5; padding-top: 15px; flex-wrap: wrap; gap: 15px;}
        .vote-grp { display: flex; align-items: center; background: #f0f2f5; border-radius: 20px; }
        .v-btn { background: none; border: none; padding: 8px 16px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--q-muted); font-size: 14px; font-weight: 600; outline: none; border-radius: 20px; transition: 0.2s; }
        .v-btn:hover { background: rgba(0,0,0,0.05); }
        .v-btn.up-active { color: var(--q-blue); }
        .v-btn.down-active { color: #e0245e; }
        .v-sep { width: 1px; height: 18px; background: #cbd5e1; }

        .stats-grp { display: flex; align-items: center; gap: 15px; font-size: 14px; color: var(--q-muted); font-weight: 500; }
        .stat-item { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 50%; transition: 0.2s; cursor: default; }
        .share-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #f0f2f5; border-radius: 50%; cursor: pointer; text-decoration: none; font-size: 14px; transition: 0.2s; }
        .share-icon:hover { background: #e2e8f0; }

        /* COMMENTS */
        .comment-box { background: #fff; border: 1px solid var(--q-border); border-radius: 16px; padding: 20px; margin-top: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
        .comment-header { font-size: 18px; font-weight: 800; margin-bottom: 20px; border-bottom: 1px solid #f0f2f5; padding-bottom: 10px; }
        
        .composer-reply { display: flex; gap: 12px; margin-bottom: 25px; }
        .composer-reply img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
        .reply-input-wrap { flex: 1; }
        .reply-textarea { width: 100%; border: 1px solid var(--q-border); border-radius: 12px; padding: 12px; font-size: 15px; outline: none; resize: none; min-height: 80px; font-family: inherit; background: #f8f9fa; transition: 0.2s; color: var(--q-text); }
        .reply-textarea:focus { background: #fff; border-color: var(--q-blue); box-shadow: 0 0 0 2px var(--q-blue-light); }
        
        .post-btn { background: var(--q-blue); color: #fff; border: none; padding: 8px 20px; border-radius: 20px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
        .post-btn:hover { background: #1a91da; }

        /* THREADED COMMENTS UI */
        .comment-item { display: flex; gap: 12px; margin-bottom: 15px; }
        .comment-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
        .cmt-body { flex: 1; }
        .cmt-user { font-weight: 700; font-size: 14px; margin-bottom: 2px; display: flex; align-items: center;}
        .cmt-date { font-weight: 400; color: var(--q-muted); font-size: 12px; margin-left: 4px; }
        .cmt-text { font-size: 14px; color: var(--q-text); line-height: 1.5; white-space: pre-wrap; }
        
        .btn-reply-text { font-size: 12px; color: var(--q-muted); background: none; border: none; cursor: pointer; font-weight: 600; padding: 0; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
        .btn-reply-text:hover { color: var(--q-blue); }

        /* REPLIES NESTING */
        .reply-list { margin-left: 48px; border-left: 2px solid #f0f2f5; padding-left: 15px; margin-top: 10px; margin-bottom: 20px; }
        .inline-reply-form { display: none; margin-top: 10px; margin-left: 48px; }
        .inline-reply-form.active { display: block; }
        .inline-textarea { width: 100%; border: 1px solid var(--q-border); border-radius: 8px; padding: 10px; font-size: 14px; outline: none; resize: none; min-height: 40px; font-family: inherit; background: #f8f9fa; }
        .inline-textarea:focus { background: #fff; border-color: var(--q-blue); }

        .widget { background: #fff; border: 1px solid var(--q-border); border-radius: 16px; padding: 18px; }
        .trend-item { display: block; padding: 12px 0; border-bottom: 1px solid #f0f2f5; }
        .trend-item:last-child { border: none; padding-bottom: 0; }
        .trend-item:hover .trend-q { color: var(--q-blue); }
        .trend-q { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--q-text); }
        .trend-v { color: var(--q-muted); font-size: 12px; }

        #toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 12px; position: fixed; z-index: 1000; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 14px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: opacity 0.3s; opacity: 0; }
        #toast.show { visibility: visible; opacity: 1; }

        .restricted-box { background: #FFF5F5; border: 1px solid #FED7D7; padding: 30px; text-align: center; border-radius: 12px; margin-top: 20px; color: #C53030; }
        
          /* Shared Styles mapped from main feed */
        .card { position: relative; }
        .del-btn { position: absolute; top: 12px; right: 12px; background: #f1f5f9; border: none; color: #cbd5e1; cursor: pointer; padding: 0; width: 32px; height: 32px; border-radius: 50%; transition: opacity 0.2s, background 0.2s, color 0.2s; z-index:10; display: flex; justify-content: center; align-items: center; opacity: 0; }
        .del-btn:hover { color: var(--danger, #ef4444); background: #fef2f2; }
        .del-btn svg { width: 18px; height: 18px; }
        .card:hover .del-btn { opacity: 1; }
        @media (hover: none) { .del-btn { opacity: 1; } }

        .opn-hashtag { color: #4f46e5; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
        .opn-hashtag:hover { text-decoration: underline; color: #4338ca; }
        
        .meta-card.large { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; margin-top: 12px; transition: all 0.2s ease; background: #fff; position: relative; max-width: 100%;}
        .meta-card.large:hover { border-color: #cbd5e1; box-shadow: 0 8px 20px rgba(0,0,0,0.06); transform: translateY(-2px);}
        .meta-img-wrapper { width: 100%; height: 220px; background-color: #f1f5f9; position: relative; overflow: hidden;}
        .meta-img-large { width: 100%; height: 100%; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #94a3b8; transition: transform 0.5s ease;}
        .meta-title-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 16px 16px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%); color: white; font-weight: 700; font-size: 16px; line-height: 1.3; z-index: 2; margin: 0;}
        .meta-domain-footer { padding: 12px 16px; font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; font-weight: 600; background: #f8fafc; border-top: 1px solid #e2e8f0; z-index: 3; position: relative;}

        @media (max-width: 900px) {
            .app-container { grid-template-columns: 1fr; margin-top: 15px; }
            aside { display: none; }
            .card, .comment-box { border-radius: 0; border-left: none; border-right: none; margin-bottom: 10px; }
            .reply-list, .inline-reply-form { margin-left: 20px; } 
        }