/* ==========================================================================
   موقع الأدوات - التصميم العام
   نسخة: dropdown-fix-v2 (لو شفت التعليق ده في "عرض المصدر" فالملف بيتحدّث صح)
   ========================================================================== */

:root {
    --primary-color: #2c7a7b;
    --primary-dark: #1f5b5c;
    --primary-light: #e6f4f4;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --bg-color: #f6f8fa;
    --card-bg: #ffffff;
    --border-color: #e5e9ee;
    --success-color: #2e8b57;
    --danger-color: #d64545;
    --warning-bg: #fff8e6;
    --radius-lg: 16px;
    --radius-md: 10px;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.12);
    font-size: 16px;
}

html[data-theme="dark"] {
    --primary-light: rgba(44, 122, 123, .18);
    --text-color: #e5e7eb;
    --text-muted: #9ca3af;
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --border-color: #334155;
    --warning-bg: #3a2f13;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
}

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

html[data-theme="dark"] .example-box p,
html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-content-wrapper p {
    color: var(--text-color);
}

html[data-theme="dark"] .tags-container span {
    color: #cde9e9;
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .cookie-consent-bar {
    background: #0a0f1a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Cairo', 'Tahoma', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease, color .2s ease;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.4; margin: 0 0 12px; }

/* ==========================================================================
   الهيدر والقائمة الرئيسية (مستويين + Dropdown)
   ========================================================================== */

.site-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo { display: flex; align-items: center; gap: 8px; }
.logo-img { height: 40px; }
.logo-text {
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--primary-color);
}

.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-nav .nav-item { position: relative; }

.main-nav .nav-item > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-color);
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.main-nav .nav-item > a:hover,
.main-nav .nav-item.dropdown-open > a {
    background: var(--primary-light);
    color: var(--primary-color);
}

.main-nav .caret { font-size: .65rem; transition: transform .15s ease; }
.main-nav .nav-item.dropdown-open .caret { transform: rotate(180deg); }

.dropdown-menu {
    position: absolute !important;
    top: 100%;
    right: 0;
    min-width: 240px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none !important;
    z-index: 200;
    list-style: none;
    margin: 6px 0 0;
}

.dropdown-menu li { position: relative; }

.nav-item.has-dropdown:hover > .dropdown-menu,
.nav-item.has-dropdown.dropdown-open > .dropdown-menu {
    display: block !important;
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--text-color);
}
.dropdown-menu li a:hover { background: var(--primary-light); color: var(--primary-color); }

/* قائمة فرعية من المستوى الثالث (Flyout) - بتفتح جنب العنصر مش تحته */
.dropdown-menu-sub {
    top: -8px !important;
    right: 100% !important;
    left: auto !important;
    margin: 0 6px 0 0 !important;
    min-width: 220px;
}
.dropdown-menu li.has-dropdown > a .caret { transform: rotate(90deg); font-size: .6rem; }
.dropdown-menu li.has-dropdown.dropdown-open > a .caret,
.dropdown-menu li.has-dropdown:hover > a .caret { transform: rotate(90deg) scale(1.1); }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    height: 2px;
    width: 24px;
    background: var(--text-color);
    border-radius: 2px;
}

.dark-mode-toggle {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.dark-mode-toggle:hover { transform: scale(1.08); }

/* ==========================================================================
   الصفحة الرئيسية
   ========================================================================== */

.hero-search {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 46px 24px 60px;
    text-align: center;
}
.hero-search-inner { max-width: 640px; margin: 0 auto; }
.hero-search h1 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 22px;
}
.search-box {
    position: relative;
    background: var(--card-bg);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    padding: 4px 6px;
}
.search-icon {
    font-size: 1.1rem;
    padding: 0 14px;
    color: var(--text-muted);
}
.search-box input {
    border: none;
    outline: none;
    flex: 1;
    padding: 14px 6px;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
}

.home-main {
    max-width: 1200px;
    margin: -26px auto 0;
    padding: 22px 24px 70px;
    position: relative;
    z-index: 2;
}

.tool-category { margin-top: 46px; }

/* صف "آخر الاستخدام" و"الأكثر استخدامًا" جنب بعض (50/50 على الديسكتوب) */
.highlight-sections-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 46px;
}
.highlight-sections-row > .tool-category {
    flex: 1 1 50%;
    min-width: 0;
    margin-top: 0;
}

/* الأدوات كزراير مصغّرة بدل كروت كبيرة */
.tool-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tool-button {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-color);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tool-button:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: translateY(-2px);
}
.tool-button-icon { font-size: 1.3rem; line-height: 1; }
.tool-button-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.tool-button.coming-soon { opacity: .55; cursor: not-allowed; }

/* زرار المفضلة المصغّر - زي .tool-button بس بعلامة المفضلة في آخره على الشمال */
.fav-button {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    transition: border-color .15s ease, background .15s ease;
}
.fav-button:hover { border-color: var(--primary-color); background: var(--primary-light); }
.fav-button.coming-soon { opacity: .55; }

.fav-button-link {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    color: var(--text-color);
    font-weight: 600;
    font-size: .78rem;
    text-decoration: none;
}
.fav-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-button .favorite-star-btn {
    position: static;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: .85rem;
}
.category-title {
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 18px;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--primary-color);
}

/* ==========================================================================
   قسم "أحدث التدوينات" في الرئيسية
   ========================================================================== */

.blog-preview-section { margin-top: 46px; }

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.section-header-row .category-title { margin-bottom: 0; }
.tool-category-header { margin-bottom: 18px; }
.section-header-row .view-all-btn { flex-shrink: 0; white-space: nowrap; }

.blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 4), 1fr);
    gap: 20px;
    align-items: stretch;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.blog-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--primary-light);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.blog-card-image-placeholder { font-size: 2rem; opacity: .5; }

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px;
}
.blog-card-body h3 {
    font-size: .98rem;
    margin: 0 0 8px;
    color: var(--primary-dark);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-body p {
    font-size: .84rem;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.6;
}
.blog-card-readmore {
    margin-top: auto;
    font-weight: 700;
    color: var(--primary-color);
    font-size: .85rem;
}

/* بطاقات */
.service-cards-container {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 4), 1fr);
    gap: 20px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }

.card-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    background: var(--primary-light);
    margin-inline: auto;
}
.service-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.service-card p { font-size: .88rem; color: var(--text-muted); min-height: 40px; }

.service-card-footer {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tool-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.store-badge[data-store-url]:hover { background: var(--primary-color); color: #fff; }
.store-badge-icon { width: 12px; height: 12px; display: inline-block; }
.store-badge-web .store-badge-icon { width: auto; height: auto; font-size: .8rem; }

.cta-btn {
    display: inline-block;
    align-self: flex-end;
    font-weight: 700;
    color: var(--primary-color);
    font-size: .9rem;
}
.service-card:hover .cta-btn { text-decoration: underline; }

.coming-soon { opacity: .6; cursor: not-allowed; }
.coming-soon .cta-btn { color: var(--text-muted); }

/* زرار المفضلة (نجمة) على البطاقات */
.favorite-star-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    line-height: 1;
    color: #cbd5e1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, transform .15s ease, border-color .15s ease;
}
.favorite-star-btn:hover { transform: scale(1.1); border-color: #f5b301; }
.favorite-star-btn.is-favorite { color: #f5b301; border-color: #f5b301; }

/* زرار المفضلة داخل صفحة الأداة نفسها */
.tool-page-favorite {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: .9rem;
    color: var(--text-muted);
}
.tool-page-favorite .favorite-star-btn {
    position: static;
    background: var(--card-bg);
}

/* شرائح (Slider) */
.home-slider { position: relative; display: flex; align-items: center; gap: 10px; margin: 30px 0; }
.slider-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 10px 4px 20px;
    flex: 1;
}
.slider-slide { flex: 0 0 260px; scroll-snap-align: start; }
.slider-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--primary-color);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.slider-arrow:hover { background: var(--primary-color); color: #fff; }

/* قائمة عمودية (List) */
.service-list-container { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
.service-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    border-right: 4px solid var(--primary-color);
    transition: box-shadow .2s ease, transform .2s ease;
}
.service-list-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-list-item .card-icon { flex-shrink: 0; margin: 0; }
.service-list-text { flex: 1; }
.service-list-text h3 { margin: 0 0 4px; }
.service-list-text p { margin: 0; color: var(--text-muted); font-size: .9rem; }

.ad-slot {
    text-align: center;
    margin: 24px 0;
    overflow: hidden;
}
.ad-slot:empty { display: none; }

/* ==========================================================================
   صفحات الأدوات
   ========================================================================== */

.converter-section, .calculator-section, .results-page, .table-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 24px 70px;
}

.converter-section h2, .page-title { text-align: center; margin-bottom: 24px; font-size: 1.5rem; }
.intro-text { text-align: center; color: var(--text-muted); margin-bottom: 30px; }

/* عناصر الإدخال */
.input-container, .calculator-card, .result-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 26px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}

.currency-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
}

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }

input[type=text], input[type=number], input[type=password], input[type=file], select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: .95rem;
    background: #fdfdfe;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

button { font-family: inherit; cursor: pointer; }

.full-width-btn, .primary-btn, .secondary-btn, .calc-button {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: .95rem;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.primary-btn, .calc-button.primary-btn, #convertButton, #convertCurrencyButton, .calc-button {
    background: var(--primary-color);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.primary-btn:hover, .calc-button:hover, #convertButton:hover, #convertCurrencyButton:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    opacity: .95;
}
.secondary-btn, .calc-button.secondary-btn {
    background: var(--card-bg);
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
}
.full-width-btn { width: 100%; text-align: center; }

#numberInput, #convertButton { display: inline-block; }
.converter-section .input-container:not(.currency-input-grid) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.converter-section .input-container:not(.currency-input-grid) label { flex-basis: 100%; }
.converter-section .input-container:not(.currency-input-grid) input { flex: 1; min-width: 200px; }

.error-message {
    background: #fdecec;
    color: var(--danger-color);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .9rem;
    margin: 14px 0;
}
.success-message {
    background: #e9f8ef;
    color: var(--success-color);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .9rem;
    margin: 14px 0;
}

/* نتائج */
.conversion-results-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.result-box h3 { margin-bottom: 12px; font-size: 1.05rem; color: var(--primary-dark); }
.result-text {
    background: var(--primary-light);
    border-radius: 10px;
    padding: 16px;
    min-height: 40px;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 12px;
    word-break: break-word;
}
.copy-button {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
}
.copy-button:hover { border-color: var(--primary-color); color: var(--primary-color); }

.share-buttons-group {
    display: inline-flex;
    gap: 6px;
    margin-inline-start: 8px;
    vertical-align: middle;
}
.share-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.share-btn img { width: 17px; height: 17px; display: block; }
.export-btn { font-size: .95rem; }
.export-btn:disabled { cursor: wait; }
.share-btn:hover { border-color: var(--primary-color); transform: translateY(-1px); }

.results-container .result-box { text-align: center; }
.highlight { color: var(--primary-color); font-weight: 700; }
.final-result { font-size: 1.2rem; font-weight: 800; color: var(--primary-dark); }
.note { color: var(--text-muted); font-size: .85rem; }

/* شبكات إدخال حاسبة الـ VAT وغيرها */
.input-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.input-grid.two-cols { grid-template-columns: 1fr 1fr; }
.input-grid.multi-cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* جدول الأرقام */
#numberTable, .admin-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
#numberTable th, #numberTable td { padding: 12px 14px; border-bottom: 1px solid var(--border-color); text-align: right; font-size: .9rem; }
#numberTable th { background: var(--primary-light); color: var(--primary-dark); }
#numberTable tr:hover td { background: #fafbfc; }

.pagination-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: .9rem;
}
.nav-link { font-weight: 700; color: var(--primary-color); }
.nav-link.disabled { color: #c7ccd1; pointer-events: none; }

/* ==========================================================================
   المقالات التعريفية (info-section)
   ========================================================================== */

.info-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.info-section h1 { font-size: 1.4rem; color: var(--primary-dark); margin-bottom: 20px; }
.article-content, .article-content-wrapper { color: var(--text-color); }
.article-content p, .article-content-wrapper p { margin: 0 0 14px; color: #374151; }
.article-content hr, .article-content-wrapper hr { border: none; border-top: 1px solid var(--border-color); margin: 30px 0; }

.grid-row.two-column-row, .two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 20px 0;
}
.article-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
}
.article-card.full-span, .full-span { grid-column: 1 / -1; }
.article-card h2, .article-card h3, .article-card h4 { color: var(--primary-dark); }

.example-box {
    background: var(--primary-light);
    border-right: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
}
.warning-box {
    background: var(--warning-bg);
    border-right: 4px solid #d97706;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
    color: #92400e;
}

.keywords-section { margin-top: 30px; }

/* ==========================================================================
   المدونة
   ========================================================================== */

.blog-list-date { font-size: .8rem; color: var(--text-muted); }

.blog-article {
    max-width: 760px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 34px 38px;
    box-shadow: var(--shadow-sm);
}

/* الأسئلة الشائعة تحت الأداة */
.tool-faq-section { max-width: 760px; margin-inline: auto; margin-top: 48px; }
.tool-faq-section .category-title { margin-bottom: 20px; }
.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 10px;
}
.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary-dark);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--text-muted); transition: transform .15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { margin-top: 10px; color: var(--text-color); line-height: 1.8; }
.faq-item:hover { border-color: var(--primary-color); }

.blog-back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: .9rem;
}
.blog-article-featured-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; }
.tags-container span {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .82rem;
}

/* ==========================================================================
   الفوتر
   ========================================================================== */

.site-footer {
    background: #16232b;
    color: #cbd5e1;
    margin-top: 60px;
    padding: 30px 24px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }

.footer-columns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-col { flex: 1 1 220px; }
.footer-col-right { text-align: right; }
.footer-col-center { text-align: center; }
.footer-col-left { text-align: left; }

.footer-copy { margin: 0; font-size: .9rem; }

.footer-menu-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.footer-menu-links a { color: #9ca8b5; font-size: .85rem; white-space: nowrap; }
.footer-menu-links a:hover { color: #fff; }

.footer-social-icons { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.footer-col-left .footer-social-icons { justify-content: flex-start; }
.footer-social-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    transition: background .15s ease, transform .15s ease;
}
.footer-social-icon:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.footer-social-icon img { width: 16px; height: 16px; display: block; }

.footer-extra {
    font-size: .85rem;
    opacity: .85;
    text-align: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.footer-extra a { color: #9fd8d8; }

@media (max-width: 700px) {
    .footer-columns { flex-direction: column; text-align: center; gap: 20px; }
    .footer-col { flex: 0 0 auto; width: 100%; }
    .footer-col-right, .footer-col-center, .footer-col-left { text-align: center; }
    .footer-social-icons { justify-content: center; }
}

/* شريط الكوكيز */
.cookie-consent-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #16232b;
    color: #e5e7eb;
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.15);
}
.cookie-consent-text { margin: 0; font-size: .88rem; max-width: 640px; flex: 1 1 300px; }
.cookie-consent-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.cookie-consent-actions .primary-btn,
.cookie-consent-actions .secondary-btn { padding: 9px 18px; font-size: .85rem; }
.cookie-consent-actions .secondary-btn { background: transparent; color: #cbd5e1; border: 1px solid #4b5563; }
.cookie-close-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 10px;
}
.cookie-close-btn:hover { color: #fff; }

/* ==========================================================================
   الاستجابة (Responsive)
   ========================================================================== */

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed;
        inset: 0 0 0 auto;
        top: 68px;
        width: min(320px, 85%);
        height: calc(100vh - 68px);
        background: var(--card-bg);
        box-shadow: var(--shadow-lg);
        transform: translateX(110%);
        transition: transform .25s ease;
        overflow-y: auto;
        padding: 16px;
    }
    .main-nav.nav-open { transform: translateX(0); }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .dropdown-menu,
    .dropdown-menu-sub {
        position: static !important;
        box-shadow: none;
        border: none;
        display: none !important;
        padding-inline-start: 14px;
        margin: 0 !important;
        min-width: 0;
    }
    .nav-item.has-dropdown.dropdown-open > .dropdown-menu,
    .dropdown-menu li.has-dropdown.dropdown-open > .dropdown-menu-sub {
        display: block !important;
    }
    .dropdown-menu li.has-dropdown > a .caret { transform: rotate(0deg); }
    .dropdown-menu li.has-dropdown.dropdown-open > a .caret { transform: rotate(180deg); }

    .conversion-results-container,
    .grid-row.two-column-row, .two-column-layout,
    .input-grid.two-cols { grid-template-columns: 1fr; }

    .service-cards-container { grid-template-columns: repeat(2, 1fr) !important; }
    .blog-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* على الموبايل: القسمين يبقوا 100% كل واحد فوق التاني، والأزرار تبقى مكدّسة (100% لكل زرار) */
    .highlight-sections-row { flex-direction: column; gap: 30px; }
    .highlight-sections-row > .tool-category { flex: 1 1 100%; }
    .tool-button {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: flex-start;
        text-align: right;
        padding: 12px 14px;
    }
    .tool-button-label { -webkit-line-clamp: 1; }
    .fav-button { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .service-cards-container { grid-template-columns: 1fr !important; }
    .blog-cards-grid { grid-template-columns: 1fr !important; }
    .hero-search h1 { font-size: 1.2rem; }
    .cookie-consent-bar { flex-direction: column; text-align: center; gap: 10px; padding: 12px 16px; }
    .cookie-consent-text { font-size: .8rem; line-height: 1.5; }
    .cookie-consent-actions { width: 100%; justify-content: center; }
    .cookie-consent-actions .primary-btn,
    .cookie-consent-actions .secondary-btn { padding: 8px 14px; font-size: .8rem; }
}

@media (max-width: 600px) {
    .navbar-container { padding: 12px 16px; }
    .hero-search { padding: 30px 18px 40px; }
    .converter-section, .calculator-section, .table-container { padding: 20px 16px 50px; }
    .blog-article { padding: 22px 20px; }
}


/* ========================================================================
   واجهة تفقيت الجديدة — Professional UI v2
   لوحة ألوان مستوحاة من المرجع الجديد: أزرق هادئ + أبيض + باستيل.
   ======================================================================== */
:root {
    --ui-blue: #1479d1;
    --ui-blue-dark: #0c3f70;
    --ui-blue-soft: #eaf5ff;
    --ui-sky: #dff1ff;
    --ui-ink: #102f4d;
    --ui-muted: #64748b;
    --ui-surface: #ffffff;
    --ui-line: #dce8f2;
    --ui-shadow: 0 12px 35px rgba(20, 74, 115, .08);
    --ui-shadow-hover: 0 18px 42px rgba(20, 74, 115, .13);
    --primary-color: var(--ui-blue) !important;
    --primary-dark: var(--ui-blue-dark);
    --primary-light: var(--ui-blue-soft);
    --text-color: var(--ui-ink);
    --text-muted: var(--ui-muted);
    --border-color: var(--ui-line);
    --radius-lg: 18px;
    --radius-md: 12px;
}

body.home-page { background: #f8fbfe; }
body.home-page .site-header {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(20,121,209,.10);
    box-shadow: 0 3px 18px rgba(15,58,91,.06);
}
body.home-page .navbar-container { max-width: 1240px; padding: 12px 26px; }
body.home-page .logo-img { height: 46px; width: auto; object-fit: contain; }
body.home-page .main-nav .nav-item > a { border-radius: 999px; padding: 9px 15px; }
body.home-page .main-nav .nav-item > a:hover,
body.home-page .main-nav .nav-item.dropdown-open > a { background: var(--ui-blue-soft); color: var(--ui-blue); }
body.home-page .dark-mode-toggle { border-color: #d7e5f0; }

.hero-search {
    position: relative;
    overflow: hidden;
    padding: 68px 24px 76px;
    background:
        radial-gradient(circle at 14% 25%, rgba(255,255,255,.95) 0 4%, transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.88) 0 5%, transparent 25%),
        linear-gradient(120deg, #dcefff 0%, #f7fbff 48%, #d9f1ff 100%);
    border-bottom: 1px solid #e1eef7;
}
.hero-search::before,
.hero-search::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}
.hero-search::before { width: 260px; height: 260px; right: -90px; bottom: -140px; background: rgba(20,121,209,.10); }
.hero-search::after { width: 210px; height: 210px; left: -70px; top: -100px; background: rgba(79,190,220,.12); }
.hero-search-overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.55), rgba(255,255,255,.18)); pointer-events:none; }
.hero-search-inner { position: relative; z-index: 1; max-width: 760px; }
.hero-eyebrow {
    display: inline-flex; align-items:center; gap:7px; padding: 7px 13px; border:1px solid rgba(20,121,209,.16);
    border-radius:999px; background:rgba(255,255,255,.72); color:var(--ui-blue); font-size:.82rem; font-weight:800; margin-bottom:13px;
}
.hero-search h1 { color: var(--ui-ink); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 10px; letter-spacing:-.7px; }
.hero-subtitle { margin: 0 auto 25px; max-width: 650px; color:#526b82; font-size:1rem; }
.search-box {
    max-width: 650px; margin: 0 auto; padding: 5px 7px; background:#fff; border:1px solid #b9d9f2;
    box-shadow: 0 12px 35px rgba(19,85,128,.12); border-radius:999px;
}
.search-icon { color:var(--ui-blue); font-size:1.55rem; padding:0 14px; }
.search-box input { color:var(--ui-ink); padding: 14px 6px; }
.search-box input::placeholder { color:#94a8ba; }
.hero-quick-links { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:16px; }
.hero-quick-links a { padding:7px 14px; border:1px solid #d3e5f3; background:rgba(255,255,255,.82); border-radius:999px; color:#244f73; font-weight:700; font-size:.82rem; transition:.2s ease; }
.hero-quick-links a:hover { color:var(--ui-blue); border-color:#9bc9eb; transform:translateY(-2px); box-shadow:0 7px 18px rgba(20,121,209,.08); }

.home-main { max-width:1240px; margin:0 auto; padding:30px 26px 72px; }
.tool-category { margin-top:50px; }
.highlight-sections-row { margin-top:34px; }
.category-title { color:var(--ui-ink); border-inline-start:0; padding-inline-start:0; font-size:1.35rem; letter-spacing:-.2px; position:relative; }
.category-title::after { content:''; display:block; width:44px; height:3px; border-radius:999px; background:var(--ui-blue); margin-top:7px; }
.section-header-row { margin-bottom:20px; }
.view-all-btn {
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
    border: 1px solid var(--ui-blue) !important;
    padding: 7px 16px !important;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
}
.view-all-btn:hover { background: var(--ui-blue) !important; color: #fff !important; }

/* قسم التصنيفات في الواجهة */
.home-categories-section .service-cards-container { gap:16px; }
.home-categories-section .service-card { min-height:154px; padding:22px 16px; border-radius:16px; background:linear-gradient(145deg,#fff,#f8fbfe); }
.home-categories-section .service-card p { min-height:0; }
.home-categories-section .service-card .card-icon { width:54px; height:54px; line-height:54px; font-size:1.8rem; margin-bottom:8px; }

.service-cards-container { gap:18px; }
.service-card {
    border:1px solid #dce8f2; border-radius:18px; padding:25px 20px; background:rgba(255,255,255,.96);
    box-shadow:0 5px 20px rgba(18,64,96,.035); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card::before { height:3px; background:linear-gradient(90deg,#4db5ff,#1479d1); }
.service-card:hover { transform:translateY(-7px); box-shadow:var(--ui-shadow-hover); border-color:#b9d9f2; }
.service-card .card-icon { background:var(--ui-blue-soft); color:var(--ui-blue-dark); }
.service-card h3 { color:var(--ui-ink); font-size:1.06rem; }
.service-card p { color:#687f94; }
.cta-btn { color:var(--ui-blue); background:#f4faff; border:1px solid #b8dbf6; border-radius:999px; padding:7px 15px; align-self:stretch; text-align:center; transition:.2s ease; }
.service-card:hover .cta-btn { background:var(--ui-blue); color:#fff; text-decoration:none; border-color:var(--ui-blue); }
.favorite-star-btn { box-shadow:0 3px 10px rgba(15,60,95,.06); }
.tool-button { border-color:#dce8f2; border-radius:14px; box-shadow:0 4px 14px rgba(18,64,96,.035); }
.tool-button:hover { border-color:#9dcdf0; box-shadow:0 10px 24px rgba(20,121,209,.09); }

.blog-card { border-color:#dce8f2; box-shadow:0 5px 20px rgba(18,64,96,.035); }
.blog-card:hover { box-shadow:var(--ui-shadow-hover); }

.site-footer { background:linear-gradient(135deg,#0b3457,#0e507d); margin-top:30px; padding:40px 26px 24px; }
.footer-inner { max-width:1240px; }
.footer-col h3, .footer-col h4 { color:#fff; }
.footer-menu-links a, .footer-copy { color:#c9ddec; }
.footer-menu-links a:hover { color:#fff; }
.footer-social-icon { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); }

@media (max-width: 800px) {
    body.home-page .navbar-container { padding:10px 16px; }
    .hero-search { padding:48px 18px 54px; }
    .hero-search h1 { font-size:1.8rem; }
    .home-main { padding-inline:16px; }
}
@media (max-width:560px) {
    .hero-search { padding:40px 14px 48px; }
    .hero-eyebrow { font-size:.76rem; }
    .hero-search h1 { font-size:1.55rem; }
    .hero-subtitle { font-size:.88rem; }
    .hero-quick-links a { font-size:.76rem; padding:6px 10px; }
    .home-main { padding-top:18px; }
}

/* ========================================================================
   Header & Mobile v3 — نفس هوية الواجهة المرجعية
   ======================================================================== */
.site-header { z-index: 1000; }
.navbar-container { position: relative; min-height: 70px; }
.logo { min-width: 190px; }
.logo-copy { display:flex; flex-direction:column; line-height:1.1; }
.logo-copy small { margin-top:4px; color:#71879b; font-size:.65rem; font-weight:600; }
.logo-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#eaf5ff,#d9edff); color:var(--ui-blue-dark); font-size:1.65rem; box-shadow:inset 0 0 0 1px #cfe5f5; }
.logo-text { font-size:1.45rem; letter-spacing:-.5px; color:var(--ui-ink); }
.header-actions { display:flex; align-items:center; gap:8px; order:3; }
.header-search-btn, .dark-mode-toggle, .nav-toggle { flex-shrink:0; }
.header-search-btn { width:40px; height:40px; display:grid; place-items:center; border:1px solid #d7e5f0; border-radius:50%; color:var(--ui-ink); background:#fff; font-size:1.45rem; transition:.2s ease; }
.header-search-btn:hover { color:var(--ui-blue); border-color:#a9d0ee; background:var(--ui-blue-soft); transform:translateY(-1px); }
.main-nav { order:2; }
.nav-backdrop { display:none; }

@media (min-width:901px) {
  .navbar-container { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; }
  .main-nav { justify-self:center; }
  .header-actions { justify-self:start; }
  .nav-toggle { display:none !important; }
}

@media (max-width:900px) {
  body.nav-menu-open { overflow:hidden; }
  .navbar-container { min-height:68px; padding:9px 14px !important; gap:10px; }
  .logo { min-width:0; margin-inline-end:auto; }
  .logo-mark { width:38px; height:38px; border-radius:12px; font-size:1.45rem; }
  .logo-text { font-size:1.18rem; }
  .logo-copy small { font-size:.58rem; }
  .header-actions { gap:6px; }
  .header-search-btn, .dark-mode-toggle { width:38px; height:38px; }
  .nav-toggle { position:relative; display:flex; width:42px; height:42px; border:1px solid #d7e5f0; border-radius:12px; background:#fff; align-items:center; }
  .nav-toggle span { position:absolute; left:9px; width:22px; height:2px; background:var(--ui-ink); transition:.22s ease; }
  .nav-toggle span:nth-child(1) { top:13px; }
  .nav-toggle span:nth-child(2) { top:20px; }
  .nav-toggle span:nth-child(3) { top:27px; }
  .nav-toggle.is-open span:nth-child(1) { top:20px; transform:rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity:0; transform:scaleX(.3); }
  .nav-toggle.is-open span:nth-child(3) { top:20px; transform:rotate(-45deg); }
  .main-nav { position:fixed; top:68px; right:0; left:auto; width:min(360px,88vw); height:calc(100dvh - 68px); padding:14px; background:rgba(255,255,255,.98); border-left:1px solid #dce8f2; box-shadow:-18px 0 45px rgba(14,57,88,.13); transform:translateX(105%); transition:transform .25s cubic-bezier(.22,.61,.36,1); overflow-y:auto; overscroll-behavior:contain; z-index:1002; }
  .main-nav.nav-open { transform:translateX(0); }
  .nav-backdrop { display:block; position:fixed; inset:68px 0 0; background:rgba(8,35,55,.28); opacity:0; visibility:hidden; transition:.2s ease; z-index:1001; backdrop-filter:blur(2px); }
  .nav-backdrop.is-visible { opacity:1; visibility:visible; }
  .main-nav > ul { gap:5px; }
  .main-nav .nav-item > a { min-height:48px; padding:11px 14px; border-radius:12px; font-size:.94rem; justify-content:space-between; }
  .main-nav .nav-item > a:hover, .main-nav .nav-item.dropdown-open > a { background:var(--ui-blue-soft); color:var(--ui-blue); }
  .dropdown-menu, .dropdown-menu-sub { padding-inline-start:10px; margin-top:2px !important; background:transparent; }
  .dropdown-menu li a { min-height:44px; padding:9px 12px; border-radius:10px; }
}

@media (max-width:560px) {
  .header-search-btn { display:none; }
  .main-nav { width:min(340px,92vw); }
  .logo-copy small { display:none; }
}

html[data-theme="dark"] .header-search-btn,
html[data-theme="dark"] .nav-toggle { background:var(--card-bg); border-color:var(--border-color); color:var(--text-color); }
html[data-theme="dark"] .logo-copy small { color:#9fb2c4; }
html[data-theme="dark"] .logo-text { color:#e7f1fa; }
html[data-theme="dark"] .logo-mark { background:#17314a; color:#9fd2f6; box-shadow:inset 0 0 0 1px #274762; }

/* ===== Tool page modern UI v1 ===== */
.tool-page-modern{max-width:1180px!important;margin-inline:auto!important;padding-inline:20px!important}
.tool-hero-card{background:linear-gradient(135deg,#f7fbff 0%,#eef7ff 52%,#f5f2ff 100%);border:1px solid #dceaf7;border-radius:28px;padding:22px 26px;margin:0 auto 22px;box-shadow:0 14px 38px rgba(44,93,140,.08)}
.tool-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#8293a6;font-size:.82rem;margin-bottom:18px}.tool-breadcrumb a{color:#4b7ea8;text-decoration:none}.tool-breadcrumb a:hover{text-decoration:underline}.tool-breadcrumb span{color:#a7b4c2}
.tool-hero-content{display:flex;align-items:center;gap:18px}.tool-hero-icon{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:#fff;border:1px solid #dbe9f4;box-shadow:0 8px 22px rgba(65,104,140,.09);font-size:2rem;flex:0 0 auto}.tool-hero-copy{min-width:0;flex:1}.tool-eyebrow{font-size:.78rem;font-weight:700;color:#6d8296;margin-bottom:4px}.tool-hero-copy h1{margin:0 0 7px;font-size:clamp(1.65rem,3vw,2.25rem);color:#21384e}.tool-hero-copy p{margin:0;color:#63778b;line-height:1.8;max-width:780px}.tool-favorite-btn{margin-inline-start:auto;flex:0 0 auto}
.tool-workspace-card{background:#fff;border:1px solid #e3ebf2;border-radius:26px;box-shadow:0 12px 32px rgba(37,70,98,.07);overflow:hidden;margin-bottom:28px}.tool-workspace-head{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;background:#fbfdff;border-bottom:1px solid #e8eef4;color:#38566f;font-weight:800}.tool-free-badge{background:#eaf8f3;color:#27795f;border-radius:999px;padding:5px 11px;font-size:.75rem}.tool-generated-content{padding:26px}.tool-generated-content>h1:first-child,.tool-generated-content>h2:first-child{display:none}.tool-generated-content .page-title{margin-top:0}
.tool-seo-content,.tool-faq-section,.related-tools-section{background:#fff;border:1px solid #e3ebf2;border-radius:24px;padding:26px;margin-bottom:24px;box-shadow:0 8px 24px rgba(37,70,98,.045)}.tool-seo-content{line-height:2;color:#566b7e}.tool-faq-section .category-title,.related-tools-section .category-title{margin-top:0}.related-tools-section .service-cards-container{margin-top:16px}
@media(max-width:700px){.tool-page-modern{padding-inline:12px!important}.tool-hero-card{border-radius:20px;padding:17px 16px}.tool-hero-content{align-items:flex-start}.tool-hero-icon{width:58px;height:58px;border-radius:17px;font-size:1.55rem}.tool-hero-copy h1{font-size:1.45rem}.tool-hero-copy p{font-size:.9rem}.tool-workspace-card{border-radius:20px}.tool-workspace-head{padding:13px 15px}.tool-generated-content{padding:15px}.tool-seo-content,.tool-faq-section,.related-tools-section{border-radius:20px;padding:18px}.tool-favorite-btn{font-size:1.3rem}}
@media(max-width:430px){.tool-hero-content{gap:11px}.tool-eyebrow{font-size:.7rem}.tool-hero-copy h1{font-size:1.28rem}.tool-hero-copy p{font-size:.82rem;line-height:1.7}.tool-breadcrumb{font-size:.74rem;margin-bottom:13px}}


/* ===== Category page modern UI v1 ===== */
.category-page-modern{max-width:1180px;margin-inline:auto;padding:22px 20px 55px}
.category-hero-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#f7fbff 0%,#eaf5ff 55%,#f4f1ff 100%);border:1px solid #dceaf7;border-radius:28px;padding:22px 26px;margin:0 auto 24px;box-shadow:0 14px 38px rgba(44,93,140,.08)}
.category-hero-card:after{content:'';position:absolute;width:230px;height:230px;border-radius:50%;left:-100px;bottom:-145px;background:rgba(255,255,255,.55);pointer-events:none}
.category-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.8rem;color:#8194a7;margin-bottom:22px;position:relative;z-index:1}.category-breadcrumb a{color:#4d82ad;text-decoration:none;font-weight:700}.category-breadcrumb a:hover{text-decoration:underline}.category-breadcrumb span:nth-child(2){color:#a7b5c2}
.category-hero-main{display:flex;align-items:center;gap:19px;position:relative;z-index:1}.category-hero-icon{width:76px;height:76px;display:grid;place-items:center;flex:0 0 auto;border-radius:23px;background:#fff;border:1px solid #dce9f4;box-shadow:0 8px 22px rgba(65,104,140,.09);font-size:2rem}.category-hero-copy{min-width:0}.category-eyebrow,.category-section-eyebrow{display:block;color:#668198;font-size:.77rem;font-weight:800;margin-bottom:5px}.category-hero-copy h1{margin:0 0 7px;color:#183b5b;font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.4px}.category-hero-copy p{margin:0;color:#60778c;line-height:1.9;max-width:850px;font-size:.94rem}
.category-stats{display:flex;gap:10px;margin-top:23px;position:relative;z-index:1}.category-stats div{min-width:125px;padding:10px 15px;background:rgba(255,255,255,.78);border:1px solid rgba(211,227,239,.9);border-radius:14px;display:flex;align-items:center;gap:8px}.category-stats strong{font-size:1rem;color:#1769aa}.category-stats span{font-size:.75rem;color:#71879b;font-weight:700}
.category-tools-section{background:#fff;border:1px solid #e1eaf1;border-radius:26px;padding:25px;margin-bottom:24px;box-shadow:0 12px 32px rgba(37,70,98,.055)}.category-tools-header{margin-bottom:20px}.category-tools-header>div{min-width:0}.category-section-eyebrow{margin-bottom:2px;color:#4f83aa}.category-section-title{margin:0;color:#213e57;font-size:1.3rem}.category-count-badge{flex:0 0 auto;background:#eaf5ff;color:#1479d1;border:1px solid #cfe5f6;border-radius:999px;padding:7px 12px;font-size:.75rem;font-weight:800}
.category-tools-grid{display:grid;grid-template-columns:repeat(var(--cards-per-row,4),1fr);gap:15px}.category-tool-card{position:relative;display:flex;align-items:center;gap:13px;min-height:108px;padding:16px;border:1px solid #e1eaf1;border-radius:18px;background:linear-gradient(145deg,#fff,#f9fcff);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden}.category-tool-card:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,#4db5ff,#1479d1);transform:scaleY(0);transform-origin:bottom;transition:transform .2s ease}.category-tool-card:hover{transform:translateY(-5px);border-color:#bddcf2;box-shadow:0 12px 26px rgba(36,91,135,.1)}.category-tool-card:hover:before{transform:scaleY(1)}.category-tool-icon{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:15px;background:#eaf5ff;font-size:1.55rem}.category-tool-content{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.category-tool-content strong{color:#203e57;font-size:.96rem;line-height:1.45}.category-tool-content span{color:#72879a;font-size:.76rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.category-tool-arrow{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#f1f7fc;color:#4c7fa5;font-size:.9rem;transition:.2s ease}.category-tool-card:hover .category-tool-arrow{background:#1479d1;color:#fff;transform:translateX(-2px)}
.category-info-card{display:flex;align-items:flex-start;gap:14px;background:#f8fbfe;border:1px solid #e0eaf2;border-radius:22px;padding:20px 22px;color:#5f7589}.category-info-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:#eaf5ff;font-size:1.2rem}.category-info-card h2{margin:0 0 5px;color:#264761;font-size:1rem}.category-info-card p{margin:0;line-height:1.9;font-size:.83rem}
.category-empty-state{text-align:center;padding:45px 20px;border:1px dashed #cbdce9;border-radius:18px;background:#fbfdff}.category-empty-state>span{font-size:2.2rem}.category-empty-state h2{margin:10px 0 6px;color:#294860;font-size:1.05rem}.category-empty-state p{margin:0 0 15px;color:#71869a;font-size:.85rem}.category-empty-state a{color:#1479d1;font-weight:800;text-decoration:none}
html[data-theme="dark"] .category-hero-card{background:linear-gradient(135deg,#13283a,#17344c,#272442);border-color:#29465e}.category-hero-copy h1,.category-section-title,.category-tool-content strong,.category-info-card h2{color:#e6f2fb}.category-hero-copy p,.category-tool-content span,.category-info-card,.category-stats span{color:#a9bdcc}.category-hero-icon,.category-tool-card,.category-tools-section{background:#101d29;border-color:#294052}.category-breadcrumb{color:#91a8ba}.category-tools-section,.category-info-card{box-shadow:none}.category-tool-card{background:linear-gradient(145deg,#101d29,#142636)}.category-tool-icon{background:#17344c}.category-tool-arrow{background:#1b3449;color:#9ec9e8}.category-count-badge{background:#15344c;border-color:#2a5878;color:#8bc5ed}.category-stats div{background:rgba(16,29,41,.7);border-color:#29465e}.category-info-card{background:#101d29;border-color:#294052}.category-info-icon{background:#17344c}.category-empty-state{background:#101d29;border-color:#355067}
@media(max-width:900px){.category-tools-grid{grid-template-columns:repeat(2,1fr)!important}.category-page-modern{padding-inline:14px}.category-hero-card{padding:19px 20px;border-radius:23px}}
@media(max-width:600px){.category-page-modern{padding:15px 11px 40px}.category-hero-card{padding:16px;border-radius:20px}.category-breadcrumb{margin-bottom:17px;font-size:.73rem}.category-hero-main{align-items:flex-start;gap:12px}.category-hero-icon{width:58px;height:58px;border-radius:17px;font-size:1.5rem}.category-eyebrow{font-size:.68rem}.category-hero-copy h1{font-size:1.35rem}.category-hero-copy p{font-size:.8rem;line-height:1.75}.category-stats{gap:6px;margin-top:17px}.category-stats div{min-width:0;flex:1;padding:8px 7px;justify-content:center;gap:5px;flex-direction:column}.category-stats strong{font-size:.9rem}.category-stats span{font-size:.65rem}.category-tools-section{padding:17px;border-radius:20px}.category-section-title{font-size:1.08rem}.category-count-badge{font-size:.67rem;padding:6px 9px}.category-tools-grid{grid-template-columns:1fr!important;gap:11px}.category-tool-card{min-height:88px;padding:13px;border-radius:15px}.category-tool-icon{width:46px;height:46px;border-radius:13px;font-size:1.35rem}.category-tool-content strong{font-size:.88rem}.category-tool-content span{font-size:.72rem}.category-info-card{padding:16px;border-radius:18px}.category-info-card p{font-size:.77rem}}


/* =========================
   Modern Blog UI
   ========================= */
.blog-modern-page{max-width:1180px;margin-inline:auto;padding:22px 20px 60px}
.blog-hero-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;background:linear-gradient(135deg,#f7fbff 0%,#eaf5ff 55%,#f4f1ff 100%);border:1px solid #dceaf7;border-radius:28px;padding:34px 38px;margin:0 auto 30px;box-shadow:0 14px 38px rgba(44,93,140,.08)}
.blog-hero-card:after{content:'';position:absolute;width:250px;height:250px;border-radius:50%;left:-105px;bottom:-160px;background:rgba(255,255,255,.6);pointer-events:none}
.blog-hero-copy{position:relative;z-index:1;max-width:820px}.blog-eyebrow{display:block;color:#4d82ad;font-size:.78rem;font-weight:800;margin-bottom:8px}.blog-hero-copy h1{margin:0 0 9px;color:#183b5b;font-size:clamp(1.8rem,3.2vw,2.55rem);letter-spacing:-.6px}.blog-hero-copy p{margin:0;color:#60778c;line-height:1.95;font-size:.95rem;max-width:760px}.blog-hero-icon{position:relative;z-index:1;width:86px;height:86px;flex:0 0 auto;display:grid;place-items:center;border-radius:27px;background:#fff;border:1px solid #dce9f4;box-shadow:0 10px 25px rgba(65,104,140,.1);font-size:2rem;color:#1479d1}
.blog-modern-section{background:#fff;border:1px solid #e1eaf1;border-radius:26px;padding:25px;margin-bottom:24px;box-shadow:0 12px 32px rgba(37,70,98,.055)}
.blog-section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:20px}.blog-section-eyebrow{display:block;color:#4f83aa;font-size:.74rem;font-weight:800;margin-bottom:3px}.blog-section-header h2{margin:0;color:#213e57;font-size:1.3rem}.blog-count-badge{background:#eaf5ff;color:#1479d1;border:1px solid #cfe5f6;border-radius:999px;padding:7px 12px;font-size:.72rem;font-weight:800;white-space:nowrap}
.blog-modern-grid{display:grid;grid-template-columns:repeat(var(--cards-per-row,4),1fr);gap:16px}.blog-modern-card{min-width:0;border:1px solid #e1eaf1;border-radius:19px;overflow:hidden;background:linear-gradient(145deg,#fff,#f9fcff);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.blog-modern-card:hover{transform:translateY(-5px);border-color:#bddcf2;box-shadow:0 14px 28px rgba(36,91,135,.1)}.blog-modern-card-link{display:block;height:100%;color:inherit;text-decoration:none}.blog-modern-image{height:158px;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#eaf5ff,#f4f1ff);background-size:cover;background-position:center;overflow:hidden}.blog-modern-image:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,63,112,.02),rgba(12,63,112,.12))}.blog-modern-image>span:first-child{font-size:2.6rem;opacity:.7;position:relative;z-index:1}.blog-image-label{position:absolute;top:11px;right:11px;z-index:2;background:rgba(255,255,255,.9);color:#39739d;border:1px solid rgba(214,229,241,.9);border-radius:999px;padding:5px 9px;font-size:.64rem;font-weight:800}.blog-modern-body{padding:16px 16px 17px}.blog-date{display:block;color:#7890a4;font-size:.67rem;margin-bottom:7px}.blog-modern-body h3{margin:0 0 8px;color:#203e57;font-size:.96rem;line-height:1.55}.blog-modern-body p{margin:0;color:#71869a;font-size:.76rem;line-height:1.8;min-height:43px}.blog-read-more{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:11px;border-top:1px solid #edf2f6;color:#1479d1;font-size:.73rem;font-weight:800}.blog-read-more b{font-size:1rem;font-weight:700;transition:transform .2s ease}.blog-modern-card:hover .blog-read-more b{transform:translateX(-3px)}
.blog-empty-state{text-align:center;padding:55px 20px;border:1px dashed #cbdce9;border-radius:22px;background:#fbfdff}.blog-empty-state>span{font-size:2.4rem}.blog-empty-state h2{margin:10px 0 6px;color:#294860;font-size:1.08rem}.blog-empty-state p{margin:0 0 15px;color:#71869a;font-size:.84rem}.blog-empty-state a{color:#1479d1;font-weight:800;text-decoration:none}
html[data-theme="dark"] .blog-hero-card{background:linear-gradient(135deg,#13283a,#17344c,#272442);border-color:#29465e}.blog-hero-copy h1,.blog-section-header h2,.blog-modern-body h3{color:#e6f2fb}.blog-hero-copy p,.blog-modern-body p,.blog-date{color:#a9bdcc}.blog-hero-icon,.blog-modern-section,.blog-modern-card{background:#101d29;border-color:#294052}.blog-hero-icon{color:#8bc5ed}.blog-image-label{background:rgba(16,29,41,.88);border-color:#34536a;color:#9ec9e8}.blog-read-more{border-color:#294052}.blog-empty-state{background:#101d29;border-color:#355067}.blog-empty-state h2{color:#e6f2fb}.blog-empty-state p{color:#a9bdcc}
@media(max-width:900px){.blog-modern-grid{grid-template-columns:repeat(2,1fr)!important}.blog-modern-page{padding-inline:14px}.blog-hero-card{padding:27px 25px;border-radius:23px}}
@media(max-width:600px){.blog-modern-page{padding:15px 11px 40px}.blog-hero-card{padding:21px 18px;border-radius:20px;gap:14px}.blog-hero-copy h1{font-size:1.45rem}.blog-hero-copy p{font-size:.8rem;line-height:1.8}.blog-eyebrow{font-size:.67rem}.blog-hero-icon{width:57px;height:57px;border-radius:17px;font-size:1.35rem}.blog-modern-section{padding:17px;border-radius:20px}.blog-section-header{align-items:center;margin-bottom:15px}.blog-section-header h2{font-size:1.08rem}.blog-count-badge{font-size:.65rem;padding:6px 9px}.blog-modern-grid{grid-template-columns:1fr!important;gap:11px}.blog-modern-image{height:145px}.blog-modern-body{padding:14px}.blog-modern-body h3{font-size:.9rem}.blog-modern-body p{font-size:.72rem}.blog-empty-state{padding:45px 15px}}


/* =========================
   Modern Article UI
   ========================= */
.blog-article-modern-page{max-width:1180px;margin-inline:auto;padding:18px 20px 65px}
.article-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;color:#7890a4;font-size:.72rem;margin:2px 0 18px;flex-wrap:wrap}.article-breadcrumb a{color:#4b83ad;font-weight:800}.article-breadcrumb span{opacity:.7}
.article-modern-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start;direction:ltr}.article-main-column,.article-sidebar{direction:rtl}
.article-main-column{min-width:0;background:#fff;border:1px solid #e0eaf2;border-radius:28px;box-shadow:0 15px 40px rgba(37,70,98,.065);overflow:hidden}
.article-modern-header{padding:36px 42px 27px;text-align:right}.article-category-pill{display:inline-flex;align-items:center;gap:5px;background:#eaf5ff;border:1px solid #cfe5f6;color:#1479d1;border-radius:999px;padding:7px 12px;font-size:.7rem;font-weight:800;margin-bottom:14px}.article-modern-header h1{margin:0 0 13px;color:#173a59;font-size:clamp(1.65rem,3.2vw,2.55rem);line-height:1.5;letter-spacing:-.4px}.article-lead{margin:0;color:#63798c;font-size:.94rem;line-height:2;max-width:850px}.article-meta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;padding-top:15px;border-top:1px solid #edf2f6;color:#7b90a2;font-size:.7rem}.article-cover-wrap{margin:0 42px 20px;overflow:hidden;border-radius:20px;background:#edf5fa}.article-cover-image{width:100%;max-height:520px;object-fit:cover}.article-share-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 42px;padding:13px 0;border-top:1px solid #edf2f6;border-bottom:1px solid #edf2f6}.article-share-bar strong{font-size:.72rem;color:#3e617b;margin-left:5px}.article-share-bar a,.article-share-native{border:1px solid #dce8f1;background:#f8fbfe;color:#426b87;border-radius:999px;padding:6px 10px;font-family:inherit;font-size:.65rem;font-weight:800;cursor:pointer}.article-share-bar a:hover,.article-share-native:hover{border-color:#1479d1;color:#1479d1;background:#fff}
.article-modern-content{padding:32px 42px 38px;color:#334e63;font-size:.96rem;line-height:2.05}.article-modern-content p{margin:0 0 19px;color:#40596d}.article-modern-content h2{font-size:1.35rem;color:#183d5c;margin:31px 0 12px;padding-right:12px;border-right:3px solid #1479d1}.article-modern-content h3{font-size:1.1rem;color:#24526f;margin:25px 0 10px}.article-modern-content h4{font-size:1rem;color:#315d77;margin:20px 0 8px}.article-modern-content ul,.article-modern-content ol{padding-right:24px;margin:0 0 20px}.article-modern-content li{margin-bottom:7px}.article-modern-content a{color:#1479d1;text-decoration:underline;text-decoration-color:#bddcf2;text-underline-offset:3px}.article-modern-content blockquote{margin:22px 0;padding:16px 20px;background:#f4f9fd;border-right:4px solid #1479d1;border-radius:12px;color:#41647b}.article-modern-content img{border-radius:16px;margin:22px auto;box-shadow:0 8px 24px rgba(30,70,100,.08)}.article-modern-content table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.85rem}.article-modern-content th,.article-modern-content td{border:1px solid #dce7ef;padding:10px;text-align:right}.article-modern-content th{background:#f1f7fb;color:#21465f}.article-modern-content code{background:#edf5fa;padding:2px 6px;border-radius:6px}.article-modern-content pre{direction:ltr;text-align:left;overflow:auto;background:#102f4d;color:#fff;border-radius:12px;padding:15px;margin:20px 0}.article-bottom-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:18px 42px 28px;border-top:1px solid #edf2f6}.article-bottom-nav a{font-size:.73rem;font-weight:800;color:#1479d1;background:#f5faff;border:1px solid #dceaf5;border-radius:12px;padding:9px 12px}
.article-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}.article-side-card{background:#fff;border:1px solid #e0eaf2;border-radius:22px;padding:21px;box-shadow:0 10px 28px rgba(37,70,98,.05)}.article-side-icon{width:43px;height:43px;display:grid;place-items:center;background:#eaf5ff;border-radius:13px;font-size:1.2rem;margin-bottom:10px}.article-side-card h2{margin:0 0 7px;color:#244861;font-size:1rem}.article-side-card p{margin:0;color:#71869a;font-size:.75rem;line-height:1.9}.article-mini-tool{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf2f6}.article-mini-tool:last-child{border-bottom:0;padding-bottom:0}.article-mini-tool>span{width:38px;height:38px;display:grid;place-items:center;background:#f1f7fb;border-radius:11px;font-size:1.1rem}.article-mini-tool div{min-width:0}.article-mini-tool strong{display:block;color:#31536b;font-size:.73rem;line-height:1.5}.article-mini-tool small{display:block;color:#1479d1;font-size:.62rem;margin-top:2px}
.article-related-section{margin-top:28px;background:#fff;border:1px solid #e0eaf2;border-radius:26px;padding:24px;box-shadow:0 12px 32px rgba(37,70,98,.05)}.article-related-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:17px}.article-related-heading span{display:block;color:#4f83aa;font-size:.7rem;font-weight:800}.article-related-heading h2{margin:2px 0 0;color:#213e57;font-size:1.25rem}.article-related-heading>a{color:#1479d1;font-size:.7rem;font-weight:800}.article-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.article-related-card{display:grid;grid-template-columns:95px 1fr;min-width:0;gap:12px;border:1px solid #e1eaf1;border-radius:16px;padding:10px;background:#fbfdff;transition:.2s ease}.article-related-card:hover{transform:translateY(-3px);border-color:#bddcf2;box-shadow:0 10px 22px rgba(36,91,135,.08)}.article-related-image{height:86px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#eaf5ff,#f4f1ff);background-size:cover;background-position:center;font-size:1.8rem}.article-related-card small{color:#7890a4;font-size:.58rem}.article-related-card h3{margin:4px 0 7px;color:#284963;font-size:.77rem;line-height:1.55}.article-related-card span{color:#1479d1;font-size:.62rem;font-weight:800}
html[data-theme="dark"] .article-main-column,html[data-theme="dark"] .article-side-card,html[data-theme="dark"] .article-related-section{background:#101d29;border-color:#294052;box-shadow:none}html[data-theme="dark"] .article-modern-header h1,html[data-theme="dark"] .article-modern-content h2,html[data-theme="dark"] .article-related-heading h2{color:#e6f2fb}html[data-theme="dark"] .article-lead,html[data-theme="dark"] .article-meta-row,html[data-theme="dark"] .article-modern-content p,html[data-theme="dark"] .article-side-card p,html[data-theme="dark"] .article-related-card small{color:#a9bdcc}html[data-theme="dark"] .article-modern-content h3,html[data-theme="dark"] .article-modern-content h4,html[data-theme="dark"] .article-side-card h2,html[data-theme="dark"] .article-related-card h3{color:#b9d4e7}html[data-theme="dark"] .article-share-bar,html[data-theme="dark"] .article-bottom-nav,html[data-theme="dark"] .article-modern-content th,html[data-theme="dark"] .article-modern-content td,html[data-theme="dark"] .article-mini-tool{border-color:#294052}html[data-theme="dark"] .article-share-bar a,html[data-theme="dark"] .article-share-native,html[data-theme="dark"] .article-bottom-nav a{background:#15293a;border-color:#2c4659;color:#9ec9e8}html[data-theme="dark"] .article-modern-content blockquote{background:#15293a;color:#a9bdcc}html[data-theme="dark"] .article-modern-content th{background:#15293a;color:#c5dce9}html[data-theme="dark"] .article-mini-tool>span,html[data-theme="dark"] .article-side-icon{background:#17344c}html[data-theme="dark"] .article-related-card{background:#142432;border-color:#294052}html[data-theme="dark"] .article-related-image{background:linear-gradient(135deg,#17344c,#272442)}
@media(max-width:950px){.article-modern-layout{grid-template-columns:1fr}.article-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr}.article-related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.blog-article-modern-page{padding:12px 11px 45px}.article-breadcrumb{justify-content:flex-start;font-size:.65rem;margin-bottom:12px}.article-modern-header{padding:23px 18px 19px}.article-modern-header h1{font-size:1.4rem}.article-lead{font-size:.79rem;line-height:1.85}.article-meta-row{gap:8px 12px;font-size:.62rem}.article-cover-wrap{margin:0 18px 14px;border-radius:15px}.article-share-bar{margin:0 18px}.article-share-bar strong{width:100%;margin:0 0 2px}.article-modern-content{padding:23px 18px 27px;font-size:.84rem;line-height:1.95}.article-modern-content h2{font-size:1.13rem;margin-top:25px}.article-modern-content h3{font-size:.98rem}.article-modern-content table{font-size:.72rem;display:block;overflow-x:auto}.article-bottom-nav{padding:15px 18px 20px}.article-sidebar{display:flex}.article-side-card{padding:17px;border-radius:18px}.article-related-section{padding:17px;border-radius:20px}.article-related-heading{align-items:center}.article-related-heading h2{font-size:1.05rem}.article-related-grid{grid-template-columns:1fr}.article-related-card{grid-template-columns:88px 1fr}.article-related-image{height:80px}}


/* ========================================================================
   Homepage Reference UI — v10
   نفس التكوين البصري المرجعي: أقسام باستيل، أدوات مميزة، أحدث الأدوات،
   بانر اكتشاف قبل الفوتر، وفوتر كحلي متعدد الأعمدة.
   ======================================================================== */
body.home-page {
    background: #fbfdff;
}
body.home-page .site-main,
body.home-page main { min-height: 0; }

body.home-page .hero-search {
    min-height: 290px;
    display: flex;
    align-items: center;
    padding: 56px 24px 64px;
    background:
        radial-gradient(circle at 8% 65%, rgba(106,196,150,.15), transparent 19%),
        radial-gradient(circle at 92% 30%, rgba(74,174,222,.18), transparent 21%),
        linear-gradient(110deg, #e5f5ff 0%, #f9fcff 46%, #e5f6ff 100%);
    border-bottom: 1px solid #e1edf5;
}
body.home-page .hero-search::before {
    width: 310px; height: 310px; right: -100px; bottom: -180px;
    background: rgba(20,121,209,.08);
}
body.home-page .hero-search::after {
    width: 240px; height: 240px; left: -95px; top: -130px;
    background: rgba(67,191,155,.08);
}
body.home-page .hero-search-overlay {
    background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.48), rgba(255,255,255,.16));
}
body.home-page .hero-search-inner { max-width: 780px; }
body.home-page .hero-eyebrow {
    background: rgba(255,255,255,.78);
    border-color: #cde5f4;
    color: #1479d1;
}
body.home-page .hero-search h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    margin-bottom: 9px;
    color: #123b60;
}
body.home-page .hero-subtitle {
    color: #4f6980;
    font-size: .98rem;
    margin-bottom: 23px;
}
body.home-page .search-box {
    max-width: 620px;
    border: 1.5px solid #83c3ee;
    box-shadow: 0 12px 30px rgba(37,103,143,.10);
}
body.home-page .hero-quick-links a {
    color: #244b68;
    background: rgba(255,255,255,.86);
}

.home-main {
    max-width: 1240px;
    padding: 22px 26px 56px;
}
.home-categories-block { margin-top: 8px; }
.home-section-heading { margin-bottom: 17px; }
.home-section-heading > div { min-width: 0; }
.section-kicker {
    display: block;
    color: #7390a6;
    font-size: .67rem;
    font-weight: 800;
    margin-bottom: 3px;
}
.section-heading-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #1479d1;
    border: 1px solid #d7e9f5;
    background: #f2f9fe;
    border-radius: 13px;
    font-size: 1.45rem;
}
.home-section-heading .category-title { margin-bottom: 0; }
.home-section-heading .category-title::after { display: none; }

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 16px;
    justify-content: center;
}
.home-category-card {
    grid-column: span 2;
    min-height: 145px;
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 15px;
    border: 1px solid transparent;
    color: #163e5d;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(25,76,112,.09);
}
.home-category-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    margin-bottom: 9px;
}
.home-category-card strong { font-size: .91rem; line-height: 1.45; }
.home-category-card small { margin-top: 8px; font-size: .7rem; font-weight: 700; opacity: .9; }
.home-category-card.cat-blue { background:#eef8ff; border-color:#d7ebf8; }
.home-category-card.cat-purple { background:#f4f1ff; border-color:#e4dcfa; }
.home-category-card.cat-gold { background:#fff9eb; border-color:#f6e8bd; }
.home-category-card.cat-violet { background:#f3f0ff; border-color:#e3ddfa; }
.home-category-card.cat-green { background:#effaf4; border-color:#d8efdf; }
.home-category-card.cat-gray { background:#f4f6f8; border-color:#e1e7ec; }
.home-category-card.cat-emerald { background:#effbf8; border-color:#d8efe9; }
.home-category-card.cat-orange { background:#fff5ec; border-color:#f7e0cd; }
.home-category-card.cat-cyan { background:#edfaff; border-color:#d8edf4; }
.home-category-card.cat-pink { background:#fff2f6; border-color:#f5dce5; }

.home-featured-section { margin-top: 38px; }
.home-featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.home-featured-grid .service-card {
    min-height: 286px;
    padding: 23px 17px 17px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(21,68,99,.035);
}
.home-featured-grid .service-card::before { display:none; }
.home-featured-grid .service-card .card-icon {
    width: 60px; height: 60px; line-height: 60px;
    border-radius: 17px;
    margin-bottom: 10px;
    background: #eef7ff;
}
.home-featured-grid .service-card:nth-child(1) .card-icon { background:#e9f8f6; }
.home-featured-grid .service-card:nth-child(2) .card-icon { background:#eef5ff; }
.home-featured-grid .service-card:nth-child(3) .card-icon { background:#f5efff; }
.home-featured-grid .service-card:nth-child(4) .card-icon { background:#fff0ed; }
.home-featured-grid .service-card h3 { font-size: 1rem; margin-bottom: 7px; }
.home-featured-grid .service-card p { font-size:.78rem; line-height:1.75; min-height:52px; }
.home-featured-grid .service-card-footer { padding-top: 12px; }
/* V75: إظهار زر المفضلة للزائر داخل بطاقات الأدوات المميزة */
.home-featured-grid .favorite-star-btn { display:grid; }
.home-featured-grid .cta-btn {
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .77rem;
    font-weight: 800;
    text-decoration: none !important;
    background: #fff;
    border: 1.5px solid #8ac5e9;
    color: #1479d1;
}
.home-featured-grid .service-card:nth-child(1) .cta-btn { color:#12a8b0; border-color:#75d5d5; }
.home-featured-grid .service-card:nth-child(2) .cta-btn { color:#1479d1; border-color:#82bff0; }
.home-featured-grid .service-card:nth-child(3) .cta-btn { color:#9550dc; border-color:#bc8ae9; }
.home-featured-grid .service-card:nth-child(4) .cta-btn { color:#ef5a43; border-color:#f08f7f; }
.home-featured-grid .service-card:hover .cta-btn { background: currentColor; color:#fff !important; }

/* الزر داخل نفس شكل الكارت وبدون سهم */
.home-featured-grid .cta-btn::after { content:none !important; }


/* V52 — latest/recent/most-used: 3 compact cards side-by-side on desktop */
.usage-tools-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.usage-tools-grid .latest-tool-card { min-height:72px; }
.home-recent-tools-section { margin-top:34px; }
@media (min-width: 981px) {
    .home-category-grid { grid-template-columns:repeat(10,minmax(0,1fr)); }
    .home-category-card { grid-column:span 2; }
}
.home-latest-section { margin-top: 34px; }
.latest-tools-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}
.latest-tool-card {
    min-height: 72px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 13px;
    background:#fff;
    border:1px solid #e1eaf1;
    border-radius:13px;
    color:#1b415e;
    text-decoration:none;
    transition:.2s ease;
}
.latest-tool-card:hover { transform:translateY(-3px); border-color:#acd3ee; box-shadow:0 9px 22px rgba(22,76,111,.07); }
.latest-tool-icon {
    width:40px; height:40px; flex:0 0 40px;
    display:grid; place-items:center;
    border-radius:12px;
    background:#f0f7ff;
    font-size:1.15rem;
}
.latest-tool-card:nth-child(1) .latest-tool-icon { background:#f0f1ff; }
.latest-tool-card:nth-child(2) .latest-tool-icon { background:#effaf4; }
.latest-tool-card:nth-child(3) .latest-tool-icon { background:#f5efff; }
.latest-tool-card:nth-child(4) .latest-tool-icon { background:#fff0ed; }
.latest-tool-copy { min-width:0; }
.latest-tool-copy strong { display:block; font-size:.77rem; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.latest-tool-copy small { display:block; margin-top:3px; color:#7a91a3; font-size:.62rem; }

.home-discovery-cta {
    margin-top: 27px;
    min-height: 96px;
    display:grid;
    grid-template-columns:90px 1fr auto;
    align-items:center;
    gap:18px;
    padding:14px 22px;
    border:1px solid #d9eaf5;
    border-radius:15px;
    background:linear-gradient(100deg,#e7f5ff 0%,#f3faff 52%,#e2f3ff 100%);
}
.discovery-icon { font-size:2.7rem; text-align:center; }
.discovery-copy h2 { margin:0 0 4px; color:#163e5d; font-size:1.12rem; }
.discovery-copy p { margin:0; color:#698196; font-size:.7rem; line-height:1.7; }
.discovery-btn {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:170px; padding:11px 19px;
    border-radius:11px;
    background:#0e5b91; color:#fff;
    font-size:.76rem; font-weight:800;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(14,91,145,.16);
    transition:.2s ease;
}
.discovery-btn:hover { background:#1479d1; transform:translateY(-2px); color:#fff; }

/* الفوتر المرجعي */
.site-footer-modern {
    margin-top: 0;
    padding: 39px 26px 16px;
    background:linear-gradient(135deg,#092f4f 0%,#0d466d 100%);
    border-radius:18px 18px 0 0;
}
.footer-modern-grid {
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr 1fr;
    gap:36px;
    align-items:start;
}
.footer-brand-block { text-align:right; }
.footer-brand-title { display:flex; align-items:center; gap:9px; color:#fff; font-size:1.45rem; font-weight:900; }
.footer-brand-title img { max-height:44px; width:auto; object-fit:contain; }
.footer-brand-mark { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.10); font-size:1.35rem; }
.footer-brand-block p { margin:9px 0 14px; color:#c3d9e9; font-size:.7rem; line-height:1.8; max-width:270px; }
.footer-modern-column h3 { margin:0 0 12px; color:#fff; font-size:.83rem; }
.footer-modern-column nav { display:flex; flex-direction:column; gap:8px; }
.footer-modern-column a { color:#c5d9e7; font-size:.68rem; text-decoration:none; transition:.15s ease; }
.footer-modern-column a:hover { color:#fff; transform:translateX(-2px); }
.site-footer-modern .footer-social-icons { justify-content:flex-start; }
.site-footer-modern .footer-social-icon { width:31px; height:31px; border-radius:50%; background:rgba(255,255,255,.10); }
.site-footer-modern .footer-social-icon:hover { background:rgba(255,255,255,.18); }
.site-footer-modern .footer-extra { margin-top:20px; }
.footer-bottom-row {
    margin-top:26px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.13);
    display:flex;
    justify-content:space-between;
    gap:15px;
    color:#bfd4e3;
    font-size:.62rem;
}
.footer-bottom-row p { margin:0; }

html[data-theme="dark"] body.home-page { background:#0c1721; }
html[data-theme="dark"] .home-category-card,
html[data-theme="dark"] .home-featured-grid .service-card,
html[data-theme="dark"] .latest-tool-card { background:#111f2b; border-color:#294052; }
html[data-theme="dark"] .home-category-card strong,
html[data-theme="dark"] .home-category-card small,
html[data-theme="dark"] .home-featured-grid .service-card h3,
html[data-theme="dark"] .latest-tool-copy strong,
html[data-theme="dark"] .discovery-copy h2 { color:#e7f3fb; }
html[data-theme="dark"] .home-featured-grid .service-card p,
html[data-theme="dark"] .latest-tool-copy small,
html[data-theme="dark"] .discovery-copy p { color:#a9bdcc; }
html[data-theme="dark"] .home-discovery-cta { background:linear-gradient(100deg,#102c40,#142b3d); border-color:#294052; }
html[data-theme="dark"] .section-kicker { color:#8da8bb; }

@media (max-width: 980px) {
    .home-category-card { grid-column:span 3; }
    .home-category-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
    .home-featured-grid, .latest-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .usage-tools-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .footer-modern-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 650px) {
    body.home-page .hero-search { min-height:240px; padding:42px 15px 50px; }
    body.home-page .hero-search h1 { font-size:1.65rem; }
    body.home-page .hero-subtitle { font-size:.82rem; }
    .home-main { padding:18px 13px 38px; }
    .home-category-card { grid-column:span 6; min-height:125px; }
    .home-category-grid { gap:10px; }
    .home-category-icon { width:43px; height:43px; font-size:1.45rem; }
    .home-category-card strong { font-size:.78rem; }
    .home-category-card small { font-size:.64rem; }
    .home-featured-grid, .latest-tools-grid { grid-template-columns:1fr; }
    .home-featured-grid .service-card { min-height:250px; }
    .home-discovery-cta { grid-template-columns:52px 1fr; gap:10px; padding:14px; }
    .discovery-btn { grid-column:1 / -1; width:100%; box-sizing:border-box; }
    .discovery-icon { font-size:2rem; }
    .discovery-copy h2 { font-size:.98rem; }
    .discovery-copy p { font-size:.67rem; }
    .site-footer-modern { padding:30px 18px 14px; border-radius:14px 14px 0 0; }
    .footer-modern-grid { grid-template-columns:1fr 1fr; gap:25px 18px; }
    .footer-brand-block { grid-column:1 / -1; text-align:center; }
    .footer-brand-title { justify-content:center; }
    .footer-brand-block p { margin-inline:auto; }
    .site-footer-modern .footer-social-icons { justify-content:center; }
    .footer-bottom-row { flex-direction:column; text-align:center; gap:7px; }
}
@media (max-width: 430px) {
    .home-category-card { grid-column:span 6; }
    .section-heading-icon { width:38px; height:38px; }
    .category-title { font-size:1.12rem; }
    .footer-modern-grid { grid-template-columns:1fr; text-align:center; }
    .footer-modern-column nav { align-items:center; }
    .section-header-row { gap: 8px; }
    .section-header-row > *:first-child { min-width: 0; }
    .section-header-row .view-all-btn { font-size: .82rem; padding-inline: 12px !important; }
}

/* ===== Icon system: clean vector icons matching the homepage reference ===== */
.ui-icon{width:1em;height:1em;display:block;flex:0 0 auto;overflow:visible}
.card-icon .ui-icon{width:31px;height:31px}.home-category-icon .ui-icon{width:34px;height:34px}.latest-tool-icon .ui-icon{width:24px;height:24px}.tool-button-icon .ui-icon{width:22px;height:22px}.category-tool-icon .ui-icon{width:27px;height:27px}.category-hero-icon .ui-icon{width:38px;height:38px}.tool-hero-icon .ui-icon{width:38px;height:38px}.article-mini-tool .ui-icon{width:20px;height:20px}
.home-category-icon{font-size:0}.home-category-card.cat-blue .home-category-icon{color:#1686d7}.home-category-card.cat-purple .home-category-icon{color:#7046d8}.home-category-card.cat-gold .home-category-icon{color:#d78a00}.home-category-card.cat-violet .home-category-icon{color:#7650d9}.home-category-card.cat-green .home-category-icon{color:#10a35a}.home-category-card.cat-gray .home-category-icon{color:#64748b}.home-category-card.cat-emerald .home-category-icon{color:#0fa89d}.home-category-card.cat-orange .home-category-icon{color:#ee7a16}.home-category-card.cat-cyan .home-category-icon{color:#0a93b8}.home-category-card.cat-pink .home-category-icon{color:#dc4e7f}
.service-card .card-icon,.latest-tool-icon,.category-tool-icon,.tool-hero-icon,.category-hero-icon{font-size:0}.service-card .card-icon{color:#1479d1}.home-featured-grid .service-card:nth-child(1) .card-icon{color:#0aa6a0}.home-featured-grid .service-card:nth-child(2) .card-icon{color:#1479d1}.home-featured-grid .service-card:nth-child(3) .card-icon{color:#8f48d3}.home-featured-grid .service-card:nth-child(4) .card-icon{color:#ef5a43}
.latest-tool-card:nth-child(1) .latest-tool-icon{color:#5f63c8}.latest-tool-card:nth-child(2) .latest-tool-icon{color:#0aa66a}.latest-tool-card:nth-child(3) .latest-tool-icon{color:#8f48d3}.latest-tool-card:nth-child(4) .latest-tool-icon{color:#ef5a43}
.category-tool-icon{color:#1479d1}.category-tools-grid .category-tool-card:nth-child(3n+2) .category-tool-icon{color:#8f48d3;background:#f5efff}.category-tools-grid .category-tool-card:nth-child(3n+3) .category-tool-icon{color:#0aa66a;background:#effaf4}
.tool-hero-icon,.category-hero-icon{color:#1479d1}
.footer-modern-grid{grid-template-columns:1.15fr 1fr 1fr 1fr}
@media(max-width:900px){.footer-modern-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.footer-modern-grid{grid-template-columns:1fr;text-align:center}.site-footer-modern .footer-social-icons{justify-content:center}.footer-brand-title{justify-content:center}}

/* V12: menu tree + category cards + featured controls */
.menu-category-groups{display:grid;gap:18px;margin-bottom:18px}.menu-category-group{border:1px solid #dce8f2;border-radius:16px;background:#fbfdff;overflow:hidden}.menu-category-group-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;background:#eef7fd;color:#173f5e}.menu-category-group-head strong{display:flex;align-items:center;gap:8px}.menu-category-group-head .ui-icon{width:22px;height:22px}.menu-category-group-head small{color:#6a8296}.menu-tool-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:12px}.menu-tool-check{min-width:0}.status-featured{background:#fff4cc!important;color:#9a6800!important;border-color:#f0d77b!important}
.category-service-card{min-height:280px}.category-service-card .card-icon{margin-inline:auto!important}.category-service-card .service-card-footer{margin-top:auto}.category-service-card .cta-btn{width:100%;box-sizing:border-box;text-align:center}
.home-featured-grid .service-card .card-icon{margin-inline:auto!important;display:grid!important;place-items:center!important;line-height:1!important}.home-featured-grid .service-card:hover .cta-btn{color:#fff!important}.home-featured-grid .service-card:nth-child(1):hover .cta-btn{background:#12a8b0!important;border-color:#12a8b0!important}.home-featured-grid .service-card:nth-child(2):hover .cta-btn{background:#1479d1!important;border-color:#1479d1!important}.home-featured-grid .service-card:nth-child(3):hover .cta-btn{background:#9550dc!important;border-color:#9550dc!important}.home-featured-grid .service-card:nth-child(4):hover .cta-btn{background:#ef5a43!important;border-color:#ef5a43!important}
.tool-featured-badge{display:inline-flex;align-items:center;gap:3px;margin-inline-start:7px;padding:3px 8px;border-radius:999px;background:#fff4cc;color:#9a6800;font-size:.68rem;font-weight:800;border:1px solid #f0d77b}
@media(max-width:900px){.menu-tool-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-service-card{min-height:250px}}
@media(max-width:600px){.menu-tool-check-grid{grid-template-columns:1fr}.category-service-card{min-height:240px}}


/* روابط تطبيق الأداة داخل صفحة الأداة */
.tool-page-app-links {
    margin-top: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.tool-page-app-label {
    font-size: .82rem;
    font-weight: 800;
    color: var(--text-color);
}
.tool-page-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tool-page-store-badge {
    min-width: 142px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 5px 14px rgba(16,47,77,.12);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.tool-page-store-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(16,47,77,.18);
    opacity: .94;
}
.tool-page-store-play { background: #1479d1; }
.tool-page-store-app { background: #102f4d; }
.tool-page-store-icon { width: 23px; height: 23px; flex: 0 0 23px; }
.tool-page-store-badge span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.tool-page-store-badge small { font-size: .58rem; font-weight: 500; opacity: .88; }
.tool-page-store-badge strong { font-size: .86rem; font-weight: 800; letter-spacing: .1px; }
@media (max-width: 640px) {
    .tool-page-app-links { align-items: flex-start; flex-direction: column; }
    .tool-page-store-badges { width: 100%; }
    .tool-page-store-badge { flex: 1 1 140px; }
}

/* بحث رئيسي ذكي */
.search-results-section { margin: 28px 0 44px; }
.search-results-section[hidden] { display:none !important; }
.search-results-grid { margin-top: 18px; }
.search-result-card { display:flex; }
.search-results-count { color:var(--ui-muted,#64748b); font-weight:800; font-size:.85rem; }
.search-results-section .service-card { min-height:286px; }
@media (max-width: 900px) {
  .search-results-section .service-cards-container { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .search-results-section .service-cards-container { grid-template-columns:1fr; }
}

/* ===== Mobile footer: keep the four footer columns as a 2x2 grid ===== */
@media (max-width: 430px) {
    .site-footer-modern .footer-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; text-align: initial; gap: 22px 14px; }
    .site-footer-modern .footer-brand-block { grid-column: 1 / -1; text-align: center; }
    .site-footer-modern .footer-brand-title { justify-content: center; }
    .site-footer-modern .footer-brand-block p { margin-inline: auto; }
    .site-footer-modern .footer-social-icons { justify-content: center; }
    .site-footer-modern .footer-modern-column { text-align: center; }
    .site-footer-modern .footer-modern-column nav { align-items: center; }
}

/* ===== Related tools: same card language as the homepage, with centered icon ===== */
.related-tools-section .service-cards-container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.related-tools-section .service-card {
    min-height: 250px;
    padding: 23px 17px 17px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(21,68,99,.035);
    text-align: center;
    align-items: stretch;
}
.related-tools-section .service-card::before { display:none; }
.related-tools-section .service-card .card-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 17px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background: #eef7ff;
    color: #1479d1;
}
.related-tools-section .service-card h3 { font-size: 1rem; margin-bottom: 7px; }
.related-tools-section .service-card p { font-size: .78rem; line-height: 1.75; min-height: 52px; }
.related-tools-section .service-card-footer { padding-top: 12px; }
.related-tools-section .cta-btn {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .77rem;
    font-weight: 800;
    text-decoration: none !important;
    background: #fff;
    border: 1.5px solid #82bff0;
    color: #1479d1;
}
.related-tools-section .service-card:hover .cta-btn { background: #1479d1; color: #fff !important; border-color: #1479d1; }
.related-tools-section .cta-btn::after { content:none !important; }
html[data-theme="dark"] .related-tools-section .service-card { background:#111f2b; border-color:#294052; box-shadow:none; }
html[data-theme="dark"] .related-tools-section .service-card p { color:#a9bdcc; }
html[data-theme="dark"] .related-tools-section .service-card .card-icon { background:#17344c; }

@media (max-width: 980px) {
    .related-tools-section .service-cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .related-tools-section .service-cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .related-tools-section .service-card { min-height: 210px; padding: 16px 10px; }
}

/* V17: تطبيقات الأداة - لا تظهر إلا عند وجود متجر مفعّل ورابط صالح */
.tool-page-app-links { align-items:center; }
.tool-page-store-badges { align-items:center; }
.tool-page-store-badge { cursor:pointer; }

/* V18: search result cards use the same centered icon layout as homepage cards */
.search-results-grid .search-result-card {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    text-align:center !important;
    min-height:286px;
}
.search-results-grid .search-result-card .card-icon {
    margin:0 auto 14px !important;
    display:grid !important;
    place-items:center !important;
    flex-shrink:0;
}
.search-results-grid .search-result-card h3,
.search-results-grid .search-result-card p { text-align:center !important; }
.search-results-grid .search-result-card .service-card-footer {
    margin-top:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
.search-results-grid .search-result-card .cta-btn {
    width:100%;
    box-sizing:border-box;
    text-align:center;
}
@media(max-width:600px){
  .search-results-grid .search-result-card { min-height:250px; }
}


/* V23: الفوتر أربعة أعمدة حقيقية، والموبايل 2 × 2 بدون فصل العمود الرابع */
.footer-modern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.footer-modern-grid > .footer-brand-block { grid-column: auto !important; }
@media (max-width: 900px) {
    .footer-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .site-footer-modern .footer-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; text-align: center; gap: 24px 16px; }
    .site-footer-modern .footer-brand-block { grid-column: auto !important; text-align: center; }
    .site-footer-modern .footer-brand-title { justify-content: center; }
    .site-footer-modern .footer-brand-block p { margin-inline: auto; }
    .site-footer-modern .footer-social-icons { justify-content: center; }
    .site-footer-modern .footer-modern-column { text-align: center; }
    .site-footer-modern .footer-modern-column nav { align-items: center; }
}
@media (max-width: 430px) {
    .site-footer-modern .footer-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.footer-order-settings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .footer-order-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* V27 — المفضلة وآخر الاستخدام والأكثر استخدامًا */
.home-personal-tools-section,
.home-most-used-section { margin-top: 34px; }
.home-personal-tools-section .tool-buttons-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.home-personal-tools-section .fav-button,
.home-personal-tools-section .tool-button { position:relative; min-height:112px; border:1px solid var(--ui-line,#dce8f2); border-radius:22px; background:#fff; box-shadow:0 8px 24px rgba(31,75,110,.07); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; padding:18px; text-decoration:none; color:var(--ui-ink,#102f4d); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.home-personal-tools-section .fav-button:hover,
.home-personal-tools-section .tool-button:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(31,75,110,.11); border-color:#bcd8ee; }
.home-personal-tools-section .tool-button-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:var(--ui-blue-soft,#eaf5ff); }
.home-personal-tools-section .tool-button-icon .ui-icon { width:25px; height:25px; }
.home-personal-tools-section .fav-button-label,
.home-personal-tools-section .tool-button-label { font-weight:800; font-size:.94rem; text-align:center; }
.home-personal-tools-section .favorite-star-btn { position:absolute; top:10px; inset-inline-end:10px; }
@media(max-width:900px){.home-personal-tools-section .tool-buttons-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.home-personal-tools-section .tool-buttons-row{grid-template-columns:1fr;}}


.home-recent-tools-section .latest-tools-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media(max-width:900px){ .home-recent-tools-section .latest-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .home-recent-tools-section .latest-tools-grid { grid-template-columns:1fr; } }

/* V28: بحث ذكي - اقتراحات وسجل البحث */
.search-box { position: relative; }
.search-suggestions {
    position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 100;
    background: #fff; border: 1px solid #dce8f2; border-radius: 16px;
    padding: 7px; box-shadow: 0 16px 38px rgba(16,47,77,.14); text-align: right;
}
.search-suggestion {
    width: 100%; border: 0; background: transparent; padding: 11px 13px;
    border-radius: 11px; cursor: pointer; font: inherit; font-size: .88rem;
    color: var(--ui-ink,#102f4d); text-align: right;
}
.search-suggestion:hover, .search-suggestion:focus { background: #eef7ff; outline: none; }
html[data-theme="dark"] .search-suggestions { background:#11202c; border-color:#294052; }
html[data-theme="dark"] .search-suggestion { color:#e8f3fa; }
html[data-theme="dark"] .search-suggestion:hover, html[data-theme="dark"] .search-suggestion:focus { background:#17344c; }

/* V37 — تحسين تجربة استخدام كل أداة */
.tool-workspace-head{gap:14px;flex-wrap:wrap}
.tool-workspace-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.tool-action-btn{border:1px solid var(--ui-line,#dce8f2);background:#fff;color:var(--ui-ink,#102f4d);border-radius:10px;padding:8px 11px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.18s ease}
.tool-action-btn:hover{transform:translateY(-1px);border-color:var(--ui-blue,#1479d1);color:var(--ui-blue,#1479d1);box-shadow:0 5px 14px rgba(16,47,77,.07)}
.tool-action-btn.is-success{background:#edfdf4;border-color:#b8ebce;color:#16794b}
@media(max-width:640px){
  .tool-workspace-actions{width:100%;justify-content:flex-start;margin-inline-start:0}
  .tool-action-btn{flex:1 1 auto;min-width:92px}
}
@media print{
  .tool-workspace-actions,.favorite-star-btn,.site-header,.site-footer,header,footer,.related-tools-section,.related-articles-section,.tool-faq-section{display:none!important}
  .tool-workspace-card{box-shadow:none!important;border:0!important}
}

/* V38 — توحيد تجربة الاستخدام داخل جميع الأدوات */
.tool-generated-content{line-height:1.8}
.tool-generated-content form{display:block;max-width:100%}
.tool-generated-content input:not([type=checkbox]):not([type=radio]):not([type=file]),
.tool-generated-content select,
.tool-generated-content textarea{width:100%;min-height:46px;border:1px solid #d8e5ef;border-radius:12px;background:#fff;color:#102f4d;padding:10px 13px;font:inherit;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.tool-generated-content textarea{min-height:110px;resize:vertical}
.tool-generated-content input:focus,.tool-generated-content select:focus,.tool-generated-content textarea:focus{border-color:#1479d1;box-shadow:0 0 0 3px rgba(20,121,209,.11)}
.tool-generated-content input:disabled,.tool-generated-content select:disabled,.tool-generated-content textarea:disabled{background:#f4f7fa;cursor:not-allowed}
.tool-generated-content input[aria-invalid=true],.tool-generated-content select[aria-invalid=true],.tool-generated-content textarea[aria-invalid=true]{border-color:#dc3545;box-shadow:0 0 0 3px rgba(220,53,69,.08)}
.tool-generated-content button{font:inherit}
.tool-generated-content button:not(.favorite-star-btn){min-height:44px;border-radius:11px;cursor:pointer}
.tool-generated-content button:focus-visible,.tool-action-btn:focus-visible,a:focus-visible{outline:3px solid rgba(20,121,209,.25);outline-offset:2px}
.tool-generated-content table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden}
.tool-generated-content th,.tool-generated-content td{padding:10px;border-bottom:1px solid #e4edf3;text-align:right}
.tool-generated-content .result,.tool-generated-content [id*=result i],.tool-generated-content [class*=result i]{border-radius:14px}
.tool-generated-content .result:not(:empty){animation:toolResultIn .2s ease-out}
@keyframes toolResultIn{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
.tool-generated-content .tool-error-message{margin-top:8px;color:#b42318;font-size:.88rem;font-weight:700}
.tool-generated-content .tool-success-message{margin-top:8px;color:#16794b;font-size:.88rem;font-weight:700}
.tool-workspace-actions{scrollbar-width:none}
.tool-workspace-actions::-webkit-scrollbar{display:none}
@media(max-width:600px){
 .tool-generated-content input:not([type=checkbox]):not([type=radio]):not([type=file]),.tool-generated-content select{min-height:48px}
 .tool-workspace-head{align-items:flex-start}
 .tool-workspace-actions{width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:2px}
 .tool-action-btn{flex:0 0 auto;min-height:42px}
 .tool-free-badge{flex:0 0 auto}
}
html[data-theme="dark"] .tool-generated-content input:not([type=checkbox]):not([type=radio]):not([type=file]),html[data-theme="dark"] .tool-generated-content select,html[data-theme="dark"] .tool-generated-content textarea{background:#101e29;border-color:#304656;color:#edf6fc}
html[data-theme="dark"] .tool-generated-content input:disabled,html[data-theme="dark"] .tool-generated-content select:disabled,html[data-theme="dark"] .tool-generated-content textarea:disabled{background:#172732}
html[data-theme="dark"] .tool-generated-content th,html[data-theme="dark"] .tool-generated-content td{border-color:#294052}

/* V40 — طبقة UX موحدة وآمنة داخل الأدوات */
.tool-ux-engine{width:100%;}
.tool-ux-engine button[type="submit"],.tool-ux-engine input[type="submit"],.tool-ux-engine .calculate-btn,.tool-ux-engine .calc-btn,.tool-ux-engine .btn-calculate{transition:opacity .18s ease,transform .18s ease,filter .18s ease;}
.tool-ux-engine .ux-processing{opacity:.72;cursor:wait;filter:saturate(.75);transform:translateY(1px);}
.tool-ux-engine [aria-invalid="true"],.tool-ux-engine .ux-invalid{outline:2px solid rgba(220,38,38,.22);outline-offset:1px;}
.tool-ux-engine [aria-live="polite"]{scroll-margin-top:90px;}
@media(max-width:600px){.tool-ux-engine input,.tool-ux-engine select,.tool-ux-engine textarea{max-width:100%;}.tool-ux-engine button{min-height:44px;}}
@media(prefers-reduced-motion:reduce){.tool-ux-engine *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* V41 — UX مخصص للأدوات الحسابية */
.v41-copy-result{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;border:1px solid var(--ui-line,#dce8f2);background:#fff;color:var(--ui-ink,#102f4d);border-radius:10px;padding:8px 12px;font:inherit;font-size:.88rem;cursor:pointer;transition:.2s ease}
.v41-copy-result:hover{transform:translateY(-1px);border-color:var(--ui-blue,#1479d1);color:var(--ui-blue,#1479d1)}
@media(max-width:600px){.v41-copy-result{width:100%;min-height:42px}}
@media(prefers-color-scheme:dark){.v41-copy-result{background:#14283a;color:#eef7ff;border-color:#29445b}}

/* V42: محسنات أدوات المحولات والأرقام */
.converter-ux-ready input:focus,
.converter-ux-ready select:focus,
.converter-ux-ready textarea:focus{outline:3px solid rgba(20,121,209,.16);outline-offset:1px}
.converter-ux-ready input[readonly],
.converter-ux-ready textarea[readonly]{cursor:copy}
.converter-ux-ready #numberTable{width:100%;border-collapse:collapse}
.converter-ux-ready #numberTable th{font-weight:800}
@media(max-width:600px){
 .converter-ux-ready input,.converter-ux-ready select,.converter-ux-ready textarea{font-size:16px;min-height:46px}
 .converter-ux-ready #numberTable{font-size:.9rem}
 .converter-ux-ready #numberTable th,.converter-ux-ready #numberTable td{padding:9px 7px}
}


/* V43: date/time & BMI focused UX */
.tool-workspace-card input[type="date"], .tool-workspace-card input[type="time"]{min-height:46px;}
.tool-workspace-card input[type="date"]:focus, .tool-workspace-card input[type="time"]:focus{outline:3px solid rgba(20,121,209,.16);outline-offset:1px;}
.v43-result-ready{animation:v43ResultIn .18s ease-out;}
@keyframes v43ResultIn{from{opacity:.72;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(max-width:600px){.tool-workspace-card input[type="date"],.tool-workspace-card input[type="time"]{width:100%;font-size:16px;}}
@media(prefers-reduced-motion:reduce){.v43-result-ready{animation:none;}}

/* V44 — security/technology utility UX */
.v44-status{margin:12px 0;padding:10px 13px;border:1px solid var(--ui-line,#dce8f2);background:var(--ui-blue-soft,#eaf5ff);border-radius:12px;font-size:.9rem;color:var(--ui-ink,#102f4d);}
.v44-status[data-type="error"]{background:#fff4f4;border-color:#f2caca;color:#8a1c1c;}
.v44-copy-result{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;border:1px solid var(--ui-line,#dce8f2);background:#fff;color:var(--ui-ink,#102f4d);border-radius:9px;padding:8px 12px;cursor:pointer;font:inherit;font-size:.88rem;}
.v44-copy-result:hover{background:var(--ui-blue-soft,#eaf5ff);}
@media(max-width:600px){.v44-status{font-size:.84rem;padding:9px 11px}.v44-copy-result{width:100%;min-height:42px}.tool-workspace-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.v44-copy-result{transition:none!important}}

/* V45 — تحسين الأدوات المالية والدينية والتعليمية */
.v45-note{margin:0 0 14px;padding:11px 14px;border:1px solid #dce8f2;background:#f4f9fd;color:#28465e;border-radius:12px;font-size:.9rem;line-height:1.75}
.v45-copy-result{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;border:1px solid var(--ui-line,#dce8f2);background:#fff;color:var(--ui-ink,#102f4d);border-radius:10px;padding:8px 13px;cursor:pointer;font:inherit;font-size:.88rem}
.v45-copy-result:hover{background:var(--ui-blue-soft,#eaf5ff);color:var(--ui-blue,#1479d1)}
@media(max-width:600px){.v45-note{font-size:.84rem;padding:9px 11px}.v45-copy-result{width:100%;min-height:42px}}
html[data-theme="dark"] .v45-note{background:#14283a;border-color:#29445b;color:#dcebf5}
html[data-theme="dark"] .v45-copy-result{background:#14283a;border-color:#29445b;color:#eef7ff}


/* V46 — أدوات الأعمال والمستندات */
.v46-document-tool .v46-preview{scroll-margin-top:90px;transition:box-shadow .2s ease,transform .2s ease;}
.v46-document-tool.v46-preview-mode .v46-preview{position:relative;z-index:3;box-shadow:0 14px 45px rgba(16,47,77,.16);border-radius:14px;}
.v46-document-tool.v46-preview-mode .v46-preview::before{content:"وضع المعاينة";display:block;margin-bottom:10px;font-size:.8rem;font-weight:800;color:var(--ui-blue,#1479d1);}
.v46-document-tool .v46-preview input,.v46-document-tool .v46-preview textarea{background:transparent;}
.v46-preview-btn[aria-pressed="true"]{border-color:var(--ui-blue,#1479d1);color:var(--ui-blue,#1479d1);background:var(--ui-blue-soft,#eaf5ff);}
@media(max-width:600px){.v46-document-tool.v46-preview-mode .v46-preview{box-shadow:0 8px 26px rgba(16,47,77,.14);}.v46-document-tool.v46-preview-mode .v46-preview::before{font-size:.76rem;}}
@media(prefers-reduced-motion:reduce){.v46-document-tool .v46-preview{transition:none!important;}}
html[data-theme="dark"] .v46-document-tool.v46-preview-mode .v46-preview{box-shadow:0 14px 45px rgba(0,0,0,.35);}


/* V47 — المراجعة النهائية: اتساق الموبايل، الجداول، حالات التركيز والنتائج */
.tool-generated-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.tool-generated-content table th,.tool-generated-content table td{white-space:nowrap;}
.tool-generated-content input,.tool-generated-content select,.tool-generated-content textarea,.tool-generated-content button{touch-action:manipulation;}
.tool-generated-content :is(input,select,textarea,button):focus-visible{outline:3px solid rgba(20,121,209,.24);outline-offset:2px;}
.tool-generated-content [aria-live="polite"],.tool-generated-content [role="status"]{min-height:1.4em;}
.tool-generated-content .error,.tool-generated-content .errors,.tool-generated-content .alert-danger{border-radius:12px;}
@media(max-width:600px){
  .tool-generated-content{overflow-wrap:anywhere;}
  .tool-generated-content .row,.tool-generated-content .form-row{gap:12px;}
  .tool-generated-content table{font-size:.9rem;}
}
@media(prefers-reduced-motion:reduce){.tool-generated-content *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* V53 — dedicated featured/latest listing pages */
.tools-list-main{padding-top:28px;padding-bottom:55px}.page-hero-compact{padding:28px 24px;margin-bottom:26px;border:1px solid #dce8f2;border-radius:18px;background:linear-gradient(135deg,#f7fbff,#eef7fd);text-align:center}.page-hero-compact h1{margin:7px 0 8px;color:#123b5b;font-size:1.65rem}.page-hero-compact p{margin:0;color:#688096;font-size:.84rem}.tools-list-section{margin-top:0}.tools-list-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.latest-tools-list-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tools-empty{text-align:center;padding:40px}.tools-list-page .home-featured-grid .service-card{height:100%;box-sizing:border-box}
html[data-theme="dark"] .page-hero-compact{background:#102333;border-color:#294052}.tools-list-page .page-hero-compact h1{color:#123b5b}html[data-theme="dark"] .tools-list-page .page-hero-compact h1{color:#e7f3fb}html[data-theme="dark"] .tools-list-page .page-hero-compact p{color:#a9bdcc}
@media(max-width:980px){.tools-list-grid,.latest-tools-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.tools-list-grid,.latest-tools-list-grid{grid-template-columns:1fr}.page-hero-compact{padding:22px 15px}.page-hero-compact h1{font-size:1.35rem}}

/* V55 category page refinements */
.category-hero-main{flex-direction:column;align-items:center;text-align:center;gap:12px}
.category-hero-icon{margin:0 auto;width:82px;height:82px;border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 10px 26px rgba(44,93,140,.12)}
.category-hero-copy p{margin-inline:auto}
.category-stats{justify-content:center;flex-wrap:wrap}
.category-stats div{background:rgba(255,255,255,.94);border:1px solid #cfe0ee;box-shadow:0 6px 18px rgba(44,93,140,.07);color:#244a66}
.category-stats strong{color:#146fae;font-weight:900}
.category-stats span{color:#34566e;font-weight:800}
@media(max-width:600px){.category-hero-main{text-align:center;align-items:center}.category-hero-icon{width:64px;height:64px;border-radius:19px}.category-stats div{background:#fff;border-color:#c9dce9}.category-stats span{color:#34566e}}
html[data-theme="dark"] .category-stats div{background:rgba(16,29,41,.92);border-color:#35536a}
html[data-theme="dark"] .category-stats strong{color:#8bc5ed}
html[data-theme="dark"] .category-stats span{color:#c0d2df}


/* V57 — تحسين وضوح عناوين صفحات الأدوات وتثبيت تمركز أيقونة القسم */
.tool-hero-copy h1 { color:#123b5b !important; text-shadow:0 1px 0 rgba(255,255,255,.55); }
html[data-theme="dark"] .tool-hero-copy h1 { color:#e8f4fb !important; text-shadow:none; }
.category-hero-main { flex-direction:column !important; align-items:center !important; text-align:center !important; }
.category-hero-icon { margin-inline:auto !important; }
.category-hero-copy { text-align:center; width:100%; }
.category-hero-copy p { margin-inline:auto !important; }

/* V58 — تثبيت تمركز أيقونة صفحة القسم ووضوح اسم القسم */
.category-hero-card .category-hero-main {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    text-align:center !important;
}
.category-hero-card .category-hero-icon {
    display:grid !important;
    place-items:center !important;
    margin:0 auto 2px !important;
    align-self:center !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    float:none !important;
}
.category-hero-card .category-hero-copy {
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
}
.category-hero-card .category-hero-copy h1 {
    color:#123b5b !important;
    background:transparent !important;
    -webkit-text-fill-color:#123b5b !important;
    text-shadow:none !important;
    opacity:1 !important;
    display:block !important;
    width:100% !important;
    text-align:center !important;
}
.category-hero-card .category-hero-copy .category-eyebrow {
    color:#4f7694 !important;
}
html[data-theme="dark"] .category-hero-card .category-hero-copy h1 {
    color:#e8f4fb !important;
    -webkit-text-fill-color:#e8f4fb !important;
}
html[data-theme="dark"] .category-hero-card .category-hero-copy .category-eyebrow {
    color:#9ec9e8 !important;
}
/* Tool cards inside category pages: icon centered above the title */
.category-page-modern .category-tools-grid .category-service-card {
    align-items:center !important;
    text-align:center !important;
}
.category-page-modern .category-tools-grid .category-service-card .card-icon {
    margin:0 auto 12px !important;
    align-self:center !important;
}
.category-page-modern .category-tools-grid .category-service-card h3,
.category-page-modern .category-tools-grid .category-service-card p {
    width:100%;
    text-align:center !important;
}

/* V59 — hard center for category page hero icon */
.category-page-modern .category-hero-card .category-hero-main{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;margin-inline:0!important;text-align:center!important;}
.category-page-modern .category-hero-card .category-hero-icon{display:grid!important;place-items:center!important;position:static!important;inset:auto!important;float:none!important;margin-inline:auto!important;align-self:center!important;}


/* V60 — تثبيت أيقونة القسم في منتصف الصفحة بشكل مستقل عن اتجاه RTL وأي تنسيق سابق */
.category-page-modern .category-hero-card .category-hero-centered {
    display:block !important;
    width:100% !important;
    text-align:center !important;
    margin:0 !important;
}
.category-page-modern .category-hero-card .category-hero-icon-centered {
    display:grid !important;
    place-items:center !important;
    width:82px !important;
    height:82px !important;
    margin:0 auto 12px auto !important;
    float:none !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    inset:auto !important;
}
.category-page-modern .category-hero-card .category-hero-copy {
    display:block !important;
    width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
}
.category-page-modern .category-hero-card .category-hero-copy h1,
.category-page-modern .category-hero-card .category-hero-copy p,
.category-page-modern .category-hero-card .category-hero-copy .category-eyebrow {
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
@media(max-width:600px){
  .category-page-modern .category-hero-card .category-hero-icon-centered{width:64px !important;height:64px !important;}
}

/* V61: center the icon of each tool card on category pages */
.category-page .tool-card .tool-card-icon,
.category-tools-page .tool-card .tool-card-icon,
.category-page .latest-tool-card .latest-tool-card-icon,
.category-tools-page .latest-tool-card .latest-tool-card-icon {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-inline:auto !important;
  float:none !important;
  text-align:center !important;
}
.category-page .tool-card > .tool-card-icon,
.category-tools-page .tool-card > .tool-card-icon,
.category-page .latest-tool-card > .latest-tool-card-icon,
.category-tools-page .latest-tool-card > .latest-tool-card-icon {
  align-self:center !important;
}


/* V62 — category tool cards: icon is centered, title/description remain centered */
.category-page-modern .category-tools-grid .category-service-card {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.category-page-modern .category-tools-grid .category-service-card .card-icon {
  display:grid !important;
  place-items:center !important;
  margin:0 auto 12px !important;
  flex:0 0 auto !important;
  float:none !important;
}
.category-page-modern .category-tools-grid .category-service-card h3,
.category-page-modern .category-tools-grid .category-service-card p {
  width:100% !important;
  text-align:center !important;
}
.category-page-modern .category-tools-grid .category-service-card .service-card-footer {
  width:100% !important;
  margin-top:auto !important;
  justify-content:center !important;
  text-align:center !important;
}

/* V62 — tool page title contrast */
.tool-page-modern .tool-hero-copy h1,
.tool-page-modern h1.tool-title {
  color:#173a59 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html[data-theme="dark"] .tool-page-modern .tool-hero-copy h1,
html[data-theme="dark"] .tool-page-modern h1.tool-title {
  color:#f0f7fc !important;
}

/* V62 — stronger mobile UX for tool actions */
@media(max-width:700px){
  .tool-page-modern .tool-workspace-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:100%; }
  .tool-page-modern .tool-workspace-head { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .tool-page-modern .tool-action-btn { min-height:42px; }
  .tool-page-modern .tool-free-badge { justify-self:center; text-align:center; }
  .category-page-modern .category-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:520px){
  .category-page-modern .category-tools-grid { grid-template-columns:1fr !important; }
}

/* V62 — consistent focus states/accessibility */
:where(a,button,input,select,textarea):focus-visible { outline:3px solid rgba(20,121,209,.28); outline-offset:2px; }

/* V62 — image performance */
.article-cover-image { content-visibility:auto; }


/* V62 — tool quick facts */
.tool-quick-facts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
.tool-quick-facts span{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #dbe9f4;color:#35617d;font-size:.68rem;font-weight:800}
html[data-theme="dark"] .tool-quick-facts span{background:#15293a;border-color:#29465e;color:#b9d7e9}
.search-clear-btn{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:#eef5fa;color:#58768d;font-size:1.15rem;line-height:1;cursor:pointer;z-index:3}
.search-clear-btn:hover{background:#dcecf8;color:#1479d1}
.search-suggestion{display:flex!important;align-items:center;justify-content:space-between;gap:10px}
.search-suggestion small{color:#7890a4;font-size:.68rem;font-weight:600;white-space:nowrap}
html[data-theme="dark"] .search-clear-btn{background:#1b3449;color:#a9c6d8}

/* V63: category tool cards — center the actual card icon and strengthen titles */
.category-page-modern .category-tools-grid .category-service-card {
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.category-page-modern .category-tools-grid .category-service-card .card-icon {
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  margin:0 auto 12px !important;
  display:grid !important;
  place-items:center !important;
  float:none !important;
  align-self:center !important;
  flex:0 0 auto !important;
}
.category-page-modern .category-tools-grid .category-service-card h3,
.category-page-modern .category-tools-grid .category-service-card p {
  width:100%;
  text-align:center !important;
}
.category-page-modern .category-tools-grid .category-service-card .service-card-footer {
  width:100%;
  justify-content:center !important;
  margin-top:auto;
}
.category-page-modern .category-hero-copy h1,
.category-page-modern .category-section-title {
  color:#163d5c !important;
  opacity:1 !important;
}
html[data-theme="dark"] .category-page-modern .category-hero-copy h1,
html[data-theme="dark"] .category-page-modern .category-section-title { color:#edf7ff !important; }
.tool-page-modern .tool-hero-copy h1.tool-title { color:#123b5b !important; opacity:1 !important; }
html[data-theme="dark"] .tool-page-modern .tool-hero-copy h1.tool-title { color:#edf7ff !important; }
@media(max-width:600px){
  .category-page-modern .category-tools-grid .category-service-card .card-icon { width:50px !important;height:50px !important;min-width:50px !important;margin-bottom:9px !important; }
}

/* V64 — Admin Tools page: complete/responsive management layout */
.admin-tools-page .tools-table-wrap,
.admin-tools-page .table-responsive,
.admin-tools-page .admin-table-wrap {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.admin-tools-page table {
  min-width: 980px;
}
.admin-tools-page .tool-actions,
.admin-tools-page .actions {
  white-space:nowrap;
}
@media (max-width: 900px) {
  .admin-tools-page .page-header,
  .admin-tools-page .toolbar,
  .admin-tools-page .filters {
    gap:10px;
    flex-wrap:wrap;
  }
}

/* V70 — جداول الأعداد المفقطة: جعل الجدول ممتدًا بعرض مساحة الأداة */
.tool-workspace-card[data-tool-slug="tables"] .tool-generated-content{width:100%;box-sizing:border-box}
.tool-workspace-card[data-tool-slug="tables"] #numberTable{width:100%!important;max-width:none!important;min-width:100%;display:table}
.tool-workspace-card[data-tool-slug="tables"] .pagination-links{width:100%;box-sizing:border-box}
@media(max-width:600px){
  .tool-workspace-card[data-tool-slug="tables"] #numberTable{display:block;width:100%!important;min-width:100%;max-width:100%!important;overflow-x:auto}
}

/* V71 — الرئيسية فقط: أدوات مميزة تظهر 2 × 2 على شاشات الهاتف */
@media (max-width: 560px) {
    .home-featured-grid.service-cards-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
}


/* V72 — توحيد تصميم صفحات الأقسام مع الرئيسية + بطاقات الأدوات */
body.category-page-body { background:#f8fbfe; }
body.category-page-body .site-main,
body.category-page-body main { background:transparent; }
.category-page-modern .category-tools-section {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:8px 0 24px !important;
}
.category-page-modern .category-tools-grid { gap:18px !important; }
.category-page-modern .category-tools-grid .category-service-card {
    min-height:286px !important;
    padding:23px 17px 17px !important;
    border-radius:15px !important;
    background:#fff !important;
    border:1px solid #e3ebf2 !important;
    box-shadow:0 4px 18px rgba(21,68,99,.035) !important;
    box-sizing:border-box;
}
.category-page-modern .category-tools-grid .category-service-card::before { display:none !important; }
.category-page-modern .category-tools-grid .category-service-card .card-icon {
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    border-radius:17px !important;
    margin:0 auto 10px !important;
    background:#eef7ff !important;
}
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+1) .card-icon { background:#e9f8f6 !important; color:#0aa6a0 !important; }
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+2) .card-icon { background:#eef5ff !important; color:#1479d1 !important; }
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+3) .card-icon { background:#f5efff !important; color:#8f48d3 !important; }
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+4) .card-icon { background:#fff0ed !important; color:#ef5a43 !important; }
.category-page-modern .category-tools-grid .category-service-card h3 { font-size:1rem !important; margin:0 0 7px !important; color:#173a59 !important; }
.category-page-modern .category-tools-grid .category-service-card p { font-size:.78rem !important; line-height:1.75 !important; min-height:52px; color:#63778b !important; }
.category-page-modern .category-tools-grid .category-service-card .service-card-footer { padding-top:12px; }
.category-page-modern .category-tools-grid .category-service-card .cta-btn {
    width:100% !important; box-sizing:border-box; align-self:stretch; padding:8px 12px;
    border-radius:999px; font-size:.77rem; font-weight:800; background:#fff;
    border:1.5px solid #8ac5e9; color:#1479d1; text-decoration:none !important;
}
.category-page-modern .category-tools-grid .category-service-card .cta-btn::after { content:none !important; }
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+1) .cta-btn { color:#12a8b0; border-color:#75d5d5; }
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+2) .cta-btn { color:#1479d1; border-color:#82bff0; }
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+3) .cta-btn { color:#9550dc; border-color:#bc8ae9; }
.category-page-modern .category-tools-grid .category-service-card:nth-child(4n+4) .cta-btn { color:#ef5a43; border-color:#f08f7f; }
.category-page-modern .category-tools-grid .category-service-card:hover .cta-btn { background:currentColor; color:#fff !important; }

/* الرئيسية فقط: أحدث / الأكثر استخدامًا / آخر استخدامًا — 2 × 2 على الهاتف */
@media (max-width:650px) {
    body.home-page .home-latest-section .latest-tools-grid,
    body.home-page .home-most-used-section .usage-tools-grid,
    body.home-page .home-recent-tools-section .latest-tools-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }
    body.home-page .home-latest-section .latest-tool-card,
    body.home-page .home-most-used-section .latest-tool-card,
    body.home-page .home-recent-tools-section .latest-tool-card {
        min-width:0;
    }
    body.home-page .home-latest-section .latest-tool-copy strong,
    body.home-page .home-most-used-section .latest-tool-copy strong,
    body.home-page .home-recent-tools-section .latest-tool-copy strong {
        font-size:.78rem;
    }
    body.home-page .home-latest-section .latest-tool-copy small,
    body.home-page .home-most-used-section .latest-tool-copy small,
    body.home-page .home-recent-tools-section .latest-tool-copy small {
        font-size:.64rem;
    }
}

/* الوضع الداكن: نحافظ على التناسق بدون إجبار خلفية فاتحة */
html[data-theme="dark"] body.category-page-body { background:#0d1924; }
html[data-theme="dark"] .category-page-modern .category-tools-grid .category-service-card {
    background:#152635 !important;
    border-color:#29465e !important;
    box-shadow:none !important;
}
html[data-theme="dark"] .category-page-modern .category-tools-grid .category-service-card h3 { color:#edf7ff !important; }
html[data-theme="dark"] .category-page-modern .category-tools-grid .category-service-card p { color:#a9bdcc !important; }
html[data-theme="dark"] .category-page-modern .category-tools-grid .category-service-card .cta-btn { background:#152635; }

/* V73 — صفحات الأقسام: بطاقتان في كل صف على الهاتف فقط */
@media (max-width:650px) {
    .category-page-modern .category-tools-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }
    .category-page-modern .category-tools-grid .category-service-card {
        min-width:0 !important;
        padding:18px 12px 14px !important;
    }
}

/* V75 — إصلاح زر تثبيت الموقع وإظهار المفضلة في أدوات الرئيسية */


/* V76 — أدواتي المفضلة: نفس تصميم بطاقات "أدوات مميزة" في الرئيسية */
.home-personal-tools-section .favorites-tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card {
    min-height: 286px;
    padding: 23px 17px 17px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(21,68,99,.035);
}
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card::before { display:none; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card .card-icon {
    width:60px; height:60px; line-height:60px; border-radius:17px;
    margin:0 auto 10px; background:#eef7ff;
    display:grid; place-items:center;
}
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card h3 { font-size:1rem; margin-bottom:7px; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card p { font-size:.78rem; line-height:1.75; min-height:52px; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card .service-card-footer { padding-top:12px; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card .cta-btn {
    width:100%; box-sizing:border-box; align-self:stretch; padding:8px 12px;
    border-radius:999px; font-size:.77rem; font-weight:800; text-decoration:none !important;
    background:#fff; border:1.5px solid #8ac5e9; color:#1479d1; text-align:center;
}
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n+1) .card-icon { background:#e9f8f6; color:#0aa6a0; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n+2) .card-icon { background:#eef5ff; color:#1479d1; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n+3) .card-icon { background:#f5efff; color:#9550dc; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n) .card-icon { background:#fff0ed; color:#ef5a43; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n+1) .cta-btn { color:#12a8b0; border-color:#75d5d5; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n+2) .cta-btn { color:#1479d1; border-color:#82bff0; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n+3) .cta-btn { color:#9550dc; border-color:#bc8ae9; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:nth-child(4n) .cta-btn { color:#ef5a43; border-color:#f08f7f; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card:hover .cta-btn { background:currentColor; color:#fff !important; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card .cta-btn::after { content:none !important; }
.home-personal-tools-section .favorites-tools-grid .favorite-tool-card .favorite-star-btn { display:grid; }
@media (max-width: 980px) {
    .home-personal-tools-section .favorites-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 650px) {
    .home-personal-tools-section .favorites-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
    .home-personal-tools-section .favorites-tools-grid .favorite-tool-card { min-height:250px; padding:18px 12px 14px; }
    .home-personal-tools-section .favorites-tools-grid .favorite-tool-card .card-icon { width:54px; height:54px; border-radius:15px; }
}
@media (max-width: 520px) {
    .home-personal-tools-section .favorites-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* v77: lightweight feedback consistent with existing tool cards. */
.ux77-message{margin:0 0 14px;padding:10px 13px;border:1px solid #f3c4c4;border-radius:9px;background:#fff5f5;color:#9f1c1c;font-weight:700}.ux77-invalid{border-color:#d64242!important;box-shadow:0 0 0 3px rgba(214,66,66,.12)!important}.ux77-copy{display:inline-flex;align-items:center;gap:5px;margin:10px 0 0;padding:7px 10px;border:1px solid #d6dde4;border-radius:8px;background:#fff;color:#174e78;font:inherit;font-size:13px;cursor:pointer}.ux77-copy:hover{background:#f3f8fc}#ux77-high-score{margin:8px 0 0;color:#53616d;font-size:13px}

/* ========================================================================
   Blog Site-Matched UI — light, tool-card inspired
   Scoped to blog pages so the rest of the site/theme remains unchanged.
   ======================================================================== */
body.blog-page,
body.blog-article-page {
    background: #fbfdff !important;
    color: #294860;
}

body.blog-page .blog-modern-page,
body.blog-article-page .blog-article-modern-page {
    background: transparent;
}

body.blog-page .blog-modern-section {
    background: #fff;
    border: 1px solid #e1eaf1;
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(37,70,98,.045);
}

body.blog-page .blog-modern-grid {
    gap: 18px;
}

body.blog-page .blog-modern-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid #e1eaf1;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(21,68,99,.035);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.blog-page .blog-modern-card:hover {
    transform: translateY(-6px);
    border-color: #bddcf2;
    box-shadow: 0 14px 30px rgba(36,91,135,.10);
}

body.blog-page .blog-modern-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.blog-page .blog-modern-image {
    height: 178px;
    flex: 0 0 178px;
    border-radius: 14px 14px 0 0;
    background-color: #eef7ff;
}

body.blog-page .blog-modern-image:after {
    background: linear-gradient(180deg, rgba(12,63,112,.01), rgba(12,63,112,.10));
}

body.blog-page .blog-image-label {
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,.94);
    color: #39739d;
    box-shadow: 0 4px 12px rgba(30,70,100,.06);
}

body.blog-page .blog-modern-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 17px 17px 16px;
    text-align: right;
}

body.blog-page .blog-date {
    color: #7890a4;
    font-size: .67rem;
    margin-bottom: 7px;
}

body.blog-page .blog-modern-body h3 {
    color: #203e57;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 8px;
}

body.blog-page .blog-modern-body p {
    color: #71869a;
    font-size: .78rem;
    line-height: 1.8;
    min-height: 44px;
    margin: 0;
}

body.blog-page .blog-read-more {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    margin-top: auto;
    padding: 8px 12px;
    border: 1px solid #b8dbf6;
    border-top: 1px solid #b8dbf6;
    border-radius: 999px;
    background: #f4faff;
    color: #1479d1;
    font-size: .73rem;
    line-height: 1.4;
    transition: .2s ease;
}

body.blog-page .blog-read-more b {
    display: none;
}

body.blog-page .blog-modern-card:hover .blog-read-more {
    background: #1479d1;
    border-color: #1479d1;
    color: #fff;
}

/* The blog keeps the site's light visual language even if the visitor has
   selected dark mode; the blog request is intentionally a light presentation. */
html[data-theme="dark"] body.blog-page,
html[data-theme="dark"] body.blog-article-page {
    background: #fbfdff !important;
    color: #294860 !important;
}

html[data-theme="dark"] body.blog-page .blog-hero-card,
html[data-theme="dark"] body.blog-page .blog-modern-section,
html[data-theme="dark"] body.blog-page .blog-modern-card,
html[data-theme="dark"] body.blog-page .blog-empty-state,
html[data-theme="dark"] body.blog-article-page .article-main-column,
html[data-theme="dark"] body.blog-article-page .article-side-card,
html[data-theme="dark"] body.blog-article-page .article-related-section {
    background: #fff !important;
    border-color: #e1eaf1 !important;
    box-shadow: 0 10px 28px rgba(37,70,98,.045) !important;
}

html[data-theme="dark"] body.blog-page .blog-hero-copy h1,
html[data-theme="dark"] body.blog-page .blog-section-header h2,
html[data-theme="dark"] body.blog-page .blog-modern-body h3,
html[data-theme="dark"] body.blog-page .blog-empty-state h2,
html[data-theme="dark"] body.blog-article-page .article-modern-header h1,
html[data-theme="dark"] body.blog-article-page .article-modern-content h2,
html[data-theme="dark"] body.blog-article-page .article-modern-content h3,
html[data-theme="dark"] body.blog-article-page .article-modern-content h4,
html[data-theme="dark"] body.blog-article-page .article-side-card h2,
html[data-theme="dark"] body.blog-article-page .article-related-heading h2,
html[data-theme="dark"] body.blog-article-page .article-related-card h3 {
    color: #203e57 !important;
}

html[data-theme="dark"] body.blog-page .blog-hero-copy p,
html[data-theme="dark"] body.blog-page .blog-modern-body p,
html[data-theme="dark"] body.blog-page .blog-date,
html[data-theme="dark"] body.blog-page .blog-empty-state p,
html[data-theme="dark"] body.blog-article-page .article-lead,
html[data-theme="dark"] body.blog-article-page .article-meta-row,
html[data-theme="dark"] body.blog-article-page .article-modern-content,
html[data-theme="dark"] body.blog-article-page .article-modern-content p,
html[data-theme="dark"] body.blog-article-page .article-side-card p,
html[data-theme="dark"] body.blog-article-page .article-related-card small {
    color: #63798c !important;
}

html[data-theme="dark"] body.blog-article-page .article-modern-content th {
    background: #f1f7fb !important;
    color: #21465f !important;
}

html[data-theme="dark"] body.blog-article-page .article-modern-content th,
html[data-theme="dark"] body.blog-article-page .article-modern-content td,
html[data-theme="dark"] body.blog-article-page .article-share-bar,
html[data-theme="dark"] body.blog-article-page .article-bottom-nav,
html[data-theme="dark"] body.blog-article-page .article-mini-tool {
    border-color: #dce7ef !important;
}

html[data-theme="dark"] body.blog-article-page .article-share-bar a,
html[data-theme="dark"] body.blog-article-page .article-share-native,
html[data-theme="dark"] body.blog-article-page .article-bottom-nav a {
    background: #f8fbfe !important;
    border-color: #dce8f1 !important;
    color: #426b87 !important;
}

html[data-theme="dark"] body.blog-article-page .article-modern-content blockquote {
    background: #f4f9fd !important;
    color: #41647b !important;
}

html[data-theme="dark"] body.blog-article-page .article-related-card {
    background: #fbfdff !important;
    border-color: #e1eaf1 !important;
}

html[data-theme="dark"] body.blog-article-page .article-related-image {
    background: linear-gradient(135deg,#eaf5ff,#f4f1ff) !important;
}

@media(max-width:600px){
    body.blog-page .blog-modern-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px;
    }
    body.blog-page .blog-modern-section {
        padding: 15px;
        border-radius: 20px;
    }
    body.blog-page .blog-modern-image {
        height: 122px;
        flex-basis: 122px;
    }
    body.blog-page .blog-modern-body {
        padding: 12px 11px 11px;
    }
    body.blog-page .blog-modern-body h3 {
        font-size: .82rem;
        line-height: 1.55;
    }
    body.blog-page .blog-modern-body p {
        font-size: .68rem;
        line-height: 1.7;
        min-height: 40px;
    }
    body.blog-page .blog-date {
        font-size: .58rem;
    }
    body.blog-page .blog-read-more {
        font-size: .64rem;
        padding: 7px 9px;
    }
}