/* ===== softix.top -- Information Portal Theme ===== */
/* System fonts, no Google Fonts -- fast load like SoftPortal */

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Brand */
  --brand-50: #eef4ff;
  --brand-100: #d9e6ff;
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-rgb: 37, 99, 235;

  /* Neutrals (semantic, переключаются темой) */
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --border: #e3e6eb;
  --border-strong: #cdd2da;
  --text: #0f172a;
  --text-muted: #5b6473;
  --text-subtle: #8b94a3;
  --text-inverse: #ffffff;

  /* Semantic */
  --success: #16a34a;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --star: #f59e0b;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-h1: clamp(1.75rem, 2.5vw, 2.25rem);
  --font-h2: clamp(1.375rem, 2vw, 1.625rem);
  --font-h3: 1.25rem;
  --font-h4: 1.0625rem;
  --font-base: 1rem;
  --font-sm: .875rem;
  --font-xs: .75rem;
  --leading-tight: 1.25;
  --leading-base: 1.55;
  --leading-relaxed: 1.7;

  /* Layout */
  --container: 1200px;
  --max-width: 1200px;
  --header-h: 64px;

  /* Legacy (compat) */
  --link: var(--brand-500);
  --link-hover: var(--brand-700);
  --bg-card: var(--surface);
  --bg-row-alt: var(--surface-2);
  --bg-breadcrumb: var(--surface-2);
  --text-secondary: var(--text-muted);
  --border-light: var(--border);
  --card-bg: var(--surface-2);
  --shadow: var(--shadow-md);
  --green: var(--success);
  --green-hover: var(--success);
  --green-light: var(--success-bg);
  --star-empty: var(--border-strong);
  --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3); --space-4: var(--s-4);
  --space-5: var(--s-6); --space-6: var(--s-8); --space-7: var(--s-12); --space-8: var(--s-16);
  --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl);
  --line-tight: var(--leading-tight);
  --line-base: var(--leading-base);
  --line-relaxed: var(--leading-relaxed);
}

/* Dark theme — manual override */
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-alt: #111a2e;
  --bg-elev: #15203a;
  --surface: #131c33;
  --surface-2: #1a253f;
  --border: #1f2b48;
  --border-strong: #2a3a5e;
  --text: #e6ecf5;
  --text-muted: #9ba8bf;
  --text-subtle: #6e7c95;
  --text-inverse: #0b1220;

  --brand-500: #5b9bff;
  --brand-600: #82b3ff;
  --brand-700: #a8c8ff;
  --brand-50: rgba(91,155,255,.10);
  --brand-100: rgba(91,155,255,.16);
  --brand-rgb: 91, 155, 255;

  --success: #34d399;
  --success-bg: rgba(52,211,153,.10);
  --success-border: rgba(52,211,153,.30);
  --warning: #fbbf24;
  --warning-bg: rgba(251,191,36,.10);
  --warning-border: rgba(251,191,36,.30);
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,.10);
  --danger-border: rgba(248,113,113,.30);
  --star: #fbbf24;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.30);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.30);
  --shadow-md: 0 6px 16px rgba(0,0,0,.40);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.50);
}

/* Auto dark via OS */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --bg-alt: #111a2e; --bg-elev: #15203a; --surface: #131c33; --surface-2: #1a253f;
    --border: #1f2b48; --border-strong: #2a3a5e;
    --text: #e6ecf5; --text-muted: #9ba8bf; --text-subtle: #6e7c95; --text-inverse: #0b1220;
    --brand-500: #5b9bff; --brand-600: #82b3ff; --brand-700: #a8c8ff;
    --brand-50: rgba(91,155,255,.10); --brand-100: rgba(91,155,255,.16); --brand-rgb: 91, 155, 255;
    --success: #34d399; --success-bg: rgba(52,211,153,.10); --success-border: rgba(52,211,153,.30);
    --warning: #fbbf24; --warning-bg: rgba(251,191,36,.10); --warning-border: rgba(251,191,36,.30);
    --danger: #f87171; --danger-bg: rgba(248,113,113,.10); --danger-border: rgba(248,113,113,.30);
    --star: #fbbf24;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.30); --shadow-sm: 0 2px 4px rgba(0,0,0,.30);
    --shadow-md: 0 6px 16px rgba(0,0,0,.40); --shadow-lg: 0 16px 40px rgba(0,0,0,.50);
  }
}

/* Base typography helpers (heading sizes) */
h1, .h1 { font-size: var(--font-h1); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -.02em; }
h2, .h2 { font-size: var(--font-h2); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -.01em; }
h3, .h3 { font-size: var(--font-h3); line-height: var(--leading-tight); font-weight: 600; }
h4, .h4 { font-size: var(--font-h4); line-height: var(--leading-base); font-weight: 600; }

/* ============================================================
   Components (Phase R1) — unified cards, buttons, badges, sections
   ============================================================ */

/* Card system */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card-flat { border: 0; padding: var(--s-4); background: var(--surface-2); border-radius: var(--r-md); }
.card-feature { padding: var(--s-6); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-radius: var(--r-md); border: 1px solid transparent; font-weight: 600; font-size: var(--font-sm); cursor: pointer; transition: all .15s; text-decoration: none; line-height: 1; white-space: nowrap; }
.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover { background: var(--brand-600); color: #fff; text-decoration: none; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.btn-lg { padding: var(--s-4) var(--s-8); font-size: var(--font-base); border-radius: var(--r-lg); }
.btn-block { width: 100%; }

/* Badge / chip */
.badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-full); font-size: var(--font-xs); font-weight: 600; line-height: 1.4; }
.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-border); }
.badge-brand   { background: var(--brand-50);   color: var(--brand-600); border: 1px solid var(--brand-100); }
.badge-neutral { background: var(--surface-2);  color: var(--text-muted); border: 1px solid var(--border); }

/* Section spacing */
.section { padding: var(--s-12) 0; }
.section-tight { padding: var(--s-8) 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-6); gap: var(--s-4); }
.section-title h2 { margin: 0; }
.section-title .more { font-size: var(--font-sm); color: var(--brand-500); font-weight: 600; }

/* Container */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }

/* Divider */
.divider { height: 1px; background: var(--border); margin: var(--s-8) 0; border: 0; }
/* ============================================================ */

html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', -apple-system, system-ui, Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }


/* ===== HEADER ===== */
/* Селектор именно `header.header` (тег <header>): класс `header` также
   присутствует у Semantic-заголовков `ui ... header` (h2/h4), и широкий
   `.header` цеплял к ним position:sticky — заголовки секций липли под меню. */
header.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    height: 52px;
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
    text-decoration: none;
}
.logo:hover { color: var(--text); text-decoration: none; }
.logo-accent { color: var(--link); }

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav a {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
}

.nav a:hover {
    color: var(--text);
    background: var(--bg);
    text-decoration: none;
}

/* Nav dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.nav-dropdown-toggle:hover {
    color: var(--text);
    background: var(--bg);
    text-decoration: none;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: 3px;
}

.nav-dropdown-menu a:hover {
    background: var(--bg);
    color: var(--text);
}

/* Search */
.search-box {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}

.search-box input {
    width: 200px;
    height: 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 12px 0 32px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.search-box input::placeholder { color: var(--text-muted); }
.search-box input:focus {
    border-color: var(--link);
    background: var(--surface);
}

.search-box svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
}


/* ===== BREADCRUMBS BAR ===== */
.breadcrumbs-bar {
    background: var(--bg-breadcrumb);
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
}

.breadcrumbs-bar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.breadcrumbs a { color: var(--text-secondary); font-size: 12px; }
.breadcrumbs a:hover { color: var(--link); }

.breadcrumbs-sep {
    color: var(--text-muted);
    font-size: 10px;
    user-select: none;
}


/* ===== TWO-COLUMN LAYOUT ===== */
.page-layout {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 20px 40px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.page-content { min-width: 0; }


/* ===== SIDEBAR ===== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 72px;
}

.sidebar-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.sidebar-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-row-alt);
}

.sidebar-list {
    list-style: none;
}

.sidebar-item {
    border-bottom: 1px solid var(--border-light);
}

.sidebar-item:last-child { border-bottom: none; }

.sidebar-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

.sidebar-item-link:hover {
    background: var(--bg);
    color: inherit;
    text-decoration: none;
}

.sidebar-rank {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-rank.gold { background: #fff3cd; color: #856404; }
.sidebar-rank.silver { background: #e9ecef; color: #495057; }
.sidebar-rank.bronze { background: #ffe0b2; color: #e65100; }

.sidebar-item-info { flex: 1; min-width: 0; }

.sidebar-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    flex-shrink: 0;
    object-fit: cover;
}

.sidebar-about {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.sidebar-cat-link {
    display: block;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-cat-link:last-child { border-bottom: none; }
.sidebar-cat-link:hover { background: var(--bg); color: var(--link); text-decoration: none; }


/* ===== MAIN PAGE ===== */

.main-h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Popular apps horizontal strip */
.popular-strip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.popular-strip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.popular-strip-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.popular-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    padding: 4px 8px;
    border-radius: 4px;
}

.popular-strip-item:hover {
    background: var(--bg);
    text-decoration: none;
    color: inherit;
}

.popular-strip-item img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}

.popular-strip-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.popular-strip-rating {
    font-size: 11px;
    color: var(--star);
    font-weight: 600;
}


/* Category block on main page */
.category-block {
    margin-bottom: 24px;
}

.category-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--link);
}

.category-block-header h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-block-header h2 a {
    color: var(--text);
    text-decoration: none;
}
.category-block-header h2 a:hover { color: var(--link); text-decoration: none; }

.category-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.show-all-link {
    font-size: 12px;
    color: var(--link);
    white-space: nowrap;
}

/* Horizontal app row (main page, lists) */
.app-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.app-row:last-child { border-bottom: none; }

.app-row-icon {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}

.app-row-icon-link { flex-shrink: 0; }
.app-row-icon-link img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}

.app-row-body {
    flex: 1;
    min-width: 0;
}

.app-row-title-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.app-row-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.app-row-name:hover { color: var(--link); }

.app-row-version {
    font-size: 12px;
    color: var(--text-muted);
}

.app-row-brief {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.app-row-meta-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--star);
}

.app-row-meta-rating svg {
    flex-shrink: 0;
}

.app-row-meta-os {
    font-size: 11px;
    color: var(--text-muted);
}

.app-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.app-row-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.app-row-rating-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.app-row-rating-val {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
}

.license-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.license-badge-free {
    background: var(--green-light);
    color: var(--green);
}

.license-badge-trial {
    background: var(--surface-2);
    color: var(--text-muted);
}

.license-badge-paid {
    background: #fff3e0;
    color: #e65100;
}


/* ===== CATEGORY PAGE ===== */
.category-header {
    margin-bottom: 16px;
}

.category-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
}

.category-brief {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Filter tabs (visual) */
.filter-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.filter-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.filter-tab:hover { color: var(--text); text-decoration: none; }

.filter-tab-active {
    color: var(--link);
    border-bottom-color: var(--link);
}

.rp-category-page {
    min-width: 0;
    overflow-x: hidden;
}

.rp-category-page .filter-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
}

.rp-category-page .filter-tab {
    flex: 0 0 auto;
}

/* Detailed app card for category */
.app-card-detailed {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: flex-start;
}

.app-card-detailed:last-child { border-bottom: none; }

.app-card-icon-link { flex-shrink: 0; }
.app-card-icon-link img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}

.app-card-body {
    flex: 1;
    min-width: 0;
}

.app-card-top-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.app-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.app-card-title:hover { color: var(--link); text-decoration: none; }

.app-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.app-card-rating .card-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.app-card-rating-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.app-card-rating-count {
    font-size: 12px;
    color: var(--text-muted);
}

.app-card-brief {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.app-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.app-card-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border-light);
}

.app-card-meta-badge svg { flex-shrink: 0; color: var(--text-muted); }

.app-card-action {
    flex-shrink: 0;
    align-self: center;
}

.app-card-dev {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

.app-card-dev a { color: var(--link); font-size: 12px; }


/* ===== APP PAGE ===== */

/* Page container for app page (no sidebar version) */
.page-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 20px 40px;
}

/* App header card */
.app-header {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 20px;
}

.app-header-top {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.app-header-icon {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--border);
}

.app-header-info {
    flex: 1;
    min-width: 0;
}

.app-header-info h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
}

.app-header-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.app-header-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.star-rating-interactive {
    display: flex;
    align-items: center;
    gap: 2px;
}

.star-rating-interactive svg {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.rating-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--star);
}

.rating-text {
    font-size: 13px;
    color: var(--text-muted);
}

.rating-count-num {
    font-weight: 600;
    color: var(--text-secondary);
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    background: var(--green-light);
    color: var(--green);
}

/* Specs table (SoftPortal-style) */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

.specs-table tr:nth-child(even) { background: var(--bg-row-alt); }

.specs-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.specs-table td:first-child {
    width: 160px;
    color: var(--text-muted);
    font-weight: 500;
}

.specs-table td:last-child {
    color: var(--text);
}

.specs-table td b { font-weight: 600; }

.specs-table a { color: var(--link); font-size: 13px; }

/* Big download button */
.btn-download-big {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 6px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    line-height: 1;
}

.btn-download-big:hover {
    background: var(--green-hover);
    color: #fff;
    text-decoration: none;
}

.btn-download-big svg { flex-shrink: 0; }

.btn-download-big-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 4px;
}

/* Small download button */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    line-height: 1;
}

.btn-download:hover {
    background: var(--green-hover);
    color: #fff;
    text-decoration: none;
}

.btn-download svg { flex-shrink: 0; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 4px;
    background: transparent;
    color: var(--link);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--link);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    line-height: 1;
}

.btn-secondary:hover {
    background: var(--link);
    color: #fff;
    text-decoration: none;
}


/* ===== DESCRIPTION BLOCK ===== */
.description-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.description-block h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.description-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    overflow: hidden;
    position: relative;
    max-width: 720px;
}

.description-content p { margin-bottom: 12px; }
.description-content ul, .description-content ol { margin-bottom: 12px; padding-left: 20px; }
.description-content li { margin-bottom: 4px; }
.description-content h3 { color: var(--text); margin: 16px 0 8px; font-size: 16px; font-weight: 600; }
.description-content a { color: var(--link); }
.description-content a:hover { text-decoration: underline; }

.description-faded::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--bg-card));
    pointer-events: none;
}

.btn-read-more {
    background: none;
    border: 1px solid var(--border);
    color: var(--link);
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    font-family: inherit;
}

.btn-read-more:hover {
    border-color: var(--link);
    background: rgba(41, 98, 255, 0.04);
}


/* ===== SCREENSHOTS ===== */
.screenshots-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.screenshots-block h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.screenshots-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.screenshots-scroll::-webkit-scrollbar { height: 5px; }
.screenshots-scroll::-webkit-scrollbar-track { background: var(--bg); border-radius: 3px; }
.screenshots-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.screenshot-thumb {
    flex-shrink: 0;
    width: 220px;
    border-radius: 4px;
    overflow: hidden;
    display: block;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.screenshot-thumb:hover {
    border-color: var(--link);
}

.screenshot-thumb img {
    width: 100%;
    display: block;
}

.poster-block {
    margin-bottom: 20px;
}

.poster-block img {
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--border);
}


/* ===== DOWNLOAD TABLE (real <table>) ===== */
.download-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}

.download-block h2 {
    font-size: 18px;
    font-weight: 600;
    padding: 16px 20px 12px;
    margin: 0;
}

.download-table-wrap {
    overflow-x: auto;
}

.download-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.download-table thead {
    background: var(--bg-row-alt);
}

.download-table th {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.download-table tbody tr { border-bottom: 1px solid var(--border-light); }
.download-table tbody tr:nth-child(even) { background: var(--bg-row-alt); }
.download-table tbody tr:last-child { border-bottom: none; }

.download-table td {
    padding: 10px 14px;
    vertical-align: middle;
}

.download-table .dl-file-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-table .dl-file-cell img {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    flex-shrink: 0;
}

.download-table .dl-file-name a {
    color: var(--link);
    font-size: 13px;
    font-weight: 500;
}

.download-table .dl-file-name b {
    font-weight: 600;
    color: var(--text);
}

.dl-os-bold { font-weight: 600; }

.download-disclaimer {
    padding: 10px 20px 14px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}


/* ===== WINDOWS LINKS ===== */
.windows-links-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.windows-links-block h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.windows-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.win-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
}

.win-link:hover {
    background: var(--bg);
    border-color: var(--border);
    color: var(--link);
    text-decoration: none;
}

.win-link-active {
    background: rgba(41, 98, 255, 0.04);
    border-color: var(--link);
    color: var(--text);
}


/* ===== FAQ ACCORDION ===== */
.faq-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.faq-block h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.faq-item {
    border-bottom: 1px solid var(--border-light);
    padding: 10px 0;
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.faq-question::after {
    content: '+';
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-weight: 400;
    transition: transform 0.2s;
}

.faq-item.open .faq-question::after {
    content: '-';
}

.faq-answer {
    display: none;
    padding: 6px 0 4px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.faq-item.open .faq-answer {
    display: block;
}


/* ===== SIMILAR APPS ===== */
.similar-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.similar-block h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.similar-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.similar-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    min-width: 200px;
    flex: 1;
}

.similar-card:hover {
    border-color: #ccc;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
}

.similar-card img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}

.similar-card-info { flex: 1; min-width: 0; }

.similar-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.similar-card-rating {
    font-size: 11px;
    color: var(--star);
    font-weight: 600;
}


/* ===== STATIC PAGES ===== */
.static-page {
    max-width: 700px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 32px;
}

.static-page h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.static-page h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 10px;
}

.static-page p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

/* Contact form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.form-group input,
.form-group textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--link);
    background: var(--surface);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-email-info {
    font-size: 12px;
    color: var(--text-muted);
}


/* ===== ERROR PAGE ===== */
.error-page {
    text-align: center;
    padding: 60px 20px;
}

.error-code {
    font-size: 100px;
    font-weight: 800;
    color: var(--border);
    line-height: 1;
    margin-bottom: 12px;
}

.error-page h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.error-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}


/* ===== FOOTER ===== */
.footer {
    border-top: 1px solid var(--border);
    background: #f0f0f0;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-brand {
    font-size: 13px;
    color: var(--text-secondary);
}

.footer-brand strong {
    color: var(--text);
}

.footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-links a {
    font-size: 13px;
    color: var(--text-secondary);
}

.footer-links a:hover { color: var(--link); }


/* ===== UTILITY ===== */
.fw-bold { font-weight: 600; color: var(--text); }

/* Star SVG sizes */
.star-svg { width: 14px; height: 14px; }
.star-filled { color: var(--star); }
.star-empty { color: var(--star-empty); }

/* Card stars container (for rendering via JS) */
.card-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .page-layout {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .header-inner { gap: 12px; }
    .nav { display: none; }
    .mobile-menu-btn { display: block; }
    .search-box input { width: 140px; }

    .page-layout { padding: 16px 16px 40px; gap: 16px; }

    .sidebar { grid-template-columns: 1fr; }

    .popular-strip-list { gap: 10px; }

    .app-header-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .app-header-rating { justify-content: center; }

    .specs-table td:first-child { width: 120px; }

    .app-card-detailed {
        flex-direction: column;
        align-items: stretch;
    }
    .app-card-action {
        width: 100%;
    }
    .app-card-action .btn-download {
        width: 100%;
        justify-content: center;
    }
    .rp-category-page .app-card-top-line {
        align-items: flex-start;
    }
    .rp-category-page .app-card-rating {
        margin-left: auto;
    }

    .app-row {
        flex-wrap: wrap;
    }
    .app-row-right {
        display: none;
    }
    .app-row-meta {
        display: flex;
    }

    .windows-links-grid { grid-template-columns: 1fr; }

    .similar-list { flex-direction: column; }
    .similar-card { min-width: auto; }

    .download-table th,
    .download-table td { padding: 8px 10px; font-size: 12px; }

    .static-page { padding: 20px; }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-links { justify-content: center; }
}

@media (max-width: 480px) {
    .search-box { display: none; }
    .page-container { padding: 16px 16px 40px; }
    .app-header { padding: 16px; }
    .app-header-icon { width: 72px; height: 72px; }
    .app-header-info h1 { font-size: 20px; }
    .description-block, .screenshots-block, .download-block,
    .windows-links-block, .faq-block, .similar-block { padding: 14px 16px; }
    .screenshot-thumb { width: 170px; }
    .rp-category-page .app-card-top-line {
        flex-direction: column;
        gap: 6px;
    }
    .rp-category-page .app-card-rating {
        margin-left: 0;
    }
}


/* ===== RTL SUPPORT ===== */
html[dir="rtl"] .search-box input { padding: 0 32px 0 12px; }
html[dir="rtl"] .search-box svg { left: auto; right: 10px; }
html[dir="rtl"] .search-box { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .specs-table td:first-child { text-align: right; }
html[dir="rtl"] .download-table th { text-align: right; }
html[dir="rtl"] .faq-question { text-align: right; }


/* Phase 1.2 FAQ accordion + 1.3 big downloads counter + 1.6 spec icons */
.app-header-meta { display:flex; flex-wrap:wrap; gap:24px; align-items:center; margin-top:8px; }
.downloads-row { display:flex; align-items:center; gap:6px; font-size:1.1rem; color: var(--text); }
.downloads-row .downloads-count { font-size:1.4rem; font-weight:700; color: var(--link); }
.downloads-row svg { color: var(--link); }
@media (max-width: 640px) {
  .downloads-row { font-size:1rem; }
  .downloads-row .downloads-count { font-size:1.2rem; }
}

.faq-item { border-bottom: 1px solid var(--border); margin: 0; }
.faq-item summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding: 16px 0; font-weight:600; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .faq-chevron { transition: transform .2s ease; flex-shrink:0; margin-left:12px; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item .faq-answer { padding: 0 0 16px; color: var(--text-muted, #666); animation: faqIn .25s ease; }
@keyframes faqIn { from { opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }
.faq-item summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }

.spec-icon { display:inline-block; width:1.2em; text-align:center; margin-right:6px; }
.sidebar-specs .sidebar-item-meta { display:flex; align-items:baseline; gap:4px; }


/* ===== Phase 1.1 -- 404 page ===== */
.error-page { max-width: 800px; margin: 60px auto; padding: 24px; text-align: center; }
.error-code { font-size: 8rem; font-weight: 800; color: var(--border); line-height: 1; margin-bottom: 8px; }
.error-page h1 { font-size: 2rem; margin: 0 0 12px; }
.error-subtitle { color: var(--text-muted, #666); margin-bottom: 32px; }
.error-search { display:flex; gap:8px; max-width:480px; margin: 0 auto 24px; }
.error-search input { flex:1; padding:12px 16px; border:1px solid var(--border); border-radius:6px; font-size:1rem; }
.error-search button { padding:12px 24px; background: var(--link); color:white; border:0; border-radius:6px; cursor:pointer; font-weight:600; }
.error-search button:hover { background: var(--link-hover); }
.error-cta { display:inline-block; padding:12px 32px; }
.error-popular, .error-categories { margin-top: 48px; text-align:left; }
.error-popular-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:16px; margin-top:16px; }
.error-popular-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius:8px; text-decoration:none; color: var(--text); transition: transform .2s; }
.error-popular-card:hover { transform: translateY(-2px); text-decoration: none; }
.error-popular-card img { width: 64px; height: 64px; object-fit: contain; }
.error-popular-card span { font-size: .9rem; text-align: center; }
.error-categories-list { display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; margin-top:16px; }
.error-categories-list a { display:inline-block; padding:8px 16px; background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius:20px; text-decoration:none; color: var(--text); }
.error-categories-list a:hover { background: var(--link); color:white; border-color: var(--link); text-decoration: none; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space: nowrap; border:0; }
@media (max-width: 640px) {
  .error-code { font-size: 5rem; }
  .error-page h1 { font-size: 1.5rem; }
}

/* ===== Phase 1.5 -- Mobile menu ===== */
@media (max-width: 768px) {
  .nav.main-nav { display: none; }
  .nav.main-nav.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left:0; right:0; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.08); padding: 16px; gap: 8px; z-index: 100; }
  .nav.main-nav.is-open a { padding: 12px 8px; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--text); padding: 6px; }
  .mobile-menu-btn.is-active { color: var(--link); }
}
@media (min-width: 769px) {
  .mobile-menu-btn { display: none; }
}

/* ===== Phase 1.4 -- Lightbox improvements ===== */
.screenshot-thumb { position: relative; }
.screenshot-thumb::after { content: "🔍 Кликните для увеличения"; position:absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); color: white; padding: 4px 12px; border-radius: 12px; font-size: .85rem; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.screenshot-thumb:hover::after { opacity: 1; }
.lightbox { position: fixed; inset:0; background: rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.lightbox-close { position:absolute; top:16px; right:16px; background: rgba(255,255,255,.1); color:white; border:0; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size: 1.5rem; display:flex; align-items:center; justify-content:center; }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background: rgba(255,255,255,.1); color:white; border:0; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size: 1.3rem; display:flex; align-items:center; justify-content:center; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter { position:absolute; bottom:16px; left:50%; transform: translateX(-50%); color:white; font-size:.95rem; background:rgba(0,0,0,.5); padding: 4px 12px; border-radius:12px; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.25); }


/* ===== Phase 1.7 -- Accessibility ===== */
/* Skip-link: hidden until focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--link);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    color: #fff;
    text-decoration: none;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Global focus-visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-download:focus-visible,
.btn-download-big:focus-visible,
.btn-secondary:focus-visible,
summary:focus-visible {
    outline-offset: 3px;
}
/* Inputs: keep border highlight + add visible focus ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 1px;
}
/* <main> should not show outline when receiving programmatic focus */
main:focus { outline: none; }
main[tabindex]:focus-visible { outline: none; }

/* ============================================================ */
/* Phase 2.2 — Content widgets                                   */
/* ============================================================ */

.pros-cons-block { margin: 32px 0; }
.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .pros-cons-grid { grid-template-columns: 1fr; } }
.pros-col { background: var(--success-bg); border: 1px solid var(--success-border); border-radius: var(--r-lg); padding: var(--s-5); }
.cons-col { background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--r-lg); padding: var(--s-5); }
.pros-title, .cons-title { display:flex; align-items:center; gap:8px; margin: 0 0 12px; font-size: 1.1rem; }
.pros-title { color: var(--success); margin-top: 0; }
.cons-title { color: var(--danger); margin-top: 0; }
.pros-list, .cons-list { margin: 0; padding-left: var(--s-5); }
.pros-list li::marker { color: var(--success); }
.cons-list li::marker { color: var(--danger); }
.pros-list li, .cons-list li { margin: 6px 0; }

.sysreq-block { margin: 32px 0; }
.sysreq-table-wrap { overflow-x: auto; }
.sysreq-table { width: 100%; border-collapse: collapse; }
.sysreq-table th, .sysreq-table td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.sysreq-table thead th { background: var(--card-bg, #f5f5f5); font-weight: 600; }
.sysreq-table tbody th { font-weight: 500; }

.howto-block { margin: 32px 0; }
.howto-content { line-height: 1.7; }
.howto-content ol li, .howto-content ul li { margin: 8px 0; }

.alternatives-block { margin: 32px 0; }
.alternatives-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.alternative-card { display:flex; gap:12px; padding:12px; background: var(--card-bg, #f8f9fa); border-radius:8px; text-decoration:none; color: var(--text); transition: transform .15s, box-shadow .15s; }
.alternative-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.alternative-card img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.alternative-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.alternative-info strong { font-size: .95rem; }
.alt-rating { font-size: .85rem; color: var(--star, #ff9800); }
.alt-reason { font-size: .8rem; color: var(--text-muted); }

.editor-verdict-block { background: var(--brand-50); border-left: 4px solid var(--brand-500); border-radius: var(--r-lg); padding: var(--s-6); margin: var(--s-8) 0; }
.editor-verdict-block blockquote { margin: 0; font-style: italic; line-height: var(--leading-relaxed); color: var(--text); font-size: 1.0625rem; }
.editor-byline { display:flex; align-items:center; gap:12px; margin-top: 16px; }
.editor-byline img, .editor-photo-placeholder { width:48px; height:48px; border-radius:50%; object-fit: cover; flex-shrink:0; background: var(--border); display:flex; align-items:center; justify-content:center; font-size: 1.5rem; }
.editor-meta { display:flex; flex-direction:column; }
.editor-meta strong { font-size:.9rem; color: var(--text); }
.editor-meta span { font-size:.85rem; color: var(--text-muted); }

.virus-check { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-full); font-size: var(--font-sm); font-weight: 500; margin: var(--s-2) 0; border: 1px solid; }
.virus-check-safe { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.virus-check-warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.virus-check-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.virus-check svg { flex-shrink: 0; }
.virus-check-link { color: inherit; text-decoration: underline; margin-left: var(--s-1); }

/* ===== App description readability ===== */
body.rp-page-app .rp-app-description,
body.rp-page-app .rp-mirror-content .up_tabs {
    min-width: 0;
    max-width: 100%;
    margin: var(--s-6) 0 !important;
    color: var(--text);
}

body.rp-page-app .rp-app-description,
body.rp-page-app .rp-mirror-content .up_tabs > div {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

body.rp-page-app .rp-mirror-content .up_tabs > div {
    min-height: 0 !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
}

body.rp-page-app .rp-app-description,
body.rp-page-app .rp-mirror-content .sc_tab {
    padding: var(--s-6);
    font-size: var(--font-base);
    line-height: var(--leading-relaxed);
    overflow-wrap: anywhere;
}

body.rp-page-app .rp-mirror-content .up_tabs > div > div {
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}

body.rp-page-app .rp-app-description h2,
body.rp-page-app .rp-app-description h3,
body.rp-page-app .rp-mirror-content .sc_tab h3 {
    margin: 0 0 var(--s-4);
    color: var(--text);
    font-size: var(--font-h3);
    line-height: var(--leading-tight);
    font-weight: 700;
}

body.rp-page-app .rp-app-description h4,
body.rp-page-app .rp-mirror-content .sc_tab h4 {
    margin: var(--s-6) 0 var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: var(--font-h4);
    line-height: var(--leading-tight);
    font-weight: 700;
}

body.rp-page-app .rp-app-description p,
body.rp-page-app .rp-mirror-content .sc_tab p {
    margin: 0 0 var(--s-4);
    color: var(--text-muted);
}

body.rp-page-app .rp-app-description p:last-child,
body.rp-page-app .rp-mirror-content .sc_tab p:last-child {
    margin-bottom: 0;
}

body.rp-page-app .rp-app-description ul,
body.rp-page-app .rp-app-description ol,
body.rp-page-app .rp-mirror-content .sc_tab ul,
body.rp-page-app .rp-mirror-content .sc_tab ol {
    margin: var(--s-3) 0 var(--s-4);
    padding-left: var(--s-6);
    color: var(--text-muted);
}

body.rp-page-app .rp-app-description li,
body.rp-page-app .rp-mirror-content .sc_tab li {
    margin: var(--s-2) 0;
    padding-left: var(--s-1);
}

body.rp-page-app .rp-app-description b,
body.rp-page-app .rp-app-description strong,
body.rp-page-app .rp-mirror-content .sc_tab b,
body.rp-page-app .rp-mirror-content .sc_tab strong {
    color: var(--text);
}

body.rp-page-app .rp-mirror-content .sc_tab > span {
    display: block;
    min-width: 0;
}

body.rp-page-app .rp-app-description.description-faded {
    position: relative;
    overflow: hidden;
}

body.rp-page-app .rp-app-description:has(.rp-description-sections),
body.rp-page-app .rp-mirror-content .up_tabs:has(.rp-description-sections),
body.rp-page-app .rp-mirror-content .up_tabs:has(.rp-description-sections) > div,
body.rp-page-app .rp-mirror-content .up_tabs:has(.rp-description-sections) > div > div,
body.rp-page-app .rp-mirror-content .sc_tab.rp-description-has-sections {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible;
}

body.rp-page-app .rp-app-description:has(.rp-description-sections),
body.rp-page-app .rp-mirror-content .up_tabs:has(.rp-description-sections) {
    margin: var(--s-6) 0 !important;
}

body.rp-page-app .rp-description-sections {
    display: grid;
    gap: var(--s-4);
    max-width: 760px;
    min-width: 0;
}

body.rp-page-app .rp-description-section {
    min-width: 0;
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xs);
    overflow-wrap: anywhere;
}

body.rp-page-app .rp-description-section__title,
body.rp-page-app .rp-description-section h3,
body.rp-page-app .rp-description-section h4 {
    margin: 0 0 var(--s-3) !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--text);
    font-size: var(--font-h4);
    line-height: var(--leading-tight);
    font-weight: 700;
}

body.rp-page-app .rp-description-section--intro .rp-description-section__title {
    font-size: var(--font-h3);
}

body.rp-page-app .rp-description-section__body,
body.rp-page-app .rp-description-section__body > span {
    display: block;
    min-width: 0;
}

body.rp-page-app .rp-description-section__body p {
    margin: 0 0 var(--s-3);
    color: var(--text-muted);
}

body.rp-page-app .rp-description-section__body p:last-child,
body.rp-page-app .rp-description-section__body ul:last-child,
body.rp-page-app .rp-description-section__body ol:last-child {
    margin-bottom: 0;
}

body.rp-page-app .rp-description-section__body ul,
body.rp-page-app .rp-description-section__body ol {
    margin: var(--s-3) 0;
    padding-left: var(--s-6);
    color: var(--text-muted);
}

body.rp-page-app .rp-description-section__body li {
    margin: var(--s-2) 0;
    padding-left: var(--s-1);
}

@media (max-width: 640px) {
    body.rp-page-app .rp-app-description,
    body.rp-page-app .rp-mirror-content .sc_tab {
        padding: var(--s-4);
        font-size: .9375rem;
    }

    body.rp-page-app .rp-app-description ul,
    body.rp-page-app .rp-app-description ol,
    body.rp-page-app .rp-mirror-content .sc_tab ul,
    body.rp-page-app .rp-mirror-content .sc_tab ol {
        padding-left: var(--s-5);
    }

    body.rp-page-app .rp-description-section {
        padding: var(--s-4);
    }

    body.rp-page-app .rp-description-section__body ul,
    body.rp-page-app .rp-description-section__body ol {
        padding-left: var(--s-5);
    }
}


/* ===== Phase 3.4 -- Screenshots gallery ===== */
.screenshots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 900px) { .screenshots-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .screenshots-grid { grid-template-columns: 1fr; } }
.screenshots-grid .screenshot-thumb { width: auto; flex-shrink: initial; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16/10; background: var(--bg-card, #f5f5f5); cursor: pointer; }
.screenshots-grid .screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.screenshots-grid .screenshot-thumb:hover img { transform: scale(1.05); }
.rp-screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
    align-items: stretch;
}
.rp-screenshot-item {
    min-width: 0;
}
.rp-screenshot-item a {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.rp-screenshot-item a:hover {
    border-color: var(--link);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}
.rp-screenshot-item img,
.rp-screenshot-item .ui.image,
.rp-screenshot-item img.screen_int {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    padding: 8px;
    background: #fff;
}
@media (max-width: 640px) {
    .rp-screenshots-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
.screenshot-hidden { display: none !important; }
.screenshots-show-all { margin: 16px auto 0; display: block; padding: 10px 24px; background: transparent; border: 1px solid var(--link); color: var(--link); border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 14px; transition: all .2s; }
.screenshots-show-all:hover { background: var(--link); color: white; }


/* ===== Phase 3.1+3.2 — Reviews + Versions ===== */
.reviews-block { margin: 32px 0; }
.reviews-header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom: 16px; }
.reviews-summary { display:flex; align-items:baseline; gap:8px; }
.reviews-rating-big { font-size: 1.5rem; font-weight: 700; color: var(--star, #ff9800); }
.reviews-count { color: var(--text-muted); }
.reviews-empty { color: var(--text-muted); padding: var(--s-6); text-align: center; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.reviews-list { display:flex; flex-direction:column; gap:16px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); }
.review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; flex-wrap:wrap; gap:8px; }
.review-author strong { display: inline-block; margin-right: 8px; }
.review-author time { color: var(--text-muted); font-size:.9rem; }
.review-rating .star { color: var(--border); font-size: 1rem; }
.review-rating .star.filled { color: var(--star, #ff9800); }
.review-text { line-height: 1.6; color: var(--text); }
.review-replies { margin-top: 12px; padding-left: 16px; border-left: 3px solid var(--link); }
.review-reply { padding: 8px 0; }
.reply-badge { display: inline-block; padding: 2px 8px; background: var(--link); color: white; border-radius: 12px; font-size:.75rem; margin-left: 4px; }
.reviews-load-more { display:block; margin: 16px auto; padding: 8px 24px; background: transparent; border: 1px solid var(--link); color: var(--link); border-radius: 6px; cursor: pointer; }

.review-form-wrap { margin-top: 24px; padding: 16px 20px; background: var(--card-bg, #f8f9fa); border-radius: 8px; }
.review-form-wrap summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.review-form { display:flex; flex-direction:column; gap:12px; margin-top: 16px; }
.review-form .form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .review-form .form-row { grid-template-columns: 1fr; } }
.review-form label { display:flex; flex-direction:column; gap:4px; font-size:.9rem; color: var(--text-muted); }
.review-form input, .review-form textarea { padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; font: inherit; color: var(--text); background: var(--bg); }
.review-form textarea { resize: vertical; min-height: 80px; }
.rating-input legend { font-size:.9rem; color: var(--text-muted); margin-bottom: 4px; }
.rating-stars { display:inline-flex; flex-direction: row-reverse; }
.rating-stars input { position:absolute; opacity:0; pointer-events:none; }
.rating-stars label { font-size: 2rem; cursor: pointer; padding: 2px; color: var(--border); transition: color .15s; }
.rating-stars label:hover, .rating-stars label:hover ~ label, .rating-stars input:checked ~ label { color: var(--star, #ff9800); }
.review-submit { align-self: flex-start; padding: 10px 24px; background: var(--link); color: white; border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; }
.review-form-status { font-size:.9rem; padding: 8px 0; }
.review-form-status.success { color: #2e7d32; }
.review-form-status.error { color: #c62828; }

.versions-block { margin: 32px 0; }
.versions-table { width: 100%; border-collapse: collapse; }
.versions-table th, .versions-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.versions-table thead th { background: var(--card-bg, #f5f5f5); font-weight: 600; }
.badge-latest { display: inline-block; background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); padding: 2px var(--s-2); border-radius: var(--r-full); font-size: var(--font-xs); font-weight: 600; margin-left: var(--s-2); }
.btn-small { padding: 6px 14px; background: var(--link); color: white; border-radius: 4px; text-decoration: none; font-size:.85rem; }
.versions-more { text-align: center; color: var(--text-muted); margin-top: 12px; }

/* =========================================================================
   Phase 4 -- Blog + Recent updates
   ========================================================================= */
.blog-header { text-align: center; margin: 32px 0; }
.blog-subtitle { color: var(--text-muted); }
.blog-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 48px; }
.blog-card { background: var(--card-bg, #f8f9fa); border-radius: 8px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.blog-card-cover img { width: 100%; height: 200px; object-fit: cover; display: block; }
.blog-card-body { padding: 16px 20px; }
.blog-card-title a { color: var(--text); text-decoration: none; }
.blog-card-title a:hover { color: var(--link); }
.blog-card-excerpt { color: var(--text-muted); margin: 8px 0 12px; }
.blog-card-meta { display:flex; flex-wrap: wrap; gap: 12px; align-items:center; font-size:.85rem; color: var(--text-muted); }
.blog-author { display:inline-flex; align-items:center; gap: 6px; }
.blog-author img { width: 24px; height: 24px; border-radius: 50%; }

.blog-post { max-width: 760px; }
.blog-post-header h1 { font-size: 2rem; margin: 8px 0 16px; }
.blog-post-meta { display:flex; flex-wrap:wrap; gap: 16px; align-items:center; color: var(--text-muted); margin-bottom: 24px; }
.blog-post-cover { margin: 0 -20px 24px; }
.blog-post-cover img { width: 100%; border-radius: 8px; }
.blog-post-body { line-height: 1.7; font-size: 1.05rem; }
.blog-post-body h2 { margin-top: 36px; }
.blog-post-body h3 { margin-top: 28px; }
.blog-post-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.blog-post-body th, .blog-post-body td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }
.blog-post-body th { background: var(--card-bg, #f5f5f5); }
.blog-post-body img { max-width: 100%; height: auto; border-radius: 4px; }

.blog-related-apps, .blog-related-articles { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--border); }
.blog-related-apps-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.related-app-card { display:flex; gap: 12px; padding: 12px; background: var(--card-bg, #f8f9fa); border-radius: 6px; text-decoration: none; color: var(--text); }
.related-app-card img { width: 48px; height: 48px; flex-shrink: 0; }
.related-app-card strong { display: block; }
.related-app-brief { display: block; font-size: .85rem; color: var(--text-muted); }
.blog-related-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.related-article-card { display:block; padding: 16px; background: var(--card-bg, #f8f9fa); border-radius: 6px; text-decoration: none; color: var(--text); }
.related-article-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.related-article-date { display: block; font-size:.8rem; color: var(--text-muted); margin-top: 8px; }

.recent-updates-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-6) var(--s-8); margin: var(--s-8) 0; box-shadow: var(--shadow-sm); }
.recent-updates-block h2 { margin-top: 0; }
.recent-updates-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 16px; }
.recent-col h3 { font-size: 1rem; margin: 0 0 8px; display:flex; align-items:center; gap:6px; }
.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list li { padding: 4px 0; display:flex; justify-content: space-between; gap: 8px; align-items:baseline; }
.recent-list a { color: var(--text); text-decoration: none; flex: 1; }
.recent-list a:hover { color: var(--link); }
.recent-date, .recent-version { color: var(--text-muted); font-size:.85rem; }

.related-articles-block { margin: 32px 0; }
.related-articles-list { display:flex; flex-direction:column; gap: 12px; }
.related-article-mini { display: block; padding: 12px 16px; background: var(--card-bg, #f8f9fa); border-radius: 6px; text-decoration: none; color: var(--text); border-left: 3px solid var(--link); }
.related-article-mini strong { display: block; margin-bottom: 4px; }
.related-article-excerpt { display:block; color: var(--text-muted); font-size:.9rem; margin-bottom: 4px; }
.related-article-mini time { color: var(--text-muted); font-size:.8rem; }

/* =========================================================================
   Phase 5 -- Design polish (theme tokens, typography, spacing, motion, RTL)
   ========================================================================= */

/* Auto dark via OS (only if user has not chosen explicitly) */
/* Smooth theme transition */
body { transition: background .2s ease, color .2s ease; }

@media (max-width: 640px) {
    :root { --font-h1: 1.5rem; --font-h2: 1.25rem; --font-h3: 1.125rem; }
}

/* 5.5 -- Micro-animations + reduced motion */
@media (prefers-reduced-motion: no-preference) {
    a, button, .card, .alternative-card, .blog-card, .related-app-card, .related-article-card, .related-article-mini {
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    }
    .blog-card:hover, .alternative-card:hover, .related-app-card:hover, .related-article-mini:hover {
        transform: translateY(-2px); box-shadow: var(--shadow);
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, var(--bg-alt) 25%, var(--card-bg) 50%, var(--bg-alt) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* 5.7 -- Theme toggle button */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--text);
    padding: 0;
    flex-shrink: 0;
}
.theme-toggle:hover { background: var(--card-bg); }
.theme-toggle svg { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: none !important; }
[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block !important; }
[data-theme="light"] .theme-toggle .theme-icon-light { display: block !important; }
[data-theme="light"] .theme-toggle .theme-icon-dark { display: none !important; }

/* 5.8 -- Dark theme polish for specific blocks */

[data-theme="dark"] header.header { background: var(--bg-card); }
[data-theme="dark"] .nav.main-nav.is-open { background: var(--bg-card); }

[data-theme="dark"] .review-form-status.success { color: #81c784; }
[data-theme="dark"] .review-form-status.error { color: #ef9a9a; }

[data-theme="dark"] .sidebar-rank.gold { background: rgba(255,193,7,.18); color: #ffe082; }
[data-theme="dark"] .sidebar-rank.bronze { background: rgba(255,152,0,.18); color: #ffcc80; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) header.header { background: var(--bg-card); }
    :root:not([data-theme="light"]) .nav.main-nav.is-open { background: var(--bg-card); }
}

/* 5.6 -- RTL base */
html[dir="rtl"] .breadcrumbs ol,
html[dir="rtl"] .pros-cons-grid,
html[dir="rtl"] .reviews-list,
html[dir="rtl"] .blog-grid,
html[dir="rtl"] .recent-updates-grid,
html[dir="rtl"] .alternatives-grid { direction: rtl; }
html[dir="rtl"] .review-replies { padding-left: 0; padding-right: var(--space-4); border-left: 0; border-right: 3px solid var(--link); }
html[dir="rtl"] .editor-verdict-block { border-left: 0; border-right: 4px solid var(--link); }
html[dir="rtl"] .related-article-mini { border-left: 0; border-right: 3px solid var(--link); }
html[dir="rtl"] .skip-link { left: auto; right: -9999px; }
html[dir="rtl"] .skip-link:focus { left: auto; right: 0; }
html[dir="rtl"] .header-inner { direction: rtl; }

/* ========================================================================
 * Phase 6 — Search + Sort + Pagination
 * ======================================================================== */

/* Header search suggestions */
.search-box { position: relative; }
.search-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--shadow-lg); z-index: 200; max-height: 480px; overflow-y: auto; }
.search-suggestion { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); }
.search-suggestion:hover, .search-suggestion.selected { background: var(--surface-2); }
.search-suggestion img { width: 32px; height: 32px; flex-shrink: 0; }
.suggestion-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.suggestion-content strong { font-size: .95rem; }
.suggestion-content span { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-type { color: var(--text-muted); font-size: 1rem; }
.search-show-all { justify-content: center; color: var(--link); font-weight: 600; border-bottom: 0; }
.search-no-results { padding: 16px; color: var(--text-muted); text-align: center; }

/* Search page */
.search-page-header { margin-bottom: 32px; }
.search-page-form { display: flex; gap: 8px; max-width: 600px; margin-top: 16px; }
.search-page-form input { flex: 1; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 1rem; background: var(--surface); color: var(--text); }
.search-page-form input:focus { border-color: var(--brand-500); outline: 2px solid var(--brand-100); outline-offset: 0; }
.search-page-form button { padding: 12px 24px; background: var(--link); color: white; border: 0; border-radius: var(--radius-md); cursor: pointer; font-weight: 600; }
.search-summary { margin-top: 12px; color: var(--text-muted); }
.search-section { margin: 32px 0; }
.search-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.search-result-card { display: flex; gap: 12px; padding: 12px 16px; background: var(--card-bg); border-radius: var(--radius-md); text-decoration: none; color: var(--text); }
.search-result-card:hover { background: var(--bg-alt); }
.search-result-card img { width: 48px; height: 48px; flex-shrink: 0; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-info strong { display: block; }
.search-result-brief { display: block; color: var(--text-muted); font-size: .9rem; }
.search-articles-list { display: flex; flex-direction: column; gap: 12px; }
.search-article-card { display: block; padding: 16px; background: var(--card-bg); border-radius: var(--radius-md); text-decoration: none; color: var(--text); }
.search-article-card strong { display: block; margin-bottom: 4px; }
.search-article-card span { display: block; color: var(--text-muted); font-size: .9rem; margin-bottom: 4px; }
.search-article-card time { color: var(--text-muted); font-size: .8rem; }
.search-empty { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.search-empty-categories { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.search-empty-categories a { display: inline-block; padding: 8px 16px; background: var(--card-bg); border-radius: 20px; text-decoration: none; color: var(--text); }

/* Category toolbar */
.category-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin: 16px 0 24px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.category-count { color: var(--text-muted); }
.category-sort { display: flex; align-items: center; gap: 8px; }
.category-sort label { color: var(--text-muted); font-size: .9rem; }
.category-sort select { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 32px 0; flex-wrap: wrap; }
.pagination a, .pagination-current { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.pagination a { background: var(--card-bg); }
.pagination a:hover { background: var(--link); color: white; }
.pagination-current { background: var(--link); color: white; font-weight: 600; }
.pagination-gap { padding: 0 8px; color: var(--text-muted); }
.pagination-prev, .pagination-next { font-weight: 500; }

/* === Phase R2: Home redesign === */

/* Hero */
.hero { background: linear-gradient(135deg, var(--brand-50) 0%, var(--surface) 100%); padding: var(--s-12) 0 var(--s-10); border-bottom: 1px solid var(--border); }
[data-theme="dark"] .hero { background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg) 100%); }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
.hero-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 var(--s-3); color: var(--text); }
.hero-subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--text-muted); margin: 0 0 var(--s-6); max-width: 640px; }
.hero-search { display: flex; align-items: stretch; max-width: 640px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: var(--s-2); box-shadow: var(--shadow-md); position: relative; }
.hero-search-icon { color: var(--text-subtle); margin: 0 var(--s-2) 0 var(--s-3); align-self: center; }
.hero-search input { flex: 1; border: 0; outline: 0; background: transparent; padding: var(--s-3) var(--s-2); font-size: 1.0625rem; color: var(--text); min-width: 0; }
.hero-search input::placeholder { color: var(--text-subtle); }
.hero-search button { padding: var(--s-3) var(--s-6); }
.hero-stats { display: flex; gap: var(--s-6); margin-top: var(--s-5); flex-wrap: wrap; }
.hero-stats span { color: var(--text-muted); font-size: var(--font-sm); }
.hero-stats strong { color: var(--text); font-weight: 700; font-size: 1.125rem; }

@media (min-width: 768px) {
    .hero { padding: var(--s-16) 0 var(--s-12); }
}

/* Category tiles */
.category-tiles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.category-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-5) var(--s-3); border-radius: var(--r-lg); text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface); transition: transform .15s, box-shadow .15s, border-color .15s; }
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--text); }
.category-tile-icon { width: 56px; height: 56px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; }
.category-tile-name { font-weight: 600; font-size: var(--font-base); color: var(--text); }
.category-tile-count { font-size: var(--font-xs); color: var(--text-muted); }
.category-tile-blue   .category-tile-icon { background: rgba(37,99,235,.10);  color: #2563eb; }
.category-tile-violet .category-tile-icon { background: rgba(139,92,246,.10); color: #8b5cf6; }
.category-tile-pink   .category-tile-icon { background: rgba(236,72,153,.10); color: #ec4899; }
.category-tile-orange .category-tile-icon { background: rgba(249,115,22,.10); color: #f97316; }
.category-tile-teal   .category-tile-icon { background: rgba(20,184,166,.10); color: #14b8a6; }
[data-theme="dark"] .category-tile-blue   .category-tile-icon { background: rgba(91,155,255,.15);  color: #82b3ff; }
[data-theme="dark"] .category-tile-violet .category-tile-icon { background: rgba(167,139,250,.15); color: #a78bfa; }
[data-theme="dark"] .category-tile-pink   .category-tile-icon { background: rgba(244,114,182,.15); color: #f472b6; }
[data-theme="dark"] .category-tile-orange .category-tile-icon { background: rgba(251,146,60,.15);  color: #fb923c; }
[data-theme="dark"] .category-tile-teal   .category-tile-icon { background: rgba(45,212,191,.15);  color: #2dd4bf; }

/* Featured apps */
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); }
.featured-card { display: flex; gap: var(--s-4); padding: var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s; box-shadow: var(--shadow-xs); }
.featured-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--text); }
.featured-card-icon { flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: var(--r-lg); }
.featured-card-icon img { width: 64px; height: 64px; }
.featured-card-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.featured-card-body h3 { margin: 0; font-size: var(--font-h4); }
.featured-card-body p { margin: 0; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.4; }
.featured-card-meta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: auto; }

/* Main 2-col layout */
.main-layout { display: grid; grid-template-columns: 1fr; gap: var(--s-8); padding: var(--s-8) 0; }
@media (min-width: 1024px) { .main-layout { grid-template-columns: 1fr 280px; } }

/* Category sections (with color accent) */
.cat-section { padding: var(--s-6) 0; border-top: 1px solid var(--border); }
.cat-section:first-child { border-top: 0; padding-top: 0; }
.cat-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); flex-wrap: wrap; gap: var(--s-3); }
.cat-section-title { display: inline-flex; align-items: center; gap: var(--s-3); margin: 0; font-size: var(--font-h2); }
.cat-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); }
.cat-section-blue   .cat-section-icon { background: rgba(37,99,235,.10);  color: #2563eb; }
.cat-section-violet .cat-section-icon { background: rgba(139,92,246,.10); color: #8b5cf6; }
.cat-section-pink   .cat-section-icon { background: rgba(236,72,153,.10); color: #ec4899; }
.cat-section-orange .cat-section-icon { background: rgba(249,115,22,.10); color: #f97316; }
.cat-section-teal   .cat-section-icon { background: rgba(20,184,166,.10); color: #14b8a6; }
[data-theme="dark"] .cat-section-blue   .cat-section-icon { background: rgba(91,155,255,.15);  color: #82b3ff; }
[data-theme="dark"] .cat-section-violet .cat-section-icon { background: rgba(167,139,250,.15); color: #a78bfa; }
[data-theme="dark"] .cat-section-pink   .cat-section-icon { background: rgba(244,114,182,.15); color: #f472b6; }
[data-theme="dark"] .cat-section-orange .cat-section-icon { background: rgba(251,146,60,.15);  color: #fb923c; }
[data-theme="dark"] .cat-section-teal   .cat-section-icon { background: rgba(45,212,191,.15);  color: #2dd4bf; }
.cat-section-more { color: var(--brand-500); font-weight: 600; font-size: var(--font-sm); }
.cat-section-more:hover { text-decoration: underline; }

/* Universal app cards (R2) -- scoped to .apps-grid so we don't conflict with category-page .app-card */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); }
.apps-grid .app-card { display: flex; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s, border-color .15s; }
.apps-grid .app-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); text-decoration: none; color: var(--text); }
.apps-grid .app-card-icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.apps-grid .app-card-icon img { width: 48px; height: 48px; }
.apps-grid .app-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.apps-grid .app-card-name { color: var(--text); font-weight: 600; font-size: var(--font-base); }
.apps-grid .app-card-brief { margin: 0; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.apps-grid .app-card-meta { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-1); flex-wrap: wrap; }
.apps-grid .app-card-rating { color: var(--star); font-weight: 600; font-size: var(--font-sm); }

/* Sidebar pretty (R2) */
.main-sidebar-col { display: flex; flex-direction: column; gap: var(--s-5); }
.main-sidebar-col > * { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); }

/* Hide redundant main-h1 -- Hero already has the title */
.main-h1 { display: none; }

/* Category page header (R2) */
.cat-page-header { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-8) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--s-6); }
.cat-page-icon { width: 64px; height: 64px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-page-header h1 { margin: 0; }
.cat-page-subtitle { margin: var(--s-2) 0 0; color: var(--text-muted); }
.cat-page-header.cat-section-blue   .cat-page-icon { background: rgba(37,99,235,.10);  color: #2563eb; }
.cat-page-header.cat-section-violet .cat-page-icon { background: rgba(139,92,246,.10); color: #8b5cf6; }
.cat-page-header.cat-section-pink   .cat-page-icon { background: rgba(236,72,153,.10); color: #ec4899; }
.cat-page-header.cat-section-orange .cat-page-icon { background: rgba(249,115,22,.10); color: #f97316; }
.cat-page-header.cat-section-teal   .cat-page-icon { background: rgba(20,184,166,.10); color: #14b8a6; }
[data-theme="dark"] .cat-page-header.cat-section-blue   .cat-page-icon { background: rgba(91,155,255,.15);  color: #82b3ff; }
[data-theme="dark"] .cat-page-header.cat-section-violet .cat-page-icon { background: rgba(167,139,250,.15); color: #a78bfa; }
[data-theme="dark"] .cat-page-header.cat-section-pink   .cat-page-icon { background: rgba(244,114,182,.15); color: #f472b6; }
[data-theme="dark"] .cat-page-header.cat-section-orange .cat-page-icon { background: rgba(251,146,60,.15);  color: #fb923c; }
[data-theme="dark"] .cat-page-header.cat-section-teal   .cat-page-icon { background: rgba(45,212,191,.15);  color: #2dd4bf; }

/* === Phase R3: App page hero (icon + info + CTA + specs-strip) === */
.app-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-6) var(--s-6) 0; margin-bottom: var(--s-6); box-shadow: var(--shadow-sm); overflow: hidden; }
.app-hero .star-rating-interactive[hidden] { display: none !important; }

.app-hero-main { display: grid; grid-template-columns: 1fr; gap: var(--s-5); padding-bottom: var(--s-6); align-items: start; }
@media (min-width: 640px) { .app-hero-main { grid-template-columns: 128px 1fr; gap: var(--s-6); } }

.app-hero-icon { width: 96px; height: 96px; padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width: 640px) { .app-hero-icon { width: 128px; height: 128px; } }
.app-hero-icon img { width: 100%; height: 100%; object-fit: contain; }

.app-hero-info { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.app-hero-title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.app-hero-developer { color: var(--text-muted); font-size: var(--font-sm); }
.app-hero-developer strong { color: var(--text); font-weight: 600; }

.app-hero-rating-row { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; }
.app-hero-stars { display: inline-flex; gap: 2px; align-items: center; font-size: 1.25rem; color: var(--border-strong); line-height: 1; }
.app-hero-stars .star.filled { color: var(--star); }
.app-hero-stars .star.half { background: linear-gradient(90deg, var(--star) 50%, var(--border-strong) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.app-hero-stars strong { color: var(--text); margin-left: var(--s-2); font-size: 1.0625rem; font-weight: 700; }
.app-hero-stars .muted { color: var(--text-muted); font-size: var(--font-sm); font-weight: 400; margin-left: var(--s-1); }
.app-hero-downloads { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--font-sm); }
.app-hero-downloads strong { color: var(--text); font-weight: 700; font-size: 1.0625rem; }
.app-hero-downloads svg { color: var(--brand-500); flex-shrink: 0; }

.app-hero-cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-2); }
.app-hero-cta-row .btn-success { box-shadow: 0 4px 12px rgba(22,163,74,.25); }
[data-theme="dark"] .app-hero-cta-row .btn-success { box-shadow: 0 4px 16px rgba(52,211,153,.30); }
.app-hero-cta { font-size: 1rem; padding: var(--s-3) var(--s-6); }
.app-hero-cta .btn-version { opacity: .85; font-weight: 500; padding-left: var(--s-2); border-left: 1px solid rgba(255,255,255,.35); margin-left: var(--s-2); font-size: var(--font-sm); }
.app-hero-virus { padding: var(--s-2) var(--s-3); text-decoration: none; }
.app-hero-virus:hover { text-decoration: none; filter: brightness(1.03); }
.app-hero-verified { align-self: center; }

.app-specs-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-top: 1px solid var(--border);
    margin: 0 calc(var(--s-6) * -1);
    background: var(--surface-2);
}
.app-spec-item { display: flex; align-items: center; gap: var(--s-3); }
.spec-emoji { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.spec-kv { display: flex; flex-direction: column; min-width: 0; }
.spec-label { font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.spec-value { font-size: var(--font-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hide legacy .app-header* inner bits inside new .app-hero */
.app-hero .app-header-top, .app-hero .app-header-info, .app-hero .app-header-meta,
.app-hero .specs-table, .app-hero .btn-download-big, .app-hero .app-header-subtitle,
.app-hero .verified-badge:not(.app-hero-verified) { display: none !important; }

/* Reviews avatars (Phase R3) */
.review-author { display: flex; gap: var(--s-3); align-items: center; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-500); color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; line-height: 1; }
.review-author-info { display: flex; flex-direction: column; gap: 2px; }
.review-author-info strong { margin: 0; }
.review-author-info time { color: var(--text-muted); font-size: var(--font-sm); }

@media (max-width: 640px) {
    .app-hero { padding: var(--s-4) var(--s-4) 0; }
    .app-specs-strip { margin: 0 calc(var(--s-4) * -1); padding: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .app-hero-cta { width: 100%; justify-content: center; }
}

/* === Phase R4: Blog === */
/* Blog list */
.blog-list-header { text-align: center; padding: var(--s-12) 0 var(--s-8); }
.blog-list-header h1 { margin: 0 0 var(--s-3); }
.blog-list-header p { color: var(--text-muted); font-size: 1.0625rem; max-width: 640px; margin: 0 auto; }

.blog-list-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin: 0 auto var(--s-12); max-width: var(--container); padding: 0 var(--s-5); }
@media (min-width: 768px) { .blog-list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-list-grid { grid-template-columns: repeat(3, 1fr); } .blog-list-card-featured { grid-column: 1 / -1; } }

.blog-list-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.blog-list-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-list-card-link { display: block; text-decoration: none; color: var(--text); }
.blog-list-cover { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.blog-list-card-featured .blog-list-cover { aspect-ratio: 21/8; }
.blog-list-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.blog-list-card:hover .blog-list-cover img { transform: scale(1.04); }
.blog-list-cover-placeholder { display: flex; align-items: center; justify-content: center; }
.blog-list-cover-placeholder .cover-emoji { font-size: 4rem; color: rgba(255,255,255,.85); text-shadow: 0 4px 16px rgba(0,0,0,.18); }
.grad-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.grad-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.grad-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.grad-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.grad-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.blog-list-card-body { padding: var(--s-5) var(--s-6) var(--s-6); }
.blog-list-card-body h2 { margin: 0 0 var(--s-3); font-size: var(--font-h3); }
.blog-list-card-featured .blog-list-card-body h2 { font-size: var(--font-h2); }
.blog-list-card-body p { color: var(--text-muted); margin: 0 0 var(--s-4); line-height: var(--leading-base); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-list-card-body footer { display: flex; align-items: center; gap: var(--s-2); font-size: var(--font-sm); color: var(--text-muted); flex-wrap: wrap; }
.blog-list-card-body footer .blog-author-name { color: var(--text); font-weight: 600; }
.blog-meta-dot { color: var(--text-subtle); }

/* Blog post */
.blog-article { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-5); }

.blog-cover { position: relative; aspect-ratio: 21/9; max-width: 100%; margin: var(--s-5) 0 var(--s-8); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-cover-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6) 100%); pointer-events: none; }
.blog-cover-content { position: absolute; bottom: var(--s-8); left: var(--s-8); right: var(--s-8); color: #fff; }
.blog-cover-content h1 { color: #fff; margin: 0 0 var(--s-3); font-size: clamp(1.75rem, 4vw, 2.75rem); text-shadow: 0 2px 16px rgba(0,0,0,.4); line-height: 1.15; }
.blog-cover-content .blog-lead { font-size: clamp(1rem, 2vw, 1.25rem); margin: 0; max-width: 720px; opacity: .95; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.blog-cover-placeholder { background: linear-gradient(135deg, var(--brand-500) 0%, #8b5cf6 100%); display: flex; align-items: center; justify-content: center; }
.blog-cover-placeholder .blog-cover-emoji { font-size: 6rem; color: rgba(255,255,255,.9); }

.blog-meta-row { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) 0 var(--s-6); border-bottom: 1px solid var(--border); margin-bottom: var(--s-6); flex-wrap: wrap; gap: var(--s-4); }
.blog-meta-row .blog-author { display: flex; gap: var(--s-3); align-items: center; }
.blog-meta-row .blog-author img, .blog-author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-author-avatar { background: var(--brand-500); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.blog-author-info { display: flex; flex-direction: column; line-height: 1.25; }
.blog-author-info .blog-author-name { font-weight: 700; color: var(--text); }
.blog-author-role { color: var(--text-muted); font-size: var(--font-sm); }
.blog-meta-side { display: flex; gap: var(--s-4); color: var(--text-muted); font-size: var(--font-sm); flex-wrap: wrap; }

.blog-layout { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
@media (min-width: 1024px) { .blog-layout { grid-template-columns: 220px 1fr; gap: var(--s-10); align-items: start; } }
.blog-toc-wrap { display: none; }
@media (min-width: 1024px) {
  .blog-toc-wrap { display: block; }
  .blog-toc { position: sticky; top: var(--s-6); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); max-height: calc(100vh - var(--s-12)); overflow-y: auto; }
}
.blog-toc strong { display: block; font-size: var(--font-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--s-3); }
.blog-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.blog-toc li { counter-increment: toc; margin: var(--s-2) 0; }
.blog-toc li::before { content: counter(toc) "."; color: var(--text-subtle); font-weight: 600; margin-right: var(--s-2); }
.blog-toc a { color: var(--text-muted); text-decoration: none; font-size: var(--font-sm); line-height: 1.4; }
.blog-toc a:hover, .blog-toc a.active { color: var(--brand-500); }
.blog-toc .toc-h3 { padding-left: var(--s-4); }
.blog-toc .toc-h3::before { content: "\203A"; }

/* Blog post body -- typography */
.blog-post-body { font-size: 1.0625rem; line-height: var(--leading-relaxed); color: var(--text); max-width: 720px; }
.blog-post-body > p:first-of-type::first-letter { float: left; font-size: 4em; line-height: 0.85; padding: var(--s-2) var(--s-3) 0 0; color: var(--brand-500); font-weight: 700; }
.blog-post-body h2 { font-size: 1.625rem; margin: var(--s-12) 0 var(--s-4); padding-top: var(--s-3); line-height: 1.25; }
.blog-post-body h3 { font-size: 1.25rem; margin: var(--s-8) 0 var(--s-3); line-height: 1.3; }
.blog-post-body p { margin: 0 0 var(--s-4); }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 var(--s-5); padding-left: var(--s-6); }
.blog-post-body li { margin: var(--s-2) 0; }
.blog-post-body blockquote { margin: var(--s-6) 0; padding: var(--s-5) var(--s-6); background: var(--brand-50); border-left: 4px solid var(--brand-500); border-radius: var(--r-md); font-style: italic; color: var(--text); }
.blog-post-body code { background: var(--surface-2); color: var(--text); padding: 2px 6px; border-radius: var(--r-sm); font-family: ui-monospace, SFMono-Regular, monospace; font-size: .9em; }
.blog-post-body pre { background: var(--surface-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); overflow-x: auto; }
.blog-post-body pre code { background: transparent; padding: 0; }
.blog-post-body table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--font-sm); }
.blog-post-body table thead { background: var(--surface-2); }
.blog-post-body table th, .blog-post-body table td { padding: var(--s-3) var(--s-4); border: 1px solid var(--border); text-align: left; }
.blog-post-body table tbody tr:nth-child(even) { background: var(--surface-2); }
.blog-post-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--s-5) 0; }
.blog-post-body a { color: var(--brand-500); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Helpful + share */
.blog-helpful { margin: var(--s-12) 0 var(--s-6); padding: var(--s-6); background: var(--surface-2); border-radius: var(--r-lg); display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; justify-content: space-between; }
.blog-helpful-buttons { display: flex; gap: var(--s-3); }
.blog-helpful-buttons button.voted { background: var(--brand-50); color: var(--brand-500); border-color: var(--brand-500); }
.blog-share { margin: var(--s-6) 0 var(--s-12); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.blog-share strong { margin-right: var(--s-2); }

/* Related */
.blog-related-apps, .blog-related-articles { margin: var(--s-10) 0; }
.blog-related-apps h2, .blog-related-articles h2 { margin: 0 0 var(--s-5); }
.related-apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.related-app-card { display: flex; gap: var(--s-3); padding: var(--s-4); align-items: flex-start; text-decoration: none; color: var(--text); }
.related-app-icon { width: 56px; height: 56px; flex-shrink: 0; }
.related-app-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.related-app-card strong { display: block; font-size: var(--font-base); }
.related-app-card p { margin: var(--s-1) 0 0; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.4; }

.blog-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.related-article-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s; }
.related-article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.related-article-cover { aspect-ratio: 16/9; overflow: hidden; }
.related-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-article-cover-placeholder { background: linear-gradient(135deg, var(--brand-500), #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; }
.related-article-body { padding: var(--s-4); }
.related-article-body strong { display: block; margin-bottom: var(--s-2); }
.related-article-body time { color: var(--text-muted); font-size: var(--font-sm); }

@media (max-width: 640px) {
  .blog-cover-content { bottom: var(--s-4); left: var(--s-4); right: var(--s-4); }
  .blog-helpful { flex-direction: column; align-items: flex-start; }
}