/**
 * Nav Directory Styles - OneNav Clone (RTL/Arabic)
 * Complete styling for navigation directory system
 *
 * @package Misk
 * @since 8.2
 */

/* ========================================
   CSS Variables & Theme
   ======================================== */
:root {
    --nav-primary: #2d5cf6;
    --nav-primary-hover: #1e4fd8;
    --nav-primary-light: rgba(45, 92, 246, 0.1);
    --nav-danger: #ff4757;
    --nav-success: #2ecc71;
    --nav-warning: #f39c12;
    --nav-orange: #ff6b35;
    
    --nav-bg: #f5f7fa;
    --nav-bg-card: #ffffff;
    --nav-bg-header: #ffffff;
    --nav-bg-sidebar: #ffffff;
    --nav-bg-footer: #1a1d23;
    --nav-bg-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --nav-bg-input: #f0f2f5;
    --nav-bg-hover: #f8f9fb;
    --nav-bg-tag: #f0f2f5;
    
    --nav-text: #2c3e50;
    --nav-text-secondary: #7f8c8d;
    --nav-text-muted: #bdc3c7;
    --nav-text-white: #ffffff;
    --nav-text-link: #2d5cf6;
    
    --nav-border: #e8ecf1;
    --nav-border-light: #f0f2f5;
    
    --nav-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --nav-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --nav-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --nav-shadow-hover: 0 4px 20px rgba(0,0,0,0.15);
    
    --nav-radius: 12px;
    --nav-radius-sm: 8px;
    --nav-radius-lg: 16px;
    --nav-radius-full: 50px;
    
    --nav-sidebar-width: 200px;
    --nav-header-height: 60px;
    --nav-transition: 0.3s ease;
    
    --nav-font: inherit;
}

/* Dark Mode */
[data-theme="dark"],
.dark-mode {
    --nav-bg: #1a1d23;
    --nav-bg-card: #22262f;
    --nav-bg-header: #1e222a;
    --nav-bg-sidebar: #1e222a;
    --nav-bg-footer: #141720;
    --nav-bg-hero: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    --nav-bg-input: #2d3240;
    --nav-bg-hover: #2d3240;
    --nav-bg-tag: #2d3240;
    
    --nav-text: #e2e8f0;
    --nav-text-secondary: #a0aec0;
    --nav-text-muted: #718096;
    --nav-text-link: #63b3ed;
    
    --nav-border: #2d3748;
    --nav-border-light: #2d3240;
    
    --nav-shadow: 0 2px 12px rgba(0,0,0,0.3);
    --nav-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
    --nav-shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
    --nav-shadow-hover: 0 4px 20px rgba(0,0,0,0.35);
}

/* ========================================
   Base & Layout
   ======================================== */
.nav-directory-body {
    font-family: var(--nav-font);
    background: var(--nav-bg);
    color: var(--nav-text);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    direction: rtl;
}

.nav-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nav-main {
    flex: 1;
    padding: 20px 0 40px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   Header
   ======================================== */
.nav-header {
    background: var(--nav-bg-header);
    border-bottom: 1px solid var(--nav-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--nav-header-height);
    box-shadow: var(--nav-shadow-sm);
    transition: background var(--nav-transition);
}

.nav-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-header-height);
    gap: 20px;
}

.nav-header-logo {
    flex-shrink: 0;
}

.nav-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}

.nav-logo-img {
    height: 36px;
    width: auto;
}

.nav-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--nav-primary);
    letter-spacing: -0.5px;
}

[data-theme="dark"] .nav-logo-light { display: none; }
[data-theme="light"] .nav-logo-dark,
.nav-logo-dark { display: none; }
[data-theme="dark"] .nav-logo-dark { display: block; }

.nav-header-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    justify-content: center;
}

.nav-header-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.nav-header-menu li a,
.nav-header-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 14px;
    border-radius: var(--nav-radius-sm);
    transition: all var(--nav-transition);
    white-space: nowrap;
}

.nav-header-menu li a:hover,
.nav-header-link:hover {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
}

.nav-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-submit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--nav-primary);
    color: var(--nav-text-white);
    border: none;
    border-radius: var(--nav-radius-full);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--nav-transition);
}

.nav-submit-btn:hover {
    background: var(--nav-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 92, 246, 0.3);
}

/* Dark Mode Toggle */
.nav-darkmode-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--nav-bg-input);
    border-radius: 50%;
    cursor: pointer;
    color: var(--nav-text-secondary);
    font-size: 16px;
    transition: all var(--nav-transition);
}

.nav-darkmode-toggle:hover {
    color: var(--nav-warning);
    background: var(--nav-bg-hover);
}

[data-theme="light"] .nav-icon-light,
.nav-icon-light { display: none; }
[data-theme="dark"] .nav-icon-dark { display: none; }
[data-theme="dark"] .nav-icon-light { display: flex; }

.nav-login-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-input);
    border-radius: 50%;
    color: var(--nav-text-secondary);
    text-decoration: none;
    transition: all var(--nav-transition);
}

.nav-login-btn:hover {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* User Menu */
.nav-user-menu {
    position: relative;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
}

.nav-user-btn img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-lg);
    width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--nav-transition);
    z-index: 1001;
}

.nav-user-menu:hover .nav-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid var(--nav-border);
}

.nav-user-info img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

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

.nav-user-links {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.nav-user-links li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--nav-transition);
}

.nav-user-links li a:hover {
    color: var(--nav-primary);
    background: var(--nav-bg-hover);
}

.nav-user-links li a i {
    width: 16px;
    text-align: center;
}

/* Mobile Toggle */
.nav-mobile-toggle {
    display: none;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    align-items: center;
    justify-content: center;
}

.nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 20px;
}

.nav-hamburger span {
    display: block;
    height: 2px;
    background: var(--nav-text);
    border-radius: 2px;
    transition: all var(--nav-transition);
}

/* ========================================
   Hero / Search Area
   ======================================== */
.nav-hero {
    background: var(--nav-bg-hero);
    padding: 50px 0 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.nav-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.nav-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top, var(--nav-bg), transparent);
    pointer-events: none;
}

.nav-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.nav-hero-brand {
    margin-bottom: 30px;
}

.nav-hero-logo {
    max-height: 50px;
    margin-bottom: 10px;
}

.nav-hero-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--nav-text-white);
    margin: 0 0 8px;
}

.nav-hero-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

/* ========================================
   Search Box
   ======================================== */
.nav-search-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.nav-search-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.nav-search-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--nav-radius-full);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
}

.nav-search-tab:hover,
.nav-search-tab.active {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

.nav-search-form {
    position: relative;
}

.nav-search-input-wrap {
    display: flex;
    align-items: center;
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius-full);
    overflow: hidden;
    box-shadow: var(--nav-shadow-lg);
    transition: all var(--nav-transition);
}

.nav-search-input-wrap:focus-within {
    box-shadow: 0 0 0 3px rgba(45, 92, 246, 0.3), var(--nav-shadow-lg);
}

.nav-search-icon {
    padding: 0 16px 0 0;
    color: var(--nav-text-muted);
    font-size: 16px;
}

.nav-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 20px;
    font-size: 15px;
    font-family: var(--nav-font);
    background: transparent;
    color: var(--nav-text);
    direction: rtl;
}

.nav-search-input::placeholder {
    color: var(--nav-text-muted);
}

.nav-search-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-primary);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all var(--nav-transition);
    border-radius: 50%;
    margin: 4px;
    flex-shrink: 0;
}

.nav-search-btn:hover {
    background: var(--nav-primary-hover);
}

/* Search Dropdown Results */
.nav-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    border: 1px solid var(--nav-border);
}

.nav-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--nav-text);
    transition: background var(--nav-transition);
    border-bottom: 1px solid var(--nav-border-light);
}

.nav-search-result-item:hover {
    background: var(--nav-bg-hover);
}

.nav-search-result-item:last-child {
    border-bottom: none;
}

.nav-search-result-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--nav-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--nav-bg-input);
}

.nav-search-result-info {
    flex: 1;
    min-width: 0;
}

.nav-search-result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--nav-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-search-result-desc {
    font-size: 12px;
    color: var(--nav-text-secondary);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-search-result-type {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--nav-primary-light);
    color: var(--nav-primary);
    border-radius: var(--nav-radius-full);
    flex-shrink: 0;
}

/* ========================================
   Hot/Trending Bar
   ======================================== */
.nav-hot-bar {
    background: var(--nav-bg-card);
    border-bottom: 1px solid var(--nav-border);
    padding: 10px 0;
    overflow: hidden;
}

.nav-hot-bar .container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-hot-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-danger);
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-hot-list {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nav-hot-list::-webkit-scrollbar {
    display: none;
}

.nav-hot-item {
    font-size: 13px;
    color: var(--nav-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--nav-transition);
}

.nav-hot-item:hover {
    color: var(--nav-primary);
}

/* ========================================
   Main Layout (Sidebar + Content)
   ======================================== */
.nav-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.nav-content {
    flex: 1;
    min-width: 0;
}

/* No-sidebar full-width layout */
.nav-layout.no-sidebar {
    display: block;
}

.nav-layout.no-sidebar .nav-content {
    max-width: 100%;
}

/* ========================================
   Sidebar Navigation
   ======================================== */
.nav-sidebar {
    width: var(--nav-sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--nav-header-height) + 20px);
    max-height: calc(100vh - var(--nav-header-height) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nav-border) transparent;
    background: var(--nav-bg-sidebar);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-sm);
    transition: all var(--nav-transition);
}

.nav-sidebar::-webkit-scrollbar {
    width: 4px;
}

.nav-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.nav-sidebar::-webkit-scrollbar-thumb {
    background: var(--nav-border);
    border-radius: 4px;
}

.nav-sidebar-inner {
    padding: 10px 0;
}

.nav-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-sidebar-item {
    margin: 0;
}

.nav-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--nav-transition);
    border-right: 3px solid transparent;
}

.nav-sidebar-link:hover {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
}

.nav-sidebar-link i {
    width: 18px;
    text-align: center;
    font-size: 14px;
}

.nav-sidebar-item.active .nav-sidebar-link {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
    border-right-color: var(--nav-primary);
    font-weight: 600;
}

/* ========================================
   Section Headers
   ======================================== */
.nav-section {
    margin-bottom: 36px;
}

.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--nav-border);
    position: relative;
}

.nav-section-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 60px;
    height: 2px;
    background: var(--nav-primary);
    border-radius: 2px;
}

.nav-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-section-icon {
    font-size: 18px;
    color: var(--nav-primary);
}

.nav-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0;
}

.nav-section-more {
    font-size: 13px;
    color: var(--nav-text-secondary);
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    transition: all var(--nav-transition);
}

.nav-section-more:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* Sort Tabs */
.nav-sort-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.nav-sort-tab {
    padding: 6px 14px;
    background: var(--nav-bg-tag);
    border: 1px solid var(--nav-border-light);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
}

.nav-sort-tab:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
}

.nav-sort-tab.active {
    background: var(--nav-primary);
    color: #fff;
    border-color: var(--nav-primary);
}

/* ========================================
   Site Cards (Main Grid)
   ======================================== */
.nav-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--nav-cards-per-row, 3), 1fr);
    gap: 16px;
}

.nav-site-card {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    overflow: hidden;
    transition: all var(--nav-transition);
    position: relative;
}

.nav-site-card:hover {
    box-shadow: var(--nav-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--nav-primary);
}

.nav-card-inner {
    padding: 16px;
}

.nav-card-link {
    text-decoration: none;
    color: inherit;
}

.nav-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.nav-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--nav-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-input);
}

.nav-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-card-icon-letter {
    font-size: 20px;
    font-weight: 700;
    color: var(--nav-primary);
    text-transform: uppercase;
}

.nav-card-title-wrap {
    flex: 1;
    min-width: 0;
}

.nav-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.nav-card-desc {
    font-size: 12px;
    color: var(--nav-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

/* Card Footer */
.nav-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--nav-border-light);
}

.nav-card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--nav-text-muted);
    transition: color var(--nav-transition);
}

.nav-stat i {
    font-size: 13px;
}

.nav-like-btn {
    cursor: pointer;
}

.nav-like-btn:hover,
.nav-like-btn.liked {
    color: var(--nav-danger);
}

.nav-like-btn.liked i {
    animation: likeAnimation 0.3s ease;
}

@keyframes likeAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.nav-go-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-input);
    border-radius: 50%;
    color: var(--nav-text-muted);
    text-decoration: none;
    font-size: 12px;
    transition: all var(--nav-transition);
}

.nav-go-btn:hover {
    background: var(--nav-primary);
    color: #fff;
}

/* Card Tags */
.nav-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
}

.nav-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: var(--nav-radius-full);
    text-decoration: none;
    transition: all var(--nav-transition);
}

.nav-tag-collection {
    background: var(--nav-primary-light);
    color: var(--nav-primary);
}

.nav-tag-collection:hover {
    background: var(--nav-primary);
    color: #fff;
}

.nav-tag-site {
    background: var(--nav-bg-tag);
    color: var(--nav-text-secondary);
}

.nav-tag-site:hover {
    color: var(--nav-primary);
}

/* ========================================
   Compact Card Style
   ======================================== */
.nav-site-card.card-style-compact .nav-card-inner {
    padding: 12px;
}

.nav-site-card.card-style-compact .nav-card-header {
    margin-bottom: 8px;
}

.nav-site-card.card-style-compact .nav-card-icon {
    width: 36px;
    height: 36px;
}

.nav-site-card.card-style-compact .nav-card-title {
    font-size: 13px;
}

.nav-site-card.card-style-compact .nav-card-desc {
    font-size: 11px;
    -webkit-line-clamp: 1;
}

.nav-site-card.card-style-compact .nav-card-tags {
    display: none;
}

.nav-site-card.card-style-compact .nav-card-footer {
    padding-top: 8px;
}

.nav-site-card.card-style-compact .nav-stat {
    font-size: 11px;
}

/* ========================================
   Mini Site Cards (Sidebar)
   ======================================== */
.nav-site-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--nav-border-light);
}

.nav-site-mini:last-child {
    border-bottom: none;
}

.nav-mini-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.nav-mini-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--nav-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-input);
}

.nav-mini-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-mini-icon .nav-card-icon-letter {
    font-size: 14px;
}

.nav-mini-text {
    flex: 1;
    min-width: 0;
}

.nav-mini-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--nav-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-mini-desc {
    display: block;
    font-size: 11px;
    color: var(--nav-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-mini-go {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nav-text-muted);
    text-decoration: none;
    font-size: 11px;
    border-radius: 50%;
    transition: all var(--nav-transition);
    flex-shrink: 0;
}

.nav-mini-go:hover {
    background: var(--nav-primary);
    color: #fff;
}

/* ========================================
   App Cards
   ======================================== */
.nav-app-card {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    padding: 16px;
    transition: all var(--nav-transition);
}

.nav-app-card:hover {
    box-shadow: var(--nav-shadow-hover);
    transform: translateY(-2px);
}

.nav-app-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
}

.nav-app-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--nav-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-app-letter {
    font-size: 24px;
}

.nav-app-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--nav-text);
}

.nav-app-version {
    font-size: 11px;
    color: var(--nav-text-muted);
    background: var(--nav-bg-tag);
    padding: 1px 6px;
    border-radius: 4px;
}

.nav-app-desc {
    font-size: 12px;
    color: var(--nav-text-secondary);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-app-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.nav-app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--nav-border-light);
}

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

/* ========================================
   Book Cards
   ======================================== */
.nav-layout-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.nav-layout-carousel::-webkit-scrollbar {
    display: none;
}

.nav-layout-carousel .nav-book-card {
    flex: 0 0 180px;
    min-width: 180px;
    max-width: 180px;
    scroll-snap-align: start;
}

/* Carousel wrapper with navigation arrows */
.nav-carousel-wrap {
    position: relative;
}

.nav-carousel-wrap .nav-layout-carousel {
    padding: 4px 0 10px;
}

.nav-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
    color: var(--nav-text);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all var(--nav-transition);
    opacity: 0;
    pointer-events: none;
}

.nav-carousel-wrap:hover .nav-carousel-btn {
    opacity: 1;
    pointer-events: auto;
}

.nav-carousel-btn:hover {
    background: var(--nav-primary);
    color: #fff;
    border-color: var(--nav-primary);
}

.nav-carousel-btn.prev {
    right: -14px;
}

.nav-carousel-btn.next {
    left: -14px;
}

.nav-book-card {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    overflow: hidden;
    border: 1px solid var(--nav-border);
    transition: all var(--nav-transition);
    display: flex;
    flex-direction: column;
}

.nav-book-card:hover {
    box-shadow: var(--nav-shadow-hover);
    border-color: #ccc;
    transform: translateY(-3px);
}

.nav-book-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-book-cover {
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: var(--nav-bg-input);
    position: relative;
}

.nav-book-card:hover .nav-book-cover img {
    transform: scale(1.04);
}

.nav-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.nav-book-cover .nav-book-cover-placeholder {
    border-radius: 0;
}

.nav-book-cover-cat {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.nav-book-info {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nav-book-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-book-author {
    font-size: 11px;
    color: var(--nav-text-muted);
    font-weight: 500;
}

.nav-book-desc {
    font-size: 11px;
    color: var(--nav-text-secondary);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

.nav-book-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px dashed var(--nav-border);
}

.nav-book-card-stat {
    font-size: 10px;
    color: var(--nav-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.nav-book-card-stat i {
    font-size: 9px;
}

.nav-book-card-rating {
    color: #f59e0b;
}

.nav-book-card-rating i {
    color: #f59e0b;
}

/* Book card placeholder overrides for archive grid (smaller than single-page hero) */
.nav-book-card .nav-book-cover-ph-deco {
    font-size: 70px;
    top: -10px;
    left: -10px;
}
.nav-book-card .nav-book-cover-ph-content {
    padding: 12px 10px;
    gap: 4px;
}
.nav-book-card .nav-book-cover-ph-icon {
    font-size: 22px;
    margin-bottom: 2px;
}
.nav-book-card .nav-book-cover-ph-title {
    font-size: 11px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
}
.nav-book-card .nav-book-cover-ph-author {
    font-size: 9px;
}
.nav-book-card .nav-book-cover-ph-publisher {
    font-size: 8px;
    padding-top: 4px;
}
.nav-book-card .nav-book-cover-ph-border {
    inset: 5px;
}

/* Book card info text sizes for archive */
.nav-book-card .nav-book-title {
    font-size: 12px;
}
.nav-book-card .nav-book-author {
    font-size: 10px;
}
.nav-book-card .nav-book-desc {
    font-size: 10px;
    line-height: 1.5;
}

/* ========================================
   Articles Two-Column Layout (Latest + Most Read)
   ======================================== */
.nav-articles-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.nav-articles-col {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    overflow: hidden;
}

.nav-articles-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--nav-border-light);
    background: var(--nav-bg-hover);
}

.nav-articles-col-icon {
    font-size: 18px;
    line-height: 1;
}

.nav-articles-col-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0;
}

.nav-articles-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-articles-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--nav-border-light);
    transition: background var(--nav-transition);
}

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

.nav-articles-item:hover {
    background: var(--nav-bg-hover);
}

.nav-articles-emoji {
    font-size: 16px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    line-height: 1;
}

.nav-articles-link {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--nav-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
    transition: color var(--nav-transition);
}

.nav-articles-link:hover {
    color: var(--nav-primary);
}

.nav-articles-views {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--nav-text-muted);
    background: var(--nav-bg-tag);
    padding: 2px 8px;
    border-radius: var(--nav-radius-full);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .nav-articles-columns {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Article Cards (Blog) - Legacy/Archive
   ======================================== */
.nav-layout-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nav-article-card {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    overflow: hidden;
    transition: all var(--nav-transition);
}

.nav-article-card:hover {
    box-shadow: var(--nav-shadow-hover);
    transform: translateY(-2px);
}

.nav-article-link {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    padding: 16px;
}

.nav-article-thumb {
    width: 200px;
    height: 130px;
    border-radius: var(--nav-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.nav-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-article-content {
    flex: 1;
    min-width: 0;
}

.nav-article-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-article-excerpt {
    font-size: 13px;
    color: var(--nav-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
}

.nav-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
}

.nav-article-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

.nav-article-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--nav-text-muted);
}

/* ========================================
   Rankings
   ======================================== */
.nav-rankings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.nav-rank-tab {
    padding: 6px 14px;
    background: var(--nav-bg-tag);
    border: 1px solid var(--nav-border-light);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
}

.nav-rank-tab:hover {
    color: var(--nav-primary);
}

.nav-rank-tab.active {
    background: var(--nav-primary);
    color: #fff;
    border-color: var(--nav-primary);
}

.nav-rankings-content {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    overflow: hidden;
}

.nav-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nav-border-light);
    transition: background var(--nav-transition);
}

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

.nav-rank-item:hover {
    background: var(--nav-bg-hover);
}

.nav-rank-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--nav-text-secondary);
    background: var(--nav-bg-tag);
    border-radius: 50%;
    flex-shrink: 0;
}

.nav-rank-num.top-3 {
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #fff;
}

.nav-rank-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--nav-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-input);
}

.nav-rank-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-rank-info {
    flex: 1;
    min-width: 0;
}

.nav-rank-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--nav-text);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-rank-title:hover {
    color: var(--nav-primary);
}

.nav-rank-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.nav-rank-stats span {
    font-size: 11px;
    color: var(--nav-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-rank-go {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nav-text-muted);
    text-decoration: none;
    border-radius: 50%;
    font-size: 12px;
    transition: all var(--nav-transition);
}

.nav-rank-go:hover {
    background: var(--nav-primary);
    color: #fff;
}

/* ========================================
   Single Page - Base Layout
   ======================================== */
.nav-single-page {
    padding: 24px 0 40px;
}

.nav-single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: flex-start;
}

.nav-single-content {
    min-width: 0;
}

.nav-single-article {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    padding: 28px;
    box-shadow: var(--nav-shadow-sm);
}

/* Common single-page classes used across templates */
.nav-single-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--nav-text);
}

.nav-single-body,
.nav-site-content {
    line-height: 1.85;
    font-size: 16px;
    color: var(--nav-text);
    margin: 20px 0;
}

.nav-single-body p,
.nav-site-content p {
    margin-bottom: 16px;
}

.nav-icon-letter {
    font-size: 28px;
    font-weight: 700;
    color: var(--nav-primary);
}

.nav-icon-letter-sm {
    font-size: 14px;
    font-weight: 700;
    color: var(--nav-primary);
}

/* Shared buttons */
.nav-visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--nav-primary);
    color: #fff;
    border: none;
    border-radius: var(--nav-radius-full);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--nav-transition);
}

.nav-visit-btn:hover {
    background: var(--nav-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(45, 92, 246, 0.3);
    color: #fff;
}

/* ========================================
   Single Site - Title Bar (OneNav style)
   ======================================== */

/* Breadcrumbs */
.nav-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
    color: var(--nav-text-muted);
    margin-bottom: 20px;
    flex-wrap: wrap;
    direction: rtl;
}

.nav-breadcrumbs a {
    color: var(--nav-text-secondary);
    text-decoration: none;
    transition: color var(--nav-transition);
}

.nav-breadcrumbs a:hover {
    color: var(--nav-primary);
}

.nav-bc-sep {
    margin: 0 8px;
    color: var(--nav-text-muted);
}

.nav-bc-current {
    color: var(--nav-text-muted);
}

/* ========================================
   Single Site - Hero (Two-Column)
   ======================================== */
.nav-site-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 24px;
}

/* Hero LEFT - Screenshot frame */
.nav-site-hero-left {
    min-width: 0;
}

.nav-site-hero-left .nav-site-screenshot-block {
    margin-bottom: 0;
}

/* Hero RIGHT - Info panel */
.nav-site-hero-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-site-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0 0 12px;
    line-height: 1.3;
}

.nav-site-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nav-text-muted);
    line-height: 1;
    margin-bottom: 16px;
}

.nav-site-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    transition: color var(--nav-transition);
}

.nav-site-meta-item i {
    font-size: 12px;
}

.nav-site-meta-item.nav-like-btn {
    cursor: pointer;
}

.nav-site-meta-item.nav-like-btn:hover {
    color: var(--nav-danger);
}

.nav-site-meta-item.nav-like-btn.liked {
    color: var(--nav-danger);
}

/* ========================================
   Single Site - Short Description
   ======================================== */
.nav-site-short-desc {
    font-size: 14px;
    color: var(--nav-text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
}

/* ========================================
   Single Site - Tags Bar (Deep Explore inline)
   ======================================== */
.nav-site-tags-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    background: var(--nav-bg-hover);
    border-radius: var(--nav-radius-sm);
    margin-bottom: 16px;
}

.nav-tags-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-tags-label i {
    color: var(--nav-primary);
}

.nav-site-tag-pill {
    display: inline-block;
    padding: 3px 12px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: all var(--nav-transition);
}

.nav-site-tag-pill:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* ========================================
   Single Site - Info Rows (Hero right panel)
   ======================================== */
.nav-site-info-rows {
    margin-bottom: 16px;
}

.nav-info-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--nav-border-light);
}

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

.nav-info-label {
    width: 120px;
    font-weight: 600;
    color: var(--nav-text-secondary);
    white-space: nowrap;
    font-size: 13px;
    flex-shrink: 0;
}

.nav-info-value {
    color: var(--nav-text);
    flex: 1;
}

.nav-info-value a,
.nav-info-other-link {
    color: var(--nav-text-link);
    text-decoration: none;
    margin-left: 8px;
}

.nav-info-other-link:first-child {
    margin-left: 0;
}

.nav-info-value a:hover,
.nav-info-other-link:hover {
    text-decoration: underline;
}

/* SEO Color Badges */
.nav-seo-color-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.nav-seo-cbadge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: opacity var(--nav-transition);
}

.nav-seo-cbadge:hover {
    opacity: 0.85;
}

.nav-seo-cbadge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #fff;
}

.nav-seo-cbadge-icon i {
    font-size: 12px;
}

.nav-seo-cbadge-val {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
}

/* Badge color variants */
.nav-seo-red .nav-seo-cbadge-icon { background: #e74c3c; }
.nav-seo-red .nav-seo-cbadge-val { background: rgba(231,76,60,0.1); color: #e74c3c; }

.nav-seo-orange .nav-seo-cbadge-icon { background: #e67e22; }
.nav-seo-orange .nav-seo-cbadge-val { background: rgba(230,126,34,0.1); color: #e67e22; }

.nav-seo-yellow .nav-seo-cbadge-icon { background: #f1c40f; }
.nav-seo-yellow .nav-seo-cbadge-val { background: rgba(241,196,15,0.1); color: #b7950b; }

.nav-seo-green .nav-seo-cbadge-icon { background: #27ae60; }
.nav-seo-green .nav-seo-cbadge-val { background: rgba(39,174,96,0.1); color: #27ae60; }

.nav-seo-purple .nav-seo-cbadge-icon { background: #8e44ad; }
.nav-seo-purple .nav-seo-cbadge-val { background: rgba(142,68,173,0.1); color: #8e44ad; }

.nav-seo-blue .nav-seo-cbadge-icon { background: #2980b9; }
.nav-seo-blue .nav-seo-cbadge-val { background: rgba(41,128,185,0.1); color: #2980b9; }

/* Action Buttons Row */
.nav-site-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

.nav-action-info {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all var(--nav-transition);
    flex-shrink: 0;
}

.nav-action-info:hover {
    background: var(--nav-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(45, 92, 246, 0.3);
}

.nav-action-mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    color: var(--nav-danger);
    border: 2px solid var(--nav-danger);
    border-radius: var(--nav-radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--nav-transition);
    white-space: nowrap;
}

.nav-action-mobile:hover {
    background: rgba(255, 71, 87, 0.06);
    color: var(--nav-danger);
}

.nav-action-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--nav-danger);
    color: #fff;
    border: 2px solid var(--nav-danger);
    border-radius: var(--nav-radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--nav-transition);
    white-space: nowrap;
}

.nav-action-open:hover {
    background: #e63946;
    border-color: #e63946;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

/* ========================================
   Single Site - Screenshot Browser Chrome
   ======================================== */
.nav-site-screenshot-block {
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--nav-shadow-sm);
    background: var(--nav-bg-card);
}

.nav-browser-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--nav-bg-hover);
    border-bottom: 1px solid var(--nav-border);
}

.nav-browser-chrome-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nav-chrome-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.nav-browser-title {
    font-size: 13px;
    color: var(--nav-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bookmark Badge (Red pill in chrome bar) */
.nav-bookmark-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--nav-danger);
    color: #fff;
    border: none;
    border-radius: var(--nav-radius-full);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-bookmark-badge:hover {
    background: #e63946;
    transform: translateY(-1px);
}

.nav-bookmark-badge i {
    font-size: 11px;
}

.nav-browser-viewport {
    background: var(--nav-bg-input);
    min-height: 200px;
}

.nav-browser-viewport img {
    width: 100%;
    height: auto;
    display: block;
}

/* Ad slot in sidebar */
.nav-sidebar-ad .nav-ad-slot {
    text-align: center;
    padding: 20px;
    color: var(--nav-text-muted);
    font-size: 13px;
}

.nav-ad-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 16px;
    background: var(--nav-primary);
    color: #fff;
    border-radius: var(--nav-radius-full);
    text-decoration: none;
    font-size: 12px;
    transition: all var(--nav-transition);
}

.nav-ad-cta:hover {
    background: var(--nav-primary-hover);
    color: #fff;
}

/* ========================================
   Single Site - Sections (Stats, Eval, etc.)
   ======================================== */
.nav-section-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-section-heading i {
    color: var(--nav-primary);
    font-size: 16px;
}

/* Deep Exploration Section */
.nav-deep-section {
    margin: 20px 0;
    padding: 18px;
    background: var(--nav-bg-hover);
    border-radius: var(--nav-radius);
}

.nav-deep-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-deep-pill {
    display: inline-block;
    padding: 5px 14px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--nav-transition);
}

.nav-deep-pill:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* Stats Section */
.nav-stats-section {
    margin: 20px 0;
    padding: 18px;
    background: var(--nav-bg-hover);
    border-radius: var(--nav-radius);
}

.nav-stats-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.nav-sbox {
    text-align: center;
    padding: 16px 8px;
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius-sm);
    border: 1px solid var(--nav-border-light);
    transition: all var(--nav-transition);
}

.nav-sbox:hover {
    border-color: var(--nav-primary);
    box-shadow: 0 2px 8px rgba(45, 92, 246, 0.08);
}

.nav-sbox-num {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--nav-primary);
    margin-bottom: 4px;
    line-height: 1.2;
}

.nav-sbox-lbl {
    font-size: 12px;
    color: var(--nav-text-muted);
}

/* Evaluation Section */
.nav-eval-section {
    margin: 20px 0;
    padding: 18px;
    background: var(--nav-bg-hover);
    border-radius: var(--nav-radius);
}

.nav-eval-body p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--nav-text-secondary);
    margin: 0 0 12px;
}

.nav-eval-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-eval-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-link);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all var(--nav-transition);
}

.nav-eval-link:hover {
    border-color: var(--nav-primary);
    background: var(--nav-primary-light);
    color: var(--nav-primary);
}

.nav-eval-link i {
    font-size: 12px;
}

/* Disclaimer Section */
.nav-disclaimer-section {
    margin: 20px 0;
    padding: 18px;
    background: rgba(243, 156, 18, 0.05);
    border: 1px solid rgba(243, 156, 18, 0.15);
    border-radius: var(--nav-radius);
}

.nav-disclaimer-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nav-warning);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-disclaimer-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--nav-text-secondary);
    margin: 0 0 8px;
}

.nav-disclaimer-credit {
    font-size: 13px;
    line-height: 1.8;
    color: var(--nav-text-secondary);
    margin: 0;
}

.nav-disclaimer-credit a {
    color: var(--nav-text-link);
    word-break: break-all;
}

/* ========================================
   Single Site - Related Cards (OneNav style)
   ======================================== */
.nav-related-block {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    padding: 20px;
    margin-top: 16px;
    box-shadow: var(--nav-shadow-sm);
}

.nav-related-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-related-heading i {
    color: var(--nav-primary);
}

.nav-related-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.nav-rel-card {
    display: flex;
    align-items: center;
    background: var(--nav-bg-hover);
    border-radius: var(--nav-radius-sm);
    border: 1px solid var(--nav-border-light);
    overflow: hidden;
    transition: all var(--nav-transition);
}

.nav-rel-card:hover {
    border-color: var(--nav-primary);
    box-shadow: 0 2px 10px rgba(45, 92, 246, 0.08);
}

.nav-rel-card-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    min-width: 0;
}

.nav-rel-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-card);
}

.nav-rel-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-rel-info {
    flex: 1;
    min-width: 0;
}

.nav-rel-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-rel-desc {
    font-size: 11px;
    color: var(--nav-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-rel-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 100%;
    min-height: 56px;
    color: var(--nav-text-muted);
    border-right: 1px solid var(--nav-border-light);
    text-decoration: none;
    transition: all var(--nav-transition);
    flex-shrink: 0;
}

.nav-rel-go:hover {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* ========================================
   Single Site - Comments Block
   ======================================== */
.nav-comments-block {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    padding: 24px;
    margin-top: 16px;
    box-shadow: var(--nav-shadow-sm);
}

.nav-comments-block .comment-respond h3,
.nav-comments-block .comments-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--nav-text);
    margin-bottom: 16px;
}

.nav-comments-block textarea,
.nav-comments-block input[type="text"],
.nav-comments-block input[type="email"],
.nav-comments-block input[type="url"] {
    background: var(--nav-bg-input);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-sm);
    padding: 10px 14px;
    font-family: var(--nav-font);
    font-size: 14px;
    color: var(--nav-text);
    width: 100%;
    transition: border var(--nav-transition);
    box-sizing: border-box;
}

.nav-comments-block textarea:focus,
.nav-comments-block input:focus {
    outline: none;
    border-color: var(--nav-primary);
}

.nav-comments-block .submit {
    background: var(--nav-primary);
    color: #fff;
    border: none;
    border-radius: var(--nav-radius-full);
    padding: 10px 24px;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--nav-font);
    transition: all var(--nav-transition);
}

.nav-comments-block .submit:hover {
    background: var(--nav-primary-hover);
}

/* ========================================
   Single Page - Sidebar Widgets (OneNav style)
   ======================================== */
.nav-single-sidebar {
    position: sticky;
    top: calc(var(--nav-header-height) + 20px);
}

.nav-sidebar-widget {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--nav-shadow-sm);
}

.nav-widget-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nav-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-widget-title i {
    color: var(--nav-primary);
}

.nav-widget-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-widget-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--nav-radius-sm);
    text-decoration: none;
    transition: background var(--nav-transition);
}

.nav-widget-item:hover {
    background: var(--nav-bg-hover);
}

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

.nav-widget-rank.top {
    background: var(--nav-primary);
    color: #fff;
}

.nav-widget-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-input);
}

.nav-widget-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-widget-name {
    font-size: 13px;
    color: var(--nav-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ========================================
   NSS - Enhanced Single Site (Innovative Elements)
   ======================================== */

/* --- Chrome dots --- */
.nss-chrome-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    margin-inline-end: 8px;
}
.nss-chrome-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}
.nss-chrome-dots i:nth-child(1) { background: #ff5f57; }
.nss-chrome-dots i:nth-child(2) { background: #febc2e; }
.nss-chrome-dots i:nth-child(3) { background: #28c840; }

/* --- Chrome actions & device toggle --- */
.nss-chrome-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nss-device-toggle {
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--nav-text-muted);
    cursor: pointer;
    transition: all var(--nav-transition);
    line-height: 1;
}
.nss-device-toggle:hover,
.nss-device-toggle.active {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* --- Screenshot viewport & zoom --- */
.nss-viewport {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}
.nss-screenshot-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.nss-viewport:hover .nss-screenshot-img {
    transform: scale(1.03);
}
.nss-zoom-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.nss-zoom-overlay i {
    font-size: 32px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.nss-viewport:hover .nss-zoom-overlay {
    opacity: 1;
}

/* --- Screenshot lightbox (fullscreen) --- */
.nss-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.nss-lightbox.active {
    opacity: 1;
    visibility: visible;
}
.nss-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.nss-lightbox-close {
    position: absolute;
    top: 20px;
    left: 20px;
    right: auto;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
[dir="ltr"] .nss-lightbox-close {
    left: auto;
    right: 20px;
}
.nss-lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

/* --- Mobile View Toggle for Screenshot --- */
.nss-viewport.nss-mobile-view {
    max-width: 375px;
    margin: 0 auto;
    border-radius: 20px;
    transition: max-width 0.4s ease;
}
.nss-viewport.nss-mobile-view .nss-screenshot-img {
    border-radius: 16px;
}

/* --- QR Widget Highlight Animation --- */
.nss-qr-highlight {
    animation: nssQrPulse 1s ease 2;
}
@keyframes nssQrPulse {
    0%, 100% { box-shadow: var(--nav-shadow); }
    50% { box-shadow: 0 0 0 4px var(--nav-primary-light), var(--nav-shadow-lg); }
}

/* --- Domain Intelligence Chips --- */
.nss-domain-intel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 14px;
}
.nss-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--nav-radius-full);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid var(--nav-border);
    background: var(--nav-bg-input);
    color: var(--nav-text-secondary);
    transition: all var(--nav-transition);
}
.nss-chip i { font-size: 10px; }
.nss-chip-secure {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.3);
    color: #059669;
}
.nss-chip-warn {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
    color: #d97706;
}
.nss-chip-trust {
    background: color-mix(in srgb, var(--trust-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--trust-color) 30%, transparent);
    color: var(--trust-color);
    font-weight: 600;
}

/* --- Quick Actions Bar --- */
.nss-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
.nss-qaction {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--nav-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--nav-text-secondary);
    background: var(--nav-bg-input);
    border: 1px solid var(--nav-border);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--nav-transition);
    line-height: 1.3;
    font-family: var(--nav-font);
}
.nss-qaction:hover {
    background: var(--nav-primary-light);
    color: var(--nav-primary);
    border-color: var(--nav-primary);
}
.nss-qaction i { font-size: 14px; }
.nss-qaction.copied {
    background: rgba(16,185,129,0.1);
    border-color: #10b981;
    color: #10b981;
}

/* --- Domain code inline --- */
.nss-domain-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    background: var(--nav-bg-input);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--nav-primary);
    letter-spacing: 0.02em;
}

/* --- Site Vitals Dashboard --- */
.nss-vitals {
    scroll-margin-top: calc(var(--nav-header-height) + 20px);
}
.nss-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.nss-stat-card {
    background: var(--nav-bg-input);
    border-radius: var(--nav-radius);
    padding: 16px 12px;
    text-align: center;
    border: 1px solid var(--nav-border);
    transition: all var(--nav-transition);
    position: relative;
    overflow: hidden;
}
.nss-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--nav-shadow);
    border-color: var(--stat-color, var(--nav-primary));
}
.nss-stat-icon {
    font-size: 20px;
    color: var(--stat-color, var(--nav-primary));
    margin-bottom: 8px;
}
.nss-stat-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--nav-text);
    line-height: 1.2;
    margin-bottom: 4px;
}
.nss-stat-lbl {
    font-size: 11px;
    color: var(--nav-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.nss-stat-bar {
    height: 4px;
    background: var(--nav-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: auto;
}
.nss-stat-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--bar-color, var(--nav-primary));
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.nss-stat-bar span.animated {
    width: var(--bar-pct, 0%);
}

/* --- Engagement Radar Chart --- */
.nss-radar-wrap {
    max-width: 340px;
    margin: 0 auto;
    text-align: center;
}
.nss-radar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nav-text-secondary);
    margin: 0 0 12px;
}
.nss-radar {
    position: relative;
    padding: 30px 20px;
}
.nss-radar-svg {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    display: block;
}
.nss-radar-grid {
    fill: none;
    stroke: var(--nav-border);
    stroke-width: 0.5;
}
.nss-radar-axis {
    stroke: var(--nav-border);
    stroke-width: 0.3;
    stroke-dasharray: 3 3;
}
.nss-radar-shape {
    fill: rgba(var(--nav-primary-rgb, 59,130,246), 0.15);
    stroke: var(--nav-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: all 0.6s ease;
}
.nss-radar-dot {
    fill: var(--nav-primary);
    stroke: #fff;
    stroke-width: 1.5;
}
.nss-radar-label {
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    color: var(--nav-text-muted);
    white-space: nowrap;
}

/* --- Security & Trust Card --- */
.nss-trust-card {
    /* inherits .nav-single-article base styles */
}
.nss-trust-body {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.nss-trust-ring-wrap {
    flex-shrink: 0;
    text-align: center;
    position: relative;
    width: 120px;
}
.nss-trust-ring-svg {
    width: 120px;
    height: 120px;
}
.nss-trust-ring-progress {
    transition: stroke-dasharray 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nss-trust-ring-val {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    display: flex;
    align-items: baseline;
    gap: 1px;
}
.nss-trust-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--nav-text);
    line-height: 1;
}
.nss-trust-pct {
    font-size: 14px;
    font-weight: 600;
    color: var(--nav-text-muted);
}
.nss-trust-lbl {
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
    text-align: center;
}
.nss-trust-checks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nss-trust-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--nav-text-secondary);
}
.nss-trust-check i { font-size: 16px; flex-shrink: 0; }
.nss-trust-check.pass i { color: #10b981; }
.nss-trust-check.fail i { color: #ef4444; }
.nss-trust-check.warn i { color: #f59e0b; }
.nss-trust-check.neutral i { color: #9ca3af; }

/* --- Access Guide --- */
.nss-access-guide {
    /* inherits .nav-single-article */
}
.nss-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-right: 28px;
}
[dir="ltr"] .nss-steps {
    padding-right: 0;
    padding-left: 28px;
}
.nss-steps::before {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    bottom: 18px;
    width: 2px;
    background: var(--nav-border);
    border-radius: 1px;
}
[dir="ltr"] .nss-steps::before {
    right: auto;
    left: 12px;
}
.nss-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}
.nss-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nav-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--nav-bg-card);
}
.nss-step-content {
    flex: 1;
    min-width: 0;
}
.nss-step-content strong {
    display: block;
    font-size: 14px;
    color: var(--nav-text);
    margin-bottom: 2px;
}
.nss-step-content p {
    font-size: 13px;
    color: var(--nav-text-secondary);
    margin: 0;
    line-height: 1.6;
}
.nss-step-content code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    background: var(--nav-bg-input);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--nav-primary);
}

/* --- Related Sites (Horizontal Scroll) --- */
.nss-related {
    margin-top: 16px;
}
.nss-related-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--nav-border) transparent;
}
.nss-related-scroll::-webkit-scrollbar {
    height: 6px;
}
.nss-related-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.nss-related-scroll::-webkit-scrollbar-thumb {
    background: var(--nav-border);
    border-radius: 3px;
}
.nss-rel-card {
    flex: 0 0 180px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    overflow: hidden;
    transition: all var(--nav-transition);
    position: relative;
}
.nss-rel-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--nav-shadow);
    border-color: var(--nav-primary);
}
.nss-rel-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px 12px;
    text-decoration: none;
    text-align: center;
}
.nss-rel-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--nav-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.nss-rel-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nss-rel-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nss-rel-desc {
    font-size: 11px;
    color: var(--nav-text-muted);
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nss-rel-views {
    font-size: 10px;
    color: var(--nav-text-muted);
}
.nss-rel-views i { margin-inline-end: 3px; }
.nss-rel-go {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--nav-bg-input);
    border: 1px solid var(--nav-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nav-text-muted);
    font-size: 10px;
    text-decoration: none;
    opacity: 0;
    transition: all var(--nav-transition);
}
[dir="ltr"] .nss-rel-go {
    left: auto;
    right: 8px;
}
.nss-rel-card:hover .nss-rel-go {
    opacity: 1;
}
.nss-rel-go:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
}

/* --- QR Code Sidebar Widget --- */
.nss-qr-widget .nss-qr-body {
    text-align: center;
    padding: 12px 0 4px;
}
.nss-qr-img {
    width: 120px;
    height: 120px;
    margin: 0 auto 8px;
    display: block;
    border-radius: 8px;
    border: 2px solid var(--nav-border);
    padding: 4px;
    background: #fff;
}
.nss-qr-hint {
    font-size: 11px;
    color: var(--nav-text-muted);
    margin: 0;
}

/* --- QR Popup --- */
.nss-qr-popup {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.nss-qr-popup.active {
    opacity: 1;
    visibility: visible;
}
.nss-qr-popup-inner {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    padding: 30px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 280px;
    position: relative;
}
.nss-qr-popup-close {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--nav-text-muted);
    cursor: pointer;
}
[dir="ltr"] .nss-qr-popup-close {
    left: auto;
    right: 10px;
}
.nss-qr-popup img {
    width: 180px;
    height: 180px;
    margin: 10px auto;
    display: block;
    border-radius: 8px;
}
.nss-qr-popup p {
    font-size: 13px;
    color: var(--nav-text-secondary);
    margin: 10px 0 0;
}

/* ========================================
   Taxonomy Page
   ======================================== */
.nav-tax-header {
    background: var(--nav-bg-card);
    border-bottom: 1px solid var(--nav-border);
    padding: 24px 0;
}

.nav-tax-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.nav-tax-icon {
    font-size: 28px;
    color: var(--nav-primary);
}

.nav-tax-page-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--nav-text);
}

.nav-tax-desc {
    font-size: 14px;
    color: var(--nav-text-secondary);
    margin: 0 0 4px;
}

.nav-tax-count {
    font-size: 12px;
    color: var(--nav-text-muted);
    background: var(--nav-bg-tag);
    padding: 2px 10px;
    border-radius: var(--nav-radius-full);
}

.nav-tax-children {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-tax-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--nav-bg-input);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--nav-transition);
}

.nav-tax-child:hover {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
}

.nav-child-count {
    font-size: 11px;
    background: var(--nav-border);
    padding: 1px 6px;
    border-radius: 10px;
}

/* Load More */
.nav-load-more-wrap {
    text-align: center;
    padding: 24px 0;
}

.nav-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: var(--nav-bg-card);
    color: var(--nav-text-secondary);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
}

.nav-load-more-btn:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
    background: var(--nav-primary-light);
}

.nav-load-more-btn.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* No Results */
.nav-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--nav-text-muted);
}

.nav-no-results i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

/* ========================================
   Footer
   ======================================== */
.nav-footer {
    background: var(--nav-bg-footer);
    padding: 40px 0 20px;
    margin-top: auto;
}

.nav-footer-inner {
    color: rgba(255,255,255,0.7);
}

.nav-footer-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
}

.nav-footer-logo {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}

.nav-footer-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin: 0;
    max-width: 400px;
}

.nav-footer-menu {
    list-style: none;
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.nav-footer-menu li a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--nav-transition);
}

.nav-footer-menu li a:hover {
    color: #fff;
}

.nav-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-footer-copyright {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* Back to Top */
.nav-back-to-top {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: all var(--nav-transition);
}

.nav-back-to-top:hover {
    background: var(--nav-primary);
    color: #fff;
}

/* ========================================
   Mobile Overlay
   ======================================== */
.nav-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--nav-transition);
}

.nav-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1200px) {
    .nav-sidebar {
        width: 180px;
    }
    
    .nav-layout-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 992px) {
    .nav-layout {
        flex-direction: column;
    }
    
    .nav-sidebar {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 260px;
        max-height: 100vh;
        z-index: 1000;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform var(--nav-transition);
    }
    
    .nav-sidebar.mobile-open {
        display: block;
        transform: translateX(0);
    }
    
    .nav-mobile-toggle {
        display: flex;
    }
    
    .nav-header-nav {
        display: none;
    }
    
    .nav-single-layout {
        grid-template-columns: 1fr;
    }
    
    .nav-single-sidebar {
        position: static;
    }
    
    .nav-hero {
        padding: 30px 0;
    }
    
    .nav-hero-title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .nav-layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-article-link {
        flex-direction: column;
    }
    
    .nav-article-thumb {
        width: 100%;
        height: 180px;
    }
    
    .nav-submit-btn span {
        display: none;
    }
    
    .nav-search-tabs {
        gap: 3px;
    }
    
    .nav-search-tab span {
        display: none;
    }
    
    .nav-search-tab {
        padding: 6px 10px;
    }
    
    .nav-footer-info {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav-single-actions {
        flex-direction: column;
    }
    
    .nav-visit-btn {
        justify-content: center;
    }
    
    .nav-single-stats {
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    
    .nav-hero {
        padding: 20px 0;
    }
    
    .nav-hero-title {
        font-size: 20px;
    }
    
    .nav-card-header {
        gap: 10px;
    }
    
    .nav-card-icon {
        width: 40px;
        height: 40px;
    }
    
    .nav-section-title {
        font-size: 16px;
    }

    .nav-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Animations
   ======================================== */
.nav-site-card,
.nav-app-card,
.nav-article-card,
.nav-book-card {
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Scrollbar customization */
.nav-directory-body::-webkit-scrollbar {
    width: 8px;
}

.nav-directory-body::-webkit-scrollbar-track {
    background: var(--nav-bg);
}

.nav-directory-body::-webkit-scrollbar-thumb {
    background: var(--nav-border);
    border-radius: 4px;
}

.nav-directory-body::-webkit-scrollbar-thumb:hover {
    background: var(--nav-text-muted);
}

/* ========================================
   Comments Styling Override
   ======================================== */
.nav-single-comments {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    padding: 24px;
    margin-top: 20px;
}

.nav-single-comments .comment-respond h3,
.nav-single-comments .comments-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--nav-text);
    margin-bottom: 16px;
}

.nav-single-comments textarea,
.nav-single-comments input[type="text"],
.nav-single-comments input[type="email"],
.nav-single-comments input[type="url"] {
    background: var(--nav-bg-input);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-sm);
    padding: 10px 14px;
    font-family: var(--nav-font);
    font-size: 14px;
    color: var(--nav-text);
    width: 100%;
    transition: border var(--nav-transition);
}

.nav-single-comments textarea:focus,
.nav-single-comments input:focus {
    outline: none;
    border-color: var(--nav-primary);
}

.nav-single-comments .submit {
    background: var(--nav-primary);
    color: #fff;
    border: none;
    border-radius: var(--nav-radius-full);
    padding: 10px 24px;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--nav-font);
    transition: all var(--nav-transition);
}

.nav-single-comments .submit:hover {
    background: var(--nav-primary-hover);
}

/* ========================================
   Submit Site Page
   ======================================== */
.nav-submit-page {
    padding: 40px 0;
}

.nav-submit-wrapper {
    max-width: 680px;
    margin: 0 auto;
}

.nav-submit-card {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius-lg);
    border: 1px solid var(--nav-border);
    padding: 32px;
    box-shadow: var(--nav-shadow);
}

.nav-submit-header {
    text-align: center;
    margin-bottom: 28px;
}

.nav-submit-header i {
    font-size: 48px;
    color: var(--nav-primary);
    margin-bottom: 12px;
    display: block;
}

.nav-submit-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0 0 6px;
}

.nav-submit-header p {
    font-size: 14px;
    color: var(--nav-text-secondary);
    margin: 0;
}

.nav-submit-success,
.nav-submit-login-required {
    text-align: center;
    padding: 40px 20px;
}

.nav-submit-success i,
.nav-submit-login-required i {
    font-size: 52px;
    margin-bottom: 16px;
    display: block;
}

.nav-submit-success i { color: var(--nav-success); }
.nav-submit-login-required i { color: var(--nav-warning); }

.nav-submit-success h2,
.nav-submit-login-required p {
    font-size: 18px;
    color: var(--nav-text);
    margin-bottom: 12px;
}

.nav-submit-errors {
    background: rgba(255, 71, 87, 0.08);
    border: 1px solid rgba(255, 71, 87, 0.25);
    border-radius: var(--nav-radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
}

.nav-submit-errors p {
    color: var(--nav-danger);
    font-size: 13px;
    margin: 4px 0;
}

.nav-submit-errors p i {
    margin-left: 6px;
}

/* Fetch Section */
.nav-fetch-section {
    margin-bottom: 20px;
}

.nav-fetch-input-wrap {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.nav-fetch-input-wrap .nav-form-input {
    flex: 1;
}

.nav-fetch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    background: linear-gradient(135deg, var(--nav-primary), #764ba2);
    color: #fff;
    border: none;
    border-radius: var(--nav-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
    white-space: nowrap;
}

.nav-fetch-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(45, 92, 246, 0.3);
}

.nav-fetch-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.nav-fetch-status {
    margin-top: 10px;
    font-size: 13px;
    color: var(--nav-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Fetch Preview */
.nav-fetch-preview {
    margin-bottom: 20px;
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    overflow: hidden;
    animation: fadeInUp 0.3s ease;
}

.nav-preview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--nav-bg-hover);
}

.nav-preview-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--nav-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--nav-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-preview-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-preview-info {
    flex: 1;
    min-width: 0;
}

.nav-preview-info h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-preview-info p {
    font-size: 12px;
    color: var(--nav-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-preview-screenshot {
    border-top: 1px solid var(--nav-border);
}

.nav-preview-screenshot img {
    width: 100%;
    height: auto;
    display: block;
}

/* Form Styles */
.nav-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--nav-text);
    margin-bottom: 6px;
}

.nav-form-label .required {
    color: var(--nav-danger);
}

.nav-form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--nav-bg-input);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-sm);
    font-size: 14px;
    font-family: var(--nav-font);
    color: var(--nav-text);
    transition: border var(--nav-transition);
    box-sizing: border-box;
}

.nav-form-input:focus {
    outline: none;
    border-color: var(--nav-primary);
    box-shadow: 0 0 0 3px rgba(45, 92, 246, 0.1);
}

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

.nav-form-group {
    margin-bottom: 18px;
}

.nav-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.nav-favicon-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-favicon-input-wrap .nav-form-input {
    flex: 1;
}

.nav-favicon-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--nav-bg-input);
}

.nav-submit-btn-form {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 16px;
}

/* ========================================
   Shared: Deep Exploration (used by book)
   ======================================== */
.nav-deep-explore {
    margin: 24px 0;
    padding: 20px;
    background: var(--nav-bg-hover);
    border-radius: var(--nav-radius);
}

.nav-deep-explore h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-deep-explore h3 i {
    color: var(--nav-primary);
}

.nav-deep-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-deep-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--nav-transition);
}

.nav-deep-tag:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* ========================================
   Shared: Related Section (used by app/book)
   ======================================== */
.nav-related-section {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    padding: 24px;
    margin-top: 20px;
}

.nav-related-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-related-title i {
    color: var(--nav-primary);
}

.nav-related-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.nav-related-books-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* ========================================
   Single App - Hero Layout
   ======================================== */
.nav-app-hero {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    margin-bottom: 18px;
    padding: 18px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-sm);
}

/* Screenshots Slider in Hero Left */
.nav-app-hero-left {
    position: relative;
    overflow: hidden;
    border-radius: var(--nav-radius);
}

.nav-app-screenshots-block {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--nav-border-light);
    max-height: 360px;
}

.nav-app-screenshots-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-app-screenshots-slider::-webkit-scrollbar { display: none; }

.nav-app-ss-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.nav-app-ss-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nav-app-ss-nav {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    pointer-events: none;
}

.nav-ss-prev, .nav-ss-next {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    pointer-events: auto;
    transition: all var(--nav-transition);
    backdrop-filter: blur(4px);
}
.nav-ss-prev:hover, .nav-ss-next:hover {
    background: rgba(0,0,0,0.7);
    transform: scale(1.1);
}

.nav-app-ss-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: var(--nav-bg-hover);
}
.nav-ss-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--nav-border);
    cursor: pointer;
    transition: all var(--nav-transition);
}
.nav-ss-dot.active {
    background: var(--nav-primary);
    width: 16px;
    border-radius: 3px;
}

/* Hero Left - Icon fallback (no screenshots) */
.nav-app-icon-hero {
    width: 100%;
    max-height: 280px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--nav-primary-light), var(--nav-bg-input));
    border-radius: 10px;
    overflow: hidden;
}
.nav-app-icon-hero img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    border-radius: 16px;
}

/* Hero Right - Info Panel */
.nav-app-hero-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav-app-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.nav-app-title-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--nav-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--nav-shadow-sm);
}
.nav-app-title-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
}

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

.nav-app-ver-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    background: var(--nav-primary-light);
    color: var(--nav-primary);
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 6px;
}

.nav-app-developer {
    font-size: 13px;
    color: var(--nav-text-secondary);
    margin-top: 2px;
    display: block;
}

/* App Badges */
.nav-app-badges-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--nav-radius-full);
    font-size: 12px;
    font-weight: 500;
}
.nav-badge-official {
    background: rgba(46, 204, 113, 0.1);
    color: var(--nav-success);
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.nav-badge-noad {
    background: rgba(45, 92, 246, 0.08);
    color: var(--nav-primary);
    border: 1px solid rgba(45, 92, 246, 0.2);
}
.nav-badge-rating {
    background: rgba(255, 193, 7, 0.1);
    color: #e6a000;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Platform Icons */
.nav-platform-icons {
    display: flex;
    gap: 8px;
}
.nav-platform-icon {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: 8px;
    color: var(--nav-text-secondary);
    font-size: 16px;
    transition: all var(--nav-transition);
}
.nav-platform-icon:hover {
    color: var(--nav-primary);
    border-color: var(--nav-primary);
}

/* Store button */
.nav-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ========================================
   Single Book - Arabic Book Reader Design
   ======================================== */
.nav-book-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 20px;
    margin-bottom: 16px;
    padding: 20px 40px 20px 24px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-sm);
}

/* Floating bookmark + share icons (left edge) */
.nav-book-float-actions {
    position: absolute;
    left: 14px;
    top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
}
.nav-book-float-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--nav-text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: all var(--nav-transition);
    padding: 0;
}
.nav-book-float-btn:hover,
.nav-book-float-btn.active {
    color: var(--nav-primary);
}

/* Hero Info (Right side in RTL) */
.nav-book-hero-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    order: 1;
}

.nav-book-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0 0 10px;
    line-height: 1.35;
}

/* Compact info grid inside hero */
.nav-book-hero-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 10px;
    border: 1px solid var(--nav-border-light);
    border-radius: var(--nav-radius-sm);
    overflow: hidden;
}
.nav-book-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--nav-border-light);
    border-left: 1px solid var(--nav-border-light);
    font-size: 13px;
    background: var(--nav-bg-card);
    transition: background var(--nav-transition);
}
.nav-book-detail-item:hover {
    background: var(--nav-bg-hover);
}
.nav-book-detail-item:nth-child(odd) {
    border-left: none;
}
.nav-book-detail-item:nth-last-child(1),
.nav-book-detail-item:nth-last-child(2) {
    border-bottom: none;
}
/* If odd count, last child spans full width */
.nav-book-detail-item:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
    border-left: none;
}
.nav-book-detail-label {
    color: var(--nav-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-book-detail-label i {
    width: 14px;
    text-align: center;
    font-size: 11px;
    opacity: 0.6;
    margin-left: 2px;
}
.nav-book-detail-value {
    color: var(--nav-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-book-detail-value a {
    color: var(--nav-primary);
    text-decoration: none;
}
.nav-book-detail-value a:hover {
    text-decoration: underline;
}

/* Hero actions row */
.nav-book-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Stats row: readings | ratings | stars */
.nav-book-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--nav-text-secondary);
    flex-wrap: wrap;
}
.nav-book-stat-sep {
    color: var(--nav-border);
}
.nav-book-stat-rating {
    color: #e6a000;
    font-weight: 600;
}
.nav-book-stat-rating i {
    color: #e6a000;
    margin-right: 2px;
}
.nav-book-stat-link {
    color: var(--nav-primary);
    cursor: default;
}

/* CTA Button (coral/red) */
.nav-book-cta-wrap {
    margin-bottom: 12px;
}
.nav-book-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 10px 32px;
    background: linear-gradient(135deg, #e8604c, #d94e3f);
    color: #fff;
    border: none;
    border-radius: var(--nav-radius-full);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--nav-transition);
    box-shadow: 0 4px 16px rgba(232, 96, 76, 0.35);
}
.nav-book-cta-btn:hover {
    background: linear-gradient(135deg, #d94e3f, #c94636);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(232, 96, 76, 0.45);
    color: #fff;
}

/* Recommendation section */
.nav-book-recommend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.nav-book-recommend-q {
    font-size: 13px;
    color: var(--nav-text);
    font-weight: 500;
}
.nav-book-recommend-btns {
    display: flex;
    gap: 8px;
}
.nav-recommend-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: var(--nav-radius-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--nav-transition);
    border: 2px solid var(--nav-border);
    background: var(--nav-bg-card);
    color: var(--nav-text);
}
.nav-recommend-btn span {
    font-size: 16px;
}
.nav-recommend-btn:hover {
    border-color: var(--nav-primary);
    background: var(--nav-bg-hover);
}

.nav-recommend-yes.active {
    background: #4caf50;
    border-color: #4caf50;
    color: #fff;
}
.nav-recommend-no.active {
    background: var(--nav-text-secondary);
    border-color: var(--nav-text-secondary);
    color: #fff;
}

/* Hero Cover (Left side in RTL) */
.nav-book-hero-cover {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-book-cover-frame {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #e8604c;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.nav-book-cover-img {
    width: 100%;
    height: auto;
    display: block;
}
.nav-book-cover-placeholder {
    width: 100%;
    aspect-ratio: 2/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
.nav-book-cover-ph-deco {
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 120px;
    opacity: 0.06;
    color: #fff;
    transform: rotate(-15deg);
    pointer-events: none;
}
.nav-book-cover-ph-border {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 2px;
    pointer-events: none;
}
.nav-book-cover-ph-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
    z-index: 1;
}
.nav-book-cover-ph-icon {
    font-size: 36px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.nav-book-cover-ph-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-book-cover-ph-author {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}
.nav-book-cover-ph-publisher {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
    width: 60%;
    text-align: center;
}

/* ═══ About / Sections Below Hero ═══ */
.nav-book-about-section {
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    padding: 20px 24px;
    margin-bottom: 12px;
    box-shadow: var(--nav-shadow-sm);
}

.nav-book-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 3px solid #e8604c;
    display: inline-block;
}

/* About header: title + action bar */
.nav-book-about-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.nav-book-about-header .nav-book-section-title {
    margin-bottom: 0;
}

/* Action bar */
.nav-book-actions-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nav-book-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--nav-bg-soft, #f5f5f5);
    border: 1px solid var(--nav-border-light, #e0e0e0);
    border-radius: var(--nav-radius-sm, 6px);
    color: var(--nav-text-secondary, #666);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.nav-book-action-btn:hover {
    background: var(--nav-primary, #e8604c);
    color: #fff;
    border-color: var(--nav-primary, #e8604c);
}
.nav-book-action-btn svg {
    flex-shrink: 0;
}
.nav-book-action-btn span {
    font-weight: 600;
}
/* Like button integration in action bar */
.nav-book-actions-bar .misk-like-wrapper {
    margin: 0;
}
.nav-book-actions-bar .misk-like-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--nav-bg-soft, #f5f5f5);
    border: 1px solid var(--nav-border-light, #e0e0e0);
    border-radius: var(--nav-radius-sm, 6px);
    color: var(--nav-text-secondary, #666);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}
.nav-book-actions-bar .misk-like-button:hover {
    background: var(--nav-primary, #e8604c);
    color: #fff;
    border-color: var(--nav-primary, #e8604c);
}
.nav-book-actions-bar .misk-like-button.liked {
    color: var(--nav-primary, #e8604c);
    border-color: var(--nav-primary, #e8604c);
    background: rgba(232, 96, 76, 0.08);
}
.nav-book-actions-bar .misk-like-button .misk-label {
    padding: 0;
}

/* Meta pills: pages | language | size */
.nav-book-meta-pills {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 14px;
    border: 1px solid var(--nav-border-light);
    border-radius: var(--nav-radius-sm);
    overflow: hidden;
    width: fit-content;
}
.nav-book-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 18px;
    border-left: 1px solid var(--nav-border-light);
}
.nav-book-pill:first-child {
    border-left: none;
}
.nav-pill-label {
    font-size: 12px;
    color: var(--nav-text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}
.nav-pill-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--nav-text);
}

/* Description */
.nav-book-description {
    font-size: 16px;
    line-height: 1.85;
    color: var(--nav-text);
    margin-bottom: 8px;
}
.nav-book-description p {
    margin: 0 0 12px;
}
.nav-book-description .entry-content {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Download/Purchase buttons */
.nav-book-download-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.nav-book-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--nav-radius-full);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--nav-transition);
    cursor: pointer;
}
.nav-book-dl-primary {
    background: linear-gradient(135deg, #e8604c, #d94e3f);
    color: #fff;
}
.nav-book-dl-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 96, 76, 0.35);
    color: #fff;
}
.nav-book-dl-secondary {
    background: var(--nav-primary);
    color: #fff;
}
.nav-book-dl-secondary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #fff;
}
.nav-book-dl-alt {
    background: var(--nav-bg-hover);
    color: var(--nav-text);
    border: 1px solid var(--nav-border);
}
.nav-book-dl-alt:hover {
    background: var(--nav-bg-input);
    transform: translateY(-1px);
}

/* Tags */
.nav-book-tags-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.nav-book-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--nav-bg-hover);
    color: var(--nav-text);
    border: 1px solid var(--nav-border-light);
    border-radius: var(--nav-radius-full);
    font-size: 13px;
    text-decoration: none;
    transition: all var(--nav-transition);
}
.nav-book-tag:hover {
    background: var(--nav-primary-light);
    color: var(--nav-primary);
    border-color: rgba(45,92,246,0.2);
}

/* Related Books Grid */
.nav-book-related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.nav-book-related-card {
    text-decoration: none;
    text-align: center;
    transition: all var(--nav-transition);
}
.nav-book-related-card:hover {
    transform: translateY(-4px);
}
.nav-book-related-cover {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    aspect-ratio: 2/3;
    background: var(--nav-bg-hover);
    border: 1px solid var(--nav-border-light);
}
.nav-book-related-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav-book-cover-placeholder-sm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    text-align: center;
    overflow: hidden;
}
.nav-book-cover-placeholder-sm i {
    font-size: 24px;
    color: rgba(255,255,255,0.6);
}
.nav-book-cover-placeholder-sm span {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-book-related-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0 0 2px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-book-related-author {
    font-size: 12px;
    color: var(--nav-text-secondary);
}

/* Book Reader Overlay */
.nav-book-reader-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    background: var(--nav-bg);
    display: flex;
    flex-direction: column;
}
.nav-book-reader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--nav-bg-card);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
}
.nav-reader-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--nav-text);
    margin: 0;
}
.nav-reader-title i {
    margin-left: 8px;
    color: var(--nav-primary);
}
.nav-reader-close {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-hover);
    border: 1px solid var(--nav-border);
    border-radius: 50%;
    color: var(--nav-text);
    cursor: pointer;
    font-size: 16px;
    transition: all var(--nav-transition);
}
.nav-reader-close:hover {
    background: var(--nav-red);
    color: #fff;
    border-color: var(--nav-red);
}
.nav-reader-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-reader-download {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg-hover);
    border: 1px solid var(--nav-border);
    border-radius: 50%;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 14px;
    transition: all var(--nav-transition);
}
.nav-reader-download:hover {
    background: var(--nav-primary);
    color: #fff;
    border-color: var(--nav-primary);
}
.nav-book-reader-body {
    flex: 1;
    overflow: hidden;
}
.nav-book-reader-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ========================================
   Single - Responsive Additions
   ======================================== */
@media (max-width: 992px) {
    .nav-single-layout {
        grid-template-columns: 1fr;
    }

    .nav-site-hero,
    .nav-app-hero {
        grid-template-columns: 1fr;
    }

    .nav-book-hero {
        grid-template-columns: 1fr 160px;
        padding: 16px 16px 16px 36px;
    }

    .nav-single-sidebar {
        position: static;
    }

    .nav-book-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* NSS responsive 992px */
    .nss-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .nss-trust-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .nss-trust-checks {
        align-items: center;
    }
}

@media (max-width: 768px) {
    .nav-submit-card {
        padding: 20px;
    }

    .nav-fetch-input-wrap {
        flex-direction: column;
    }

    .nav-form-row {
        grid-template-columns: 1fr;
    }

    /* Single Site responsive */
    .nav-single-article {
        padding: 18px;
    }

    .nav-site-name {
        font-size: 22px;
    }

    .nav-site-meta-row {
        justify-content: center;
    }

    .nav-site-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-site-tags-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-info-label {
        width: 100px;
    }

    .nav-stats-boxes {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-related-cards {
        grid-template-columns: 1fr;
    }

    .nav-eval-links {
        flex-direction: column;
    }

    .nav-seo-color-badges {
        justify-content: center;
    }

    /* NSS responsive 768px */
    .nss-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nss-stat-val {
        font-size: 20px;
    }
    .nss-domain-intel {
        justify-content: center;
    }
    .nss-quick-actions {
        justify-content: center;
    }
    .nss-steps {
        padding-right: 20px;
    }
    [dir="ltr"] .nss-steps {
        padding-right: 0;
        padding-left: 20px;
    }
    .nss-rel-card {
        flex: 0 0 150px;
    }
    .nss-radar-wrap {
        max-width: 260px;
    }

    /* App hero responsive */
    .nav-app-hero {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .nav-app-screenshots-block {
        max-height: 280px;
    }

    .nav-app-title-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .nav-app-badges-row {
        justify-content: center;
    }

    /* Book hero responsive */
    .nav-book-hero {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 14px;
    }

    .nav-book-hero-cover {
        order: -1;
        max-width: 180px;
        margin: 0 auto;
    }

    .nav-book-hero-info {
        text-align: center;
    }

    .nav-book-hero-details {
        grid-template-columns: 1fr 1fr;
    }

    .nav-book-hero-actions {
        justify-content: center;
    }

    .nav-book-stats-row {
        justify-content: center;
    }

    .nav-book-cta-wrap {
        text-align: center;
    }

    .nav-book-recommend {
        justify-content: center;
    }

    .nav-book-float-actions {
        position: static;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 6px;
    }

    .nav-book-about-section {
        padding: 16px;
    }

    .nav-book-meta-pills {
        width: 100%;
    }
    .nav-book-pill {
        flex: 1;
    }

    .nav-book-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .nav-book-download-links {
        flex-direction: column;
    }
    .nav-book-dl-btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nav-site-name {
        font-size: 18px;
    }

    .nav-site-meta-row {
        gap: 8px;
        font-size: 12px;
    }

    .nav-sbox-num {
        font-size: 18px;
    }

    .nav-app-hero,
    .nav-book-hero {
        padding: 12px;
    }

    .nav-app-title-icon {
        width: 38px;
        height: 38px;
    }

    .nav-app-screenshots-block {
        max-height: 220px;
    }

    .nav-book-title {
        font-size: 20px;
    }

    .nav-book-hero-details {
        grid-template-columns: 1fr;
    }
    .nav-book-detail-item {
        border-left: none !important;
    }
    .nav-book-detail-item:nth-last-child(2) {
        border-bottom: 1px solid var(--nav-border-light);
    }

    .nav-book-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-book-cta-btn {
        width: 100%;
        min-width: unset;
    }

    .nav-book-about-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-book-actions-bar {
        width: 100%;
    }
    .nav-book-action-btn {
        flex: 1;
        justify-content: center;
        padding: 5px 8px;
        font-size: 12px;
    }
    .nav-book-actions-bar .misk-like-button {
        padding: 5px 8px;
        font-size: 12px;
    }
    .nav-book-action-btn span {
        display: none;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .nav-header,
    .nav-sidebar,
    .nav-footer,
    .nav-search-wrapper,
    .nav-hot-bar,
    .nav-back-to-top {
        display: none !important;
    }
    
    .nav-layout {
        display: block;
    }
}

/* ========================================
   Archive Pages
   ======================================== */
.nav-archive-page .nav-main {
    padding: 24px 0 48px;
}

.nav-archive-page .nav-tax-header {
    padding: 28px 0 20px;
}

.nav-archive-page .nav-tax-count strong {
    color: var(--nav-primary);
    font-weight: 700;
}

.nav-archive-cats {
    margin-top: 12px;
}

/* Apps Grid Layout */
.nav-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* Books Grid Layout */
.nav-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* Sites Grid Layout */
.nav-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* No Results */
.nav-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--nav-text-muted);
}

.nav-no-results i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
    display: block;
}

.nav-no-results p {
    font-size: 15px;
    margin: 0;
}

/* ========================================
   Rankings Page
   ======================================== */
.nav-rankings-page .nav-main {
    padding: 24px 0 48px;
}

.nav-rankings-header {
    padding: 28px 0 20px;
}

/* Type Tabs */
.nav-rankings-type-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.nav-rank-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
}

.nav-rank-type-tab:hover {
    border-color: var(--nav-primary);
    color: var(--nav-primary);
}

.nav-rank-type-tab.active {
    background: var(--nav-primary);
    border-color: var(--nav-primary);
    color: #fff;
}

.nav-rank-type-tab i {
    font-size: 16px;
}

/* Period Tabs */
.nav-rankings-period-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--nav-bg-input);
    border-radius: var(--nav-radius);
    padding: 4px;
    width: fit-content;
}

.nav-rank-period-tab {
    padding: 8px 18px;
    border-radius: calc(var(--nav-radius) - 2px);
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--nav-transition);
    font-family: var(--nav-font);
}

.nav-rank-period-tab:hover {
    color: var(--nav-primary);
}

.nav-rank-period-tab.active {
    background: var(--nav-bg-card);
    color: var(--nav-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Rankings List */
.nav-rankings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-rankings-list .nav-rank-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    transition: all var(--nav-transition);
}

.nav-rankings-list .nav-rank-item:hover {
    border-color: var(--nav-primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Rank Number */
.nav-rankings-list .nav-rank-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
    background: var(--nav-bg-input);
    color: var(--nav-text-muted);
}

.nav-rankings-list .nav-rank-num.top-3 {
    color: #fff;
}

.nav-rank-item.rank-gold .nav-rank-num {
    background: linear-gradient(135deg, #f7b731, #f5a623);
}

.nav-rank-item.rank-silver .nav-rank-num {
    background: linear-gradient(135deg, #adb5bd, #868e96);
}

.nav-rank-item.rank-bronze .nav-rank-num {
    background: linear-gradient(135deg, #e08d49, #cd7f32);
}

/* Rank Icon */
.nav-rankings-list .nav-rank-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--nav-radius);
    overflow: hidden;
    background: var(--nav-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-rankings-list .nav-rank-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rank Info */
.nav-rankings-list .nav-rank-info {
    flex: 1;
    min-width: 0;
}

.nav-rankings-list .nav-rank-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--nav-text);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-rankings-list .nav-rank-title:hover {
    color: var(--nav-primary);
}

.nav-rank-excerpt {
    font-size: 12px;
    color: var(--nav-text-muted);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-rankings-list .nav-rank-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--nav-text-muted);
}

.nav-rankings-list .nav-rank-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Rank Go Button */
.nav-rankings-list .nav-rank-go {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nav-radius);
    background: var(--nav-bg-input);
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: all var(--nav-transition);
}

.nav-rankings-list .nav-rank-go:hover {
    background: var(--nav-primary);
    color: #fff;
}

/* ========================================
   Archive Pages Responsive
   ======================================== */
@media (max-width: 768px) {
    .nav-archive-page .nav-tax-header {
        padding: 16px 0;
    }

    .nav-apps-grid {
        grid-template-columns: 1fr;
    }

    .nav-books-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .nav-sites-grid {
        grid-template-columns: 1fr;
    }

    .nav-rankings-type-tabs {
        gap: 6px;
    }

    .nav-rank-type-tab {
        padding: 8px 14px;
        font-size: 13px;
    }

    .nav-rank-type-tab span {
        display: none;
    }

    .nav-rank-type-tab i {
        font-size: 18px;
    }

    .nav-rankings-period-tabs {
        width: 100%;
    }

    .nav-rank-period-tab {
        flex: 1;
        text-align: center;
        padding: 8px 10px;
        font-size: 12px;
    }

    .nav-rankings-list .nav-rank-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .nav-rankings-list .nav-rank-icon {
        width: 36px;
        height: 36px;
    }

    .nav-rank-excerpt {
        display: none;
    }
}

@media (max-width: 480px) {
    .nav-books-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .nav-tax-children {
        gap: 6px;
    }

    .nav-tax-child {
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════
   BOOK FLIPPER - Interactive PDF Page Flip Viewer
   ═══════════════════════════════════════════════════ */

.nav-flipbook-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: var(--nav-font);
}

/* Toolbar */
.nav-flipbook-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    gap: 12px;
    flex-shrink: 0;
    z-index: 10;
}

.nav-flipbook-toolbar-left,
.nav-flipbook-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-flipbook-toolbar-center {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-flipbook-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.nav-flipbook-title i {
    margin-left: 6px;
    color: var(--nav-primary, #2d5cf6);
}

.nav-flip-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-flip-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
    transform: scale(1.05);
}

.nav-flip-btn:active {
    transform: scale(0.95);
}

.nav-flip-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.nav-flipbook-page-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #ccc;
    direction: ltr;
}

.nav-flip-page-input {
    width: 48px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 6px;
    padding: 4px;
    font-size: 14px;
    font-family: inherit;
    -moz-appearance: textfield;
}

.nav-flip-page-input::-webkit-inner-spin-button,
.nav-flip-page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.nav-flip-zoom-level {
    font-size: 12px;
    color: #aaa;
    min-width: 40px;
    text-align: center;
}

/* Viewport */
.nav-flipbook-viewport {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: radial-gradient(ellipse at center, #2a2a4a 0%, #1a1a2e 100%);
}

/* Loading */
.nav-flipbook-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 5;
    color: #ccc;
    font-size: 15px;
}

.nav-flipbook-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--nav-primary, #2d5cf6);
    border-radius: 50%;
    animation: navFlipSpin 0.8s linear infinite;
}

@keyframes navFlipSpin {
    to { transform: rotate(360deg); }
}

.nav-flipbook-progress {
    width: 200px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}

.nav-flipbook-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--nav-primary, #2d5cf6);
    border-radius: 4px;
    transition: width 0.3s;
}

/* Book Container */
.nav-flipbook-book {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2000px;
    position: relative;
    transition: transform 0.3s ease;
}

.nav-flipbook-book.dual-mode {
    gap: 0;
}

/* Single Page */
.nav-flip-page {
    position: relative;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000),
                box-shadow 0.6s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.nav-flip-page canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Page flip animation classes */
.nav-flip-page.flipping-left {
    animation: navFlipToLeft 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
    transform-origin: left center;
}

.nav-flip-page.flipping-right {
    animation: navFlipToRight 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
    transform-origin: right center;
}

@keyframes navFlipToLeft {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-180deg); }
}

@keyframes navFlipToRight {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

/* Entering page (new page appearing) */
.nav-flip-page.entering-left {
    animation: navFlipEnterLeft 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
    transform-origin: right center;
}

.nav-flip-page.entering-right {
    animation: navFlipEnterRight 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
    transform-origin: left center;
}

@keyframes navFlipEnterLeft {
    0% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes navFlipEnterRight {
    0% { transform: rotateY(-180deg); }
    100% { transform: rotateY(0deg); }
}

/* Page shadow during flip */
.nav-flip-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.15), transparent 40%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-flip-page.flipping-left::after,
.nav-flip-page.flipping-right::after {
    opacity: 1;
}

/* Book spine shadow (dual mode) */
.nav-flipbook-book.dual-mode .nav-flip-page:first-child {
    border-radius: 4px 0 0 4px;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2) inset, 0 4px 20px rgba(0,0,0,0.3);
}

.nav-flipbook-book.dual-mode .nav-flip-page:last-child {
    border-radius: 0 4px 4px 0;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2) inset, 0 4px 20px rgba(0,0,0,0.3);
}

/* Slider bar */
.nav-flipbook-slider-bar {
    padding: 8px 40px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.nav-flipbook-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    direction: ltr;
}

.nav-flipbook-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nav-primary, #2d5cf6);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(45,92,246,0.5);
    transition: transform 0.2s;
}

.nav-flipbook-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.nav-flipbook-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nav-primary, #2d5cf6);
    border: none;
    cursor: pointer;
}

/* Keyboard hints */
.nav-flipbook-hints {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    pointer-events: none;
    transition: opacity 0.5s;
}

.nav-flipbook-hints kbd {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 11px;
}

/* Click zones for page navigation */
.nav-flipbook-viewport::before,
.nav-flipbook-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-flipbook-viewport::before {
    right: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.03));
}

.nav-flipbook-viewport::after {
    left: 0;
    background: linear-gradient(to left, transparent, rgba(255,255,255,0.03));
}

.nav-flipbook-viewport:hover::before,
.nav-flipbook-viewport:hover::after {
    opacity: 1;
}

/* Mode toggle active state */
.nav-flip-mode-toggle.active {
    background: var(--nav-primary, #2d5cf6);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-flipbook-toolbar {
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .nav-flipbook-title {
        max-width: 150px;
        font-size: 12px;
    }

    .nav-flip-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .nav-flipbook-toolbar-center {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .nav-flipbook-hints {
        display: none;
    }

    .nav-flipbook-slider-bar {
        padding: 8px 16px;
    }
}

/* ═══════════════════════════════════════════════════
   APP STORE STYLE - Apple App Store Inspired Design
   ═══════════════════════════════════════════════════ */

/* Header: Icon + Title + GET */
.nav-appstore-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--nav-border, rgba(0,0,0,0.08));
    margin-bottom: 0;
}

.nav-appstore-icon {
    width: 120px;
    height: 120px;
    border-radius: 22%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.nav-appstore-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-appstore-icon .nav-icon-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: var(--nav-primary, #2d5cf6);
    color: #fff;
    font-weight: 700;
}

.nav-appstore-title-block {
    flex: 1;
    min-width: 0;
}

.nav-appstore-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    color: var(--nav-text, #1d1d1f);
}

.nav-appstore-developer {
    display: block;
    font-size: 15px;
    color: var(--nav-primary, #2d5cf6);
    margin-bottom: 2px;
}

.nav-appstore-category a {
    font-size: 13px;
    color: var(--nav-text-muted, #8e8e93);
    text-decoration: none;
}

.nav-appstore-get-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-appstore-get-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 32px;
    padding: 0 20px;
    border-radius: 16px;
    background: var(--nav-primary, #007aff);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.nav-appstore-get-btn:hover {
    background: var(--nav-primary-dark, #0056b3);
    transform: scale(1.05);
    color: #fff;
}

.nav-appstore-share-btn {
    background: none;
    border: none;
    color: var(--nav-primary, #007aff);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s;
}

.nav-appstore-share-btn:hover {
    transform: scale(1.1);
}

/* Info Bar (horizontal stats) */
.nav-appstore-info-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--nav-border, rgba(0,0,0,0.08));
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-appstore-info-bar::-webkit-scrollbar {
    display: none;
}

.nav-appstore-info-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 16px;
    min-width: 80px;
    border-left: 1px solid var(--nav-border, rgba(0,0,0,0.08));
}

.nav-appstore-info-cell:first-child {
    border-left: none;
}

.nav-appstore-info-label {
    font-size: 11px;
    color: var(--nav-text-muted, #8e8e93);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.nav-appstore-info-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--nav-text-muted, #8e8e93);
    line-height: 1.2;
}

.nav-appstore-rating-value {
    font-size: 22px;
    color: var(--nav-text, #1d1d1f);
}

.nav-appstore-stars {
    display: flex;
    gap: 1px;
    font-size: 11px;
    color: #ff9500;
    margin-top: 2px;
}

.nav-appstore-stars .far {
    color: #d1d1d6;
}

.nav-appstore-platforms {
    display: flex;
    gap: 8px;
    font-size: 20px;
}

/* Preview Section (Screenshots + Video) - Horizontal Scroll */
.nav-appstore-preview-section {
    padding: 20px 0;
    border-bottom: 1px solid var(--nav-border, rgba(0,0,0,0.08));
}

.nav-appstore-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--nav-text, #1d1d1f);
}

.nav-appstore-preview-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.nav-appstore-preview-scroll::-webkit-scrollbar {
    height: 6px;
}

.nav-appstore-preview-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.nav-appstore-preview-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: var(--nav-card-bg, #f5f5f7);
}

.nav-appstore-ss-item {
    height: 400px;
    cursor: pointer;
    transition: transform 0.3s;
}

.nav-appstore-ss-item:hover {
    transform: scale(1.02);
}

.nav-appstore-ss-item img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

.nav-appstore-video-item {
    width: 460px;
    height: 400px;
    background: #000;
}

.nav-appstore-video-item iframe,
.nav-appstore-video-item video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Badges */
.nav-appstore-badges {
    display: flex;
    gap: 8px;
    padding: 16px 0 0;
    flex-wrap: wrap;
}

/* Stats Row */
.nav-appstore-stats-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nav-text-muted, #8e8e93);
}

/* Action Buttons */
.nav-appstore-actions {
    display: flex;
    gap: 10px;
    padding: 16px 0;
    border-bottom: 1px solid var(--nav-border, rgba(0,0,0,0.08));
    flex-wrap: wrap;
}

.nav-appstore-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.nav-appstore-action-primary {
    background: var(--nav-primary, #007aff);
    color: #fff;
}

.nav-appstore-action-primary:hover {
    background: var(--nav-primary-dark, #0056b3);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,122,255,0.3);
}

.nav-appstore-action-store {
    background: var(--nav-card-bg, #f5f5f7);
    color: var(--nav-text, #1d1d1f);
    border: 1px solid var(--nav-border, rgba(0,0,0,0.1));
}

.nav-appstore-action-store:hover {
    background: var(--nav-hover-bg, #e5e5ea);
    color: var(--nav-text, #1d1d1f);
    transform: translateY(-1px);
}

/* Description block */
.nav-appstore-description-block {
    padding: 20px 0;
    border-bottom: 1px solid var(--nav-border, rgba(0,0,0,0.08));
}

.nav-appstore-description-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--nav-text, #1d1d1f);
    margin: 0;
}

/* Screenshot lightbox on click */
.nav-appstore-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-appstore-lightbox.active {
    opacity: 1;
}

.nav-appstore-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-appstore-header {
        padding: 16px 0;
    }

    .nav-appstore-icon {
        width: 80px;
        height: 80px;
    }

    .nav-appstore-name {
        font-size: 18px;
    }

    .nav-appstore-info-cell {
        min-width: 70px;
        padding: 6px 10px;
    }

    .nav-appstore-info-value {
        font-size: 15px;
    }

    .nav-appstore-ss-item {
        height: 280px;
    }

    .nav-appstore-video-item {
        width: 300px;
        height: 280px;
    }

    .nav-appstore-get-btn {
        min-width: 64px;
        height: 28px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .nav-appstore-icon {
        width: 64px;
        height: 64px;
    }

    .nav-appstore-ss-item {
        height: 220px;
    }

    .nav-appstore-video-item {
        width: 260px;
        height: 220px;
    }
}

/* ═══════════════════════════════════════════════════
   TIMELINE PAGE - Recently Added Items
   ═══════════════════════════════════════════════════ */

.nav-timeline-page .container {
    max-width: 900px;
}

/* Header */
.nav-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.nav-timeline-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--nav-text, #1d1d1f);
}

.nav-timeline-title i {
    margin-left: 8px;
    color: var(--nav-primary, #2d5cf6);
}

.nav-timeline-subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nav-text-muted, #8e8e93);
}

.nav-timeline-rss-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    flex-shrink: 0;
}

.nav-timeline-rss-btn:hover {
    background: #e55d00;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,102,0,0.3);
}

/* Filters */
.nav-timeline-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--nav-border, rgba(0,0,0,0.08));
    margin-bottom: 32px;
}

.nav-timeline-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-timeline-filter-label {
    font-size: 13px;
    color: var(--nav-text-muted, #8e8e93);
    font-weight: 600;
}

.nav-timeline-filter-btns {
    display: flex;
    gap: 4px;
}

.nav-timeline-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    color: var(--nav-text-muted, #8e8e93);
    background: var(--nav-card-bg, #f5f5f7);
    transition: all 0.2s;
    font-weight: 500;
}

.nav-timeline-filter-btn:hover {
    background: var(--nav-hover-bg, #e5e5ea);
    color: var(--nav-text, #1d1d1f);
}

.nav-timeline-filter-btn.active {
    background: var(--nav-primary, #2d5cf6);
    color: #fff;
}

/* Timeline */
.nav-timeline {
    position: relative;
    padding: 0 0 40px;
}

.nav-timeline-line {
    position: absolute;
    right: 24px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--nav-primary, #2d5cf6), rgba(45,92,246,0.1));
    border-radius: 3px;
}

/* Date Group */
.nav-timeline-date-group {
    margin-bottom: 32px;
}

.nav-timeline-date-marker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}

.nav-timeline-date-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--nav-primary, #2d5cf6);
    border: 3px solid var(--nav-bg, #f5f5f7);
    box-shadow: 0 0 0 3px var(--nav-primary, #2d5cf6);
    position: relative;
    right: 18px;
    flex-shrink: 0;
    z-index: 2;
}

.nav-timeline-date-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.nav-timeline-date-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--nav-text, #1d1d1f);
}

.nav-timeline-date-ago {
    font-size: 12px;
    color: var(--nav-text-muted, #8e8e93);
}

/* Timeline Items */
.nav-timeline-items {
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.nav-timeline-item-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 12px;
}

.nav-timeline-item-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--nav-card-bg, #fff);
    border: 1px solid var(--nav-border, rgba(0,0,0,0.06));
    border-radius: 14px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.nav-timeline-item-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.nav-timeline-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.nav-timeline-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-timeline-item-icon .nav-icon-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 12px;
}

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

.nav-timeline-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}

.nav-timeline-item-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nav-timeline-item-type i {
    margin-left: 3px;
}

.nav-timeline-item-cat {
    font-size: 11px;
    color: var(--nav-text-muted, #8e8e93);
    background: var(--nav-hover-bg, #f0f0f0);
    padding: 2px 8px;
    border-radius: 8px;
}

.nav-timeline-item-time {
    font-size: 11px;
    color: var(--nav-text-muted, #8e8e93);
    margin-right: auto;
}

.nav-timeline-item-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.nav-timeline-item-title a {
    color: var(--nav-text, #1d1d1f);
    text-decoration: none;
}

.nav-timeline-item-title a:hover {
    color: var(--nav-primary, #2d5cf6);
}

.nav-timeline-item-desc {
    font-size: 13px;
    color: var(--nav-text-muted, #8e8e93);
    margin: 2px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-timeline-item-go {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--nav-hover-bg, #f5f5f7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nav-text-muted, #8e8e93);
    text-decoration: none;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.nav-timeline-item-go:hover {
    background: var(--nav-primary, #2d5cf6);
    color: #fff;
}

/* Pagination */
.nav-timeline-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 32px 0;
    flex-wrap: wrap;
}

.nav-timeline-page-link a,
.nav-timeline-page-link span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-timeline-page-link a {
    color: var(--nav-text, #1d1d1f);
    background: var(--nav-card-bg, #fff);
    border: 1px solid var(--nav-border, rgba(0,0,0,0.1));
}

.nav-timeline-page-link a:hover {
    background: var(--nav-primary, #2d5cf6);
    color: #fff;
    border-color: var(--nav-primary, #2d5cf6);
}

.nav-timeline-page-link span.current {
    background: var(--nav-primary, #2d5cf6);
    color: #fff;
    border: 1px solid var(--nav-primary, #2d5cf6);
}

/* Empty state */
.nav-timeline-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--nav-text-muted, #8e8e93);
}

.nav-timeline-empty i {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.3;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-timeline-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-timeline-title {
        font-size: 20px;
    }

    .nav-timeline-filters {
        flex-direction: column;
        gap: 10px;
    }

    .nav-timeline-line {
        right: 12px;
    }

    .nav-timeline-date-dot {
        right: 6px;
    }

    .nav-timeline-items {
        padding-right: 30px;
    }

    .nav-timeline-item-card {
        padding: 10px 12px;
    }

    .nav-timeline-item-icon {
        width: 40px;
        height: 40px;
    }

    .nav-timeline-item-title {
        font-size: 14px;
    }

    .nav-timeline-item-desc {
        display: none;
    }

    .nav-timeline-item-dot {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════
   AUTHOR PROFILE PAGE
   ═══════════════════════════════════════ */

/* Author Header */
.nav-author-header {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border: 1px solid #eaeaea;
}

.nav-author-identity {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.nav-author-avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.nav-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-author-avatar-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-author-avatar-ph span {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.nav-author-core {
    flex: 1;
    min-width: 0;
}

.nav-author-name {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.2;
}

.nav-author-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
}

.nav-author-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #555;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 6px;
}

.nav-author-stat i {
    color: #1976d2;
    font-size: 12px;
}

.nav-author-stat strong {
    color: #1a1a2e;
    font-weight: 700;
}

.nav-author-wiki-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1976d2;
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid #1976d2;
    border-radius: 20px;
    transition: all .2s;
    margin-top: 4px;
}

.nav-author-wiki-link:hover {
    background: #1976d2;
    color: #fff;
}

.nav-author-wiki-link .fa-external-link-alt {
    font-size: 9px;
    opacity: .7;
}

/* Bio Section */
.nav-author-bio {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.nav-author-bio-text {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
}

.nav-author-bio-text.is-collapsed {
    max-height: none;
}

.nav-author-bio-toggle {
    background: none;
    border: none;
    color: #1976d2;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-author-bio-toggle:hover {
    color: #0d47a1;
}

/* Content Layout: Sidebar + Grid */
.nav-author-content {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

/* Sidebar */
.nav-author-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px;
}

.nav-author-panel {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border: 1px solid #eaeaea;
}

.nav-author-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-author-panel-title i {
    color: #1976d2;
    font-size: 13px;
}

.nav-author-cat-list,
.nav-author-pub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-author-cat-list li,
.nav-author-pub-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: #444;
    border-bottom: 1px dashed #f0f0f0;
}

.nav-author-cat-list li:last-child,
.nav-author-pub-list li:last-child {
    border-bottom: none;
}

.nav-author-cat-list li a {
    color: #333;
    text-decoration: none;
    flex: 1;
    transition: color .2s;
}

.nav-author-cat-list li a:hover {
    color: #1976d2;
}

.nav-author-cat-count {
    background: #f0f0f0;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

/* Year badges */
.nav-author-years {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nav-author-year-badge {
    display: inline-block;
    font-size: 12px;
    color: #555;
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #eee;
}

.nav-author-year-badge small {
    color: #999;
    font-weight: 600;
}

/* Books Section */
.nav-author-books {
    min-width: 0;
}

.nav-author-books-header {
    margin-bottom: 16px;
}

.nav-author-books-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.nav-author-books-count {
    font-size: 14px;
    font-weight: 400;
    color: #999;
}

/* Books Grid - Dense 4 columns */
.nav-author-books-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.nav-author-book-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eaeaea;
    transition: all .25s;
    display: flex;
    flex-direction: column;
}

.nav-author-book-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    border-color: #d0d0d0;
    transform: translateY(-2px);
}

.nav-author-book-cover {
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}

.nav-author-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-author-book-info {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-author-book-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-author-book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.nav-author-book-meta span {
    font-size: 11px;
    color: #888;
}

.nav-author-book-cat {
    background: #f0f4ff;
    color: #1976d2 !important;
    padding: 1px 6px;
    border-radius: 4px;
}

.nav-author-book-rating {
    color: #f59e0b !important;
}

.nav-author-book-rating i {
    font-size: 9px;
}

/* No Books */
.nav-author-no-books {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.nav-author-no-books i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: .4;
}

/* Pagination */
.nav-author-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.nav-author-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    transition: all .2s;
}

.nav-author-pagination .page-numbers:hover,
.nav-author-pagination .page-numbers.current {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
}

/* Author Link in single-book */
.nav-book-author-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed #999;
    transition: all .2s;
}

.nav-book-author-link:hover {
    color: #1976d2;
    border-bottom-color: #1976d2;
}

/* ═══════════════════════════════════════
   AUTHOR PROFILE RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
    .nav-author-books-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .nav-author-content {
        grid-template-columns: 220px 1fr;
    }

    .nav-author-books-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-author-content {
        grid-template-columns: 1fr;
    }

    .nav-author-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-author-panel {
        flex: 1 1 calc(50% - 5px);
        min-width: 140px;
    }

    .nav-author-books-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .nav-author-identity {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .nav-author-avatar {
        width: 80px;
        height: 80px;
    }

    .nav-author-quick-stats {
        justify-content: center;
    }

    .nav-author-name {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .nav-author-books-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .nav-author-panel {
        flex: 1 1 100%;
    }

    .nav-author-header {
        padding: 16px;
    }

    .nav-author-avatar {
        width: 64px;
        height: 64px;
    }

    .nav-author-avatar-ph span {
        font-size: 28px;
    }
}

/* Dark Mode */
.dark-mode .nav-author-header,
.dark-mode .nav-author-panel,
.dark-mode .nav-author-book-card {
    background: #1e1e2e;
    border-color: #333;
}

.dark-mode .nav-author-name,
.dark-mode .nav-author-panel-title,
.dark-mode .nav-author-books-title,
.dark-mode .nav-author-book-title {
    color: #e0e0e0;
}

.dark-mode .nav-author-stat {
    background: #2a2a3e;
    color: #aaa;
}

.dark-mode .nav-author-stat strong {
    color: #e0e0e0;
}

.dark-mode .nav-author-bio-text {
    color: #bbb;
}

.dark-mode .nav-author-cat-list li,
.dark-mode .nav-author-pub-list li {
    color: #bbb;
    border-bottom-color: #333;
}

.dark-mode .nav-author-cat-list li a {
    color: #ccc;
}

.dark-mode .nav-author-cat-count {
    background: #2a2a3e;
    color: #aaa;
}

.dark-mode .nav-author-year-badge {
    background: #2a2a3e;
    border-color: #333;
    color: #bbb;
}

.dark-mode .nav-author-book-cat {
    background: rgba(25,118,210,.15) !important;
}

.dark-mode .nav-author-pagination .page-numbers {
    background: #1e1e2e;
    border-color: #333;
    color: #bbb;
}

.dark-mode .nav-author-pagination .page-numbers:hover,
.dark-mode .nav-author-pagination .page-numbers.current {
    background: #1976d2;
    color: #fff;
}

.dark-mode .nav-author-bio {
    border-top-color: #333;
}

.dark-mode .nav-author-panel-title {
    border-bottom-color: #333;
}

.dark-mode .nav-book-author-link {
    border-bottom-color: #666;
}

.dark-mode .nav-book-author-link:hover {
    color: #64b5f6;
    border-bottom-color: #64b5f6;
}

/* ═══════════════════════════════════════════════════════
   APP PAGE: TABLE OF CONTENTS
   ═══════════════════════════════════════════════════════ */

.nav-app-toc {
    background: var(--nav-bg-card, #fff);
    border: 1px solid var(--nav-border, #e5e7eb);
    border-radius: var(--nav-radius, 12px);
    margin-bottom: 24px;
    overflow: hidden;
}

.nav-app-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    color: var(--nav-text, #1a1a2e);
    transition: background .2s;
}

.nav-app-toc-header:hover {
    background: var(--nav-bg-hover, #f8f9fa);
}

.nav-app-toc-header .fa-list-ul {
    color: var(--nav-primary, #2d5cf6);
    font-size: 14px;
}

.nav-app-toc-arrow {
    margin-right: auto;
    font-size: 12px;
    transition: transform .3s;
    color: var(--nav-text-muted, #666);
}

[dir="rtl"] .nav-app-toc-arrow {
    margin-right: 0;
    margin-left: auto;
}

.nav-app-toc.is-collapsed .nav-app-toc-arrow {
    transform: rotate(-90deg);
}

[dir="rtl"] .nav-app-toc.is-collapsed .nav-app-toc-arrow {
    transform: rotate(90deg);
}

.nav-app-toc-list {
    list-style: none;
    margin: 0;
    padding: 0 18px 14px;
    counter-reset: toc-counter;
    transition: max-height .3s, opacity .2s;
    max-height: 1000px;
    overflow: hidden;
}

.nav-app-toc.is-collapsed .nav-app-toc-list {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
}

.nav-app-toc-item {
    counter-increment: toc-counter;
    padding: 6px 0;
    border-bottom: 1px dashed var(--nav-border, #e5e7eb);
}

.nav-app-toc-item:last-child {
    border-bottom: none;
}

.nav-app-toc-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--nav-text, #1a1a2e);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s, padding .2s;
}

.nav-app-toc-item a::before {
    content: counter(toc-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--nav-primary-light, rgba(45,92,246,.08));
    color: var(--nav-primary, #2d5cf6);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.nav-app-toc-item a:hover {
    color: var(--nav-primary, #2d5cf6);
    padding-right: 6px;
}

[dir="rtl"] .nav-app-toc-item a:hover {
    padding-right: 0;
    padding-left: 6px;
}

.nav-app-toc-item.nav-app-toc-sub {
    padding-right: 28px;
}

[dir="rtl"] .nav-app-toc-item.nav-app-toc-sub {
    padding-right: 0;
    padding-left: 28px;
}

.nav-app-toc-item.nav-app-toc-sub a {
    font-size: 13px;
    color: var(--nav-text-muted, #666);
}

/* ═══════════════════════════════════════════════════════
   APP PAGE: PROS & CONS
   ═══════════════════════════════════════════════════════ */

.nav-app-pros-cons {
    margin-top: 8px;
}

.nav-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .nav-pros-cons-grid {
        grid-template-columns: 1fr;
    }
}

.nav-pros-block,
.nav-cons-block {
    border-radius: var(--nav-radius-sm, 10px);
    overflow: hidden;
}

.nav-pros-block {
    border: 1px solid #d4edda;
    background: #f8fff9;
}

.nav-cons-block {
    border: 1px solid #f5c6cb;
    background: #fff8f8;
}

.nav-pros-header,
.nav-cons-header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-pros-header {
    background: #d4edda;
    color: #155724;
}

.nav-cons-header {
    background: #f5c6cb;
    color: #721c24;
}

.nav-pros-list,
.nav-cons-list {
    list-style: none;
    margin: 0;
    padding: 12px 16px;
}

.nav-pros-list li,
.nav-cons-list li {
    padding: 8px 0;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px dashed rgba(0,0,0,.08);
    line-height: 1.6;
}

.nav-pros-list li:last-child,
.nav-cons-list li:last-child {
    border-bottom: none;
}

.nav-pros-list li i {
    color: #28a745;
    margin-top: 4px;
    flex-shrink: 0;
    font-size: 11px;
}

.nav-cons-list li i {
    color: #dc3545;
    margin-top: 4px;
    flex-shrink: 0;
    font-size: 11px;
}

/* ═══════════════════════════════════════════════════════
   APP PAGE: FAQ SECTION
   ═══════════════════════════════════════════════════════ */

.nav-app-faq-section {
    margin-top: 8px;
}

.nav-app-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-app-faq-item {
    border: 1px solid var(--nav-border, #e5e7eb);
    border-radius: var(--nav-radius-sm, 10px);
    overflow: hidden;
    transition: box-shadow .2s;
}

.nav-app-faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.nav-app-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: var(--nav-bg-card, #fff);
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--nav-text, #1a1a2e);
    text-align: right;
    gap: 12px;
    transition: background .2s;
    font-family: inherit;
}

.nav-app-faq-q:hover {
    background: var(--nav-bg-hover, #f8f9fa);
}

.nav-app-faq-q i {
    font-size: 12px;
    color: var(--nav-text-muted, #666);
    transition: transform .3s;
    flex-shrink: 0;
}

.nav-app-faq-q[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.nav-app-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s;
    padding: 0 18px;
    background: var(--nav-bg-hover, #f8f9fa);
}

.nav-app-faq-a.is-open {
    max-height: 500px;
    padding: 14px 18px;
}

.nav-app-faq-a [itemprop="text"] {
    font-size: 14px;
    line-height: 1.8;
    color: var(--nav-text-muted, #555);
}

.nav-app-faq-a [itemprop="text"] p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════
   APP PAGE: ALTERNATIVES
   ═══════════════════════════════════════════════════════ */

.nav-app-alternatives {
    margin-top: 8px;
}

.nav-alternatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.nav-alt-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--nav-border, #e5e7eb);
    border-radius: var(--nav-radius-sm, 10px);
    background: var(--nav-bg-card, #fff);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}

.nav-alt-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.nav-alt-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.nav-alt-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-alt-info {
    flex: 1;
    min-width: 0;
}

.nav-alt-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--nav-text, #1a1a2e);
}

.nav-alt-dev {
    font-size: 12px;
    color: var(--nav-text-muted, #666);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-alt-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
}

.nav-alt-rating {
    color: #f5a623;
}

.nav-alt-rating i {
    font-size: 10px;
    margin-left: 2px;
}

[dir="rtl"] .nav-alt-rating i {
    margin-left: 0;
    margin-right: 2px;
}

.nav-alt-price {
    color: var(--nav-primary, #2d5cf6);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   DARK MODE OVERRIDES - NEW SECTIONS
   ═══════════════════════════════════════════════════════ */

.dark-mode .nav-app-toc {
    background: #1e1e1e;
    border-color: #333;
}

.dark-mode .nav-app-toc-header:hover {
    background: #2a2a2a;
}

.dark-mode .nav-app-toc-item {
    border-bottom-color: #333;
}

.dark-mode .nav-app-toc-item a {
    color: #ccc;
}

.dark-mode .nav-pros-block {
    background: rgba(40, 167, 69, .08);
    border-color: rgba(40, 167, 69, .25);
}

.dark-mode .nav-pros-header {
    background: rgba(40, 167, 69, .15);
    color: #5cb85c;
}

.dark-mode .nav-cons-block {
    background: rgba(220, 53, 69, .08);
    border-color: rgba(220, 53, 69, .25);
}

.dark-mode .nav-cons-header {
    background: rgba(220, 53, 69, .15);
    color: #e57373;
}

.dark-mode .nav-pros-list li,
.dark-mode .nav-cons-list li {
    border-bottom-color: rgba(255,255,255,.06);
    color: #ccc;
}

.dark-mode .nav-app-faq-item {
    border-color: #333;
}

.dark-mode .nav-app-faq-q {
    background: #1e1e1e;
    color: #ddd;
}

.dark-mode .nav-app-faq-q:hover {
    background: #2a2a2a;
}

.dark-mode .nav-app-faq-a {
    background: #1a1a1a;
}

.dark-mode .nav-app-faq-a [itemprop="text"] {
    color: #aaa;
}

.dark-mode .nav-alt-card {
    background: #1e1e1e;
    border-color: #333;
}

.dark-mode .nav-alt-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.dark-mode .nav-alt-name {
    color: #ddd;
}

.dark-mode .nav-alt-dev {
    color: #888;
}

/* ═══════════════════════════════════════════════════════════════════
   SOFTONIC STYLE - Apps Homepage, Single App, Archive
   Complete redesign matching en.softonic.com
   ═══════════════════════════════════════════════════════════════════ */

/* --- HERO SECTION (Homepage) --- */
.sft-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0 40px;
    text-align: center;
}
.sft-hero-inner { max-width: 680px; margin: 0 auto; }
.sft-hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.3;
}
.sft-hero-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0 0 28px;
}
.sft-search-form { position: relative; max-width: 600px; margin: 0 auto; }
.sft-search-box {
    display: flex;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    background: #fff;
    border: 2px solid #e0e0e0;
    transition: border-color .2s;
}
.sft-search-box:focus-within { border-color: #00b752; }
.sft-search-input {
    flex: 1;
    border: 0;
    padding: 16px 24px;
    font-size: 1rem;
    background: transparent;
    outline: none;
    font-family: inherit;
}
.sft-search-btn {
    background: #00b752;
    border: 0;
    color: #fff;
    width: 56px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sft-search-btn:hover { background: #009c45; }
.sft-search-results {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    margin-top: 8px;
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

/* --- PLATFORM TABS --- */
.sft-platform-tabs {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
}
.sft-tabs-scroll {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.sft-tabs-scroll::-webkit-scrollbar { display: none; }
.sft-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: .9rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    font-family: inherit;
    text-decoration: none;
}
.sft-tab:hover { color: #1a1a2e; }
.sft-tab.active {
    color: #1a1a2e;
    border-bottom-color: #1a1a2e;
}
.sft-tab i { font-size: 1.1rem; }

/* --- AD SLOTS --- */
.sft-ad-slot { margin: 24px auto; text-align: center; }

/* --- SECTION COMMON --- */
.sft-section { margin-bottom: 48px; }
.sft-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sft-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sft-section-title i { color: #00b752; font-size: 1.1rem; }
.sft-see-all {
    font-size: .88rem;
    font-weight: 600;
    color: #00b752;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sft-see-all:hover { text-decoration: underline; }

/* --- CATEGORIES GRID (Homepage - Softonic style cards with app icons) --- */
.sft-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sft-cat-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    transition: all .25s;
}
.sft-cat-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.sft-cat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.sft-cat-icon { font-size: 1.4rem; }
.sft-cat-name {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}
.sft-cat-icons-row {
    display: flex;
    gap: 8px;
    min-height: 36px;
}
.sft-cat-app-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}
.sft-cat-app-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

/* --- APP ROW (List item - used in trending, latest, archive, related) --- */
.sft-apps-list { display: flex; flex-direction: column; gap: 0; }
.sft-app-row {
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}
.sft-app-row:hover { background: #f8f9fa; }
.sft-app-row:last-child { border-bottom: none; }
.sft-app-row-link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    text-decoration: none;
    color: inherit;
}
.sft-app-row-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
.sft-app-row-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sft-app-row-info { flex: 1; min-width: 0; }
.sft-app-row-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
    line-height: 1.4;
}
.sft-app-row-desc {
    font-size: .87rem;
    color: #6b7280;
    margin: 0 0 8px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sft-app-row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sft-row-rating {
    font-size: .82rem;
    font-weight: 600;
    color: #f59e0b;
}
.sft-row-rating i { margin-left: 3px; }
.sft-row-price {
    font-size: .82rem;
    font-weight: 600;
    color: #1a1a2e;
    background: #e5e7eb;
    padding: 2px 10px;
    border-radius: 20px;
}
.sft-row-price.sft-free { background: #d1fae5; color: #047857; }
.sft-row-cat { font-size: .78rem; color: #9ca3af; }
.sft-row-platform { font-size: .85rem; color: #9ca3af; }
.sft-icon-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 12px;
}

/* --- FEATURED CARD (Editors pick) --- */
.sft-editors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sft-featured-card {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    transition: all .25s;
}
.sft-featured-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.sft-featured-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}
.sft-featured-icon img { width: 100%; height: 100%; object-fit: cover; }
.sft-icon-letter-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    border-radius: 14px;
}
.sft-featured-info { flex: 1; min-width: 0; }
.sft-featured-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 2px;
}
.sft-featured-dev { font-size: .78rem; color: #9ca3af; }
.sft-featured-desc {
    font-size: .82rem;
    color: #6b7280;
    margin: 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sft-featured-meta { display: flex; align-items: center; gap: 10px; }
.sft-featured-rating { font-size: .8rem; color: #f59e0b; font-weight: 600; }
.sft-featured-price { font-size: .8rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; background: #e5e7eb; color: #1a1a2e; }
.sft-featured-price.sft-free { background: #d1fae5; color: #047857; }

/* --- APP GRID CARD (Platform sections) --- */
.sft-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sft-grid-card {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    text-decoration: none;
    transition: all .2s;
}
.sft-grid-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transform: translateY(-1px);
}
.sft-grid-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.sft-grid-icon img { width: 100%; height: 100%; object-fit: cover; }
.sft-grid-info { flex: 1; min-width: 0; }
.sft-grid-title { font-size: .9rem; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; }
.sft-grid-desc { font-size: .78rem; color: #9ca3af; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sft-grid-meta { display: flex; align-items: center; gap: 8px; }
.sft-grid-rating { font-size: .78rem; color: #f59e0b; font-weight: 600; }
.sft-grid-price { font-size: .78rem; font-weight: 600; background: #e5e7eb; padding: 1px 8px; border-radius: 10px; color: #1a1a2e; }
.sft-grid-price.sft-free { background: #d1fae5; color: #047857; }

/* ═══ ARCHIVE PAGE (Category) ═══ */
.sft-archive-header {
    background: #f8f9fa;
    padding: 32px 0 24px;
    border-bottom: 1px solid #e5e7eb;
}
.sft-archive-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}
.sft-archive-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sft-archive-icon { color: #00b752; font-size: 1.3rem; }
.sft-archive-count {
    font-size: .85rem;
    color: #9ca3af;
    font-weight: 500;
}
.sft-archive-desc {
    font-size: .9rem;
    color: #6b7280;
    margin: 8px 0 0;
    max-width: 700px;
}

/* Subcategories grid */
.sft-subcats { padding: 28px 0; }
.sft-subcats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sft-subcat-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    transition: all .25s;
}
.sft-subcat-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.sft-subcat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sft-subcat-icon { font-size: 1.2rem; }
.sft-subcat-name {
    font-size: .92rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}
.sft-subcat-icons {
    display: flex;
    gap: 6px;
    min-height: 32px;
}
.sft-subcat-app-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    object-fit: cover;
}
.sft-subcat-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

/* Sort bar */
.sft-sort-bar {
    display: flex;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}
.sft-sort-btn {
    padding: 8px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.sft-sort-btn:hover { border-color: #1a1a2e; color: #1a1a2e; }
.sft-sort-btn.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

/* Pagination */
.sft-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 32px 0;
}
.sft-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: .9rem;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    transition: all .2s;
}
.sft-pagination .page-numbers:hover { background: #f0f0f0; }
.sft-pagination .page-numbers.current {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}
.sft-pagination .page-numbers.dots { border: none; background: none; }

.sft-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}
.sft-no-results i { font-size: 3rem; margin-bottom: 16px; display: block; }

/* ═══ SINGLE APP PAGE ═══ */
.sft-single-page { padding: 0 0 48px; }
.sft-single-page .container { max-width: 1100px; }

/* Breadcrumbs */
.sft-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: #9ca3af;
    padding: 16px 0;
    flex-wrap: wrap;
}
.sft-breadcrumbs a { color: #6b7280; text-decoration: none; }
.sft-breadcrumbs a:hover { color: #1a1a2e; }
.sft-bc-sep { color: #d1d5db; }
.sft-bc-current { color: #1a1a2e; font-weight: 600; }

/* App Header */
.sft-app-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid #e5e7eb;
}
.sft-app-icon-wrap {
    width: 100px;
    height: 100px;
    border-radius: 22px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.sft-app-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sft-app-icon-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
}
.sft-app-header-info { flex: 1; padding-top: 4px; min-width: 0; }
.sft-header-download {
    flex-shrink: 0;
    width: 220px;
    padding-top: 8px;
}
.sft-app-name-line { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.sft-app-name {
    font-size: 1.7rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.3;
}
.sft-app-for { font-size: .9rem; color: #9ca3af; font-weight: 500; }
.sft-app-meta-line {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.sft-app-price {
    font-size: .88rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
}
.sft-app-price.sft-free { background: #d1fae5; color: #047857; }
.sft-app-price.sft-paid { background: #fef3c7; color: #b45309; }
.sft-app-rating { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: #f59e0b; font-weight: 600; }
.sft-rating-count { font-size: .78rem; color: #9ca3af; font-weight: 400; }
.sft-app-downloads { font-size: .85rem; color: #6b7280; display: flex; align-items: center; gap: 4px; }
.sft-trust-line {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sft-trust-badge {
    font-size: .78rem;
    font-weight: 600;
    color: #047857;
    background: #d1fae5;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sft-version-badge {
    font-size: .78rem;
    color: #9ca3af;
    font-weight: 500;
}

/* Info Tabs */
.sft-info-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 0;
}
.sft-info-tab {
    padding: 14px 24px;
    border: none;
    background: none;
    font-size: .9rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all .2s;
    font-family: inherit;
}
.sft-info-tab:hover { color: #1a1a2e; }
.sft-info-tab.active { color: #1a1a2e; border-bottom-color: #1a1a2e; }

/* Layout (content + sidebar) */
.sft-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    padding-top: 24px;
    align-items: start;
}
.sft-layout.sft-no-sidebar { grid-template-columns: 1fr; }
.sft-content { min-width: 0; }
.sft-tab-panel { display: none; }
.sft-tab-panel.active { display: block; }

/* Author line */
.sft-author-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: .85rem;
    color: #6b7280;
}
.sft-author-avatar { width: 36px; height: 36px; border-radius: 50%; }
.sft-author-name { font-weight: 600; color: #1a1a2e; }
.sft-author-sep { color: #d1d5db; }

/* Intro */
.sft-intro-section { margin-bottom: 24px; }
.sft-content-heading { font-size: 1.5rem; font-weight: 800; color: #1a1a2e; margin: 0 0 12px; }
.sft-intro-text { font-size: 1rem; line-height: 1.7; color: #374151; }

/* TOC - Enhanced Collapsible Design */
.sft-toc {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 28px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .3s;
}
.sft-toc:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.sft-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    font-weight: 700;
    font-size: .95rem;
    color: #1a1a2e;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: border-color .3s, background .2s;
}
.sft-toc:not(.is-collapsed) .sft-toc-header {
    border-bottom-color: #e5e7eb;
    background: #f8fafb;
}
.sft-toc-header:hover { background: #f3f4f6; }
.sft-toc-header > .fas.fa-list-ul { color: #00b752; font-size: 1rem; }
.sft-toc-count {
    font-size: .75rem;
    font-weight: 600;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 1.5;
}
.sft-toc-arrow {
    margin-right: auto;
    margin-left: 0;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    font-size: .75rem;
    color: #9ca3af;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f4f6;
}
.sft-toc-header:hover .sft-toc-arrow { background: #e5e7eb; }
.sft-toc.is-collapsed .sft-toc-arrow { transform: rotate(-90deg); }
.sft-toc-list {
    list-style: none;
    padding: 8px 22px 18px;
    margin: 0;
    counter-reset: toc;
    max-height: 600px;
    overflow-y: auto;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1), opacity .3s;
    opacity: 1;
}
.sft-toc.is-collapsed .sft-toc-list {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}
.sft-toc-item {
    counter-increment: toc;
    padding: 0;
}
.sft-toc-item a {
    color: #374151;
    text-decoration: none;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    transition: background .2s, color .2s;
    line-height: 1.5;
}
.sft-toc-item a:hover {
    background: #f0fdf4;
    color: #00b752;
}
.sft-toc-item a::before {
    content: counter(toc);
    color: #fff;
    background: #d1d5db;
    font-weight: 700;
    font-size: .72rem;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background .2s;
}
.sft-toc-item a:hover::before { background: #00b752; }
.sft-toc-sub { padding-right: 16px; }
.sft-toc-sub a::before {
    content: "—";
    background: transparent;
    color: #d1d5db;
    font-size: .8rem;
    min-width: 22px;
    height: auto;
}
.sft-toc-sub a:hover::before { background: transparent; color: #00b752; }

/* Article content */
.sft-article { margin-bottom: 32px; }
.sft-article h2 { font-size: 1.35rem; font-weight: 800; color: #1a1a2e; margin: 32px 0 12px; }
.sft-article h3 { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin: 24px 0 10px; }
.sft-article p { font-size: 1rem; line-height: 1.8; color: #374151; margin-bottom: 16px; }
.sft-article img { max-width: 100%; height: auto; border-radius: 12px; margin: 16px 0; }
.sft-article ul, .sft-article ol { padding-right: 20px; margin-bottom: 16px; }
.sft-article li { margin-bottom: 8px; line-height: 1.7; color: #374151; }

/* Pros & Cons */
.sft-pros-cons { margin-bottom: 32px; }
.sft-section-heading {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sft-pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sft-pc-block { border-radius: 12px; padding: 20px; }
.sft-pros { background: #f0fdf4; border: 1px solid #bbf7d0; }
.sft-cons { background: #fef2f2; border: 1px solid #fecaca; }
.sft-pc-header {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sft-pros .sft-pc-header { color: #047857; }
.sft-cons .sft-pc-header { color: #dc2626; }
.sft-pc-list { list-style: none; padding: 0; margin: 0; }
.sft-pc-list li {
    padding: 8px 0;
    font-size: .9rem;
    color: #374151;
    border-bottom: 1px solid rgba(0,0,0,.05);
    line-height: 1.6;
}
.sft-pc-list li:last-child { border-bottom: none; }

/* FAQ */
.sft-faq-list { display: flex; flex-direction: column; gap: 0; }
.sft-faq-item {
    border-bottom: 1px solid #e5e7eb;
}
.sft-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    font-size: .95rem;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    gap: 12px;
}
.sft-faq-q span { flex: 1; }
.sft-faq-q i { transition: transform .3s; font-size: .8rem; color: #9ca3af; flex-shrink: 0; }
.sft-faq-item.is-open .sft-faq-q i { transform: rotate(180deg); }
.sft-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s;
    padding: 0;
}
.sft-faq-item.is-open .sft-faq-a {
    max-height: 500px;
    padding-bottom: 16px;
}
.sft-faq-a [itemprop="text"] { font-size: .9rem; line-height: 1.7; color: #6b7280; }

/* Alternatives */
.sft-alternatives { margin-bottom: 32px; }
.sft-alt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.sft-alt-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    transition: all .2s;
}
.sft-alt-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); }
.sft-alt-icon { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.sft-alt-icon img { width: 100%; height: 100%; object-fit: cover; }
.sft-alt-info { flex: 1; min-width: 0; }
.sft-alt-name { font-size: .9rem; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; }
.sft-alt-meta { display: flex; gap: 8px; align-items: center; }
.sft-alt-rating { font-size: .78rem; color: #f59e0b; font-weight: 600; }
.sft-alt-price { font-size: .78rem; color: #6b7280; }

/* Related Section */
.sft-related-section { margin-bottom: 32px; }
.sft-related-list { display: flex; flex-direction: column; gap: 0; }

/* Comments */
.sft-comments-block { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e5e7eb; }

/* ═══ SIDEBAR ═══ */
.sft-sidebar {
    position: sticky;
    top: 80px;
}

/* Download Box */
.sft-download-box {
    margin-bottom: 20px;
}
.sft-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 24px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: all .2s;
    box-shadow: 0 4px 16px rgba(0,183,82,.3);
}
.sft-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,183,82,.4);
}
.sft-dl-text { font-size: 1.1rem; font-weight: 800; }
.sft-dl-sub { font-size: .78rem; opacity: .9; font-weight: 400; }
.sft-dl-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: .8;
}
.sft-trust-marker {
    text-align: center;
    font-size: .78rem;
    color: #047857;
    font-weight: 600;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Specs box */
.sft-specs-box {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.sft-specs-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
}
.sft-specs-list { margin: 0; }
.sft-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: .85rem;
}
.sft-spec-row:last-child { border-bottom: none; }
.sft-spec-row dt { color: #6b7280; font-weight: 500; }
.sft-spec-row dd { color: #1a1a2e; font-weight: 600; margin: 0; }
.sft-platform-icon { margin-left: 6px; font-size: 1rem; color: #6b7280; }

/* Store links */
.sft-store-links { margin-bottom: 20px; }
.sft-store-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1a1a2e;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    transition: all .2s;
}
.sft-store-btn:hover { background: #f8f9fa; border-color: #d1d5db; }

/* Popular widget */
.sft-popular-widget, .sft-tags-widget {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.sft-widget-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sft-widget-title i { color: #f59e0b; }
.sft-widget-list { display: flex; flex-direction: column; gap: 0; }
.sft-widget-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}
.sft-widget-item:last-child { border-bottom: none; }
.sft-widget-item:hover { background: #f8f9fa; }
.sft-widget-rank {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #6b7280;
    flex-shrink: 0;
}
.sft-widget-rank.top { background: #fef3c7; color: #b45309; }
.sft-widget-icon { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.sft-widget-icon img { width: 100%; height: 100%; object-fit: cover; }
.sft-icon-letter-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 8px;
}
.sft-widget-name { font-size: .85rem; font-weight: 600; color: #1a1a2e; }

/* Tags widget */
.sft-tags-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.sft-tag-pill {
    padding: 5px 14px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #374151;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}
.sft-tag-pill:hover { background: #e5e7eb; color: #1a1a2e; }

/* ═══════════════════════════════════════════════════════════════
   COMPACT / DENSE LAYOUT (single-app-compact.php)
   Prefix: cpt-
   Performance-focused: full-width, inline specs, minimal spacing
   ═══════════════════════════════════════════════════════════════ */
.cpt-single-page { padding: 0 0 32px; }
.cpt-single-page .container { max-width: 960px; }

/* Header */
.cpt-header {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin: 12px 0 16px;
}
.cpt-header-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.cpt-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.cpt-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cpt-icon-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
}
.cpt-info { flex: 1; min-width: 0; }
.cpt-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.cpt-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.3;
}
.cpt-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
    background: #e5e7eb;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Meta chips */
.cpt-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.cpt-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.cpt-chip i { font-size: .68rem; }
.cpt-chip-green { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.cpt-chip-amber { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.cpt-chip-star { color: #f59e0b; background: #fffbeb; border-color: #fde68a; }

/* Inline breadcrumbs */
.cpt-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    color: #9ca3af;
}
.cpt-breadcrumbs a { color: #6b7280; text-decoration: none; }
.cpt-breadcrumbs a:hover { color: #1a1a2e; }
.cpt-bc-sep { color: #d1d5db; }

/* Download column */
.cpt-download-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    width: 160px;
}
.cpt-dl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    transition: all .2s;
    box-shadow: 0 2px 10px rgba(0,183,82,.25);
}
.cpt-dl-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,183,82,.35);
}
.cpt-dl-btn i { font-size: .9rem; }
.cpt-store-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    transition: all .2s;
}
.cpt-store-link:hover { border-color: #1a1a2e; color: #1a1a2e; }

/* Platform pills */
.cpt-platforms-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}
.cpt-platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
}
.cpt-platform-pill i { font-size: .75rem; color: #6b7280; }

/* Body */
.cpt-body { max-width: 100%; }
.cpt-excerpt {
    font-size: .9rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 14px;
    padding: 0;
}

/* TOC - compact inline */
.cpt-toc {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}
.cpt-toc-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    color: #374151;
    transition: background .2s;
    user-select: none;
}
.cpt-toc-toggle:hover { background: #f0f1f3; }
.cpt-toc-toggle i:first-child { color: #6b7280; }
.cpt-toc-count {
    font-size: .68rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #6b7280;
    padding: 1px 7px;
    border-radius: 10px;
}
.cpt-toc-arrow {
    margin-right: auto;
    font-size: .65rem;
    transition: transform .3s;
    background: #e5e7eb;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.cpt-toc.is-collapsed .cpt-toc-arrow { transform: rotate(-90deg); }
.cpt-toc-list {
    list-style: none;
    margin: 0;
    padding: 0 14px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    max-height: 400px;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease, opacity .25s ease;
    opacity: 1;
}
.cpt-toc.is-collapsed .cpt-toc-list {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}
.cpt-toc-list li a {
    display: block;
    padding: 4px 8px;
    font-size: .78rem;
    color: #4b5563;
    text-decoration: none;
    border-radius: 4px;
    transition: all .15s;
}
.cpt-toc-list li a:hover { background: #e5e7eb; color: #1a1a2e; }
.cpt-toc-sub a { padding-right: 20px; font-size: .74rem; color: #9ca3af; }

/* Article */
.cpt-article {
    font-size: .92rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 20px;
}
.cpt-article h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 20px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0;
}
.cpt-article h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 16px 0 6px;
}
.cpt-article p { margin: 0 0 10px; }
.cpt-article ul, .cpt-article ol { margin: 0 0 10px; padding-right: 20px; }
.cpt-article li { margin-bottom: 4px; }
.cpt-article img { border-radius: 8px; max-width: 100%; height: auto; }

/* Heading */
.cpt-heading {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cpt-heading i { font-size: .9rem; color: #6b7280; }

/* Pros & Cons */
.cpt-pros-cons { margin-bottom: 16px; }
.cpt-pc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cpt-pc-col ul {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
}
.cpt-pc-col li {
    font-size: .82rem;
    padding: 5px 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #374151;
}
.cpt-pc-col li i { font-size: .7rem; margin-top: 3px; flex-shrink: 0; }
.cpt-pros ul { background: #ecfdf5; border: 1px solid #a7f3d0; }
.cpt-pros li i { color: #059669; }
.cpt-cons ul { background: #fef2f2; border: 1px solid #fecaca; }
.cpt-cons li i { color: #dc2626; }

/* FAQ (reuses sft-faq-q/sft-faq-a classes for JS) */
.cpt-faq { margin-bottom: 16px; }
.cpt-faq-item {
    border-bottom: 1px solid #f0f0f0;
}
.cpt-faq-item:last-child { border-bottom: none; }
.cpt-faq-q {
    width: 100%;
    padding: 10px 0;
    border: none;
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    font-family: inherit;
}
.cpt-faq-q i { font-size: .65rem; color: #9ca3af; transition: transform .3s; }
.cpt-faq-q[aria-expanded="true"] i { transform: rotate(180deg); }
.cpt-faq-a {
    display: none;
    padding: 0 0 10px;
    font-size: .82rem;
    color: #4b5563;
    line-height: 1.6;
}

/* Alternatives - dense horizontal */
.cpt-alternatives { margin-bottom: 16px; }
.cpt-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.cpt-alt-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: all .2s;
}
.cpt-alt-card:hover { border-color: #1a1a2e; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cpt-alt-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
}
.cpt-alt-icon img { width: 100%; height: 100%; object-fit: cover; }
.cpt-alt-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #e5e7eb;
    font-weight: 800;
    font-size: 1rem;
    color: #6b7280;
}
.cpt-alt-name { font-size: .76rem; font-weight: 700; color: #1a1a2e; line-height: 1.2; }
.cpt-alt-rating { font-size: .7rem; color: #f59e0b; font-weight: 600; }
.cpt-alt-plat { font-size: .7rem; color: #9ca3af; }

/* Related */
.cpt-related { margin-bottom: 16px; }

/* Tags */
.cpt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}
.cpt-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #374151;
    font-size: .72rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}
.cpt-tag:hover { background: #e5e7eb; color: #1a1a2e; }

/* Comments */
.cpt-comments { padding-top: 12px; border-top: 1px solid #e5e7eb; }

/* ═══ COMPACT RESPONSIVE ═══ */
@media (max-width: 768px) {
    .cpt-header-main { flex-wrap: wrap; }
    .cpt-download-col { width: 100%; flex-direction: row; }
    .cpt-dl-btn { flex: 1; }
    .cpt-store-link { flex: 0 0 auto; }
    .cpt-toc-list { grid-template-columns: 1fr; }
    .cpt-pc-row { grid-template-columns: 1fr; }
    .cpt-alt-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 480px) {
    .cpt-icon-wrap { width: 48px; height: 48px; }
    .cpt-title { font-size: 1.05rem; }
    .cpt-header { padding: 12px; }
}

/* ═══ COMPACT RTL ═══ */
[dir="rtl"] .cpt-toc-arrow { margin-right: 0; margin-left: auto; }
[dir="rtl"] .cpt-toc.is-collapsed .cpt-toc-arrow { transform: rotate(90deg); }
[dir="rtl"] .cpt-toc-sub a { padding-right: 8px; padding-left: 20px; }
[dir="rtl"] .cpt-article ul, [dir="rtl"] .cpt-article ol { padding-right: 20px; padding-left: 0; }
[dir="rtl"] .cpt-breadcrumbs { direction: rtl; }

/* ═══ COMPACT DARK MODE ═══ */
.dark-mode .cpt-header { background: #1e1e30; border-color: #2d2d44; }
.dark-mode .cpt-title, .dark-mode .cpt-heading, .dark-mode .cpt-alt-name { color: #e5e7eb; }
.dark-mode .cpt-platform-badge { background: #2d2d44; color: #9ca3af; }
.dark-mode .cpt-chip { background: #2d2d44; border-color: #3d3d5c; color: #d1d5db; }
.dark-mode .cpt-chip-green { background: #065f25; color: #bbf7d0; border-color: #065f25; }
.dark-mode .cpt-chip-amber { background: #422006; color: #fcd34d; border-color: #422006; }
.dark-mode .cpt-chip-star { background: #422006; color: #f59e0b; border-color: #422006; }
.dark-mode .cpt-breadcrumbs a { color: #9ca3af; }
.dark-mode .cpt-breadcrumbs a:hover { color: #e5e7eb; }
.dark-mode .cpt-store-link { background: #1e1e30; border-color: #2d2d44; color: #9ca3af; }
.dark-mode .cpt-store-link:hover { border-color: #e5e7eb; color: #e5e7eb; }
.dark-mode .cpt-platform-pill { background: #2d2d44; border-color: #3d3d5c; color: #d1d5db; }
.dark-mode .cpt-excerpt, .dark-mode .cpt-article p, .dark-mode .cpt-article li,
.dark-mode .cpt-pc-col li, .dark-mode .cpt-faq-a [itemprop="text"] { color: #9ca3af; }
.dark-mode .cpt-toc { background: #1e1e30; border-color: #2d2d44; }
.dark-mode .cpt-toc-toggle { color: #d1d5db; }
.dark-mode .cpt-toc-toggle:hover { background: #252540; }
.dark-mode .cpt-toc-count { background: #2d2d44; color: #9ca3af; }
.dark-mode .cpt-toc-arrow { background: #2d2d44; }
.dark-mode .cpt-toc-list li a { color: #9ca3af; }
.dark-mode .cpt-toc-list li a:hover { background: #2d2d44; color: #e5e7eb; }
.dark-mode .cpt-article h2, .dark-mode .cpt-article h3 { color: #e5e7eb; }
.dark-mode .cpt-article h2 { border-color: #2d2d44; }
.dark-mode .cpt-heading { border-color: #2d2d44; }
.dark-mode .cpt-pros ul { background: #0d2818; border-color: #065f25; }
.dark-mode .cpt-cons ul { background: #2d0a0a; border-color: #7f1d1d; }
.dark-mode .cpt-faq-item { border-color: #2d2d44; }
.dark-mode .cpt-faq-q { color: #e5e7eb; }
.dark-mode .cpt-alt-card { background: #1e1e30; border-color: #2d2d44; }
.dark-mode .cpt-alt-card:hover { border-color: #e5e7eb; }
.dark-mode .cpt-tags { border-color: #2d2d44; }
.dark-mode .cpt-tag { background: #2d2d44; color: #9ca3af; }
.dark-mode .cpt-tag:hover { background: #3d3d5c; color: #e5e7eb; }
.dark-mode .cpt-comments { border-color: #2d2d44; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
    .sft-categories-grid, .sft-subcats-grid { grid-template-columns: repeat(3, 1fr); }
    .sft-editors-grid, .sft-apps-grid { grid-template-columns: repeat(2, 1fr); }
    .sft-layout { grid-template-columns: 1fr 280px; gap: 24px; }
}
@media (max-width: 768px) {
    .sft-categories-grid, .sft-subcats-grid { grid-template-columns: repeat(2, 1fr); }
    .sft-editors-grid, .sft-apps-grid { grid-template-columns: 1fr; }
    .sft-layout { grid-template-columns: 1fr; }
    .sft-sidebar { position: static; }
    .sft-hero { padding: 40px 0 28px; }
    .sft-hero-title { font-size: 1.5rem; }
    .sft-app-header { flex-direction: column; align-items: center; text-align: center; }
    .sft-header-download { width: 100%; }
    .sft-app-name-line { justify-content: center; }
    .sft-app-meta-line { justify-content: center; }
    .sft-trust-line { justify-content: center; }
    .sft-pc-grid { grid-template-columns: 1fr; }
    .sft-alt-grid { grid-template-columns: 1fr; }
    .sft-archive-title { font-size: 1.3rem; }
    .sft-info-tabs { overflow-x: auto; }
    .sft-info-tab { padding: 12px 16px; white-space: nowrap; }
}
@media (max-width: 480px) {
    .sft-categories-grid, .sft-subcats-grid { grid-template-columns: 1fr; }
    .sft-app-icon-wrap { width: 80px; height: 80px; }
    .sft-app-name { font-size: 1.3rem; }
    .sft-tab { padding: 12px 16px; font-size: .82rem; }
}

/* ═══ RTL (Arabic) Overrides ═══ */
[dir="rtl"] .sft-breadcrumbs { direction: rtl; }
[dir="rtl"] .sft-bc-sep { transform: scaleX(-1); }
[dir="rtl"] .sft-see-all i { transform: scaleX(-1); }
[dir="rtl"] .sft-dl-icon { left: auto; right: 20px; }
[dir="rtl"] .sft-toc-arrow { margin-right: 0; margin-left: auto; }
[dir="rtl"] .sft-toc.is-collapsed .sft-toc-arrow { transform: rotate(90deg); }
[dir="rtl"] .sft-toc-sub { padding-right: 0; padding-left: 16px; }
[dir="rtl"] .sft-article ul, [dir="rtl"] .sft-article ol { padding-right: 0; padding-left: 20px; }
[dir="rtl"] .sft-faq-q { text-align: right; }
[dir="rtl"] .sft-row-rating i { margin-left: 0; margin-right: 3px; }
[dir="rtl"] .sft-platform-icon { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .sft-pagination .prev { transform: scaleX(-1); }
[dir="rtl"] .sft-pagination .next { transform: scaleX(-1); }

/* ═══ DARK MODE ═══ */
.dark-mode .sft-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.dark-mode .sft-hero-title, .dark-mode .sft-app-name, .dark-mode .sft-section-title,
.dark-mode .sft-cat-name, .dark-mode .sft-subcat-name, .dark-mode .sft-archive-title,
.dark-mode .sft-app-row-title, .dark-mode .sft-featured-title, .dark-mode .sft-grid-title,
.dark-mode .sft-section-heading, .dark-mode .sft-specs-title, .dark-mode .sft-widget-title,
.dark-mode .sft-widget-name, .dark-mode .sft-bc-current, .dark-mode .sft-author-name,
.dark-mode .sft-content-heading, .dark-mode .sft-alt-name, .dark-mode .sft-toc-header {
    color: #e5e7eb;
}
.dark-mode .sft-hero-subtitle, .dark-mode .sft-app-row-desc, .dark-mode .sft-featured-desc,
.dark-mode .sft-intro-text, .dark-mode .sft-archive-desc, .dark-mode .sft-faq-a [itemprop="text"],
.dark-mode .sft-article p, .dark-mode .sft-article li, .dark-mode .sft-pc-list li {
    color: #9ca3af;
}
.dark-mode .sft-platform-tabs, .dark-mode .sft-info-tabs, .dark-mode .sft-sort-bar {
    background: #1a1a2e;
    border-color: #2d2d44;
}
.dark-mode .sft-tab, .dark-mode .sft-info-tab, .dark-mode .sft-sort-btn { color: #9ca3af; }
.dark-mode .sft-tab.active, .dark-mode .sft-info-tab.active { color: #e5e7eb; border-bottom-color: #e5e7eb; }
.dark-mode .sft-sort-btn { background: #1a1a2e; border-color: #2d2d44; }
.dark-mode .sft-sort-btn:hover { border-color: #e5e7eb; color: #e5e7eb; }
.dark-mode .sft-sort-btn.active { background: #e5e7eb; color: #1a1a2e; border-color: #e5e7eb; }
.dark-mode .sft-cat-card, .dark-mode .sft-subcat-card, .dark-mode .sft-featured-card,
.dark-mode .sft-grid-card, .dark-mode .sft-alt-card, .dark-mode .sft-popular-widget,
.dark-mode .sft-tags-widget {
    background: #1e1e30;
    border-color: #2d2d44;
}
.dark-mode .sft-cat-card:hover, .dark-mode .sft-subcat-card:hover, .dark-mode .sft-featured-card:hover,
.dark-mode .sft-grid-card:hover, .dark-mode .sft-alt-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.dark-mode .sft-search-box { background: #1e1e30; border-color: #2d2d44; }
.dark-mode .sft-search-input { color: #e5e7eb; }
.dark-mode .sft-search-results { background: #1e1e30; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.dark-mode .sft-app-row:hover { background: #16162a; }
.dark-mode .sft-app-row { border-color: #2d2d44; }
.dark-mode .sft-specs-box { background: #1e1e30; border-color: #2d2d44; }
.dark-mode .sft-spec-row { border-color: #2d2d44; }
.dark-mode .sft-spec-row dt { color: #9ca3af; }
.dark-mode .sft-spec-row dd { color: #e5e7eb; }
.dark-mode .sft-store-btn { background: #1e1e30; border-color: #2d2d44; color: #e5e7eb; }
.dark-mode .sft-store-btn:hover { background: #16162a; }
.dark-mode .sft-widget-item { border-color: #2d2d44; }
.dark-mode .sft-widget-item:hover { background: #16162a; }
.dark-mode .sft-widget-rank { background: #2d2d44; color: #9ca3af; }
.dark-mode .sft-widget-rank.top { background: #422006; color: #fbbf24; }
.dark-mode .sft-tag-pill { background: #2d2d44; color: #9ca3af; }
.dark-mode .sft-tag-pill:hover { background: #3d3d5c; color: #e5e7eb; }
.dark-mode .sft-toc { background: #1e1e30; border-color: #2d2d44; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.dark-mode .sft-toc:hover { box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.dark-mode .sft-toc:not(.is-collapsed) .sft-toc-header { background: #16162a; border-bottom-color: #2d2d44; }
.dark-mode .sft-toc-header:hover { background: #252540; }
.dark-mode .sft-toc-count { background: #2d2d44; color: #9ca3af; }
.dark-mode .sft-toc-arrow { background: #2d2d44; }
.dark-mode .sft-toc-header:hover .sft-toc-arrow { background: #3d3d5c; }
.dark-mode .sft-toc-item a { color: #9ca3af; }
.dark-mode .sft-toc-item a:hover { color: #00b752; background: rgba(0,183,82,.08); }
.dark-mode .sft-toc-item a::before { background: #3d3d5c; color: #9ca3af; }
.dark-mode .sft-toc-item a:hover::before { background: #00b752; color: #fff; }
.dark-mode .sft-pros { background: #0d2818; border-color: #065f25; }
.dark-mode .sft-cons { background: #2d0a0a; border-color: #7f1d1d; }
.dark-mode .sft-faq-q { color: #e5e7eb; }
.dark-mode .sft-faq-item { border-color: #2d2d44; }
.dark-mode .sft-breadcrumbs a { color: #9ca3af; }
.dark-mode .sft-breadcrumbs a:hover { color: #e5e7eb; }

/* ============================================================
   Sites Archive (SA) — Directory-Style Design
   ============================================================ */

/* --- SA Toolbar (Search + Social + Category + Filters) --- */
.sa-toolbar {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-sm);
    padding: 20px 24px;
    margin-bottom: 28px;
}
.sa-toolbar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* SA Search */
.sa-search-wrap {
    flex: 0 0 220px;
    position: relative;
}
.sa-search-form {
    position: relative;
}
.sa-search-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1.5px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    background: var(--nav-bg-input);
    color: var(--nav-text);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sa-search-input:focus {
    border-color: var(--nav-primary);
    box-shadow: 0 0 0 3px var(--nav-primary-light);
}
.sa-search-input::placeholder {
    color: var(--nav-text-muted);
    font-size: 12px;
}
.sa-search-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--nav-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}
[dir="ltr"] .sa-search-btn {
    left: auto;
    right: 10px;
}
.sa-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius-sm);
    box-shadow: var(--nav-shadow-lg);
    z-index: 100;
    display: none;
    max-height: 350px;
    overflow-y: auto;
}
.sa-search-results.active {
    display: block;
}
/* SA Search result items */
.sa-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--nav-text-primary);
    transition: background .15s;
    border-bottom: 1px solid var(--nav-border);
}
.sa-search-result-item:last-child { border-bottom: none; }
.sa-search-result-item:hover { background: var(--nav-bg-input); }
.sa-sr-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--nav-bg-input); }
.sa-sr-icon img { width: 100%; height: 100%; object-fit: cover; }
.sa-sr-icon i { font-size: 14px; color: var(--nav-text-secondary); }
.sa-sr-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-sr-title { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-sr-type { font-size: .75rem; color: var(--nav-text-secondary); }
.sa-sr-empty { padding: 20px; text-align: center; color: var(--nav-text-secondary); font-size: .9rem; }
/* SA categories section reveal */
.sa-categories-section { opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s; }
.sa-categories-section.sa-visible { opacity: 1; transform: translateY(0); }

/* SA Social Icons */
.sa-social-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sa-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--nav-text-secondary);
    background: var(--nav-bg-input);
    text-decoration: none;
    font-size: 15px;
    transition: all 0.2s;
}
.sa-social-icon:hover {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
    transform: translateY(-1px);
}

/* SA Category Dropdown */
.sa-cat-dropdown-wrap {
    flex: 0 0 200px;
}
.sa-cat-dropdown {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--nav-border);
    border-radius: var(--nav-radius-sm);
    background: var(--nav-bg-input);
    color: var(--nav-text);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%237f8c8d'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 30px;
}
[dir="ltr"] .sa-cat-dropdown {
    background-position: right 12px center;
    padding-left: 14px;
    padding-right: 30px;
}
.sa-cat-dropdown:focus {
    border-color: var(--nav-primary);
}

/* SA Filter Badges */
.sa-filter-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-right: auto;
}
[dir="ltr"] .sa-filter-badges {
    margin-right: 0;
    margin-left: auto;
}
.sa-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--nav-radius-full);
    border: 1.5px solid var(--nav-border);
    background: var(--nav-bg-card);
    color: var(--nav-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.sa-filter-badge:hover {
    border-color: var(--nav-primary);
    color: var(--nav-primary);
}
.sa-filter-badge.active {
    background: var(--nav-primary);
    color: #fff;
    border-color: var(--nav-primary);
}
.sa-badge-featured i { color: #f59e0b; }
.sa-badge-popular i { color: #ef4444; }
.sa-badge-newest i { color: #10b981; }
.sa-badge-liked i { color: #ec4899; }
.sa-filter-badge.active i { color: #fff; }

/* --- SA Page Header (taxonomy pages) --- */
.sa-page-header {
    text-align: center;
    padding: 20px 0 24px;
}
.sa-page-icon {
    font-size: 28px;
    color: var(--nav-primary);
    margin-bottom: 8px;
    display: block;
}
.sa-page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0 0 8px;
}
.sa-page-desc {
    color: var(--nav-text-secondary);
    font-size: 14px;
    margin: 0 0 6px;
}
.sa-page-count {
    font-size: 13px;
    color: var(--nav-text-muted);
}

/* --- SA Section Titles --- */
.sa-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0 0 16px;
}
.sa-section-title i {
    color: var(--nav-primary);
    font-size: 18px;
}
.sa-count-badge {
    font-size: 12px;
    font-weight: 600;
    background: var(--nav-primary-light);
    color: var(--nav-primary);
    padding: 3px 10px;
    border-radius: var(--nav-radius-full);
}

/* --- SA Sort Tabs --- */
.sa-sort-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.sa-sort-tab {
    padding: 7px 16px;
    border: none;
    border-radius: var(--nav-radius-full);
    background: var(--nav-bg-input);
    color: var(--nav-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sa-sort-tab:hover, .sa-sort-tab.active {
    background: var(--nav-primary);
    color: #fff;
}

/* --- SA Cards Grid --- */
.sa-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* --- SA Card (Individual) --- */
.sa-card {
    position: relative;
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    overflow: hidden;
}
.sa-card:hover {
    box-shadow: var(--nav-shadow-hover);
    transform: translateY(-3px);
}
.sa-card-featured {
    border-color: rgba(236, 72, 153, 0.3);
    background: linear-gradient(135deg, rgba(236,72,153,0.02) 0%, rgba(168,85,247,0.02) 100%);
}
.sa-card-featured:hover {
    border-color: rgba(236, 72, 153, 0.5);
}

/* TOP Ribbon */
.sa-top-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 60px 60px;
    border-color: transparent transparent transparent #f59e0b;
    z-index: 2;
}
[dir="ltr"] .sa-top-ribbon {
    left: auto;
    right: 0;
    border-width: 0 60px 60px 0;
    border-color: transparent #f59e0b transparent transparent;
}
.sa-top-ribbon::after {
    content: attr(data-label) 'TOP';
    display: none;
}
/* Use pseudo-element for the text over the ribbon */
.sa-card-top::before {
    content: 'TOP';
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    z-index: 3;
    transform: rotate(45deg);
    letter-spacing: 0.5px;
}
[dir="ltr"] .sa-card-top::before {
    left: auto;
    right: 8px;
    transform: rotate(-45deg);
}

/* Upvote */
.sa-card-upvote {
    position: absolute;
    top: 12px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nav-primary);
}
[dir="ltr"] .sa-card-upvote {
    right: auto;
    left: 14px;
}
.sa-card-upvote i {
    font-size: 11px;
}

/* Featured Badge */
.sa-card-badge {
    position: absolute;
    top: 12px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--nav-radius-full);
}
[dir="ltr"] .sa-card-badge {
    left: auto;
    right: 14px;
}
.sa-badge-feat {
    color: #ef4444;
    background: rgba(239, 68, 71, 0.08);
}
.sa-badge-feat i {
    color: #f59e0b;
    font-size: 10px;
}

/* Card Body (icon + name) */
.sa-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
}
.sa-card-icon-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.sa-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}
.sa-card-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--nav-primary-light);
    color: var(--nav-primary);
    font-size: 16px;
    font-weight: 700;
}
.sa-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--nav-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.sa-verified-icon {
    color: #10b981;
    font-size: 13px;
}

/* Description */
.sa-card-desc {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--nav-text-secondary);
    margin: 0 0 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    padding: 0 6px;
}

/* Tags */
.sa-card-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 14px;
}
.sa-card-tag {
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: var(--nav-radius-full);
    background: var(--nav-bg-tag);
    color: var(--nav-text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}
.sa-card-tag:hover {
    background: var(--nav-primary-light);
    color: var(--nav-primary);
}

/* Visit Button */
.sa-card-visit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 24px;
    background: var(--nav-primary);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--nav-radius-sm);
    transition: all 0.2s;
    margin-top: auto;
}
.sa-card-visit:hover {
    background: var(--nav-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 92, 246, 0.3);
}
.sa-card-visit i {
    font-size: 12px;
}

/* No results */
.sa-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--nav-text-muted);
}
.sa-no-results i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.3;
}

/* Load More */
.sa-load-more-wrap {
    text-align: center;
    margin: 28px 0 40px;
}
.sa-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--nav-bg-card);
    color: var(--nav-primary);
    border: 2px solid var(--nav-primary);
    border-radius: var(--nav-radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
}
.sa-load-more-btn:hover {
    background: var(--nav-primary);
    color: #fff;
}
.sa-load-more-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}
.sa-load-more-btn.loading i {
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SA CATEGORIES SECTION ===== */
.sa-categories-section {
    margin-top: 48px;
}
.sa-categories-divider {
    text-align: center;
    margin-bottom: 28px;
    position: relative;
}
.sa-categories-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--nav-border);
}
.sa-categories-divider span {
    position: relative;
    background: var(--nav-bg);
    padding: 0 20px;
    color: var(--nav-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sa-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Category Box */
.sa-cat-box {
    background: var(--nav-bg-card);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sa-cat-box-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--nav-border-light);
}
.sa-cat-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nav-text);
}
.sa-cat-box-title i {
    font-size: 16px;
    color: var(--nav-primary);
}

/* Category Items */
.sa-cat-box-list {
    flex: 1;
    padding: 8px 0;
}
.sa-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    transition: background 0.15s;
}
.sa-cat-item:hover {
    background: var(--nav-bg-hover);
}
.sa-cat-rank {
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-text-muted);
    min-width: 22px;
}
.sa-cat-item-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.sa-cat-item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.sa-cat-item-icon img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}
.sa-cat-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--nav-primary-light);
    color: var(--nav-primary);
    font-size: 11px;
    font-weight: 700;
}
.sa-cat-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--nav-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sa-cat-item-star {
    color: #f59e0b;
    font-size: 11px;
}
.sa-cat-item-go {
    flex-shrink: 0;
    color: var(--nav-text-muted);
    font-size: 12px;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}
.sa-cat-item:hover .sa-cat-item-go {
    opacity: 1;
}
.sa-cat-item-go:hover {
    color: var(--nav-primary);
}

/* Highlighted first item (latest column) */
.sa-cat-item-highlight {
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(239,68,71,0.04));
    padding-top: 10px;
    padding-bottom: 10px;
}
.sa-cat-item-highlight .sa-cat-item-name {
    font-weight: 700;
    color: var(--nav-primary);
}

/* Category More Button */
.sa-cat-box-more {
    display: block;
    text-align: center;
    padding: 12px;
    border-top: 1px solid var(--nav-border-light);
    color: var(--nav-text-muted);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: all 0.2s;
}
.sa-cat-box-more:hover {
    color: var(--nav-primary);
    background: var(--nav-primary-light);
}

/* --- SA Collections Bar (bottom) --- */
.sa-collections-bar {
    margin: 40px 0 20px;
}
.sa-collections-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--nav-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sa-collections-title i {
    color: var(--nav-primary);
}
.sa-collections-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.sa-collection-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--nav-bg-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-full);
    text-decoration: none;
    color: var(--nav-text);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.sa-collection-chip:hover {
    border-color: var(--nav-primary);
    color: var(--nav-primary);
    background: var(--nav-primary-light);
}
.sa-collection-chip i {
    font-size: 13px;
    color: var(--nav-text-muted);
}
.sa-chip-count {
    font-size: 11px;
    background: var(--nav-bg-input);
    padding: 1px 7px;
    border-radius: 10px;
    color: var(--nav-text-muted);
    font-weight: 600;
}

/* --- SA Featured Section --- */
.sa-featured-section {
    margin-bottom: 36px;
}

/* ===== SA RESPONSIVE ===== */
@media (max-width: 1200px) {
    .sa-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .sa-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 900px) {
    .sa-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sa-toolbar-row {
        gap: 12px;
    }
    .sa-search-wrap {
        flex: 1 1 100%;
        order: -1;
    }
    .sa-social-icons {
        order: -1;
    }
    .sa-cat-dropdown-wrap {
        flex: 1 1 auto;
    }
    .sa-filter-badges {
        margin-right: 0;
        flex: 1 1 100%;
        justify-content: center;
    }
}
@media (max-width: 640px) {
    .sa-cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .sa-categories-grid {
        grid-template-columns: 1fr;
    }
    .sa-toolbar {
        padding: 14px 16px;
    }
    .sa-card {
        padding: 16px;
    }
    .sa-section-title {
        font-size: 17px;
    }
    .sa-page-title {
        font-size: 22px;
    }
    .sa-sort-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .sa-social-icons {
        display: none;
    }
}

/* ===== SA Dark Mode ===== */
.dark-mode .sa-card {
    background: var(--nav-bg-card);
}
.dark-mode .sa-card-featured {
    border-color: rgba(236, 72, 153, 0.2);
    background: linear-gradient(135deg, rgba(236,72,153,0.04) 0%, rgba(168,85,247,0.04) 100%);
}
.dark-mode .sa-card-visit {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.dark-mode .sa-cat-item-highlight {
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(239,68,71,0.06));
}
.dark-mode .sa-categories-divider span {
    background: var(--nav-bg);
}
.dark-mode .sft-archive-header { background: #1a1a2e; border-color: #2d2d44; }
.dark-mode .sft-subcats { background: transparent; }
.dark-mode .sft-row-price { background: #2d2d44; color: #e5e7eb; }
.dark-mode .sft-row-price.sft-free { background: #065f25; color: #bbf7d0; }
.dark-mode .sft-featured-price { background: #2d2d44; color: #e5e7eb; }
.dark-mode .sft-featured-price.sft-free { background: #065f25; color: #bbf7d0; }
.dark-mode .sft-grid-price { background: #2d2d44; color: #e5e7eb; }
.dark-mode .sft-grid-price.sft-free { background: #065f25; color: #bbf7d0; }
.dark-mode .sft-pagination .page-numbers { background: #1e1e30; border-color: #2d2d44; color: #e5e7eb; }
.dark-mode .sft-pagination .page-numbers:hover { background: #2d2d44; }
.dark-mode .sft-pagination .page-numbers.current { background: #e5e7eb; color: #1a1a2e; }
.dark-mode .sft-app-header { border-color: #2d2d44; }
.dark-mode .sft-info-tabs { border-color: #2d2d44; }
.dark-mode .sft-comments-block { border-color: #2d2d44; }
.dark-mode .sft-app-price.sft-free { background: #065f25; color: #bbf7d0; }
.dark-mode .sft-app-price.sft-paid { background: #422006; color: #fcd34d; }
.dark-mode .sft-trust-badge { background: #065f25; color: #bbf7d0; }
.dark-mode .sft-author-line { color: #9ca3af; }
.dark-mode .sft-article h2, .dark-mode .sft-article h3 { color: #e5e7eb; }