/* ==========================================================================
   SoftwareCMS — light + navy brand skin (dark theme still available via the
   toggle, see [data-theme="dark"] below). The .card component is pinned to
   its own fixed dark palette regardless of this — see the .card rule.
   ========================================================================== */

:root {
    /* Light is the site's default look now (the branded "Softrepack" skin)
       — dark is an explicit opt-in via the toggle, see [data-theme="dark"]
       below. */
    --bg:           #eef1f8;
    --surface:      #ffffff;
    --surface2:     #f5f7fa;
    --border:       #e2e8f0;
    --accent:       #4f8ef7;
    --accent-hover: #3a7ae8;
    --green:        #22c55e;
    --red:          #ef4444;
    --grey-badge:   #6b7280;
    --text:         #1a202c;
    --text-muted:   #4a5568;
    --text-dim:     #a0aec0;
    --freeware:     #10b981;
    --shareware:    #f59e0b;
    --opensource:   #6366f1;
    --trial:        #ec4899;
    --radius:       8px;

    /* Site "chrome" palette (topbar/hero/sidebar boxes/trust strip) — fixed
       regardless of the dark/light toggle, so the page reads as one
       consistent light+navy brand look. */
    --navy:      #131a42;
    --navy2:     #1b2354;
    --navy-text: #aab2d6;
}

/* Explicit dark opt-in via the toggle (see includes/footer.php) — the old
   dark palette, unchanged. */
[data-theme="dark"] {
    --bg:         #0f1117;
    --surface:    #1a1d27;
    --surface2:   #22263a;
    --border:     #2e3248;
    --text:       #e2e8f0;
    --text-muted: #8892a4;
    --text-dim:   #4a5568;
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    /* Always reserve the vertical scrollbar's width, even on short pages
       that don't need to scroll — otherwise the page content jumps left/
       right by the scrollbar's width when navigating between a tall page
       and a short one. scrollbar-gutter is the modern way; overflow-y is
       the fallback for browsers that don't support it yet. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Fixed dark blue textured background (GetIntoPC-style), independent
       of the light/dark toggle — same "always this look" pattern as the
       header/nav/footer/cards above. background-attachment:fixed keeps it
       anchored to the viewport as the page's content scrolls over it,
       rather than scrolling along with the page. */
    background:
        radial-gradient(ellipse 900px 700px at 50% 45%, rgba(255,255,255,.05), transparent 70%),
        radial-gradient(ellipse 1400px 1100px at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px),
        linear-gradient(160deg, #16293c, #0d1a2a),
        #0d1a2a;
    background-attachment: fixed;
    color: #e8ecef;
    line-height: 1.5;
    /* Without these, light text on this theme's dark background renders
       noticeably fuzzier/heavier in WebKit/Blink and on macOS — a common
       cause of a site "not looking sharp" that has nothing to do with the
       font file itself. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* No overflow-x:hidden here on purpose — it breaks position:sticky on
       any ancestor (the homepage/post sidebar uses it), which is what
       caused the sidebar to float over the content instead of sitting in
       its own column. The min-width:0 grid-children fix below plus
       overflow-wrap are what actually stop the page from ever growing
       wider than the viewport; that's enough on its own. */
    /* Long unbroken strings (URLs, slugs, filenames) wrap instead of
       forcing the page wider than the viewport. */
    overflow-wrap: break-word;
    word-break: break-word;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.version, .file-size, code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
/* Top slim strip: quick links (left) + theme/lang toggles (right) */
.topbar { background: var(--navy); color: #fff; padding: 8px 0; font-size: .78rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.topbar-left { display: flex; align-items: center; gap: 8px; color: var(--navy-text); flex-wrap: wrap; }
.topbar-left .sep { opacity: .5; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar .lang-switcher { padding: 3px 8px; font-size: 11.5px; }
@media (max-width: 640px) {
    .topbar-left span:not(:first-child) { display: none; }
}

/* Browser-language suggestion banner — dismissible, never auto-applied */
.lang-suggest-bar { background: rgba(79, 142, 247, .12); border-bottom: 1px solid var(--border); }
.lang-suggest-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 20px; font-size: .82rem; color: var(--text); }
.lang-suggest-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.lang-suggest-switch { color: var(--accent); font-weight: 700; text-decoration: none; }
.lang-suggest-switch:hover { text-decoration: underline; }
.lang-suggest-dismiss { color: var(--text-muted); text-decoration: none; font-size: .9rem; line-height: 1; }
.lang-suggest-dismiss:hover { color: var(--text); }

.site-header {
    /* Deliberately not display:flex here — .header-inner is a block-level
       child with its own max-width:1050px + margin:0 auto, which only
       centers correctly in normal block flow. Making this flex shrinks
       .header-inner to its content width instead (a real bug hit while
       building this), so min-height:80px does the header's height job
       instead — already exceeded anyway by .header-inner's own padding. */
    background: transparent;
    border-bottom: none;
    min-height: 80px;
    position: static;
    z-index: 50;
}
.site-header .header-inner {
    max-width: 1050px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
    flex-wrap: wrap;
    min-height: 64px;
    box-sizing: border-box;
}
.header-social {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
}
.header-social-icon {
    width: 30px; height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    background: rgba(255,255,255,.1);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.header-social-fb { background: #1877f2; }
.header-social-tw { background: #1da1f2; }
.header-social-rss { background: #f97316; }
.logo-block {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    flex-shrink: 0;
}
.logo-block:hover { color: #fff; }
/* .site-header is transparent (shows the admin's wallpaper straight
   through) — white text stays readable over a wallpaper/dark theme, but
   would vanish on the light theme's pale background, so it switches to a
   dark color there instead. */
:root[data-theme="light"] .logo-block,
:root[data-theme="light"] .logo-block:hover,
:root[data-theme="light"] .logo-name {
    color: var(--text);
    text-shadow: none;
}
:root[data-theme="light"] .logo-text .tagline { color: var(--text-muted); }
.logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}
.logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-name { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.logo-text .tagline {
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: #ccc;
    letter-spacing: .02em;
}
.search-form { display: flex; flex: 1; max-width: 460px; position: relative; }
.search-form-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: .6;
    pointer-events: none;
}
.search-form input {
    flex: 1;
    padding: 10px 14px 10px 36px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 999px 0 0 999px;
    font-size: 13px;
    outline: none;
}
.search-form input::placeholder { color: var(--text-dim); }
.search-form input:focus { border-color: var(--accent); }
.search-form button {
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 0 999px 999px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.search-form button:hover { background: var(--accent-hover); }

/* Sticky dark/light switch — fixed to the bottom-left of the viewport,
   styled as a real toggle switch (sliding thumb) rather than an icon
   button, per the site's own convention request. */
.theme-toggle-fab {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    width: 58px;
    height: 32px;
    padding: 3px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.theme-toggle-fab .toggle-track-icon {
    flex: 1;
    text-align: center;
    font-size: 12px;
    opacity: .5;
}
.theme-toggle-fab .toggle-thumb {
    position: absolute;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: transform .25s ease;
}
.theme-toggle-fab[data-theme-state="dark"] .toggle-thumb { transform: translateX(26px); }
@media (max-width: 640px) {
    .theme-toggle-fab { left: 12px; bottom: 12px; }
}
.lang-switcher {
    padding: 8px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.lang-switcher:focus { border-color: var(--accent); outline: none; }

/* ---------------------------------------------------------------------- */
/* Layout                                                                  */
/* ---------------------------------------------------------------------- */
main.container { padding: 20px 20px 0; min-height: 60vh; }

/* Hero banner — sits inside main-col, side-by-side with the sidebar */
.hero-banner {
    background:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 2px, transparent 2px),
        radial-gradient(circle at 60% 15%, rgba(255,255,255,.1) 0, rgba(255,255,255,.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.1) 0, rgba(255,255,255,.1) 2px, transparent 2px),
        radial-gradient(circle at 30% 80%, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 2px, transparent 2px),
        linear-gradient(120deg, #1c2450 0%, #2f2470 55%, #1a1f3a 100%);
    padding: 40px;
    border-radius: var(--radius);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}
.hero-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.hero-text { flex: 1; }
.hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 14px;
}
.hero-title-accent { color: var(--accent); }
.hero-subtitle {
    color: rgba(255,255,255,.7);
    font-size: 1rem;
    margin: 0 0 28px;
    line-height: 1.6;
}
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-btn-primary {
    background: var(--accent);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-btn-primary:hover { background: var(--accent-hover); color: #fff; }
.hero-btn-secondary {
    background: rgba(255,255,255,.1);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-btn-secondary:hover { background: rgba(255,255,255,.18); color: #fff; }
.hero-illustration {
    flex-shrink: 0;
    align-self: center;
    position: relative;
    width: 260px;
    max-width: 38%;
    margin: 0 4px 14px 0;
}
.hero-laptop { position: relative; }
.hero-laptop-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(160deg, #0e1730 0%, #1a2547 100%);
    border: 3px solid rgba(255,255,255,.18);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.hero-laptop-base {
    height: 16px;
    margin: 0 -9%;
    background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.06));
    border-radius: 0 0 10px 10px;
}
.hero-laptop-icon { font-size: 1.7rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.hero-laptop-icon-win { color: #4f8ef7; }
.hero-laptop-shield {
    position: absolute;
    right: -8%;
    bottom: -18%;
    font-size: 2.6rem;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
.hero-laptop-shield-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    padding-bottom: 10%;
}
.hero-dots { display: flex; justify-content: center; gap: 8px; padding: 20px 0 0; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); }
.hero-dot.active { background: #fff; width: 20px; border-radius: 4px; }
@media (max-width: 768px) {
    .hero-banner-inner { flex-direction: column; text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-illustration { width: 220px; max-width: 70vw; margin: 0 auto; }
    .hero-title { font-size: 1.8rem; }
}

.breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 6px; color: var(--text-dim); }
.breadcrumb .current { color: var(--text); }

.page-title { font-size: 22px; margin: 0 0 18px; letter-spacing: -.01em; }
/* .page-title sits on the page's own dark background almost everywhere
   (About, Contact, 404, etc.) where the theme-following color is correct
   — except inside .page-layout's white container (category/search
   results), where it needs a fixed dark color instead. */
.page-layout .page-title { color: #23262d; font-weight: 800; }

.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-heading-row .page-title { margin: 0; }
.view-all-link { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.view-all-link:hover { text-decoration: underline; }

.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tabs a {
    padding: 9px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}
.tabs a:hover { color: var(--text); border-color: var(--accent); }
.tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.filter-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-tabs a {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    background: var(--surface);
    color: var(--text-muted);
}
.filter-tabs a:hover { color: var(--text); border-color: var(--accent); }
.filter-tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Homepage: main grid + sidebar */
.page-layout {
    /* Fixed light palette, independent of the site's dark/light toggle —
       same "always this look" pattern as .sidebar-box/.post-card — so text
       using var(--text)/var(--text-muted) inside this white box doesn't
       resolve to the dark theme's pale colors and go unreadable. */
    --surface: #ffffff;
    --border: #ddd;
    --text: #1a1a1a;
    --text-muted: #4a5568;
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 28px;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 16px;
}
/* A grid track's default min-width is auto (sized to its widest
   unbreakable content), not 0 — so a long word/URL inside the 1fr column
   can silently push the whole grid, and the page, wider than the
   viewport. Forcing min-width:0 on every direct child is what actually
   lets that content wrap/shrink instead. */
.page-layout > *, .detail-layout > * { min-width: 0; }

/* Tablet: narrower sidebar column instead of the full 260px. */
@media (max-width: 900px) {
    .page-layout { grid-template-columns: 1fr 220px; gap: 18px; padding: 12px; }
}
/* Mobile: stack sidebar below main content — a sticky sidebar makes no
   sense once it's no longer beside the content it's tracking. */
@media (max-width: 680px) {
    .page-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .gp-item { flex-direction: column; }
    .gp-item-thumb { width: 100%; height: 160px; }
}
.sidebar { display: flex; flex-direction: column; gap: 20px; position: static; }
.sidebar-box {
    /* Fixed light card, independent of the light/dark toggle — every
       var(--surface|border|text|text-muted) used by this box's children
       below resolves against these local values instead of the page theme. */
    --surface: #ffffff;
    --border: #dfe2e6;
    --text: #23262d;
    --text-muted: #6b7280;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sidebar-box h3 {
    margin: 0 0 12px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: 600;
}
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { border-bottom: 1px solid var(--border); }
.sidebar-list li:last-child { border-bottom: none; }
.sidebar-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-size: 13.5px;
    color: var(--text);
}
.sidebar-list a:hover { color: var(--accent); }
.sidebar-list .count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    background: rgba(79, 142, 247, .15);
    border-radius: 999px;
    padding: 1px 9px;
    flex-shrink: 0;
}
.sidebar-list .rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    margin-right: 8px;
    flex-shrink: 0;
}
.sidebar-list .name { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-list .cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: rgba(79, 142, 247, .18);
    font-size: 13px;
    margin-right: 10px;
    flex-shrink: 0;
}
/* A little color variety per row, like a real icon set rather than one flat
   tint repeated down the list. */
.sidebar-list li:nth-child(6n+2) .cat-icon { background: rgba(249, 115, 22, .18); }
.sidebar-list li:nth-child(6n+3) .cat-icon { background: rgba(20, 184, 166, .18); }
.sidebar-list li:nth-child(6n+4) .cat-icon { background: rgba(168, 85, 247, .18); }
.sidebar-list li:nth-child(6n+5) .cat-icon { background: rgba(236, 72, 153, .18); }
.sidebar-list li:nth-child(6n+0) .cat-icon { background: rgba(34, 197, 94, .18); }

.sidebar-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sidebar-box-header h3 { margin: 0; }
.sidebar-box-header .view-all-link { font-size: 11.5px; text-transform: none; letter-spacing: normal; }
.sidebar-browse-btn {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 9px;
    border-radius: 999px;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.sidebar-browse-btn:hover { background: var(--accent); color: #fff; }

/* Join Our Community sidebar widget — same fixed navy card as .sidebar-box,
   independent of the light/dark toggle. */
.community-box {
    --surface: #ffffff;
    --text: #23262d;
    --text-muted: #6b7280;
    background: var(--surface);
    border: 1px solid #dfe2e6;
    border-radius: 4px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.community-box-text h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: normal; }
.community-box-text p { margin: 0 0 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.community-box-icon { display: flex; flex-shrink: 0; }
.community-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px solid var(--surface);
    margin-left: -12px;
}
.community-avatar:first-child { margin-left: 0; }
.community-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.community-join-btn:hover { background: var(--accent-hover); color: #fff; }
@media (max-width: 400px) {
    .community-box { flex-direction: column; align-items: flex-start; }
}

/* Main nav tabs — Home / Windows / Android / Mac / Categories, below the
   header. Fixed light bar regardless of theme (same "always this look"
   pattern as .site-header above it and .sidebar-box), with a divider
   between tabs and a solid dark active state. */
.main-nav {
    background: transparent;
    border-bottom: none;
    padding: 0 20px;
}
/* Same width as .page-layout/.gp-footer-box (1050px, centered) — overrides
   the shared .container class's own 1240px max-width so all three line up
   exactly, with .main-nav's own 20px padding above providing the same
   viewport-edge inset .site-footer uses. Flush against .page-layout below
   it (no top/bottom gap) and against .site-header above it. */
.main-nav .main-nav-inner {
    max-width: 1050px;
    padding: 0;
    background: linear-gradient(180deg, #f5f6f7, #e5e7e9);
    border: 1px solid #c9cccf;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: visible;
    border-radius: 0;
}
.main-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 0;
    border-right: 1px solid #d5d8dd;
    color: #333;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all .15s;
}
.main-nav-tab:hover { color: #6e8c03; background: #dde0e4; }
.main-nav-tab.active {
    color: #fff;
    background: #1c1f26;
    font-weight: 600;
    box-shadow: none;
}
.ptab-icon { font-size: .85rem; line-height: 1; display: inline-flex; }
.ptab-icon svg { width: 15px; height: 15px; }

.main-nav-tab--dropdown {
    flex: 1;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.main-nav-dropdown-caret { font-size: .55rem; margin-left: -2px; opacity: .55; transition: transform .15s; }
/* Small decorative notch under the active "Home" tab, matching the
   reference nav's look — purely visual, not a real dropdown indicator. */
.main-nav-tab.active {
    position: relative;
}
.main-nav-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1c1f26;
}
.main-nav-dropdown { position: relative; flex: 1; display: flex; }
.main-nav-dropdown.open .main-nav-dropdown-caret { transform: rotate(180deg); }
.main-nav-dropdown-menu {
    display: none;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    padding: 6px;
    z-index: 200;
}
.main-nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 7px;
    color: var(--text);
    text-decoration: none;
    font-size: .85rem;
}
.main-nav-dropdown-menu a:hover, .main-nav-dropdown-menu a.active { background: var(--surface2); color: var(--accent); }
.main-nav-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(79, 142, 247, .15);
    font-size: 11px;
    flex-shrink: 0;
}
.main-nav-dropdown-viewall {
    display: block;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--accent) !important;
    font-weight: 600;
    background: none !important;
}
.main-nav-dropdown-divider {
    margin: 6px 0;
    border-top: 1px solid var(--border);
}


/* ---------------------------------------------------------------------- */
/* Grid + Card                                                             */
/* ---------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    color: var(--text);
    transition: background .15s, box-shadow .15s, transform .15s, border-color .15s;
    /* A grid item's default min-width is auto (= its content's natural
       min-content width), not 0 — so a card with an unusually long
       description silently blows its whole 1fr column wider than the
       other two, pushing that row past the grid's actual width and
       under the sticky sidebar next to it. min-width:0 forces the text
       to wrap/truncate within the card instead of stretching the track. */
    min-width: 0;
}
.card:hover {
    background: var(--surface2);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(79,142,247,.15), 0 8px 20px rgba(0,0,0,.35);
    transform: translateY(-2px);
}
.card-click-overlay { position: absolute; inset: 0; z-index: 1; }
.card-top { display: flex; gap: 14px; }
.card-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.card-icon.icon-fallback, .card-icon:not([src]) { background: var(--surface2); }
.card-body { min-width: 0; flex: 1; }
.card-title {
    font-size: 15px;
    margin: 0 0 4px;
    color: var(--text);
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
}
.card-version { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-download-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .9rem;
    transition: all .15s;
    flex-shrink: 0;
}
.card-download-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* List/row layout — homepage Featured Software / Latest Updates only
   (includes/software_row.php). Same tokens as .card, different shape:
   one full-width row per item instead of a boxed grid tile. */
.row-list { display: flex; flex-direction: column; }
.row-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    transition: background .15s;
}
.row-list .row-item:last-child { border-bottom: none; }
.row-item:hover { background: var(--surface2); }
.row-click-overlay { position: absolute; inset: 0; z-index: 1; }
.row-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.row-icon.icon-fallback, .row-icon:not([src]) { background: var(--surface2); }
.row-info { min-width: 0; flex: 0 0 auto; width: 230px; }
.row-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-meta { font-size: 12px; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 6px; }
.row-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-action { position: relative; z-index: 2; flex-shrink: 0; border-left: 1px solid var(--border); padding-left: 16px; }
@media (max-width: 640px) {
    .row-info { width: 140px; }
    .row-desc { display: none; }
}

/* Homepage list layout (includes/software_listitem.php) — bordered box per
   item, thumbnail + title/date/category + excerpt, like a classic download
   directory listing. Separate from .card/.row-item on purpose: this is
   only ever used on the homepage. These few colors (--gp-lime, the dark
   date badge) are deliberately fixed rather than pulled from the site's
   --accent token — this look is scoped to the homepage's own widgets, not
   a site-wide theme change, so it stays constant across dark/light mode. */
:root { --gp-lime: #8a9e1a; --gp-lime-dark: #6f7f15; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gp-lime: #a9c22a; --gp-lime-dark: #8a9e1a; } }
:root[data-theme="dark"] { --gp-lime: #a9c22a; --gp-lime-dark: #8a9e1a; }

.gp-list { display: flex; flex-direction: column; gap: 0; }
.gp-item {
    /* Fixed light card, independent of the light/dark toggle — same
       pattern as .sidebar-box/.site-footer/.main-nav, so the whole
       homepage reads as one consistent white-content look. */
    display: flex;
    gap: 15px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.gp-item-thumb {
    flex-shrink: 0;
    width: 140px; height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #eef0f2;
    border: 1px solid #dfe2e6;
    display: block;
}
.gp-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gp-item-thumb img.icon-fallback, .gp-item-thumb img:not([src]) { opacity: 0; }
.gp-item-body { min-width: 0; flex: 1; }
.gp-item-title { margin: 0 0 8px; font-size: 22px; }
.gp-item-title a { color: #6e8c03; font-weight: 700; }
.gp-item-title a:hover { text-decoration: underline; }
.gp-item-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7280; margin-bottom: 10px; flex-wrap: wrap; }
/* Decorative rounded fill bar trailing the date/category — present in
   every reference screenshot, consistent enough to be a deliberate part
   of the card design rather than a loading-state artifact. */
.gp-item-meta::after {
    content: "";
    flex: 1;
    min-width: 40px;
    height: 14px;
    background: #eef0f2;
    border-radius: 999px;
}
.gp-item-date {
    background: #333;
    color: #fff;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    letter-spacing: .03em;
}
.gp-item-meta a { color: #6e8c03; text-decoration: underline; }
.gp-item-desc { margin: 0; font-size: 15px; color: #333; line-height: 1.6; }
.gp-item-more { color: #6e8c03; text-decoration: underline; white-space: nowrap; text-transform: uppercase; font-size: 11px; }

.gp-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; }
.gp-pagination a, .gp-pagination span.active, .gp-pagination span.gp-page-ellipsis {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.gp-pagination a { background: #ffffff; border: 1px solid #dfe2e6; color: #555; }
.gp-pagination a:hover { border-color: var(--gp-lime-dark); color: var(--gp-lime-dark); }
.gp-pagination span.active { background: #1c1f26; color: #fff; border: 1px solid #1c1f26; }
.gp-pagination span.gp-page-ellipsis { color: #6b7280; }

/* Sidebar search — moved here from the header (see includes/header.php),
   sitting above the donate box. */
.gp-sidebar-search {
    display: flex;
    position: relative;
    margin-bottom: 16px;
}
.gp-sidebar-search input {
    flex: 1;
    padding: 10px 14px 10px 36px;
    background: #ffffff;
    border: 1px solid #dfe2e6;
    color: #23262d;
    border-radius: 4px 0 0 4px;
    font-size: 13px;
    outline: none;
}
.gp-sidebar-search input::placeholder { color: #9aa1ab; font-style: italic; }
.gp-sidebar-search .search-form-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .6; }
.gp-sidebar-search button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 20px;
    background: #6e8c03;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}
.gp-sidebar-search button:hover { opacity: .9; }

/* "Support our Work" donate banner — a plain colored block, not a colored
   header bar like the other gp-widget-box entries, to read as its own
   distinct call-to-action rather than another list-style widget. */
.gp-donate-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 18px 14px;
    border-radius: 4px;
    background: linear-gradient(160deg, #d33a2c, #a3241a);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.gp-donate-box strong { font-size: 15px; }
.gp-donate-box span { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.gp-advertise-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    padding: 22px 14px;
}

/* Padlock badge — links to the real VPN & Privacy category rather than
   claiming a VPN product/service this site doesn't actually offer. */
.gp-vpn-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 24px 14px;
    text-decoration: none;
}
.gp-vpn-badge {
    position: relative;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e9edf1, #b9c1c9 65%, #8b95a1);
    border: 3px solid #d6dbe0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.2);
}
.gp-vpn-lock { font-size: 40px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.gp-vpn-check {
    position: absolute;
    bottom: 2px; right: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #3aa757;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.gp-vpn-label {
    background: #23262d;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 8px 16px;
    border-radius: 999px;
}
.gp-vpn-box:hover .gp-vpn-label { background: var(--gp-lime-dark); }

/* Sidebar promo/utility boxes (Follow Us, Subscribe/Request) — a colored
   header bar over a plain body, distinct from .sidebar-box's own header
   row so these read as "extra" widgets rather than core navigation. */
.gp-widget-box { border-radius: 4px; overflow: hidden; border: 1px solid #dfe2e6; margin-top: 16px; }
.gp-widget-header {
    position: relative;
    background: #6e8c03;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 14px;
}
/* Small folded-corner/ribbon notch at the bottom-right, matching the
   reference's widget header bars. */
.gp-widget-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 0;
    border-color: #4d6602 transparent transparent transparent;
}
.gp-widget-body { background: #ffffff; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.gp-follow-icons { flex-direction: row; gap: 10px; }
.gp-follow-icons a {
    width: 38px; height: 38px;
    border-radius: 6px;
    background: #eef0f2;
    border: 1px solid #dfe2e6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.gp-widget-btn {
    display: block;
    text-align: center;
    background: #e67e00;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 11px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.gp-widget-btn:hover { opacity: .9; }
.gp-widget-btn-alt { background: #0088cc; color: #fff; border: none; }

/* License tag: colored text, no background */
.lic-tag { font-weight: 600; font-size: 12px; }
.lic-freeware   { color: var(--freeware); }
.lic-shareware  { color: var(--shareware); }
.lic-opensource { color: var(--opensource); }
.lic-trial      { color: var(--trial); }

/* ---------------------------------------------------------------------- */
/* Safety badges                                                           */
/* ---------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .01em;
}
.badge-clean     { background: #052e16; color: var(--green); border: 1px solid #166534; }
.badge-flagged   { background: #450a0a; color: var(--red);   border: 1px solid #991b1b; }
.badge-unchecked { background: #111827; color: var(--grey-badge); border: 1px solid #374151; }

/* Platform icon shown in the card's bottom-left corner instead of the old
   safety badge. A fixed light chip behind it keeps each brand's true color
   (including the black Apple mark) legible in both the dark and light
   theme. */
.card-platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}
.card-platform-icon svg { width: 17px; height: 17px; }
/* Compact variant used inline within a text meta-line (post detail heading). */
.card-platform-icon--inline { width: 20px; height: 20px; vertical-align: middle; }
.card-platform-icon--inline svg { width: 11px; height: 11px; }

/* ---------------------------------------------------------------------- */
/* Software detail page                                                    */
/* ---------------------------------------------------------------------- */
/* The whole post page — article, download button, comments, and sidebar —
   sits inside ONE white container instead of separate floating boxes.
   Fixed light palette, independent of the site's dark/light toggle — same
   "always this look" pattern as .sidebar-box — so the post page always
   reads as a plain white classic layout regardless of the visitor's theme. */
.detail-layout {
    --surface: #ffffff;
    --border: #e2e5ea;
    --text: #1a1a1a;
    --text-muted: #2c4a7c;
    max-width: 1050px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .detail-layout { grid-template-columns: 1fr 220px; gap: 18px; }
}
@media (max-width: 680px) {
    .detail-layout { grid-template-columns: 1fr; }
}

/* .post-card is now just a structural wrapper — .detail-layout above
   provides the one shared white container for the whole post page. */
.post-card { overflow: hidden; }

.detail-heading-block { padding: 0 0 16px; }
.detail-heading-block h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.01em; }
.detail-meta-line {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    color: var(--text-muted); margin: 0; font-size: 14px;
}
.detail-meta-line .sep { color: var(--text-dim); }

.feature-image-box { text-align: center; padding: 0 0 16px; }
.feature-image { display: inline-block; max-height: 480px; max-width: 100%; object-fit: contain; margin: 0 auto; border-radius: 6px; }

.promo-download-box {
    text-align: center;
    padding: 18px;
}
.promo-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    padding: 13px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: background .15s;
}
.promo-download-btn:hover { filter: brightness(1.1); }

.section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 20px;
}
.section h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.section :last-child { margin-bottom: 0; }
/* Inside the unified post page container, a .section is just one flowing
   block, not its own separate floating box — see .detail-layout above. */
.detail-layout .main-col .section { background: none; border: none; border-radius: 0; padding: 22px 0; margin-bottom: 0; }
.detail-layout .main-col .section:first-child { padding-top: 0; }

.screenshots { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.screenshots img {
    height: 180px;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* Sticky download sidebar box */
.download-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.download-box .dl-meta { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; }
.download-box .dl-meta li {
    display: flex; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text-muted);
}
.download-box .dl-meta li:last-child { border-bottom: none; }
.download-box .dl-meta strong { color: var(--text); font-weight: 600; }
.download-box .safety-box { margin-top: 16px; text-align: center; }
.download-box .safety-box p { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; text-align: left; }

/* System Requirements table — inside .post-card this is just another
   divided block (border-top from .post-card > * + *), not its own box. */
.sysreq-card {
    overflow: hidden;
    margin: 0;
}
.sysreq-table-wrap { overflow-x: auto; }
.sysreq-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    padding: 14px 20px;
    margin: 0;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sysreq-table { width: 100%; min-width: 420px; border-collapse: collapse; }
.sysreq-table thead tr { background: var(--accent); }
.sysreq-table thead th {
    color: #fff;
    font-weight: 700;
    padding: 11px 20px;
    text-align: left;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sysreq-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
.sysreq-table tbody tr:nth-child(odd) { background: var(--surface); }
.sysreq-table tbody tr:nth-child(even) { background: var(--surface2); }
.sysreq-table tbody tr:hover { background: rgba(79, 142, 247, .06); }
.sysreq-table tbody tr:last-child { border-bottom: none; }
.sysreq-label {
    padding: 11px 20px;
    color: var(--text);
    font-weight: 600;
    font-size: .875rem;
    width: 38%;
    vertical-align: middle;
    border-right: 1px solid var(--border);
}
.sysreq-value { padding: 11px 20px; color: var(--text-muted); font-size: .875rem; vertical-align: middle; }
.sysreq-card:empty { display: none; }

/* Related Products / Recent Posts card — same fixed navy look as the
   Categories sidebar box (.sidebar-box), independent of the light/dark
   toggle. */
.related-card {
    --surface: var(--navy);
    --surface2: var(--navy2);
    --border: rgba(255,255,255,.08);
    --text: #ffffff;
    --text-muted: var(--navy-text);
    background: linear-gradient(160deg, var(--navy2), var(--navy));
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 16px;
}
.related-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
.related-card__title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.related-card__titles { list-style: none; margin: 0; padding: 6px 14px; }
.related-card__titles li { border-bottom: 1px solid var(--border); }
.related-card__titles li:last-child { border-bottom: none; }
.related-card__titles a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: .85rem;
    color: var(--text);
    text-decoration: none;
}
.related-card__titles a:hover { color: var(--accent); }
.related-card__titles a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.related-card__titles img {
    width: 28px; height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.related-card__titles img.icon-fallback, .related-card__titles img:not([src]) { background: var(--surface2); }
.related-card__viewall {
    display: block;
    text-align: center;
    padding: 10px 16px;
    font-size: .8rem;
    color: var(--accent);
    text-decoration: none;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    transition: background .15s;
}
.related-card__viewall:hover { background: var(--border); color: var(--text); }

/* Post content (long_description) typography */
.post-content h2 { font-size: 18px; font-weight: 700; margin: 22px 0 10px; color: var(--text); }
.post-content h2:first-child { margin-top: 0; }
.post-content h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; color: var(--text); }
.post-content p { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; line-height: 1.7; text-align: justify; }
.post-content ul, .post-content ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.post-content a { color: var(--accent); text-decoration: underline; }
.post-content li { margin-bottom: 4px; }
.post-content li ul, .post-content li ol { margin-top: 4px; margin-bottom: 0; }

/* Description "Read More" collapse — ~25 lines at 14px/1.7 line-height */
.post-content-wrapper {
    position: relative;
    max-height: 595px;
    overflow: hidden;
    transition: max-height .4s ease;
}
.post-content-wrapper.expanded { max-height: 4000px; }
.post-content-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(transparent, var(--surface));
    pointer-events: none;
}
.read-more-btn {
    display: block;
    text-align: right;
    color: var(--accent);
    cursor: pointer;
    padding: 8px 0 0;
    font-size: .875rem;
    font-weight: 600;
    user-select: none;
}
.read-more-btn:hover { color: var(--accent-hover); }

/* ── Comments Section — flows inside the shared .detail-layout white
   container (see above) instead of being its own separate box ── */
.comments-section {
    border-top: 1px solid var(--border);
    padding: 22px 0 0;
    margin-top: 20px;
}
.comments-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 24px;
}
.comments-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 24px;
}
.comment-item {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}
.comment-item:last-child { border-bottom: none; }
.comment-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface2);
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.comment-author { font-weight: 700; font-size: .9rem; color: var(--text); }
.comment-date { font-size: .78rem; color: var(--text-muted); }
.comment-text { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }

.comment-admin-reply {
    margin-top: 12px;
    background: rgba(79, 142, 247, .08);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
}
.comment-admin-reply__label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.comment-admin-reply__text { font-size: .875rem; color: var(--text); line-height: 1.6; }
.comment-admin-reply__date { font-size: .72rem; color: var(--text-muted); margin-top: 6px; }

.comment-form-wrap {
    margin-top: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
}
.comment-form-heading { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 20px; }
.comment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.comment-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.comment-form-field label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.comment-form-note { font-weight: 400; text-transform: none; color: var(--text-dim); }
.comment-form-field input,
.comment-form-field textarea {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 10px 14px;
    font-size: .875rem;
    transition: border-color .15s;
    font-family: inherit;
    resize: vertical;
}
.comment-form-field input:focus,
.comment-form-field textarea:focus { outline: none; border-color: var(--accent); }
.comment-char-count { font-size: .75rem; color: var(--text-dim); text-align: right; margin-top: 4px; display: block; }
.comment-submit-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.comment-submit-btn:hover { background: var(--accent-hover); }
.comment-success {
    background: rgba(34, 197, 94, .1);
    border: 1px solid var(--green);
    color: var(--green);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: .875rem;
}
.comment-error {
    background: rgba(239, 68, 68, .1);
    border: 1px solid var(--red);
    color: var(--red);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: .875rem;
}
@media (max-width: 768px) {
    .comment-form-grid { grid-template-columns: 1fr; }
    .comment-item { gap: 10px; }
    .comment-avatar img { width: 38px; height: 38px; }
}

.btn-download {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}
.btn-download:hover { background: #16a34a; color: #fff; }
.btn-download[data-state="unavailable"], .promo-download-btn[data-state="unavailable"] {
    background: var(--red) !important;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------- */
/* Forms (public + admin shared basics)                                    */
/* ---------------------------------------------------------------------- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: var(--text); }
.form-group input[type=text], .form-group input[type=password], .form-group input[type=number],
.form-group input[type=url], .form-group input[type=date], .form-group input[type=file],
.form-group input[type=email], .form-group select, .form-group textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79,142,247,.18);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input[type=checkbox] { width: auto; }

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
}
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #dc2626; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* ---------------------------------------------------------------------- */
/* Static pages                                                            */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Load more                                                               */
/* ---------------------------------------------------------------------- */
.load-more-wrap { text-align: center; margin: 28px 0 4px; }
.load-more-wrap .btn { padding: 11px 28px; }

/* Trust badges strip — full-bleed, above the footer. Fixed navy, independent
   of the light/dark toggle. */
.trust-strip {
    --text: #ffffff;
    --text-muted: var(--navy-text);
    background: var(--navy);
    border-top: none;
    border-bottom: none;
    padding: 32px 0;
    /* Same navy as .site-footer right after it — cancels both the 56px
       bottom padding of the <main> it sits inside (main.container) and
       .site-footer's own 48px margin-top, so the two blend into one
       seamless navy section with zero visible gap between them. */
    margin: 40px calc(-50vw + 50%) -104px;
    width: 100vw;
}
.trust-strip-inner {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.trust-item { display: flex; align-items: flex-start; gap: 14px; }
.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(79, 142, 247, .18);
    font-size: 1.3rem;
    flex-shrink: 0;
}
.trust-item:nth-child(2) .trust-icon { background: rgba(34, 197, 94, .18); }
.trust-item:nth-child(3) .trust-icon { background: rgba(79, 142, 247, .18); }
.trust-item:nth-child(4) .trust-icon { background: rgba(168, 85, 247, .18); }
.trust-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.trust-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 768px) {
    .trust-strip-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* Lightbox                                                                */
/* ---------------------------------------------------------------------- */
.lightbox-trigger { cursor: zoom-in; }
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 12, .88);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox-close {
    position: absolute;
    top: 18px; right: 24px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px; height: 38px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    width: 46px; height: 46px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) {
    .lightbox-nav { width: 38px; height: 38px; font-size: 20px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

.alert { padding: 11px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 13.5px; }
.alert-error   { background: #450a0a; color: #fca5a5; border: 1px solid #991b1b; }
.alert-success { background: #052e16; color: #86efac; border: 1px solid #166534; }

/* ---------------------------------------------------------------------- */
/* Static pages / footer                                                   */
/* ---------------------------------------------------------------------- */
/* Fixed light-grey footer, independent of the light/dark toggle — matches
   the header/nav/sidebar-box "always this look" chrome used elsewhere. */
.site-footer {
    --text: #23262d;
    --text-muted: #6b7280;
    position: relative;
    background: transparent;
    border-top: none;
    margin-top: 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
}
/* Decorative wavy glow lines along the top/bottom edges — purely visual. */
.footer-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    opacity: .5;
}
.footer-wave-top {
    top: 0;
    background: radial-gradient(ellipse 700px 40px at 30% 0%, rgba(79,142,247,.35), transparent 70%);
}
.footer-wave-bottom {
    bottom: 0;
    background: radial-gradient(ellipse 700px 40px at 75% 100%, rgba(99,102,241,.3), transparent 70%);
}

.footer-columns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.footer-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* Circular gradient icon badge + centered title + short underline —
   alternating purple/blue per column. */
.footer-col-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 10px;
    background: radial-gradient(circle, rgba(168,85,247,.28), rgba(168,85,247,.08));
    border: 1px solid rgba(168,85,247,.4);
    box-shadow: 0 0 16px rgba(168,85,247,.25);
}
.footer-col:nth-child(even) .footer-col-icon {
    background: radial-gradient(circle, rgba(59,130,246,.28), rgba(59,130,246,.08));
    border-color: rgba(59,130,246,.4);
    box-shadow: 0 0 16px rgba(59,130,246,.25);
}
.footer-col-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--text); }
.footer-col-underline {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #a855f7, #7c3aed);
}
.footer-col:nth-child(even) .footer-col-underline { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.footer-link-card {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
    padding: 7px 0;
    background: none;
    border: none;
    transition: color .15s;
}
.footer-link-card:hover { color: var(--text); }
@media (max-width: 900px) {
    .footer-columns { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}
@media (max-width: 560px) {
    .footer-columns { grid-template-columns: 1fr; }
}

.footer-bottom-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    padding: 26px 0;
    border-top: 1px solid #d5d8dd;
    text-align: left;
}
.footer-brand-block { display: flex; align-items: center; gap: 12px; }
.footer-brand-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}
.footer-brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.footer-brand-name { font-size: 19px; font-weight: 700; color: var(--text); }
.footer-brand-tagline { font-size: 12.5px; color: var(--text-muted); }
.footer-extra-html { color: var(--text-muted); font-size: 13px; }

.footer-follow-block {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 20px;
    border-left: 1px solid #d5d8dd;
}
.footer-follow-label { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.footer-social { display: flex; gap: 10px; }
.footer-social-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    background: #dfe2e6;
    color: var(--text);
    transition: transform .15s, background .15s;
}
.footer-social-icon:hover { transform: translateY(-2px); }
.footer-social-fb { background: #1877f2; }
.footer-social-tw { background: #1da1f2; }
.footer-social-tg { background: #26a5e4; }
.footer-social-rss { background: #f97316; }
.footer-social-yt { background: #ff0000; }

/* Same width as .page-layout (the post/sidebar container) — max-width
   1200px, centered, sitting flush beneath it with no gap. */
.gp-footer-box {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0;
    background: #eef0f2;
    border: 1px solid #d5d8dd;
    border-top: none;
}
.footer-copyright-bar { background: #e2e4e7; border-top: 1px solid #d5d8dd; }
.footer-copyright { padding: 18px 16px; color: var(--text-muted); margin: 0; }

/* Simple pill-style footer link row, replacing the old 4-column layout —
   Home shown as an active lime pill, the rest plain text links. */
.gp-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 16px;
    border-top: none;
}
.gp-footer-links a {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.gp-footer-links a:hover { color: #6e8c03; }
.gp-footer-links a.active { background: #6e8c03; color: #fff; }

.gp-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 0;
    text-decoration: none;
    color: var(--text);
}
.gp-footer-brand img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.gp-footer-brand-name { font-weight: 700; }
.gp-footer-brand-tagline { font-size: 12px; color: var(--text-muted); }

.gp-footer-os-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 16px 12px;
    font-size: 12.5px;
}
.gp-footer-os-links a { color: var(--text-muted); text-decoration: none; }
.gp-footer-os-links a:hover { color: var(--accent); text-decoration: underline; }

.gp-footer-brand-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 16px 12px;
}
.gp-footer-brand-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: none;
}
.gp-footer-brand-item img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.gp-footer-brand-item:hover { color: var(--accent); }

.gp-back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999;
    padding: 10px 18px;
    background: #1c1f26;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.gp-back-to-top:hover { background: var(--gp-lime-dark); }
/* ---------------------------------------------------------------------- */
/* Widgets / Ads                                                           */
/* ---------------------------------------------------------------------- */
.widget-slot { margin: 16px 0; }
.widget-anim-fade { animation: widget-fade .5s ease both; }
.widget-anim-slide { animation: widget-slide .5s ease both; }
.widget-anim-bounce { animation: widget-bounce .6s ease both; }
@keyframes widget-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes widget-slide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes widget-bounce { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px) {
    .page-layout, .detail-layout { grid-template-columns: 1fr; }
    .sidebar, .download-box { position: static; }
    .grid { grid-template-columns: repeat(2, 1fr); }
}
/* All Categories page — 3-col card grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}
.category-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    transition: all .15s;
}
.category-card:hover { border-color: var(--accent); background: var(--surface2); color: var(--accent); }
.category-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 142, 247, .1);
    border-radius: 8px;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.category-card__name { flex: 1; }

@media (max-width: 768px) {
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .main-nav-tab { padding: 12px 14px; font-size: .82rem; }
}
@media (max-width: 640px) {
    .grid { grid-template-columns: 1fr; }
    .header-inner { height: auto; padding: 12px 0; flex-wrap: wrap; }
    .search-form { order: 3; max-width: 100%; flex-basis: 100%; }
    .lightbox { padding: 16px; }
}

/* ---------------------------------------------------------------------- */
/* RTL support (Hebrew)                                                    */
/* Setting `direction: rtl` on the body lets flexbox/grid auto-mirror most  */
/* of the layout (nav, cards, sidebar order, header) natively; the rules   */
/* below only patch the handful of spots that use hardcoded left/right     */
/* positioning or spacing instead of logical properties.                   */
/* ---------------------------------------------------------------------- */
html[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="rtl"] .search-form-icon { left: auto; right: 14px; }
[dir="rtl"] .search-form input { padding: 10px 36px 10px 14px; border-radius: 0 999px 999px 0; }
[dir="rtl"] .search-form button { border-radius: 999px 0 0 999px; }
[dir="rtl"] .breadcrumb .sep { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .cat-icon, [dir="rtl"] .rank { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .card-download-btn,
[dir="rtl"] .view-all-link,
[dir="rtl"] .related-card__viewall { text-align: center; }
[dir="rtl"] .sidebar-list a, [dir="rtl"] .related-card__titles a { text-align: right; }
[dir="rtl"] .lic-tag, [dir="rtl"] .version, [dir="rtl"] .file-size, [dir="rtl"] code {
    direction: ltr;
    unicode-bidi: isolate;
}
[dir="rtl"] .hero-banner-inner, [dir="rtl"] .hero-buttons { text-align: right; }
[dir="rtl"] .main-nav-tab.active { border-left: none; }
[dir="rtl"] .comment-avatar { margin-left: 12px; margin-right: 0; }

/* ================= Fix pack (user requested) ================= */
.card { border: 1.5px solid #000 !important; }
.gp-list > div { border: 1.5px solid #000 !important; }
[data-theme="dark"] .card,
[data-theme="dark"] .gp-list > div { border-color: #000 !important; }
.detail-heading-block h1 { color: #000 !important; }
[data-theme="dark"] .detail-heading-block h1 { color: #05070c !important; }
.post-content h1 { font-size: 1.75em; font-weight: 800; color: #000; margin: 1.3em 0 .55em; line-height: 1.3; border-bottom: 2px solid var(--border); padding-bottom: .3em; }
.post-content h2 { font-size: 1.5em; font-weight: 750; color: #000; margin: 1.25em 0 .5em; line-height: 1.3; }
.post-content h3 { font-size: 1.3em; font-weight: 700; color: #000; margin: 1.15em 0 .45em; }
.post-content h4 { font-size: 1.12em; font-weight: 700; color: #000; margin: 1.05em 0 .4em; }
.post-content h5 { font-size: 1em; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: .02em; margin: 1em 0 .35em; }
[data-theme="dark"] .post-content h1,
[data-theme="dark"] .post-content h2,
[data-theme="dark"] .post-content h3,
[data-theme="dark"] .post-content h4,
[data-theme="dark"] .post-content h5 { color: #000; }
.captcha-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.captcha-img { border: 1px solid var(--border); border-radius: 6px; height: 46px; cursor: pointer; background: #f3f6fb; }
.captcha-input { flex: 1; min-width: 140px; }
.captcha-field { margin-top: 10px; }

/* ================= Post share buttons (GetintoPC) ================= */
.share-section { margin: 22px 0 8px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.share-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 12px; color: var(--text); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-buttons--more { display: none; margin-top: 12px; }
.share-buttons--more.open { display: flex; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); color: #fff; }
.share-btn svg { width: 17px; height: 17px; flex: none; }
.share-btn--facebook { background: #1877f2; }
.share-btn--twitter { background: #000; }
.share-btn--reddit { background: #ff4500; }
.share-btn--whatsapp { background: #25d366; }
.share-btn--instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.share-btn--telegram { background: #229ed9; }
.share-btn--blogger { background: #f57d00; }
.share-btn--email { background: #6b7280; }
.share-btn--line { background: #00b900; }
.share-btn--linkedin { background: #0a66c2; }
.share-btn--pinterest { background: #e60023; }
.share-btn--tumblr { background: #35465c; }
.share-btn--vk { background: #0077ff; }
.share-btn--copy { background: #4f8ef7; }
.share-more-toggle { margin-top: 12px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 600; cursor: pointer; }
.share-more-toggle:hover { border-color: var(--accent); color: var(--accent); }
.share-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #111; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 9999; }
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) {
    .share-btn { padding: 8px 11px; font-size: .78rem; }
    .share-btn svg { width: 15px; height: 15px; }
}


/* === Pro patch: screenshot grid + lightbox === */
.post-screenshots-block { margin-top: 8px; text-align: center; }
.screenshots-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; justify-content:center; align-items:flex-start; }
.screenshot-thumb { width:196px; border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:6px; cursor:pointer; box-shadow:0 10px 24px rgba(15,23,42,.08); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.screenshot-thumb:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(15,23,42,.14); border-color:var(--accent); }
.screenshot-thumb img { width:100%; height:132px; object-fit:cover; display:block; border-radius:10px; }
body.lightbox-open { overflow:hidden; }
.shot-lightbox[hidden] { display:none !important; }
.shot-lightbox { position:fixed; inset:0; z-index:9999; }
.shot-lightbox__backdrop { position:absolute; inset:0; background:rgba(5,10,20,.82); border:0; width:100%; height:100%; }
.shot-lightbox__dialog { position:relative; z-index:2; max-width:min(92vw,1050px); margin:4vh auto; background:#0b1220; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:18px; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.shot-lightbox__dialog img { width:100%; max-height:78vh; object-fit:contain; display:block; border-radius:12px; background:#000; }
.shot-lightbox__caption { margin-top:10px; color:#e5e7eb; font-size:14px; text-align:center; }
.shot-lightbox__close { position:absolute; top:10px; right:10px; width:42px; height:42px; border-radius:999px; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:26px; cursor:pointer; }


.screenshot-thumb{position:relative;overflow:hidden}
.view-full-label{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(15,23,42,.72);color:#fff;font-size:12px;font-weight:700;padding:6px 8px;border-radius:8px;text-align:center;letter-spacing:.2px}
.gp-sidebar-quick-links{display:grid;gap:8px}
.submenu-note{font-size:12px;color:var(--text-muted)}

.captcha-field--modern { max-width: 620px; margin-inline: auto; }
.captcha-row--image { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; justify-content:center; }
.captcha-refresh-btn { border:1px solid var(--border); background:var(--surface2); color:var(--text); border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700; }
.captcha-alt-box { display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface2); }
.captcha-alt-prompt { font-size:16px; font-weight:800; color:var(--text); text-align:center; }
.comment-form-wrap .captcha-input { min-width: 200px; }
@media (max-width: 640px) {
  .captcha-row--image { grid-template-columns:1fr; }
  .captcha-refresh-btn { width:100%; }
}