/* ═══════════════════════════════════════════════════════════
   PRUVN DESKTOP THEME
   Layout: fixed topbar (56px) + fixed sidebar (256px) + scrollable main
   Only loaded when body has .pv-desktop class
   ═══════════════════════════════════════════════════════════ */

/* ── KILL ALL MOBILE LAYOUT ── */
.pv-desktop .app-shell,
.pv-desktop .top-bar,
.pv-desktop .bottom-nav,
.pv-desktop .app-header,
.pv-desktop .scroll-area,
.pv-desktop #pv-app-banner,
.pv-desktop #pv-onboard { display:none !important }

/* ═══════════════════════════════════════════
   TOPBAR (fixed, full-width, glassmorphic)
   ═══════════════════════════════════════════ */
.dt-topbar {
    position:fixed; top:0; left:0; right:0; height:56px; z-index:100;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 24px;
    border-bottom:1px solid rgba(0,0,0,0.06);
}
.dt-topbar-left { display:flex; align-items:center; gap:32px }
.dt-topbar-logo {
    font-family:Georgia,'Times New Roman',serif;
    font-size:24px; font-weight:800; color:var(--brand);
    text-decoration:none; letter-spacing:-0.5px;
}
.dt-topbar-nav { display:flex; align-items:center; gap:4px }
.dt-topbar-link {
    padding:6px 14px; font-size:13px; font-weight:500;
    color:var(--text-sub); text-decoration:none;
    border-radius:6px; transition:all 0.15s;
}
.dt-topbar-link:hover { color:var(--text); background:rgba(0,0,0,0.03) }
.dt-topbar-link.active { color:var(--brand); font-weight:700 }

.dt-topbar-right { display:flex; align-items:center; gap:12px }
.dt-topbar-actions { display:flex; align-items:center; gap:8px }

.dt-icon-btn {
    width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-sub); font-size:18px; text-decoration:none;
    transition:background 0.15s; cursor:pointer; border:none; background:none;
}
.dt-icon-btn:hover { background:rgba(0,0,0,0.05) }

.dt-avatar {
    width:34px; height:34px; border-radius:10px;
    background:var(--brand); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; text-decoration:none;
}

.dt-login-btn {
    padding:7px 20px; border-radius:8px;
    background:var(--brand); color:#fff;
    font-size:13px; font-weight:600;
    border:none; cursor:pointer;
    transition:opacity 0.15s;
}
.dt-login-btn:hover { opacity:0.9 }

.dt-announcement {
    background:var(--dev); color:#fff;
    padding:4px 12px; border-radius:6px;
    font-size:11px; font-weight:500;
    display:flex; align-items:center; gap:8px;
}
.dt-announcement button {
    background:none; border:none; color:rgba(255,255,255,0.6);
    font-size:16px; cursor:pointer; padding:0; line-height:1;
}

/* ═══════════════════════════════════════════
   SIDEBAR (fixed left, below topbar)
   ═══════════════════════════════════════════ */
.dt-sidebar {
    position:fixed; top:56px; left:0; bottom:0; width:256px;
    background:#FAFAF7; z-index:90;
    display:flex; flex-direction:column;
    border-right:1px solid rgba(0,0,0,0.06);
    overflow-y:auto;
}
.dt-sidebar::-webkit-scrollbar { width:0 }

.dt-sidebar-brand {
    display:flex; align-items:center; gap:12px;
    padding:24px 20px 20px;
}
.dt-brand-icon {
    width:40px; height:40px; border-radius:12px;
    background:var(--brand); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:Georgia,'Times New Roman',serif;
    font-size:18px; font-weight:800;
    flex-shrink:0;
}
.dt-brand-name {
    font-family:Georgia,'Times New Roman',serif;
    font-size:17px; font-weight:800; color:var(--text);
}
.dt-brand-tag {
    font-size:10px; font-weight:600; color:var(--text-hint);
    text-transform:uppercase; letter-spacing:0.5px;
}

.dt-nav { flex:1; padding:4px 12px }
.dt-nav-item {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; margin-bottom:2px;
    font-size:14px; font-weight:500; color:var(--text-sub);
    text-decoration:none; border-radius:10px;
    transition:all 0.15s; border-left:3px solid transparent;
}
.dt-nav-item:hover { background:rgba(0,0,0,0.03); color:var(--text) }
.dt-nav-item.active {
    border-left-color:var(--brand); color:var(--brand);
    font-weight:700; background:var(--brand-light);
}
.dt-nav-item i { font-size:18px; width:22px; text-align:center }
.dt-nav-sep { height:1px; background:rgba(0,0,0,0.06); margin:10px 14px }

.dt-sidebar-bottom {
    padding:12px; border-top:1px solid rgba(0,0,0,0.06);
}
.dt-sidebar-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px; border-radius:10px;
    background:var(--brand); color:#fff;
    font-size:13px; font-weight:700;
    text-decoration:none; border:none; cursor:pointer;
    transition:opacity 0.15s;
}
.dt-sidebar-cta:hover { opacity:0.9 }
.dt-sidebar-cta i { font-size:16px }
.dt-sidebar-links {
    display:flex; flex-direction:column; gap:2px; padding:8px 4px 0;
}
.dt-sidebar-links a {
    display:flex; align-items:center; gap:8px;
    padding:6px 10px; font-size:12px; color:var(--text-hint);
    text-decoration:none; border-radius:6px; transition:color 0.15s;
}
.dt-sidebar-links a:hover { color:var(--brand) }
.dt-sidebar-links a i { font-size:14px }

/* ═══════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════ */
.dt-main {
    margin-left:256px; margin-top:56px;
    min-height:calc(100vh - 56px);
    background:#fff;
}
.dt-content {
    padding:28px 36px;
    max-width:1200px;
    margin:0 auto;
}

/* ═══════════════════════════════════════════
   FEED: Masonry-style columns (cards fill space naturally)
   ═══════════════════════════════════════════ */
.pv-desktop .dt-content #feed {
    columns:3; column-gap:20px; padding:0;
}
.pv-desktop .dt-content #feed .news-card {
    break-inside:avoid; margin-bottom:20px;
}

/* 2 columns on medium screens */
@media (max-width:1100px) {
    .pv-desktop .dt-content #feed {
        columns:2;
    }
}

/* Cards */
.pv-desktop .dt-content .news-card {
    border-radius:12px;
    transition:box-shadow 0.2s, transform 0.15s;
    cursor:pointer; overflow:hidden;
    border:1px solid rgba(0,0,0,0.05);
}
.pv-desktop .dt-content .news-card:hover {
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
    transform:translateY(-2px);
}
.pv-desktop .card-headline { font-size:16px !important; line-height:1.4 !important }
.pv-desktop .card-summary { font-size:13px !important; line-height:1.55 !important }
.pv-desktop .cvt-text { font-size:13px !important; line-height:1.5 !important }

/* Card type borders */
.pv-desktop .news-card[data-type="verified"] { border-bottom:3px solid var(--brand) }
.pv-desktop .news-card[data-type="misleading"] { border-bottom:3px solid var(--mis) }
.pv-desktop .news-card[data-type="developing"] { border-top:3px solid var(--dev) }

/* ═══════════════════════════════════════════
   FEED PAGE HEADER
   ═══════════════════════════════════════════ */
.dt-feed-header {
    margin-bottom:28px;
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap:wrap; gap:16px;
}
.dt-feed-title {
    font-family:Georgia,'Times New Roman',serif;
    font-size:36px; font-weight:800; color:var(--text);
    letter-spacing:-0.5px; line-height:1;
}
.dt-feed-subtitle {
    font-size:14px; color:var(--text-sub); margin-top:6px;
}
.dt-feed-chips { display:flex; gap:8px; flex-wrap:wrap }
.dt-feed-chip {
    padding:7px 16px; border-radius:20px;
    font-size:12px; font-weight:600;
    background:rgba(0,0,0,0.04); color:var(--text-sub);
    border:none; cursor:pointer;
    transition:all 0.15s;
    display:flex; align-items:center; gap:6px;
}
.dt-feed-chip:hover { background:rgba(0,0,0,0.07) }
.dt-feed-chip.active { background:var(--brand); color:#fff }
.dt-feed-chip.active-mis { background:var(--mis); color:#fff }
.dt-feed-chip.active-dev { background:var(--dev); color:#fff }
.dt-feed-chip i { font-size:14px }

/* ═══════════════════════════════════════════
   MOBILE PAGES IN DESKTOP WRAPPER
   These pages have mobile-specific classes.
   Only override the structural issues, not
   broad classes like .px-4 which exist inside
   cards and other nested elements.
   ═══════════════════════════════════════════ */

/* Fix mobile sticky headers: they use top-[52px] for mobile header.
   In desktop, the topbar is fixed and dt-content scrolls naturally.
   Make sticky elements stick to top of dt-content (top:0). */
.pv-desktop .dt-content > [class*="sticky"][class*="top-[52px]"] {
    top:0 !important;
}
.pv-desktop .dt-content > [class*="sticky"][class*="top-[92px]"] {
    top:0 !important;
}

/* Constrain page-level containers only (direct children of dt-content) */
.pv-desktop .dt-content > .px-4,
.pv-desktop .dt-content > .px-3 {
    max-width:900px;
    margin-left:auto; margin-right:auto;
}
/* Also constrain pages that use a wrapper div */
.pv-desktop .dt-content > div > .px-4:first-child,
.pv-desktop .dt-content > div > .px-3:first-child {
    max-width:900px;
    margin-left:auto; margin-right:auto;
}

/* Fix FAB positioning (WhatsApp button etc) */
.pv-desktop [class*="fixed"][class*="bottom-20"] {
    bottom:24px !important; right:36px !important;
    left:auto !important; max-width:none !important;
}

/* ── Per-page fixes ── */
.pv-desktop #pv-claim-text { font-size:16px; line-height:1.7 }
.pv-desktop .pv-ct-btn { padding:8px 16px !important; font-size:13px !important }
.pv-desktop #pv-impact-content { max-width:800px; margin:0 auto }
.pv-desktop #pv-settings { max-width:640px; margin:0 auto }
.pv-desktop .max-w-sm { max-width:600px !important; margin:0 auto }

/* Filter chips on mobile pages: don't need horizontal scroll on desktop */
.pv-desktop .dt-content > [class*="overflow-x-auto"] {
    overflow-x:visible !important;
}

/* ═══════════════════════════════════════════
   OVERLAYS / MODALS
   ═══════════════════════════════════════════ */
.dt-overlay {
    position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.pv-desktop .overlay {
    position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    display:none;
}
.pv-desktop .overlay.show {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.pv-desktop .share-sheet {
    border-radius:16px !important;
    max-height:85vh; max-width:520px; width:90%;
    margin:0 !important;
    animation:dtFadeUp 0.25s ease-out;
}
@keyframes dtFadeUp {
    from { opacity:0; transform:translateY(16px) }
    to { opacity:1; transform:translateY(0) }
}

/* Notification Drawer */
.dt-notif-drawer {
    position:fixed; top:0; right:0;
    width:400px; height:100vh;
    background:#fff;
    box-shadow:-4px 0 24px rgba(0,0,0,0.1);
    display:flex; flex-direction:column;
    animation:dtSlideLeft 0.2s ease-out;
}
@keyframes dtSlideLeft {
    from { transform:translateX(100%) }
    to { transform:translateX(0) }
}
.dt-notif-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; border-bottom:1px solid rgba(0,0,0,0.06);
    font-size:16px; font-weight:700; color:var(--text);
}
.dt-notif-header button {
    background:none; border:none; font-size:22px;
    color:var(--text-hint); cursor:pointer; line-height:1;
}
.dt-notif-body {
    flex:1; overflow-y:auto; padding:16px 24px;
    font-size:13px; color:var(--text-sub);
}

/* Story Overlay (created dynamically by JS) */
.pv-desktop #pv-story-overlay { position:fixed; inset:0; z-index:250 }

/* Toast */
.pv-desktop #pv-toast {
    position:fixed; bottom:24px; left:280px;
    z-index:400; max-width:none;
}

/* Offline banner */
.dt-offline {
    position:fixed; top:56px; left:256px; right:0; z-index:999;
    background:#EF4444; color:#fff; text-align:center;
    padding:6px; font-size:12px; font-weight:600;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */
.pv-desktop .text-lg { font-size:18px !important }
.pv-desktop .text-xl { font-size:22px !important }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width:1024px) {
    .dt-sidebar { width:220px }
    .dt-main { margin-left:220px }
    .dt-content { padding:20px 24px }
    .dt-topbar-nav { display:none }
    .dt-offline { left:220px }
    .pv-desktop #pv-toast { left:240px }
}

/* ═══════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════ */
.pv-desktop ::-webkit-scrollbar { width:6px; height:6px }
.pv-desktop ::-webkit-scrollbar-track { background:transparent }
.pv-desktop ::-webkit-scrollbar-thumb { background:transparent; border-radius:3px }
.pv-desktop *:hover::-webkit-scrollbar-thumb { background:rgba(160,160,144,0.35) }

/* Fix story overlay sidebar offset on narrow screens */
@media (max-width:1024px) {
    .pv-desktop #pv-story-overlay { left:220px !important }
}