@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cairo-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0020-007E;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/cairo-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0020-007E;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cairo-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0020-007E;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/cairo-900.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0020-007E;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0020-007E;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0020-007E;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-700.woff2') format('woff2');
  unicode-range: U+0020-007E;
}
:root {
    --gold: #D4AF37;
    --gold-light: #F7E27D;
    --gold-dark: #8C6C1F;
    --gold-deep: #5A4610;
    --silver: #C0C0C0;
    --silver-light: #E6E6E6;
    --silver-dark: #8A8A8A;
    --silver-deep: #5A5A5A;
    --gold-bg: #FDF6E3;
    --bg: #FFFFFF;
    --bg2: #F8F9FA;
    --bg3: #F0F2F5;
    --border: #E2D9C8;
    --border-gold: rgba(184,134,11,0.28);
    --text: #1C1C2E;
    --text-muted: #626270;
    --green: #1A7A4A;
    --green-bg: #E8F5EE;
    --red: #C0392B;
    --red-bg: #FDECEA;
    --shadow: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 24px rgba(184,134,11,0.13);
    --shadow-lg: 0 8px 40px rgba(184,134,11,0.18);
    --radius: 16px
}

html[data-theme="night"] {
    --bg: #0f1420;
    --bg2: #171c27;
    --bg3: #222938;
    --border: #30384b;
    --border-gold: rgba(212,175,55,0.32);
    --text: #eef2fb;
    --text-muted: #a1abc1;
    --green-bg: rgba(26,122,74,0.18);
    --red-bg: rgba(192,57,43,0.18);
    --shadow: 0 10px 28px rgba(0,0,0,0.28);
    --shadow-md: 0 14px 36px rgba(0,0,0,0.34);
    --shadow-lg: 0 18px 48px rgba(0,0,0,0.4);
}

.country-select,
body {
    color: var(--text);
    font-family: Cairo, sans-serif;
}

.calc-card,
.calc-result,
.gold-main-card,
.karat-item,
.ticker__viewport {
    position: relative;
}

*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);min-height:100vh;transition:background-color .25s ease,color .25s ease}nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 6px rgba(0,0,0,.05)}html[data-theme="night"] nav{background:rgba(17,23,35,.88);box-shadow:0 8px 24px rgba(0,0,0,.22)}.nav-logo,.nav-logo-icon{align-items:center;display:flex}.nav-logo{gap:10px;text-decoration:none}.nav-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));border-radius:10px;justify-content:center;font-size:20px;box-shadow:0 2px 8px rgba(184,134,11,.3)}.nav-logo-text{font-size:17px;font-weight:900;color:var(--text)}.hero-title .gold-word,.nav-logo-text span,.use-custom-btn:hover,.use-spot-btn:hover{color:var(--gold)}.nav-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.country-select{background:var(--bg2);border:1.5px solid var(--border);font-size:14px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;outline:0;transition:border-color .2s,box-shadow .2s,background-color .2s,color .2s}.change-badge,.hero-updated,.karat-label,.karat-price{font-family:'IBM Plex Mono',monospace}.hero-country,.market-badge{align-items:center;font-weight:700}.country-select:focus,.country-select:hover{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,134,11,.1)}.market-badge{display:flex;gap:6px;font-size:12px;padding:6px 14px;border-radius:20px;border:1px solid;max-width:min(100%,320px)}.market-badge.open{color:var(--green);border-color:rgba(26,122,74,.25);background:var(--green-bg)}.hero-country,.hero-updated,.market-badge.closed,.section-label{color:var(--text-muted)}.market-badge.closed{border-color:var(--border);background:var(--bg3)}.market-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}.market-badge span:last-child{line-height:1.5}.market-badge.closed .market-dot{opacity:.75}.market-badge.open .market-dot{animation:2s infinite pulse}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}main{max-width:1100px;margin:0 auto;padding:36px 20px 80px}

[data-price] {
    transition: color .22s ease, text-shadow .22s ease;
}

.change-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.change-badge.up {
    color: var(--green);
    background: var(--green-bg);
}

.change-badge.down {
    color: var(--red);
    background: var(--red-bg);
}

.change-badge.unchanged,
.change-badge.unavailable {
    color: var(--text-muted);
    background: var(--bg3);
}

.change-badge__icon {
    font-size: 16px;
    line-height: 1;
}

.change-badge__value {
    direction: ltr;
    unicode-bidi: isolate;
}

.change-badge__label {
    font-family: Cairo, sans-serif;
    font-size: 11px;
    font-weight: 700;
    opacity: .82;
}

@media (max-width: 480px) {
    .change-badge {
        gap: 4px;
        min-height: 30px;
        padding: 5px 8px;
    }

    .change-badge__label { display: none; }
}

[data-price].price-flash.price-up {
    color: var(--green);
    text-shadow: 0 0 12px rgba(26,122,74,.18);
}

[data-price].price-flash.price-down {
    color: var(--red);
    text-shadow: 0 0 12px rgba(192,57,43,.16);
}

.zakat-money__value,
[data-ounce-price],
[data-gram-price],
[data-ten-gram-price],
[data-hundred-gram-price],
#gold-21-price,
#table-gold-24,
#table-gold-22,
#table-gold-21,
#table-gold-18,
#table-gold-14,
#table-silver {
    transition: color .22s ease, text-shadow .22s ease;
}

.zakat-money__value.price-flash.price-up,
[data-ounce-price].price-flash.price-up,
[data-gram-price].price-flash.price-up,
[data-ten-gram-price].price-flash.price-up,
[data-hundred-gram-price].price-flash.price-up,
#gold-21-price.price-flash.price-up,
#table-gold-24.price-flash.price-up,
#table-gold-22.price-flash.price-up,
#table-gold-21.price-flash.price-up,
#table-gold-18.price-flash.price-up,
#table-gold-14.price-flash.price-up,
#table-silver.price-flash.price-up {
    color: var(--green);
    text-shadow: 0 0 12px rgba(26,122,74,.18);
}

.zakat-money__value.price-flash.price-down,
[data-ounce-price].price-flash.price-down,
[data-gram-price].price-flash.price-down,
[data-ten-gram-price].price-flash.price-down,
[data-hundred-gram-price].price-flash.price-down,
#gold-21-price.price-flash.price-down,
#table-gold-24.price-flash.price-down,
#table-gold-22.price-flash.price-down,
#table-gold-21.price-flash.price-down,
#table-gold-18.price-flash.price-down,
#table-gold-14.price-flash.price-down,
#table-silver.price-flash.price-down {
    color: var(--red);
    text-shadow: 0 0 12px rgba(192,57,43,.16);
}

.is-market-resolving {
    transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.metal-card.is-market-resolving,
.stats-card.is-market-resolving {
    border-color: rgba(184,134,11,.35);
    box-shadow: 0 0 0 3px rgba(184,134,11,.08), var(--shadow);
}

.calc-select.is-market-resolving,
.country-select.is-market-resolving {
    opacity: .72;
    cursor: wait;
}

.market-change-flash {
    animation: marketChangeFlash .85s ease both;
}

@keyframes marketChangeFlash {
    0% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(184,134,11,.18);
    }

    35% {
        transform: translateY(-1px);
        box-shadow: 0 0 0 5px rgba(184,134,11,.12);
    }

    100% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(184,134,11,0);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-price],
    .zakat-money__value,
    [data-ounce-price],
    [data-gram-price],
    [data-ten-gram-price],
    [data-hundred-gram-price],
    #gold-21-price,
    #table-gold-24,
    #table-gold-22,
    #table-gold-21,
    #table-gold-18,
    #table-gold-14,
    #table-silver {
        transition: none;
    }

    .market-change-flash {
        animation: none;
    }
}

.art-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 20px 72px;
    direction: rtl;
    animation: fadeUp 0.5s ease both;
}

/* Breadcrumb */
.art-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

    .art-breadcrumb a {
        color: var(--gold-dark);
        text-decoration: none;
    }

        .art-breadcrumb a:hover {
            color: var(--gold);
            text-decoration: underline;
        }

.art-bc-sep {
    color: var(--border);
}

/* Hero */
.art-hero {
    padding: 36px 32px;
    background: linear-gradient(160deg, var(--gold-bg) 0%, #FFFEF8 100%);
    border: 1.5px solid var(--border-gold);
    border-radius: 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

    .art-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light), var(--gold), var(--gold-deep));
    }

.art-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(184,134,11,0.1);
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border-gold);
}

.art-hero-title {
    font-size: clamp(24px,4.5vw,38px);
    font-weight: 900;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 12px;
}

.article-header-image {
    width: min(100%, 620px);
    margin: 14px 0 18px;
    border: 1px solid var(--border-gold);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg2);
    box-shadow: var(--shadow-md);
}

.article-header-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 630;
    height: auto;
    object-fit: cover;
}

.art-hero-year {
    color: var(--gold-dark);
}

.art-hero-sub {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 18px;
    max-width: 580px;
}

.art-hero-meta {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
    align-items: center;
    font-family: 'IBM Plex Mono',monospace;
}

.art-dot {
    color: var(--border);
}

/* Live Box */
.art-live-box {
    background: #fff;
    border: 1.5px solid var(--border-gold);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 44px;
    box-shadow: var(--shadow-md);
}

.art-live-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    background: linear-gradient(90deg, var(--gold-bg), #FFFEF8);
    border-bottom: 1px solid var(--border-gold);
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-dark);
    flex-wrap: wrap;
}

.art-live-dot {
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.art-live-src {
    margin-right: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    font-family: 'IBM Plex Mono',monospace;
}

.art-price-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

@media(max-width:640px) {
    .art-price-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

.art-price-card {
    padding: 20px 16px;
    border-left: 1px solid var(--border);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.2s;
    position: relative;
}

    .art-price-card:last-child {
        border-left: none;
    }

    .art-price-card:hover {
        background: var(--gold-bg);
    }

.art-price-feat {
    background: linear-gradient(160deg,#FFFBEE,#FFF8E0);
}

    .art-price-feat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,var(--gold-dark),var(--gold-light));
    }

.art-price-popular {
    background: linear-gradient(160deg,#F5FFFA,#EDFAF3);
}

.art-popular-badge {
    font-size: 9px;
    font-weight: 800;
    color: var(--green);
    background: var(--green-bg);
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
    border: 1px solid rgba(26,122,74,0.2);
}

.art-price-karat {
    font-size: 18px;
    font-weight: 900;
    color: var(--gold-dark);
    font-family: 'IBM Plex Mono',monospace;
}

.art-purity-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.art-purity-bar {
    height: 3px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
}

.art-purity-fill {
    height: 100%;
    background: linear-gradient(90deg,var(--gold-dark),var(--gold-light));
    border-radius: 2px;
}

.art-purity-wrap span {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-family: 'IBM Plex Mono',monospace;
}

.art-price-link {
    font-size: 13px;
    color: var(--gold-dark);
    font-weight: 700;
}

.art-price-use {
    font-size: 11px;
    color: var(--text-muted);
}

.art-live-cta {
    display: block;
    text-align: center;
    padding: 14px;
    background: linear-gradient(135deg,var(--gold),var(--gold-dark));
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.2s;
}

    .art-live-cta:hover {
        opacity: 0.9;
    }

/* Body */
.art-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text);
}

.art-lead {
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-muted);
    border-right: 4px solid var(--gold);
    padding-right: 20px;
    margin-bottom: 44px;
    font-weight: 600;
}

.art-p {
    margin-bottom: 20px;
    color: var(--text-muted);
}

/* H2 */
.art-h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    margin: 48px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--border);
}

.art-h2-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg,var(--gold),var(--gold-dark));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    border-radius: 10px;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono',monospace;
    box-shadow: 0 3px 10px rgba(184,134,11,0.3);
}

/* Karat List */
.art-karat-list {
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: var(--shadow);
}

.art-karat-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background 0.2s;
    position: relative;
}

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

    .art-karat-row:hover {
        background: var(--bg2);
    }

.art-karat-highlight {
    background: linear-gradient(160deg,#FFFBEE,#FFF8E0) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    flex-wrap: wrap;
    padding-top: 36px !important;
}

.art-highlight-label {
    position: absolute;
    top: 10px;
    right: 24px;
    font-size: 11px;
    font-weight: 800;
    color: var(--gold-dark);
    background: rgba(184,134,11,0.12);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-gold);
}

.art-karat-badge {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono',monospace;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.art-k24 {
    background: linear-gradient(135deg,#F7E27D,#B8860B);
    color: #3A2A00;
}

.art-k22 {
    background: linear-gradient(135deg,#EDD060,#9A7209);
    color: #3A2A00;
}

.art-k21 {
    background: linear-gradient(135deg,#D4AF37,#7A5C08);
    color: #fff;
}

.art-k18 {
    background: linear-gradient(135deg,#B8960C,#5A4610);
    color: #fff;
}

.art-karat-body {
    flex: 1;
    min-width: 0;
}

    .art-karat-body strong {
        display: block;
        font-size: 15px;
        color: var(--text);
        margin-bottom: 6px;
        font-weight: 800;
    }

    .art-karat-body p {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.65;
        margin-bottom: 10px;
    }

.art-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.art-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg3);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.art-karat-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    background: var(--bg3);
    color: var(--gold-dark);
    border: 1.5px solid var(--border-gold);
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s,border-color 0.2s;
    flex-shrink: 0;
    align-self: center;
}

    .art-karat-btn:hover {
        background: var(--gold-bg);
        border-color: var(--gold);
    }

/* Factors */
.art-factors {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-bottom: 36px;
}

@media(max-width:580px) {
    .art-factors {
        grid-template-columns: 1fr;
    }
}

.art-factor {
    padding: 20px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: border-color 0.2s,box-shadow 0.2s;
}

    .art-factor:hover {
        border-color: var(--border-gold);
        box-shadow: var(--shadow-md);
    }

.art-factor-icon {
    font-size: 26px;
    margin-bottom: 10px;
}

.art-factor-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.art-factor p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Stats */
.art-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-bottom: 24px;
}

 @media(max-width:480px) {
    .art-stats {
        grid-template-columns: 1fr;
    }
}

.art-stat {
    text-align: center;
    padding: 20px 12px;
    background: linear-gradient(160deg,var(--gold-bg),#FFFEF8);
    border: 1.5px solid var(--border-gold);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.art-stat-num {
    font-size: 30px;
    font-weight: 900;
    color: var(--gold-dark);
    font-family: 'IBM Plex Mono',monospace;
    line-height: 1;
    margin-bottom: 6px;
}

.art-stat-lbl {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    line-height: 1.4;
}

/* List */
.art-list {
    padding-right: 22px;
    margin-bottom: 24px;
}

    .art-list li {
        margin-bottom: 10px;
        color: var(--text-muted);
        line-height: 1.7;
        font-size: 15px;
    }

        .art-list li strong {
            color: var(--text);
        }

/* Quote */
.art-quote {
    display: flex;
    gap: 14px;
    padding: 22px 24px;
    background: linear-gradient(135deg,var(--gold-bg),#FFFEF8);
    border: 1px solid var(--border-gold);
    border-right: 4px solid var(--gold);
    border-radius: 0 16px 16px 0;
    margin: 28px 0 36px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.8;
    font-style: italic;
}

.art-quote-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Compare */
.art-compare {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin: 20px 0 28px;
}

@media(max-width:580px) {
    .art-compare {
        flex-direction: column;
    }

    .art-compare-arrow {
        transform: rotate(90deg);
        text-align: center;
    }
}

.art-compare-col {
    flex: 1;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
}

.art-compare-a {
    background: #F5F8FF;
    border-color: #C8D8F0;
}

.art-compare-b {
    background: var(--gold-bg);
    border-color: var(--border-gold);
}

.art-compare-title {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text);
}

.art-compare-col ul {
    padding-right: 16px;
    margin: 0;
}

.art-compare-col li {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.6;
}

.art-compare-arrow {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: var(--gold);
    font-weight: 900;
    flex-shrink: 0;
}

/* Inline CTA */
.art-cta-inline {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    background: linear-gradient(135deg,var(--gold-bg),#FFFEF8);
    border: 1.5px solid var(--border-gold);
    border-radius: 16px;
    margin: 28px 0 36px;
    box-shadow: var(--shadow-md);
    flex-wrap: wrap;
}

.art-cta-inline-text {
    flex: 1;
    min-width: 200px;
}

    .art-cta-inline-text strong {
        display: block;
        font-size: 16px;
        color: var(--gold-dark);
        margin-bottom: 4px;
    }

    .art-cta-inline-text p {
        font-size: 13px;
        color: var(--text-muted);
        margin: 0;
    }

/* Tips */
.art-tips {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-bottom: 36px;
}

 @media(max-width:580px) {
    .art-tips {
        grid-template-columns: 1fr;
    }
}

.art-tip {
    padding: 20px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: border-color 0.2s,transform 0.2s;
}

    .art-tip:hover {
        border-color: var(--border-gold);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.art-tip-num {
    font-size: 26px;
    font-weight: 900;
    color: var(--border-gold);
    font-family: 'IBM Plex Mono',monospace;
    line-height: 1;
    margin-bottom: 8px;
}

.art-tip strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}

.art-tip p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

.art-tip a {
    color: var(--gold-dark);
    font-weight: 700;
}

/* Countries */
.art-countries {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
    margin-bottom: 36px;
}

 @media(max-width:580px) {
    .art-countries {
        grid-template-columns: repeat(2,1fr);
    }
}

.art-country {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 8px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    transition: border-color 0.2s,transform 0.2s,box-shadow 0.2s;
    box-shadow: var(--shadow);
}

    .art-country:hover {
        border-color: var(--gold);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .art-country span:first-child {
        font-size: 26px;
    }

.art-country-cur {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    text-align: center;
}

/* Final CTA */
.art-final-cta {
    margin: 48px 0 32px;
    padding: 40px 28px;
    background: linear-gradient(160deg,var(--gold-bg),#FFFEF8);
    border: 1.5px solid var(--border-gold);
    border-radius: 24px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

    .art-final-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-light),var(--gold),var(--gold-deep));
    }

    .art-final-cta h3 {
        font-size: 22px;
        font-weight: 900;
        color: var(--gold-dark);
        margin-bottom: 8px;
    }

    .art-final-cta p {
        font-size: 14px;
        color: var(--text-muted);
        margin-bottom: 24px;
        font-family: 'IBM Plex Mono',monospace;
    }

.art-final-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.art-outline-btn {
    display: inline-block;
    padding: 11px 22px;
    background: transparent;
    color: var(--gold-dark);
    border: 1.5px solid var(--border-gold);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.2s,border-color 0.2s;
    font-family: 'Cairo',sans-serif;
}

    .art-outline-btn:hover {
        background: var(--gold-bg);
        border-color: var(--gold);
    }

/* Share */
.art-share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.art-share-lbl {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.art-share-link {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.art-share-link svg {
    width: 18px;
    height: 18px;
    display: block;
}

.art-share-link--x {
    background: #000;
    color: #fff;
}

.art-share-link--wa {
    background: #25D366;
    color: #fff;
}

.art-share-link--tg {
    background: #229ED9;
    color: #fff;
}

.art-share-link--fb {
    background: #1877F2;
    color: #fff;
}

.art-share-link--in {
    background: #0A66C2;
    color: #fff;
}

.art-share-link--source {
    background: var(--bg2);
    color: var(--gold-dark);
    border: 1.5px solid var(--border-gold);
    width: auto;
    height: auto;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 14px;
}

.art-share-link:hover {
    opacity: 0.85;
}

/* Related */
.art-related {
    padding-top: 36px;
    border-top: 1.5px solid var(--border);
    margin-bottom: 32px;
}

.art-related-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 18px;
}

.art-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap: 16px;
}

 @media(max-width:580px) {
    .art-related-grid {
        grid-template-columns: 1fr;
    }
}

.art-related-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    height: 100%;
    padding: 12px 12px 16px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: border-color 0.2s,transform 0.2s,box-shadow 0.2s;
}

    .art-related-card:hover {
        border-color: var(--border-gold);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.art-related-card:focus-visible {
    outline: 3px solid rgba(184,134,11,0.32);
    outline-offset: 4px;
}

.art-related-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(184,134,11,0.16);
    background: #fff7df;
}

.art-related-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.28s ease;
}

.art-related-card:hover .art-related-image {
    transform: scale(1.035);
}

.art-related-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 3px 0;
}

    .art-related-text strong {
        font-size: 14px;
        font-weight: 800;
        color: var(--text);
        line-height: 1.4;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .art-related-text span {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.5;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
.art-zakat-hero-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    background: linear-gradient(135deg,#F0FFF6,#E8F5EE);
    border: 1.5px solid rgba(26,122,74,0.25);
    border-radius: 16px;
    margin-bottom: 36px;
    box-shadow: var(--shadow-md);
    flex-wrap: wrap;
}

.art-zakat-hero-icon {
    font-size: 40px;
    flex-shrink: 0;
}

.art-zakat-hero-text {
    flex: 1;
    min-width: 200px;
}

    .art-zakat-hero-text strong {
        display: block;
        font-size: 16px;
        color: var(--green);
        margin-bottom: 4px;
        font-weight: 800;
    }

    .art-zakat-hero-text p {
        font-size: 13px;
        color: var(--text-muted);
        margin: 0;
    }

/* Nisab Cards */
.art-nisab-cards {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
    margin-bottom: 28px;
}

 @media(max-width:500px) {
    .art-nisab-cards {
        grid-template-columns: 1fr;
    }
}

.art-nisab-card {
    padding: 24px;
    border-radius: 20px;
    text-align: center;
    border: 1.5px solid;
    box-shadow: var(--shadow-md);
}

.art-nisab-gold {
    background: linear-gradient(160deg,var(--gold-bg),#FFFEF8);
    border-color: var(--border-gold);
}

.art-nisab-silver {
    background: linear-gradient(160deg,#F8F9FA,#F0F2F5);
    border-color: #C8C8C8;
}

.art-nisab-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.art-nisab-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.art-nisab-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--gold-dark);
    font-family: 'IBM Plex Mono',monospace;
    line-height: 1;
    margin-bottom: 6px;
}

.art-nisab-silver .art-nisab-value {
    color: var(--silver-dark);
}

.art-nisab-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.art-nisab-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-dark);
    text-decoration: none;
    background: rgba(184,134,11,0.1);
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-gold);
    transition: background 0.2s;
}

    .art-nisab-link:hover {
        background: rgba(184,134,11,0.2);
    }

/* Conditions */
.art-conditions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: var(--shadow);
}

.art-condition {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background 0.2s;
}

    .art-condition:last-child {
        border-bottom: none;
    }

    .art-condition:hover {
        background: var(--bg2);
    }

.art-condition-num {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg,var(--gold),var(--gold-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono',monospace;
}

.art-condition div strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.art-condition div p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Zakat Rate */
.art-zakat-rate {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    background: linear-gradient(160deg,var(--gold-bg),#FFFEF8);
    border: 1.5px solid var(--border-gold);
    border-radius: 20px;
    margin-bottom: 36px;
    box-shadow: var(--shadow-md);
    flex-wrap: wrap;
}

.art-zakat-rate-num {
    font-size: 64px;
    font-weight: 900;
    color: var(--gold-dark);
    font-family: 'IBM Plex Mono',monospace;
    line-height: 1;
    flex-shrink: 0;
}

.art-zakat-rate-text strong {
    display: block;
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 8px;
}

.art-zakat-rate-text p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Steps */
.art-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    margin-bottom: 36px;
}

    .art-steps::before {
        content: '';
        position: absolute;
        right: 19px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom,var(--gold),var(--border));
        z-index: 0;
    }

.art-step {
    display: flex;
    gap: 20px;
    padding: 0 0 24px;
    position: relative;
    z-index: 1;
}

    .art-step:last-child {
        padding-bottom: 0;
    }

.art-step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--gold),var(--gold-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono',monospace;
    box-shadow: 0 3px 10px rgba(184,134,11,0.3);
}

.art-step-body {
    flex: 1;
    padding-top: 8px;
}

    .art-step-body strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 6px;
    }

    .art-step-body p {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.65;
        margin-bottom: 10px;
    }

.art-formula {
    display: inline-block;
    background: var(--gold-bg);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'IBM Plex Mono',monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-dark);
}

.math-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    background: var(--gold-bg);
    color: var(--gold-dark);
    direction: rtl;
    text-align: center;
    font-family: "IBM Plex Sans Arabic", "Tahoma", sans-serif;
    font-weight: 800;
    line-height: 1.45;
}

.math-equation--inline {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

.math-equation__term {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.math-equation__op {
    color: var(--text);
    font-weight: 900;
}

.math-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 96px;
    text-align: center;
    font-family: "Times New Roman", serif;
    font-size: 1.15em;
}

.math-fraction > span:first-child {
    padding: 0 8px 4px;
    border-bottom: 2px solid currentColor;
}

.math-fraction > span:last-child {
    padding-top: 4px;
}

@media (max-width: 560px) {
    .math-equation {
        padding: 12px;
        font-size: 15px;
    }
}

/* Example */
.art-example {
    border: 1.5px solid var(--border-gold);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: var(--shadow);
}

.art-example-header {
    padding: 14px 20px;
    background: linear-gradient(90deg,var(--gold-bg),#FFFEF8);
    font-weight: 800;
    font-size: 14px;
    color: var(--gold-dark);
    border-bottom: 1px solid var(--border-gold);
}

.art-example-body {
    padding: 20px;
}

.art-example-table {
    margin-bottom: 16px;
}

.art-ex-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.art-ex-header {
    font-weight: 800;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg3);
}

.art-ex-row:nth-child(even) {
    background: var(--bg2);
}

.art-ex-total {
    background: var(--gold-bg) !important;
    font-weight: 800;
    color: var(--gold-dark);
    border-top: 2px solid var(--border-gold);
}

.art-example-result {
    background: var(--bg2);
    border-radius: 10px;
    padding: 16px;
}

.art-ex-check {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.art-example-result p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Madhabs */
.art-madhabs {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-bottom: 20px;
}

 @media(max-width:500px) {
    .art-madhabs {
        grid-template-columns: 1fr;
    }
}

.art-madhab {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1.5px solid;
}

.art-madhab-yes {
    background: var(--green-bg);
    border-color: rgba(26,122,74,0.25);
}

.art-madhab-no {
    background: #FFF5F5;
    border-color: rgba(192,57,43,0.2);
}

.art-madhab-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text);
}

.art-madhab p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Tip Box */
.art-tip-box {
    background: linear-gradient(135deg,#FFF8E7,var(--gold-bg));
    border: 1.5px solid var(--border-gold);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 28px;
}

    .art-tip-box strong {
        display: block;
        font-size: 14px;
        font-weight: 800;
        color: var(--gold-dark);
        margin-bottom: 6px;
    }

    .art-tip-box p {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.7;
        margin: 0;
    }


.art-factors-why {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.art-factor-why {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1.5px solid;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.2s,box-shadow 0.2s;
}

    .art-factor-why:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.art-factor-up {
    border-color: rgba(26,122,74,0.2);
}

.art-factor-down {
    border-color: rgba(192,57,43,0.2);
}

.art-factor-why-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.art-factor-why-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.art-factor-why-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    flex: 1;
}

.art-factor-why-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

    .art-factor-why-badge.up {
        background: var(--green-bg);
        color: var(--green);
        border: 1px solid rgba(26,122,74,0.2);
    }

    .art-factor-why-badge.down {
        background: var(--red-bg);
        color: var(--red);
        border: 1px solid rgba(192,57,43,0.2);
    }

.art-factor-why p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Daily flow */
.art-daily-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 36px;
}

.art-daily-item {
    padding: 16px 20px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
}

.art-daily-item-uae {
    background: linear-gradient(135deg,var(--gold-bg),#FFFEF8);
    border-color: var(--border-gold);
}

.art-daily-time {
    font-family: 'IBM Plex Mono',monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-dark);
    white-space: nowrap;
    min-width: 80px;
}

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

.art-daily-arrow {
    text-align: center;
    font-size: 18px;
    color: var(--gold);
    padding: 4px 0;
}


/* Warning box */
.art-warn-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    background: #FFF8E7;
    border: 1.5px solid var(--border-gold);
    border-radius: 14px;
    margin-bottom: 32px;
}

.art-warn-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.art-warn-box strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--gold-dark);
    margin-bottom: 4px;
}

.art-warn-box p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Methods */
.art-method {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s;
}

    .art-method:hover {
        box-shadow: var(--shadow-md);
    }

.art-method-best {
    border-color: var(--border-gold);
    position: relative;
}

.art-method-best-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg,var(--gold-deep),var(--gold-dark));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 16px;
    text-align: center;
}

.art-method-best .art-method-header {
    margin-top: 28px;
}

.art-method-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.art-method-num {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg,var(--gold),var(--gold-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono',monospace;
}

.art-method-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    flex: 1;
}

.art-method-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

    .art-method-badge.easy {
        background: var(--green-bg);
        color: var(--green);
        border: 1px solid rgba(26,122,74,0.2);
    }

    .art-method-badge.medium {
        background: #FFF3E0;
        color: #E65100;
        border: 1px solid rgba(230,81,0,0.2);
    }

    .art-method-badge.pro {
        background: linear-gradient(135deg,var(--gold-bg),#FFFEF8);
        color: var(--gold-dark);
        border: 1px solid var(--border-gold);
    }

.art-method-body {
    padding: 20px;
}

.art-method-desc p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 14px;
}

.art-hallmarks {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    margin-bottom: 14px;
}

 @media(max-width:480px) {
    .art-hallmarks {
        grid-template-columns: 1fr;
    }
}

.art-hallmark {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--gold-bg);
    border: 1px solid var(--border-gold);
    border-radius: 10px;
    font-size: 13px;
}

.art-hallmark-fake {
    background: var(--red-bg);
    border-color: rgba(192,57,43,0.2);
}

.art-hallmark-num {
    font-family: 'IBM Plex Mono',monospace;
    font-weight: 900;
    font-size: 15px;
    color: var(--gold-dark);
    min-width: 36px;
}

.art-hallmark-fake .art-hallmark-num {
    color: var(--red);
}

.art-hallmark span:last-child {
    font-size: 12px;
    color: var(--text-muted);
}

.art-method-results-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    margin-bottom: 10px;
}

 @media(max-width:480px) {
    .art-method-results-grid {
        grid-template-columns: 1fr;
    }
}

.art-mini-result {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

    .art-mini-result.pass {
        background: var(--green-bg);
        color: var(--green);
    }

    .art-mini-result.fail {
        background: var(--red-bg);
        color: var(--red);
    }

    .art-mini-result span:first-child {
        flex-shrink: 0;
        font-size: 16px;
    }

.art-method-note {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg3);
    padding: 10px 14px;
    border-radius: 8px;
    line-height: 1.6;
    border-right: 3px solid var(--border-gold);
}

.art-density-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
}

.art-density-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .art-density-step span {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        background: var(--gold-dark);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 900;
        flex-shrink: 0;
    }

    .art-density-step p {
        font-size: 13px;
        color: var(--text-muted);
        margin: 0;
        line-height: 1.6;
        padding-top: 2px;
    }

.art-density-table {
    margin: 14px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.art-density-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

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

.art-density-header {
    background: var(--bg3);
    font-weight: 800;
    color: var(--text-muted);
    font-size: 12px;
}

.art-density-fake {
    background: var(--red-bg);
    color: var(--red);
    font-weight: 700;
}

.art-xrf-pros {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin: 12px 0;
}

 @media(max-width:480px) {
    .art-xrf-pros {
        grid-template-columns: repeat(2,1fr);
    }
}

.art-xrf-pro {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
}

.art-method-result {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 14px;
}

.art-result-pass {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid rgba(26,122,74,0.2);
}

.art-result-fail {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid rgba(192,57,43,0.2);
}

.art-method-result span {
    font-weight: 900;
}

/* Summary table */
.art-summary-table {
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: var(--shadow);
}

.art-summary-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 12px 16px;
    background: var(--bg3);
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    gap: 8px;
}

.art-summary-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    gap: 8px;
    align-items: center;
    transition: background 0.2s;
}

    .art-summary-row:hover {
        background: var(--bg2);
    }

.art-summary-best {
    background: linear-gradient(160deg,var(--gold-bg),#FFFEF8) !important;
    font-weight: 700;
}

.art-summary-row span:first-child {
    color: var(--text);
    font-weight: 700;
}

.easy-lbl {
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
}

.med-lbl {
    color: #E65100;
    font-size: 11px;
    font-weight: 700;
}

.pro-lbl {
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 700;
}

.acc-low {
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
}

.acc-medium {
    color: #E65100;
    font-size: 11px;
    font-weight: 700;
}

.acc-high {
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
}

.acc-top {
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 900;
    font-family: 'IBM Plex Mono',monospace;
}

.no-dmg {
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
}

.yes-dmg {
    color: #E65100;
    font-size: 11px;
    font-weight: 700;
}


.art-disclaimer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    background: var(--red-bg);
    border: 1px solid rgba(192,57,43,0.2);
    border-radius: 12px;
    margin-bottom: 28px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.art-disclaimer-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.art-disclaimer p {
    margin: 0;
}

.art-forecast-factors {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 36px;
}

.art-forecast-factor {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}

    .art-forecast-factor:hover {
        transform: translateY(-2px);
    }

.art-ff-bull {
    border-color: rgba(26,122,74,0.2);
}

.art-ff-bear {
    border-color: rgba(192,57,43,0.2);
}

.art-ff-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.art-forecast-factor strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 5px;
}

.art-forecast-factor p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

.art-analyst-cards {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-bottom: 36px;
}

 @media(max-width:500px) {
    .art-analyst-cards {
        grid-template-columns: 1fr;
    }
}

.art-analyst {
    padding: 20px;
    border-radius: 16px;
    border: 1.5px solid;
    box-shadow: var(--shadow);
}

.art-analyst-bull {
    background: linear-gradient(160deg,#F0FFF6,#E8F5EE);
    border-color: rgba(26,122,74,0.25);
}

.art-analyst-bear {
    background: linear-gradient(160deg,#FFF5F5,#FDECEA);
    border-color: rgba(192,57,43,0.2);
}

.art-analyst-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.art-analyst-icon {
    font-size: 24px;
}

.art-analyst-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
}

.art-analyst p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 12px;
}

.art-analyst-key {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .art-analyst-key span {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        background: rgba(255,255,255,0.7);
        padding: 3px 8px;
        border-radius: 6px;
        border: 1px solid var(--border);
    }
.blog-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px 20px 72px;
    direction: rtl;
    animation: fadeUp 0.5s ease both;
}

/* Header */
.blog-header {
    text-align: center;
    padding: 44px 24px;
    background: linear-gradient(160deg,var(--gold-bg),#FFFEF8);
    border: 1.5px solid var(--border-gold);
    border-radius: 24px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

    .blog-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-light),var(--gold),var(--gold-deep));
    }

.blog-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(184,134,11,0.1);
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border-gold);
}

.blog-header-title {
    font-size: clamp(26px,5vw,40px);
    font-weight: 900;
    color: var(--text);
    margin-bottom: 12px;
}

.blog-header-sub {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 24px;
}

.blog-header-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.blog-stat-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--gold-dark);
    font-family: 'IBM Plex Mono',monospace;
    line-height: 1;
}

.blog-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}

.blog-stat-sep {
    font-size: 20px;
    color: var(--border);
}

/* Section label */
.blog-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

    .blog-section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

/* Featured grid */
.blog-featured-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .blog-featured-grid {
        grid-template-columns: 1fr;
    }
}

.blog-featured-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(160deg,#FFFBEE,#FFF8E0);
    border: 1.5px solid var(--border-gold);
    border-radius: 20px;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s,box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

    .blog-featured-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,var(--gold-dark),var(--gold-light));
    }

    .blog-featured-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

.blog-featured-icon {
    font-size: 40px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 4px;
}

.blog-featured-body {
    flex: 1;
    min-width: 0;
}

.blog-featured-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.4;
    margin: 6px 0 8px;
}

.blog-featured-excerpt {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* Regular grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: border-color 0.2s,transform 0.2s,box-shadow 0.2s;
}

    .blog-card:hover {
        border-color: var(--border-gold);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.blog-card-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

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

.blog-card-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
    margin: 5px 0 6px;
}

.blog-card-excerpt {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shared */
.blog-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: var(--gold-dark);
    background: rgba(184,134,11,0.1);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-gold);
}

.blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono',monospace;
}

.blog-read-more {
    font-size: 12px;
    font-weight: 800;
    color: var(--gold-dark);
}

/* CTA Box */
.blog-cta-box {
    margin-top: 52px;
    padding: 32px 28px;
    background: linear-gradient(160deg,var(--gold-bg),#FFFEF8);
    border: 1.5px solid var(--border-gold);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

    .blog-cta-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-light),var(--gold),var(--gold-deep));
    }

.blog-cta-content {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.blog-cta-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.blog-cta-content strong {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: var(--gold-dark);
    margin-bottom: 4px;
}

.blog-cta-content p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    font-family: 'IBM Plex Mono',monospace;
}

.blog-cta-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    nav {
        height: auto;
        min-height: 64px;
        padding: 10px 16px;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }

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

    .nav-right {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .nav-right form {
        flex: 1 1 220px;
        min-width: 0;
    }

    .country-select {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    main {
        padding: 28px 2px 72px;
    }

    .blog-wrap {
        padding: 20px 0 56px;
    }

    .blog-header {
        padding: 30px 18px;
        margin-bottom: 28px;
        border-radius: 20px;
    }

    .blog-header-sub {
        font-size: 14px;
    }

    .blog-featured-card,
    .blog-card {
        flex-direction: column;
        gap: 14px;
        padding: 18px;
    }

    .blog-featured-icon,
    .blog-card-icon {
        margin-top: 0;
    }

    .blog-meta {
        gap: 8px;
        flex-wrap: wrap;
    }

    .blog-cta-box {
        margin-top: 36px;
        padding: 24px 18px;
    }

    .blog-cta-content {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .blog-cta-btns,
    .art-final-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-cta-btns a,
    .art-final-btns a,
    .art-outline-btn,
    .calc-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .breadcrumb-nav {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .seo-content,
    .featured-price-card {
        padding: 18px;
        border-radius: 16px;
    }

    .featured-price-value {
        font-size: clamp(28px, 7vw, 38px);
        line-height: 1.15;
        word-break: break-word;
    }

    .featured-change {
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    nav {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .nav-logo {
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100vw - 170px);
        gap: 8px;
    }

    .nav-logo img {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
    }

    .nav-logo-text {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-right {
        width: auto;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        flex: 0 0 auto;
    }

    .nav-right form {
        flex: 0 1 112px;
        min-width: 0;
        max-width: 112px;
    }

    .country-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 8px 28px 8px 10px;
        border-radius: 10px;
        font-size: 12px;
        background-position: right 8px center, center;
        background-size: 12px, auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .blog-header-title {
        font-size: 28px;
    }

    .blog-section-label {
        font-size: 12px;
    }

    .blog-featured-title {
        font-size: 16px;
    }

    .blog-card-title {
        font-size: 14px;
    }
}


/* ── Disclaimer ── */
.fc-disclaimer {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    background: var(--red-bg);
    border: 1.5px solid rgba(192,57,43,0.2);
    border-radius: 14px;
    margin-bottom: 32px;
}

.fc-disclaimer-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.fc-disclaimer strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--red);
    margin-bottom: 4px;
}

.fc-disclaimer p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Factor cards ── */
.fc-bull-factors,
.fc-bear-factors {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    margin-bottom: 36px;
}

@media(max-width:580px) {
    .fc-bull-factors,
    .fc-bear-factors {
        grid-template-columns: 1fr;
    }
}

.fc-factor {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1.5px solid;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.2s,box-shadow 0.2s;
}

    .fc-factor:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.fc-bull {
    border-color: rgba(26,122,74,0.2);
}

.fc-bear {
    border-color: rgba(192,57,43,0.2);
}

.fc-factor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fc-factor-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.fc-factor-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    flex: 1;
}

.fc-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.fc-badge-up {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid rgba(26,122,74,0.2);
}

.fc-badge-down {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid rgba(192,57,43,0.2);
}

.fc-factor p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Analyst Cards ── */
.fc-analyst-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media(max-width:700px) {
    .fc-analyst-cards {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:400px) {
    .fc-analyst-cards {
        grid-template-columns: 1fr;
    }
}

.fc-analyst-card {
    padding: 20px 16px;
    border-radius: 16px;
    border: 1.5px solid;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.2s,box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

    .fc-analyst-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.fc-bull-card {
    background: linear-gradient(160deg,#FFFBEE,#FFF8E0);
    border-color: var(--border-gold);
}

.fc-bear-card {
    background: linear-gradient(160deg,#FFF5F5,#FDECEA);
    border-color: rgba(192,57,43,0.25);
}

.fc-analyst-logo {
    font-size: 12px;
    font-weight: 900;
    padding: 5px 12px;
    border-radius: 6px;
    font-family: 'IBM Plex Mono',monospace;
    letter-spacing: 0.5px;
}

.fc-logo-jp {
    background: #003087;
    color: #fff;
}

.fc-logo-gs {
    background: #1a1a1a;
    color: #C0A028;
}

.fc-logo-ubs {
    background: #E00C1C;
    color: #fff;
}

.fc-logo-citi {
    background: #003B70;
    color: #fff;
}

.fc-analyst-target {
    font-size: 28px;
    font-weight: 900;
    color: var(--gold-dark);
    font-family: 'IBM Plex Mono',monospace;
    line-height: 1;
}

.fc-bear-card .fc-analyst-target {
    color: var(--red);
}

.fc-analyst-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    font-family: 'IBM Plex Mono',monospace;
}

.fc-analyst-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
}

.fc-ab-bull {
    background: var(--green-bg);
    color: var(--green);
}

.fc-ab-bear {
    background: var(--red-bg);
    color: var(--red);
}

.fc-analyst-note {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    text-align: right;
}

/* ── Consensus Bar ── */
.fc-consensus {
    padding: 20px 24px;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    margin-bottom: 36px;
}

.fc-consensus-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.fc-consensus-bar {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    height: 36px;
    margin-bottom: 10px;
}

.fc-bar-bull {
    background: linear-gradient(90deg,var(--green),#2E9E6A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    transition: width 0.3s;
}

.fc-bar-bear {
    background: linear-gradient(90deg,#C0392B,var(--red));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.fc-consensus-range {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono',monospace;
    font-weight: 700;
    flex-wrap: wrap;
    gap: 6px;
}

.fc-range-mid {
    color: var(--gold-dark);
    font-weight: 900;
}

/* ── Conclusion ── */
.fc-conclusion {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: linear-gradient(135deg,var(--gold-bg),#FFFEF8);
    border: 1.5px solid var(--border-gold);
    border-radius: 16px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
}

.fc-conclusion-flag {
    font-size: 32px;
    flex-shrink: 0;
}

.fc-conclusion-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--gold-dark);
    margin-bottom: 10px;
}

.fc-conclusion p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}

.art-hero-silver {
    background: linear-gradient(160deg,#F8F9FA 0%,#F0F2F5 100%) !important;
    border-color: #C8C8C8 !important;
}

    .art-hero-silver::before {
        background: linear-gradient(90deg,#5A5A5A,#C0C0C0,#E6E6E6,#C0C0C0,#5A5A5A) !important;
    }

.art-badge-silver {
    background: rgba(192,192,192,0.15) !important;
    color: #5A5A5A !important;
    border-color: #C8C8C8 !important;
}

.art-hero-year-silver {
    color: var(--silver-dark, #8A8A8A);
}

/* Silver live box */
.art-silver-live {
    background: #fff;
    border: 1.5px solid #C8C8C8;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 44px;
    box-shadow: var(--shadow-md);
}

.art-silver-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

@media(max-width:500px) {
    .art-silver-grid {
        grid-template-columns: 1fr;
    }
}

.art-silver-card {
    padding: 24px 16px;
    border-left: 1px solid var(--border);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    transition: background 0.2s;
}

    .art-silver-card:last-child {
        border-left: none;
    }

    .art-silver-card:hover {
        background: var(--bg2);
    }

.art-silver-feat {
    background: linear-gradient(160deg,#F8F9FA,#F0F2F5);
}

.art-silver-unit {
    font-size: 20px;
    font-weight: 900;
    color: #5A5A5A;
    font-family: 'IBM Plex Mono',monospace;
}

.art-silver-desc {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.art-silver-cta {
    font-size: 13px;
    color: var(--gold-dark);
    font-weight: 700;
}

.art-live-cta-silver {
    background: linear-gradient(135deg,#8A8A8A,#5A5A5A) !important;
}

/* Units explain */
.art-units-explain {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-bottom: 36px;
}

@media(max-width:580px) {
    .art-units-explain {
        grid-template-columns: 1fr;
    }
}

.art-unit-card {
    padding: 20px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: border-color 0.2s,transform 0.2s;
}

    .art-unit-card:hover {
        border-color: #C8C8C8;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.art-unit-featured {
    border-color: #C8C8C8;
    background: linear-gradient(160deg,#F8F9FA,#F0F2F5);
}

.art-unit-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.art-unit-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.art-unit-value {
    font-size: 13px;
    font-weight: 700;
    color: #8A8A8A;
    font-family: 'IBM Plex Mono',monospace;
    margin-bottom: 10px;
}

.art-unit-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Silver uses */
.art-silver-uses {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-bottom: 36px;
}

@media(max-width:580px) {
    .art-silver-uses {
        grid-template-columns: 1fr;
    }
}

.art-silver-use {
    padding: 20px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.art-silver-use-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.art-silver-use strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.art-silver-use p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 10px;
}

.art-silver-use-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: #5A5A5A;
    background: #F0F2F5;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #C8C8C8;
}

/* Zakat silver box */
.art-zakat-silver {
    display: flex;
    gap: 20px;
    flex-direction: column;
    padding: 24px;
    background: linear-gradient(160deg,#F8F9FA,#F0F2F5);
    border: 1.5px solid #C8C8C8;
    border-radius: 16px;
    margin-bottom: 36px;
    box-shadow: var(--shadow);
}

.art-zakat-silver-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.art-zakat-silver-num {
    font-size: 36px;
    font-weight: 900;
    color: #5A5A5A;
    font-family: 'IBM Plex Mono',monospace;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}

.art-zakat-silver-text strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.art-zakat-silver-text p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

.site-footer {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 40px 24px 24px;
    direction: rtl;
}

.mobile-tools-bar {
    display: none;
}

.footer-shell {
    max-width: 1100px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.footer-brand-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    text-align: right;
}

.footer-brand-lockup {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: fit-content;
    margin: 0 0 10px auto;
    gap: 0;
    direction: ltr;
    text-decoration: none;
}

.footer-brand-lockup .ayg-logo--footer {
    margin-inline-end: -3px;
}

.footer-brand-title span {
    color: var(--gold);
}

.footer-brand-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 560px;
}

.footer-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.footer-highlight-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: linear-gradient(145deg, rgba(212,175,55,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 16px;
    padding: 16px;
    transition: transform 0.2s, border-color 0.2s;
}

.footer-highlight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212,175,55,0.35);
}

.footer-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: var(--gold);
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 11px;
}

.footer-highlight-icon img {
    width: 21px;
    height: 21px;
    filter: invert(72%) sepia(61%) saturate(548%) hue-rotate(5deg) brightness(91%) contrast(89%);
}

.footer-highlight-card strong {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0 auto 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-highlight-grid {
        grid-template-columns: 1fr;
    }

    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .footer-links-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 700px) {
    main {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .mobile-tools-bar {
        position: fixed;
        z-index: 110;
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: 10px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        direction: rtl;
        overflow: hidden;
        padding: 5px;
        background: var(--bg2);
        background: color-mix(in srgb, var(--bg2) 94%, transparent);
        border: 1px solid rgba(184, 134, 11, .14);
        border-radius: 18px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .mobile-tools-bar:is(.is-hidden, .is-editing-suppressed) {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
    }

    .mobile-tools-link {
        display: flex;
        min-width: 0;
        min-height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 3px;
        border-radius: 13px;
        color: var(--text);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .mobile-tools-link img {
        width: 20px;
        height: 20px;
        opacity: .72;
        filter: invert(72%) sepia(61%) saturate(548%) hue-rotate(5deg) brightness(91%) contrast(89%);
        transition: opacity .2s ease, transform .2s ease;
    }

    .mobile-tools-link:is(:hover, :focus-visible) {
        background: rgba(212, 175, 55, .08);
        outline: 0;
    }

    .mobile-tools-link.is-active {
        color: var(--gold-dark);
        background: linear-gradient(145deg, rgba(212, 175, 55, .2), rgba(212, 175, 55, .08));
        box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .12), 0 5px 14px rgba(184, 134, 11, .1);
    }

    .mobile-tools-link.is-active img {
        opacity: 1;
        transform: translateY(-1px);
    }

    .mobile-tools-link:active {
        transform: scale(.97);
    }

    html[data-theme="night"] .mobile-tools-bar {
        border-color: rgba(212, 175, 55, .18);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
    }

    html[data-theme="night"] .mobile-tools-link.is-active {
        color: var(--gold-light);
        background: linear-gradient(145deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .09));
        box-shadow: inset 0 0 0 1px rgba(242, 202, 80, .12), 0 6px 16px rgba(0, 0, 0, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-tools-bar {
        transition: none;
    }

    .mhc-stage.is-drawing {
        animation: none !important;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.footer-col a {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.4;
}

    .footer-col a:hover {
        color: var(--gold);
    }

/* ── Bottom bar ── */
.footer-bottom {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 14px;
}

.footer-bottom-note {
    margin-top: 4px;
}

/* ── Legal row ── */
.footer-legal {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--gold);
}

.footer-sep {
    color: var(--border);
    font-size: 12px;
}


.hero-updated { 
    font: caption;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Home page explicit block */
.hero {
    text-align: center;
    margin-bottom: 10px;
    animation: .5s both fadeUp;
}

.hero-country {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg3);
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
}

.hero-title {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--text);
}

.hero-title .silver-word {
    color: var(--silver-deep);
}

html[data-theme="night"] .hero-title .silver-word {
    color: var(--silver-light);
}

.hero-updated {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
}

.hero-market-status {
    --hero-market-accent: var(--gold-dark);
    --hero-market-border: rgba(212, 175, 55, .28);
    --hero-market-bg: rgba(212, 175, 55, .10);
    width: fit-content;
    max-width: min(100%, 680px);
    margin: 14px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 16px;
    border: 1px solid var(--hero-market-border);
    border-radius: 999px;
    background: var(--hero-market-bg);
    color: var(--hero-market-accent);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .06);
}

.hero-market-status__icon {
    color: currentColor;
    font-size: 10px;
    line-height: 1;
}

.hero-market-status__main {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: 0;
    text-align: center;
}

.hero-market-status__sub {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    flex-basis: 100%;
}

.hero-market-status__sub:empty {
    display: none;
}

.hero-market-status.is-open {
    --hero-market-accent: #0f6b56;
    --hero-market-border: rgba(23, 120, 100, .24);
    --hero-market-bg: linear-gradient(135deg, rgba(21, 140, 113, .11), rgba(56, 161, 184, .07));
}

.hero-market-status.is-closed {
    --hero-market-accent: var(--gold-dark);
    --hero-market-border: rgba(212, 175, 55, .30);
    --hero-market-bg: linear-gradient(135deg, rgba(212, 175, 55, .13), rgba(52, 122, 191, .07));
}

.hero-market-status--compact {
    margin-top: 12px;
    padding: 8px 14px;
    max-width: min(100%, 620px);
    font-size: 12px;
    box-shadow: 0 8px 14px rgba(15, 23, 42, .04);
}

.hero-market-status--compact .hero-market-status__icon {
    font-size: 9px;
}

.hero-market-status--compact .hero-market-status__sub {
    font-size: 11px;
    font-weight: 700;
}

.hero-market-status--tool {
    max-width: min(100%, 520px);
    padding: 7px 12px;
    gap: 6px;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 8px 14px rgba(15, 23, 42, .04);
}

.hero-market-status--tool .hero-market-status__icon {
    font-size: 8px;
}

.hero-market-status--tool .hero-market-status__sub {
    flex-basis: auto;
    color: color-mix(in srgb, currentColor 72%, var(--text-muted));
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .hero-market-status--tool {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
        max-width: 360px;
        padding: 7px 10px;
        border-radius: 14px;
        font-size: 11px;
        text-align: start;
    }

    .hero-market-status--tool .hero-market-status__main,
    .hero-market-status--tool .hero-market-status__sub {
        min-width: 0;
        text-align: start;
    }

    .hero-market-status--tool .hero-market-status__sub {
        grid-column: 2;
        font-size: 10px;
    }
}

html[data-theme="night"] .hero-market-status {
    box-shadow: 0 12px 24px rgba(0, 0, 0, .20);
}

html[data-theme="night"] .hero-market-status.is-open {
    --hero-market-accent: #98dec8;
    --hero-market-border: rgba(77, 176, 153, .22);
    --hero-market-bg: linear-gradient(135deg, rgba(24, 79, 70, .42), rgba(20, 57, 66, .36));
}

html[data-theme="night"] .hero-market-status.is-closed {
    --hero-market-accent: #f0d58c;
    --hero-market-border: rgba(212, 175, 55, .24);
    --hero-market-bg: linear-gradient(135deg, rgba(91, 72, 18, .36), rgba(26, 49, 73, .34));
}

html[data-theme="night"] .hero-market-status--compact {
    box-shadow: 0 10px 18px rgba(0, 0, 0, .16);
}

.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 14px;
    color: var(--text-muted);
}

.section-label::after,
.calc-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.gold-main-card {
    background: linear-gradient(160deg, #fffdf5 0%, #fdf5d8 50%, #faf0c8 100%);
    border: 1.5px solid var(--border-gold);
    border-radius: 24px;
    padding: 15px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: .5s 80ms both fadeUp;
}

.gold-main-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light), var(--gold), var(--gold-deep));
}

.gold-main-card::after {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.card-metal-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

.card-metal-name--gold {
    color: var(--gold-dark);
}

.card-metal-name--silver {
    color: var(--silver-deep);
}

html[data-theme="night"] .card-metal-name--gold {
    color: var(--gold-light);
}

html[data-theme="night"] .card-metal-name--silver {
    color: var(--silver-light);
}

.metal-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.metal-icon.gold {
    background: linear-gradient(135deg, #f0c830, #b8860b);
}

.metal-icon.silver,
.silver {
    background: linear-gradient(135deg, #c0c8d0, #8a9aaa);
}

.karat-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.karat-item {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.karat-item:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(184,134,11,.14);
}

.karat-item.featured {
    border-color: var(--gold);
    background: linear-gradient(160deg, #fff 0%, #fffbee 100%);
    box-shadow: 0 4px 20px rgba(184,134,11,.15);
    padding: 22px;
}

.karat-item.featured::before,
.calc-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.karat-item.featured::before {
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

.karat-purity-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--bg3);
    margin-bottom: 12px;
    overflow: hidden;
}

.karat-purity-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    transition: width 1s cubic-bezier(.4, 0, .2, 1);
}

.karat-label {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    font-family: 'IBM Plex Mono', monospace;
}

.karat-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 700;
    line-height: 1;
    font-family: 'IBM Plex Mono', monospace;
    direction: ltr;
    unicode-bidi: isolate;
    justify-content: center;
}

.karat-item.featured .karat-price {
    font-size: 32px;
    color: var(--gold-deep);
}

.karat-item:not(.featured) .karat-price {
    font-size: 18px;
    color: var(--text);
}

.currency,
.karat-price .currency {
    font-size: 12px;
    color: var(--gold-dark);
    font-weight: 600;
}

.karat-item.featured .karat-price .currency {
    font-size: 15px;
}

.karat-unit {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.extra-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.extra-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--border-gold);
    background: rgba(255,255,255,0.7);
    transition: background .2s, box-shadow .2s;
}

.extra-item:hover {
    background: #fff;
    box-shadow: 0 2px 10px rgba(184,134,11,.1);
}

.extra-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.extra-value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-deep);
    font-family: 'IBM Plex Mono', monospace;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

.cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    animation: .5s .16s both fadeUp;
}

.metal-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    transition: border-color .2s, box-shadow .2s;
}

.metal-card:hover {
    border-color: var(--border-gold);
    box-shadow: var(--shadow-md);
}

.silver-card {
    border-top: 3px solid #a8b8c8;
}

.stats-card {
    border-top: 3px solid var(--gold);
}

.ratio-card {
    border-top: 3px solid var(--gold-dark);
}

.ratio-card-value {
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    color: var(--gold-dark);
    font-family: 'IBM Plex Mono', monospace;
    margin-bottom: 12px;
}

.ratio-card-copy {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0 0 12px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--bg3);
}

.price-row:first-child {
    padding-top: 0;
}

.price-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.price-row-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.price-row-value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

.featured-price-value--silver,
.featured-price-value--silver .featured-currency,
.price-row-value--silver,
.money-inline--silver {
    color: var(--silver-deep);
}

.price-row-value--silver .currency,
.price-row-value--silver [data-price],
.money-inline--silver span:last-child {
    color: inherit;
}

.money-inline--silver span:first-child {
    color: var(--silver-dark);
}

.ratio-number--silver {
    color: var(--silver-deep);
}

.calc-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-top: 4px solid var(--gold-dark);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    animation: .5s .24s both fadeUp;
}

.home-calc-card {
    padding: 15px;
}

.calc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 20px;
}

.calc-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.calc-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
}

.calc-input,
.calc-select {
    width: 100%;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: Cairo, sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 14px;
    border-radius: 12px;
    outline: 0;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.calc-input:focus,
.calc-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,134,11,.1);
    background: #fff;
}

.calc-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 28px;
    font-family: Cairo, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(184,134,11,.35);
    transition: opacity .2s, transform .15s, box-shadow .2s;
}

.calc-btn:hover {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184,134,11,.4);
}

.calc-btn:active {
    transform: translateY(0);
}

.price-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.mode-btn {
    flex: 1;
    font-family: Cairo, sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    color: var(--text-muted);
    cursor: pointer;
    transition: .2s;
}

.mode-btn.active {
    background: var(--gold-deep);
    color: #fff;
    border-color: var(--gold-deep);
    box-shadow: 0 3px 10px rgba(90,70,16,.25);
}

.spot-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border-gold);
    background: #fff8e7;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
}

.notice-badge {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    background: rgba(184,134,11,0.12);
    color: var(--gold-dark);
    border: 1px solid rgba(184,134,11,0.22);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.custom-price-box {
    background: #f0f8ff;
    border: 1.5px solid #b0c8e0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 4px;
}

.custom-price-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.use-custom-btn,
.use-spot-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin-right: 6px;
    color: var(--gold-dark);
    font-family: Cairo, sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.use-custom-btn:hover,
.use-spot-btn:hover {
    color: var(--gold);
}

.calc-extra-box {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(212,175,55,.05), rgba(255,255,255,.6));
}

.calc-extra-box__head {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.calc-extra-box__head strong {
    font-size: 14px;
    color: var(--text);
}

.calc-extra-box__head span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
}

.calc-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.calc-group--hint {
    align-self: stretch;
}

.calc-extra-note {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px dashed rgba(184,134,11,.28);
    border-radius: 14px;
    background: rgba(212,175,55,.06);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}

.calc-result {
    margin-top: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #fffdf0, #fbf2ce);
    border: 2px solid var(--border-gold);
    border-radius: 16px;
    display: none;
    text-align: center;
    overflow: hidden;
    scroll-margin-top: 88px;
}

.calc-result::before {
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
}

.calc-result.show {
    display: block;
    animation: .4s cubic-bezier(.34,1.56,.64,1) both resultPop;
}

.calc-result.show .calc-result-value {
    animation: .55s ease-out both resultValueFlash;
}

.calc-result-label-top,
.calc-result-value,
.calc-result-source {
    font-family: 'IBM Plex Mono', monospace;
}

.calc-result-label-top {
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.calc-result-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--gold-deep);
    line-height: 1;
    letter-spacing: 0;
    direction: ltr;
    unicode-bidi: isolate;
}

@keyframes resultValueFlash {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.calc-result-label {
    margin-top: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.calc-result-source {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.calc-breakdown-table {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.calc-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(184,134,11,.12);
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
}

.calc-breakdown-row strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .karat-grid,
    .cards-row {
        grid-template-columns: 1fr;
    }

    .ratio-card-value {
        font-size: 28px;
    }

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

@media (max-width: 600px) {
    .calc-row {
        grid-template-columns: 1fr 1fr;
    }

    .calc-btn {
        grid-column: span 2;
    }

    .calc-extra-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .karat-grid {
        grid-template-columns: 1fr;
    }
}

.ticker {
    --ticker-height: 38px;
    display: flex;
    width: 100%;
    min-height: var(--ticker-height);
    overflow: hidden;
    background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold-dark) 50%, var(--gold-deep) 100%);
    direction: rtl;
}

.ticker__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--gold-light);
    z-index: 10;
    font-weight: 700;
}

.ticker__viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ticker__marquee {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    animation: ticker-scroll 30s linear infinite;
    will-change: transform;
}

.ticker__marquee:hover {
    animation-play-state: paused;
}

.ticker__content {
    display: flex;
    align-items: center;
}

.ticker__item {
    padding: 0 16px;
    color: #fff;
    font-family: Cairo, sans-serif;
    font-size: 13px;
}

.ticker__separator {
    color: rgba(247, 226, 125, 0.78);
    font-size: 12px;
    padding: 0 2px;
}

.ticker__dot {
    width: 8px;
    height: 8px;
    background: var(--gold-light);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

.theme-button {
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #6d5a20;
    background: linear-gradient(180deg, #fff, #f8f5eb);
    box-shadow: 0 6px 16px rgba(28, 28, 46, .07);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.theme-button:is(:hover, :focus-visible) {
    color: var(--gold-dark);
    border-color: var(--border-gold);
    box-shadow: 0 0 0 4px rgba(184, 134, 11, .1), 0 8px 18px rgba(28, 28, 46, .08);
    outline: 0;
    transform: translateY(-1px);
}

.theme-button__icon {
    display: grid;
    place-items: center;
}

.theme-button__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-button__icon--sun {
    display: none;
}

.nav-right form {
    margin: 0;
    min-width: 0;
}

.country-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    min-width: 0;
    max-width: 180px;
    padding: 10px 42px 10px 14px;
    border-radius: 14px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 8px 18px rgba(28,28,46,.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%238C6C1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,249,250,.96));
    background-repeat: no-repeat, no-repeat;
    background-position: right 14px center, center;
    background-size: 16px, auto;
}

.country-select:focus,
.country-select:hover {
    box-shadow: 0 0 0 4px rgba(184,134,11,.12), 0 12px 24px rgba(184,134,11,.08);
    transform: translateY(-1px);
}

html[data-theme="night"] .country-select {
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23F2CA50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(28,34,48,.96), rgba(23,28,39,.96));
}

html[data-theme="night"] .theme-button {
    color: #f2ca50;
    border-color: #3a4660;
    background: linear-gradient(180deg, #252d3e, #1c2230);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

html[data-theme="night"] .theme-button__icon--moon {
    display: none;
}

html[data-theme="night"] .theme-button__icon--sun {
    display: grid;
}

html[data-theme="night"] .gold-main-card,
html[data-theme="night"] .karat-item.featured,
html[data-theme="night"] .calc-result,
html[data-theme="night"] .art-hero,
html[data-theme="night"] .art-price-feat,
html[data-theme="night"] .art-zakat-box,
html[data-theme="night"] .art-live-header,
html[data-theme="night"] .art-outlook-box,
html[data-theme="night"] .art-silver-outlook,
html[data-theme="night"] .art-buy-box,
html[data-theme="night"] .art-why-box,
html[data-theme="night"] .art-zakat-silver,
html[data-theme="night"] .art-silver-price-box,
html[data-theme="night"] .art-invest-box,
html[data-theme="night"] .art-types-box,
html[data-theme="night"] .art-factors-box,
html[data-theme="night"] .art-compare-box,
html[data-theme="night"] .art-history-box,
html[data-theme="night"] .art-where-box,
html[data-theme="night"] .art-faq-card,
html[data-theme="night"] .art-guide-card,
html[data-theme="night"] .art-conclusion {
    background: linear-gradient(160deg, #171d2a, #1f2635) !important;
    color: var(--text);
}

html[data-theme="night"] .karat-item,
html[data-theme="night"] .metal-card,
html[data-theme="night"] .calc-card,
html[data-theme="night"] .chart-card,
html[data-theme="night"] .art-live-box,
html[data-theme="night"] .art-price-card,
html[data-theme="night"] .art-info-card,
html[data-theme="night"] .art-compare-card,
html[data-theme="night"] .art-silver-use,
html[data-theme="night"] .art-silver-card,
html[data-theme="night"] .art-card,
html[data-theme="night"] .custom-price-box {
    background: var(--bg2) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

html[data-theme="night"] .weight-item,
html[data-theme="night"] .extra-item,
html[data-theme="night"] .calc-input,
html[data-theme="night"] .calc-select,
html[data-theme="night"] .chart-tab,
html[data-theme="night"] .mode-btn,
html[data-theme="night"] .hero-country,
html[data-theme="night"] .spot-notice,
html[data-theme="night"] .ad-slot,
html[data-theme="night"] .art-silver-use-tag {
    background: var(--bg3) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

html[data-theme="night"] .extra-item:hover {
    background: #262f42 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

html[data-theme="night"] .calc-input:focus,
html[data-theme="night"] .calc-select:focus {
    background: var(--bg2) !important;
}

html[data-theme="night"] .calc-result {
    background: linear-gradient(160deg, #171d2a, #1f2635) !important;
    border-color: rgba(244,214,108,0.36) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.28);
}

html[data-theme="night"] .calc-result-value {
    color: #f4d66c !important;
    text-shadow: 0 2px 14px rgba(244,214,108,0.14);
}

html[data-theme="night"] .calc-result-label {
    color: #f3f6fd !important;
}

html[data-theme="night"] .calc-result-label-top,
html[data-theme="night"] .calc-result-source,
html[data-theme="night"] #calc-breakdown {
    color: #c4cde0 !important;
}

html[data-theme="night"] .calc-extra-box {
    background: linear-gradient(180deg, rgba(212,175,55,.06), rgba(23,28,39,.42));
    border-color: rgba(255,255,255,.08);
}

html[data-theme="night"] .calc-extra-note {
    background: rgba(212,175,55,.06);
    border-color: rgba(212,175,55,.18);
}

html[data-theme="night"] .calc-breakdown-row {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08);
}

html[data-theme="night"] .mode-btn.active {
    background: linear-gradient(135deg, #f4d66c, #c89c2e) !important;
    color: #151821 !important;
    border-color: rgba(244,214,108,0.52) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.24), 0 0 0 1px rgba(244,214,108,0.18) inset;
}

html[data-theme="night"] .mode-btn:not(.active) {
    color: #aeb6cc !important;
}

html[data-theme="night"] .art-breadcrumb a,
html[data-theme="night"] .footer-col a:hover,
html[data-theme="night"] .footer-legal a:hover {
    color: var(--gold-light);
}

html[data-theme="night"] .karat-item.featured .karat-price,
html[data-theme="night"] .extra-value,
html[data-theme="night"] .price-row-value,
html[data-theme="night"] .featured-price-value,
html[data-theme="night"] .art-price-karat,
html[data-theme="night"] .art-highlight-label,
html[data-theme="night"] .art-stat-num,
html[data-theme="night"] .art-cta-inline-text strong,
html[data-theme="night"] .art-final-cta h3,
html[data-theme="night"] .art-zakat-rate-num,
html[data-theme="night"] .art-example-result,
html[data-theme="night"] .art-example .art-ex-total,
html[data-theme="night"] .blog-stat-num,
html[data-theme="night"] .blog-read-more,
html[data-theme="night"] .blog-cta-content strong,
html[data-theme="night"] .art-silver-unit,
html[data-theme="night"] .art-unit-value,
html[data-theme="night"] .art-live-header,
html[data-theme="night"] .art-live-src,
html[data-theme="night"] .art-silver-cta {
    color: #f4d66c !important;
}

html[data-theme="night"] .featured-price-value--silver,
html[data-theme="night"] .featured-price-value--silver .featured-currency,
html[data-theme="night"] .price-row-value--silver,
html[data-theme="night"] .money-inline--silver,
html[data-theme="night"] .money-inline--silver span:first-child,
html[data-theme="night"] .money-inline--silver span:last-child,
html[data-theme="night"] .ratio-number--silver {
    color: #d5dde8 !important;
}

html[data-theme="night"] .currency,
html[data-theme="night"] .karat-price .currency,
html[data-theme="night"] .extra-label,
html[data-theme="night"] .blog-cat,
html[data-theme="night"] .art-price-link,
html[data-theme="night"] .art-karat-btn,
html[data-theme="night"] .art-tip a,
html[data-theme="night"] .art-nisab-link,
html[data-theme="night"] .art-method-badge.pro,
html[data-theme="night"] .art-outline-btn,
html[data-theme="night"] .use-custom-btn,
html[data-theme="night"] .use-spot-btn,
html[data-theme="night"] .art-badge-silver,
html[data-theme="night"] .art-hero-year-silver {
    color: #f6df8b !important;
}

html[data-theme="night"] .silver-card,
html[data-theme="night"] .art-silver-live,
html[data-theme="night"] .art-silver-card,
html[data-theme="night"] .art-unit-featured,
html[data-theme="night"] .art-hero-silver {
    border-color: rgba(173, 186, 211, 0.32) !important;
}

html[data-theme="night"] .blog-card-title,
html[data-theme="night"] .blog-featured-title,
html[data-theme="night"] .art-related-text strong,
html[data-theme="night"] .art-madhab-title,
html[data-theme="night"] .art-factor-title,
html[data-theme="night"] .art-factor-why-title,
html[data-theme="night"] .art-method-title,
html[data-theme="night"] .art-unit-name,
html[data-theme="night"] .art-silver-use strong,
html[data-theme="night"] .art-zakat-silver-text strong {
    color: #f3f6fd;
}

html[data-theme="night"] .blog-card-excerpt,
html[data-theme="night"] .blog-featured-excerpt,
html[data-theme="night"] .blog-header-sub,
html[data-theme="night"] .art-hero-sub,
html[data-theme="night"] .art-p,
html[data-theme="night"] .art-factor p,
html[data-theme="night"] .art-factor-why p,
html[data-theme="night"] .art-tip p,
html[data-theme="night"] .art-method-desc p,
html[data-theme="night"] .art-unit-card p,
html[data-theme="night"] .art-silver-use p,
html[data-theme="night"] .art-zakat-silver-text p,
html[data-theme="night"] .seo-content p {
    color: #c5cee1;
}

html[data-theme="night"] .art-outline-btn {
    border-color: rgba(244,214,108,0.42);
    background: rgba(244,214,108,0.08);
}

html[data-theme="night"] .art-outline-btn:hover {
    background: rgba(244,214,108,0.16);
    border-color: rgba(244,214,108,0.68);
}

html[data-theme="night"] .blog-cat,
html[data-theme="night"] .art-badge-silver {
    background: rgba(244,214,108,0.12) !important;
    border-color: rgba(244,214,108,0.28) !important;
}

html[data-theme="night"] .art-live-cta-silver {
    background: linear-gradient(135deg, #d8deef, #93a4c7) !important;
    color: #152033 !important;
}

html[data-theme="night"] .seo-content,
html[data-theme="night"] .featured-price-card,
html[data-theme="night"] .internal-links a,
html[data-theme="night"] .legal-section,
html[data-theme="night"] .art-tip,
html[data-theme="night"] .art-country,
html[data-theme="night"] .art-related-card,
html[data-theme="night"] .art-condition,
html[data-theme="night"] .art-method,
html[data-theme="night"] .art-summary-table,
html[data-theme="night"] .zk-condition,
html[data-theme="night"] .zk-step-card,
html[data-theme="night"] .zk-example,
html[data-theme="night"] .vg-method,
html[data-theme="night"] .wg-factor,
html[data-theme="night"] .wg-tl-item {
    background: #171d29 !important;
    border-color: #334059 !important;
    color: var(--text);
    box-shadow: 0 16px 34px rgba(0,0,0,0.28);
}

html[data-theme="night"] .art-related-media {
    background: #101722;
    border-color: rgba(244,214,108,0.22);
}

html[data-theme="night"] .featured-price-card,
html[data-theme="night"] .legal-highlight,
html[data-theme="night"] .legal-back,
html[data-theme="night"] .legal-badge,
html[data-theme="night"] .art-zakat-rate,
html[data-theme="night"] .art-example,
html[data-theme="night"] .art-tip-box,
html[data-theme="night"] .zk-nisab-gold,
html[data-theme="night"] .zk-step-final .zk-step-header,
html[data-theme="night"] .zk-rate-highlight,
html[data-theme="night"] .zk-example-q,
html[data-theme="night"] .zk-yes-zakat,
html[data-theme="night"] .zk-tip-box,
html[data-theme="night"] .vg-warning,
html[data-theme="night"] .vg-pro,
html[data-theme="night"] .vg-hm-real,
html[data-theme="night"] .vg-formula,
html[data-theme="night"] .vg-xrf-pro,
html[data-theme="night"] .vg-table-star {
    background: linear-gradient(160deg, #1c2433, #232d3f) !important;
    border-color: rgba(244,214,108,0.32) !important;
    color: #f6df8b !important;
}

html[data-theme="night"] .legal-highlight-green,
html[data-theme="night"] .zk-quick-cta,
html[data-theme="night"] .zk-cn-pass,
html[data-theme="night"] .vg-pass,
html[data-theme="night"] .vg-result-pass {
    background: rgba(46, 158, 106, 0.14) !important;
    border-color: rgba(102, 221, 139, 0.24) !important;
}

html[data-theme="night"] .zk-cn-fail,
html[data-theme="night"] .vg-fail,
html[data-theme="night"] .vg-density-fake {
    background: rgba(192, 57, 43, 0.16) !important;
    border-color: rgba(255, 149, 151, 0.22) !important;
}

html[data-theme="night"] .zk-nisab-silver,
html[data-theme="night"] .art-madhab-yes,
html[data-theme="night"] .art-madhab-no,
html[data-theme="night"] .art-silver-grid,
html[data-theme="night"] .art-silver-live,
html[data-theme="night"] .art-silver-feat,
html[data-theme="night"] .zk-no-zakat {
    background: linear-gradient(160deg, #1a2230, #202a3b) !important;
    border-color: rgba(173, 186, 211, 0.3) !important;
}

html[data-theme="night"] .data-table th,
html[data-theme="night"] .art-example-header,
html[data-theme="night"] .art-ex-header,
html[data-theme="night"] .art-summary-header,
html[data-theme="night"] .zk-step-header,
html[data-theme="night"] .vg-method-header,
html[data-theme="night"] .vg-density-header,
html[data-theme="night"] .vg-table-header {
    background: #202838 !important;
    border-color: #334059 !important;
    color: #d4dced !important;
}

html[data-theme="night"] .data-table td,
html[data-theme="night"] .data-table tr:nth-child(even) td,
html[data-theme="night"] .vg-table-row,
html[data-theme="night"] .vg-density-row {
    background: transparent !important;
    border-color: #334059 !important;
    color: #dce3f1 !important;
}

html[data-theme="night"] .vg-table-row:hover,
html[data-theme="night"] .art-tip:hover,
html[data-theme="night"] .art-country:hover,
html[data-theme="night"] .art-related-card:hover,
html[data-theme="night"] .art-condition:hover,
html[data-theme="night"] .art-summary-row:hover,
html[data-theme="night"] .zk-condition:hover,
html[data-theme="night"] .wg-factor:hover,
html[data-theme="night"] .wg-tl-item:hover,
html[data-theme="night"] .internal-links a:hover {
    background: #202838 !important;
}

html[data-theme="night"] .legal-section-title,
html[data-theme="night"] .legal-back,
html[data-theme="night"] .art-tip strong,
html[data-theme="night"] .art-condition div strong,
html[data-theme="night"] .art-step-body strong,
html[data-theme="night"] .art-zakat-rate-text strong,
html[data-theme="night"] .art-ex-check,
html[data-theme="night"] .zk-nisab-link,
html[data-theme="night"] .zk-formula-box,
html[data-theme="night"] .zk-karat-badge,
html[data-theme="night"] .zk-rate-num,
html[data-theme="night"] .zk-badge-yes,
html[data-theme="night"] .zk-tip-box strong,
html[data-theme="night"] .vg-warning strong,
html[data-theme="night"] .vg-method-title,
html[data-theme="night"] .vg-hm-code,
html[data-theme="night"] .vg-formula,
html[data-theme="night"] .vg-xrf-pro strong,
html[data-theme="night"] .vg-pro-lbl,
html[data-theme="night"] .vg-acc-top,
html[data-theme="night"] .wg-tl-featured-label,
html[data-theme="night"] .wg-rel-arrow,
html[data-theme="night"] .internal-links a {
    color: #f6df8b !important;
}

html[data-theme="night"] .legal-section p,
html[data-theme="night"] .legal-date,
html[data-theme="night"] .art-tip p,
html[data-theme="night"] .art-condition div p,
html[data-theme="night"] .art-step-body p,
html[data-theme="night"] .art-example-result p,
html[data-theme="night"] .art-related-text span,
html[data-theme="night"] .art-country-cur,
html[data-theme="night"] .art-tip-box p,
html[data-theme="night"] .zk-quick-text p,
html[data-theme="night"] .zk-condition-body p,
html[data-theme="night"] .zk-note-text,
html[data-theme="night"] .zk-karat-example,
html[data-theme="night"] .zk-cn-item span:last-child,
html[data-theme="night"] .zk-rate-label,
html[data-theme="night"] .zk-ex-calc,
html[data-theme="night"] .zk-madhab p,
html[data-theme="night"] .zk-tip-box p,
html[data-theme="night"] .vg-warning p,
html[data-theme="night"] .vg-method-body > p,
html[data-theme="night"] .vg-hm-desc,
html[data-theme="night"] .vg-note,
html[data-theme="night"] .vg-step p,
html[data-theme="night"] .vg-xrf-pro span:last-child,
html[data-theme="night"] .wg-factor-content p,
html[data-theme="night"] .wg-tl-clock,
html[data-theme="night"] .wg-tl-content p {
    color: #c4cde0 !important;
}

html[data-theme="night"] .legal-section-title .num,
html[data-theme="night"] .zk-condition-num,
html[data-theme="night"] .zk-ex-num,
html[data-theme="night"] .vg-method-num,
html[data-theme="night"] .vg-step-num {
    background: linear-gradient(135deg, #f4d66c, #c89c2e) !important;
    color: #17202d !important;
}

html[data-theme="night"] .zk-step-num,
html[data-theme="night"] .zk-karat-item,
html[data-theme="night"] .zk-mode-btn,
html[data-theme="night"] .vg-note,
html[data-theme="night"] .vg-hm-fake,
html[data-theme="night"] .vg-medium,
html[data-theme="night"] .wg-tl-featured,
html[data-theme="night"] .wg-factor-bull,
html[data-theme="night"] .wg-factor-bear {
    border-color: #334059 !important;
}

html[data-theme="night"] .zk-karat-item,
html[data-theme="night"] .zk-custom-price-box,
html[data-theme="night"] .zk-spot-notice,
html[data-theme="night"] .zk-formula-box,
html[data-theme="night"] .vg-note {
    background: #202838 !important;
}

html[data-theme="night"] .art-formula {
    background: rgba(244,214,108,0.08) !important;
    border-color: rgba(244,214,108,0.28) !important;
    color: #f4d66c !important;
}

html[data-theme="night"] .art-example-body,
html[data-theme="night"] .art-summary-row {
    background: #171d29 !important;
}

html[data-theme="night"] .art-summary-best {
    background: linear-gradient(160deg, #1c2433, #232d3f) !important;
}

html[data-theme="night"] .art-step-num {
    box-shadow: 0 8px 20px rgba(0,0,0,0.26), 0 0 0 1px rgba(244,214,108,0.08) inset !important;
}

html[data-theme="night"] .art-related-text strong,
html[data-theme="night"] .art-madhab-title,
html[data-theme="night"] .art-method-title,
html[data-theme="night"] .art-summary-row span:first-child {
    color: #f3f6fd !important;
}

html[data-theme="night"] .pb-sticky {
    background: linear-gradient(135deg, #141a24, #1c2431) !important;
    border-bottom-color: rgba(244,214,108,0.18) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

html[data-theme="night"] .pb-live {
    background: rgba(46, 158, 106, 0.16) !important;
    border-color: rgba(102, 221, 139, 0.24) !important;
}

html[data-theme="night"] .pb-val,
html[data-theme="night"] .pb-cta {
    color: #f6df8b !important;
}

html[data-theme="night"] .pb-silver .pb-val {
    color: #d9e2f3 !important;
}

html[data-theme="night"] .pb-cta {
    background: rgba(244,214,108,0.1) !important;
    border-color: rgba(244,214,108,0.28) !important;
}

html[data-theme="night"] .pb-label,
html[data-theme="night"] .pb-sym,
html[data-theme="night"] .pb-unit {
    color: #aeb8cb !important;
}

html[data-theme="night"] .blog-header,
html[data-theme="night"] .blog-featured-card,
html[data-theme="night"] .blog-cta-box,
html[data-theme="night"] .art-karat-highlight,
html[data-theme="night"] .art-stat,
html[data-theme="night"] .art-quote,
html[data-theme="night"] .art-compare-b,
html[data-theme="night"] .art-cta-inline,
html[data-theme="night"] .art-final-cta,
html[data-theme="night"] .fc-bull-card,
html[data-theme="night"] .fc-conclusion {
    background: linear-gradient(160deg, #1c2433, #232d3f) !important;
    border-color: rgba(244,214,108,0.32) !important;
    color: var(--text) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.28);
}

html[data-theme="night"] .blog-card,
html[data-theme="night"] .art-karat-row,
html[data-theme="night"] .art-factor,
html[data-theme="night"] .art-compare-col,
html[data-theme="night"] .art-share,
html[data-theme="night"] .fc-factor,
html[data-theme="night"] .fc-analyst-card,
html[data-theme="night"] .fc-consensus,
html[data-theme="night"] .art-unit-card {
    background: #171d29 !important;
    border-color: #334059 !important;
    color: var(--text) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.28);
}

html[data-theme="night"] .blog-card:hover,
html[data-theme="night"] .blog-featured-card:hover,
html[data-theme="night"] .art-karat-row:hover,
html[data-theme="night"] .art-factor:hover,
html[data-theme="night"] .fc-factor:hover,
html[data-theme="night"] .fc-analyst-card:hover,
html[data-theme="night"] .art-unit-card:hover,
html[data-theme="night"] .art-silver-card:hover {
    background: #202838 !important;
    border-color: rgba(244,214,108,0.34) !important;
}

html[data-theme="night"] .blog-header-badge,
html[data-theme="night"] .art-hero-badge,
html[data-theme="night"] .art-highlight-label,
html[data-theme="night"] .art-tag,
html[data-theme="night"] .fc-range-mid,
html[data-theme="night"] .fc-analyst-target,
html[data-theme="night"] .fc-conclusion-title,
html[data-theme="night"] .zk-nisab-value,
html[data-theme="night"] .zk-badge-yes {
    color: #f6df8b !important;
}

html[data-theme="night"] .blog-header-badge,
html[data-theme="night"] .art-hero-badge,
html[data-theme="night"] .art-highlight-label,
html[data-theme="night"] .art-tag,
html[data-theme="night"] .zk-badge-yes {
    background: rgba(244,214,108,0.12) !important;
    border-color: rgba(244,214,108,0.28) !important;
}

html[data-theme="night"] .blog-section-label,
html[data-theme="night"] .blog-meta,
html[data-theme="night"] .blog-stat-lbl,
html[data-theme="night"] .art-lead,
html[data-theme="night"] .art-p,
html[data-theme="night"] .art-karat-body p,
html[data-theme="night"] .art-stat-lbl,
html[data-theme="night"] .art-list li,
html[data-theme="night"] .art-quote,
html[data-theme="night"] .art-compare-col li,
html[data-theme="night"] .art-cta-inline-text p,
html[data-theme="night"] .art-final-cta p,
html[data-theme="night"] .art-share-lbl,
html[data-theme="night"] .fc-disclaimer p,
html[data-theme="night"] .fc-factor p,
html[data-theme="night"] .fc-analyst-label,
html[data-theme="night"] .fc-analyst-note,
html[data-theme="night"] .fc-consensus-title,
html[data-theme="night"] .fc-consensus-range,
html[data-theme="night"] .fc-conclusion p,
html[data-theme="night"] .art-silver-desc,
html[data-theme="night"] .art-zakat-silver-num,
html[data-theme="night"] .art-zakat-silver-text p {
    color: #c4cde0 !important;
}

html[data-theme="night"] .blog-header-title,
html[data-theme="night"] .art-h2,
html[data-theme="night"] .art-karat-body strong,
html[data-theme="night"] .art-list li strong,
html[data-theme="night"] .art-compare-title,
html[data-theme="night"] .fc-factor-title,
html[data-theme="night"] .zk-step-title,
html[data-theme="night"] .zk-ex-step strong,
html[data-theme="night"] .zk-madhab-header strong,
html[data-theme="night"] .art-zakat-silver-text strong {
    color: #f3f6fd !important;
}

html[data-theme="night"] .art-karat-list,
html[data-theme="night"] .zk-conditions {
    border-color: #334059 !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.26);
}

html[data-theme="night"] .art-karat-row,
html[data-theme="night"] .zk-condition {
    border-bottom-color: #334059 !important;
}

html[data-theme="night"] .art-compare-a,
html[data-theme="night"] .fc-bear-card,
html[data-theme="night"] .fc-disclaimer {
    background: rgba(192,57,43,0.14) !important;
    border-color: rgba(255,149,151,0.24) !important;
}

html[data-theme="night"] .fc-bull,
html[data-theme="night"] .fc-badge-up,
html[data-theme="night"] .fc-ab-bull,
html[data-theme="night"] .wg-badge-up,
html[data-theme="night"] .wg-rel-up,
html[data-theme="night"] .wg-rel-down-inv {
    background: rgba(46,158,106,0.16) !important;
    border-color: rgba(102,221,139,0.24) !important;
}

html[data-theme="night"] .fc-bear,
html[data-theme="night"] .fc-badge-down,
html[data-theme="night"] .fc-ab-bear,
html[data-theme="night"] .wg-badge-down,
html[data-theme="night"] .wg-rel-down,
html[data-theme="night"] .wg-rel-up-inv {
    background: rgba(192,57,43,0.16) !important;
    border-color: rgba(255,149,151,0.22) !important;
}

html[data-theme="night"] .fc-bear-card .fc-analyst-target,
html[data-theme="night"] .fc-disclaimer strong {
    color: #ff9b9b !important;
}

html[data-theme="night"] .art-share-link--x,
html[data-theme="night"] .art-share-link--wa,
html[data-theme="night"] .art-share-link--tg,
html[data-theme="night"] .art-share-link--fb,
html[data-theme="night"] .art-share-link--in {
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

.featured-price-value,
.featured-currency,
.money-inline,
.pb-price,
.pb-val,
.pb-sym,
.blog-stat-num,
.art-stat-num,
.art-silver-unit,
.art-unit-value {
    direction: ltr;
    unicode-bidi: isolate;
}

.featured-price-value,
.pb-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.money-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.calc-money {
    justify-content: center;
    white-space: nowrap;
}

.mini-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.mhc-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, rgba(255,250,240,0.96), rgba(251,245,230,0.98));
    border: 1.5px solid rgba(184,134,11,0.14);
    border-radius: 20px;
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-md);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html[data-theme="night"] .mhc-card {
    background: linear-gradient(180deg, rgba(14,19,32,0.98), rgba(19,26,41,0.98));
    border-color: rgba(242,202,80,0.14);
}

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

.mhc-card--gold:hover {
    border-color: rgba(184,134,11,0.34);
}

.mhc-card--silver:hover {
    border-color: rgba(154,168,182,0.36);
}

.mhc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mhc-kicker {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mhc-title {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 900;
}

.mhc-subtitle {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.mhc-link {
    flex-shrink: 0;
    align-self: center;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 800;
}

html[data-theme="night"] .mhc-link {
    color: var(--gold);
}

.mhc-stage {
    height: 120px;
}

.mhc-stage.is-drawing {
    animation: mhc-draw-line 1.6s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes mhc-draw-line {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.mhc-stage canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 760px) {
    .mini-history-grid {
        grid-template-columns: 1fr;
    }

    .mhc-header {
        flex-direction: column;
        align-items: stretch;
    }

    .mhc-link {
        align-self: flex-start;
    }
}

.weekly-author {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 4px 0;
    padding: 22px;
    border: 1px solid rgba(184, 134, 11, 0.16);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 250, 241, 0.98), rgba(247, 239, 220, 0.96));
    box-shadow: 0 20px 50px rgba(125, 94, 31, 0.08);
}

[data-theme="night"] .weekly-author {
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(23, 23, 23, 0.9));
    border-color: rgba(211, 171, 86, 0.18);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
}

.weekly-author__photo {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(184, 134, 11, 0.2);
    background: var(--bg2);
}

.weekly-author__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.weekly-author__content {
    min-width: 0;
}

.weekly-author__label {
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 4px;
}

.weekly-author h2 {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    line-height: 1.35;
}

.weekly-author__role {
    margin: 4px 0 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.weekly-author__bio {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.9;
}

@media (max-width: 640px) {
    .weekly-author {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        padding: 18px;
    }
}

.price-source-mini {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    opacity: .72;
}

.price-source-mini--center {
    text-align: center;
}

.price-source-mini a {
    color: var(--gold-dark);
    font-weight: 900;
    text-decoration: none;
}

.price-source-mini a:hover {
    text-decoration: underline;
}

.article-promo {
    margin: 22px 0 28px;
}

.article-promo__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.article-promo__head h2 {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.article-promo__head p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.article-promo__more {
    flex: 0 0 auto;
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.article-promo__more:hover {
    text-decoration: underline;
}

.article-promo__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.article-promo--single .article-promo__grid {
    grid-template-columns: minmax(0, 1fr);
}

.article-promo--pair .article-promo__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-promo-card {
    position: relative;
    isolation: isolate;
    display: grid;
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 42%);
    grid-template-areas: "body media";
    gap: 14px;
    align-items: stretch;
    min-height: 132px;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: 18px;
    background: var(--bg2);
    color: var(--text);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.article-promo--grid .article-promo-card,
.article-promo--pair .article-promo-card {
    grid-template-columns: 1fr;
    grid-template-areas:
        "media"
        "body";
}

.article-promo-card:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 134, 11, .34);
    box-shadow: var(--shadow-lg);
}

.article-promo-card:focus-within {
    outline: 3px solid rgba(184, 134, 11, .24);
    outline-offset: 3px;
}

.article-promo-card__media {
    grid-area: media;
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg3);
    aspect-ratio: 1200 / 630;
}

.article-promo--single .article-promo-card__media {
    aspect-ratio: 1.25;
}

.article-promo-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .22s ease;
}

.article-promo-card:hover .article-promo-card__media img {
    transform: scale(1.035);
}

.article-promo-card__body {
    grid-area: body;
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.article-promo-card__category {
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 5px;
}

.article-promo-card--silver .article-promo-card__category {
    color: var(--silver-deep);
}

.article-promo-card__title {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
}

.article-promo-card__title a {
    color: var(--text);
    font-weight: 900;
    text-decoration: none;
}

.article-promo-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.article-promo-card__title a:focus {
    outline: none;
}

.article-promo-card:hover .article-promo-card__title a {
    color: var(--gold-dark);
}

.article-promo-card__excerpt {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.75;
}

.article-promo-card__meta {
    margin-top: auto;
    padding-top: 8px;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 900;
}

.article-promo-card--silver .article-promo-card__meta {
    color: var(--silver-deep);
}

html[data-theme="night"] .article-promo-card {
    background: linear-gradient(180deg, rgba(14,19,32,0.98), rgba(19,26,41,0.98));
    border-color: rgba(242,202,80,0.12);
}

html[data-theme="night"] .article-promo-card:hover {
    border-color: rgba(242,202,80,0.28);
}

html[data-theme="night"] .article-promo-card__category,
html[data-theme="night"] .article-promo-card__meta,
html[data-theme="night"] .article-promo__more {
    color: var(--gold);
}

/* Global editorial links: shared by article, guide, and SEO prose blocks. */
:is(main article, .art-body, .seo-content) :is(p, li, dd) a,
:is(.city-hero-kicker, .city-hub-kicker, .uae-hero__kicker) a,
:is(
    .city-inline-link,
    .city-section-link,
    .city-hub-inline-link,
    .uae-inline-link,
    .uae-section__link
) {
    color: var(--gold-dark) !important;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: rgba(140, 108, 31, .42) !important;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .22em;
}

:is(main article, .art-body, .seo-content) :is(p, li, dd) a:visited,
:is(.city-hero-kicker, .city-hub-kicker, .uae-hero__kicker) a:visited,
:is(
    .city-inline-link,
    .city-section-link,
    .city-hub-inline-link,
    .uae-inline-link,
    .uae-section__link
):visited {
    color: var(--gold-dark) !important;
}

:is(main article, .art-body, .seo-content) :is(p, li, dd) a:is(:hover, :focus-visible),
:is(.city-hero-kicker, .city-hub-kicker, .uae-hero__kicker) a:is(:hover, :focus-visible),
:is(
    .city-inline-link,
    .city-section-link,
    .city-hub-inline-link,
    .uae-inline-link,
    .uae-section__link
):is(:hover, :focus-visible) {
    color: var(--gold-deep) !important;
    text-decoration-color: currentColor !important;
}

html[data-theme="night"] :is(main article, .art-body, .seo-content) :is(p, li, dd) a,
html[data-theme="night"] :is(main article, .art-body, .seo-content) :is(p, li, dd) a:visited,
html[data-theme="night"] :is(.city-hero-kicker, .city-hub-kicker, .uae-hero__kicker) a,
html[data-theme="night"] :is(.city-hero-kicker, .city-hub-kicker, .uae-hero__kicker) a:visited,
html[data-theme="night"] :is(
    .city-inline-link,
    .city-section-link,
    .city-hub-inline-link,
    .uae-inline-link,
    .uae-section__link
),
html[data-theme="night"] :is(
    .city-inline-link,
    .city-section-link,
    .city-hub-inline-link,
    .uae-inline-link,
    .uae-section__link
):visited {
    color: var(--gold-light) !important;
    text-decoration-color: rgba(247, 226, 125, .62) !important;
}

html[data-theme="night"] :is(main article, .art-body, .seo-content) :is(p, li, dd) a:is(:hover, :focus-visible),
html[data-theme="night"] :is(.city-hero-kicker, .city-hub-kicker, .uae-hero__kicker) a:is(:hover, :focus-visible),
html[data-theme="night"] :is(
    .city-inline-link,
    .city-section-link,
    .city-hub-inline-link,
    .uae-inline-link,
    .uae-section__link
):is(:hover, :focus-visible) {
    color: #fff4bf !important;
    text-decoration-color: currentColor !important;
}

:is(
    .articles-cta,
    .forecast-final-cta,
    .ratio-final-cta,
    .saudi-final-cta,
    .verify-final-cta,
    .why-final-cta,
    .zakat-final-cta
) p a,
:is(
    .articles-cta,
    .forecast-final-cta,
    .ratio-final-cta,
    .saudi-final-cta,
    .verify-final-cta,
    .why-final-cta,
    .zakat-final-cta
) p a:visited {
    color: #ffe08a !important;
    text-decoration-color: rgba(255, 224, 138, .75) !important;
}

:is(
    .articles-cta,
    .forecast-final-cta,
    .ratio-final-cta,
    .saudi-final-cta,
    .verify-final-cta,
    .why-final-cta,
    .zakat-final-cta
) p a:is(:hover, :focus-visible) {
    color: #fff4c7 !important;
    text-decoration-color: currentColor !important;
}

@media (max-width: 860px) {
    .article-promo__grid {
        grid-template-columns: 1fr;
    }

    .article-promo--pair .article-promo__grid {
        grid-template-columns: 1fr;
    }

    .article-promo__head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .article-promo {
        margin: 18px 0 24px;
    }

    .article-promo__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .article-promo-card,
    .article-promo--grid .article-promo-card,
    .article-promo--pair .article-promo-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "body";
        min-height: 112px;
        gap: 10px;
        padding: 10px;
        border-radius: 14px;
    }

    .article-promo--single .article-promo-card__media,
    .article-promo--grid .article-promo-card__media,
    .article-promo--pair .article-promo-card__media {
        aspect-ratio: 1200 / 630;
        border-radius: 10px;
    }

    .article-promo-card__category {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .article-promo-card__title {
        font-size: 14px;
        line-height: 1.45;
    }

    .article-promo-card__excerpt {
        display: -webkit-box;
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.55;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .article-promo-card__meta {
        padding-top: 5px;
        font-size: 11px;
    }
}

/* Keep the canonical brand prominent and genuinely centered on mobile. */
@media (max-width: 640px) {
    .site-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        min-height: 60px;
        padding: 8px 12px;
        gap: 8px;
        direction: ltr;
    }

    .site-nav .nav-logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        max-width: none;
    }

    .site-nav .nav-logo-text {
        overflow: visible;
        font-size: 18px;
        text-overflow: clip;
    }

    .site-nav .nav-right {
        display: contents;
    }

    .site-nav .theme-button {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
    }

    .site-nav .country-switcher {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: 92px;
        min-width: 0;
        direction: rtl;
    }

    .site-nav .country-select {
        min-height: 32px;
        max-width: 100%;
        padding: 5px 22px 5px 6px;
        border-radius: 9px;
        border-width: 1px;
        font-size: 11px;
        line-height: 1.25;
        background-position: right 6px center, center;
        background-size: 11px, auto;
        box-shadow: none;
        direction: rtl;
        text-overflow: ellipsis;
    }

    .site-nav .country-select:is(:hover, :focus) {
        box-shadow: 0 0 0 3px rgba(184, 134, 11, .1);
        transform: none;
    }
}

@media (max-width: 350px) {
    .site-nav .nav-logo-text {
        font-size: 16px;
    }

    .site-nav .country-switcher {
        width: 78px;
    }

    .site-nav .country-select {
        padding-left: 5px;
        font-size: 10px;
    }
}

/* Canonical layered brand logo. Kept last to preserve its override priority. */
.ayg-logo {
  --logo-width: 70px;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--logo-width);
  flex: 0 0 var(--logo-width);
  aspect-ratio: 1095 / 563;
  isolation: isolate;
}

.ayg-logo--header {
  --logo-width: 56px;
}

.site-nav .brand-logo-link {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  direction: ltr;
}

.site-nav .brand-logo-link .nav-logo-text {
  display: block;
  line-height: 1;
}

.ayg-logo.ayg-logo--footer {
  --logo-width: 70px;
}

.ayg-logo__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

/* Defeat the legacy mobile `.nav-logo img { width/height: 38px }` rule.
   Each ribbon must fill the wide logo viewport, not a square image box. */
.site-nav .brand-logo-link .ayg-logo__layer {
  width: 100%;
  height: 100%;
  max-width: none;
  flex: none;
}

.ayg-logo__silver {
  animation: aygSilverFlow 6s cubic-bezier(.22,.75,.24,1) infinite;
}

.ayg-logo__gold {
  animation: aygGoldFlow 6s cubic-bezier(.22,.75,.24,1) infinite;
}

@keyframes aygGoldFlow {
  0%, 100% { transform: translate(-1px,1px) rotate(-.2deg); filter: brightness(.98); }
  12% { transform: translate(1px,-1px) rotate(.2deg); filter: brightness(1.1); }
  24%, 76% { transform: none; filter: none; }
}

@keyframes aygSilverFlow {
  0%, 100% { transform: translate(1px,-1px) rotate(.2deg); filter: brightness(.98); }
  14% { transform: translate(-1px,1px) rotate(-.2deg); filter: brightness(1.08); }
  26%, 76% { transform: none; filter: none; }
}

.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__gold {
  animation: aygGoldHover .75s cubic-bezier(.2,.8,.2,1) both;
}

.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__silver {
  animation: aygSilverHover .75s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes aygGoldHover {
  0%, 100% { transform: none; }
  50% { transform: translate(2px,-1px) scale(1.015); filter: brightness(1.12); }
}

@keyframes aygSilverHover {
  0%, 100% { transform: none; }
  50% { transform: translate(-2px,1px) scale(1.01); filter: brightness(1.08); }
}

@media (max-width: 768px) {
  .ayg-logo--header { --logo-width: 48px; }
}

@media (max-width: 640px) {
  .site-nav .brand-logo-link {
    gap: 3px;
  }

  .site-nav .brand-logo-link .ayg-logo--header {
    --logo-width: 46px;
    margin-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ayg-logo__layer {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* WCAG AA text colors for the five elements identified by Lighthouse. */
:root {
  --gold-text-accessible: #8C6C1F;
  --gold-text-compact-accessible: #806016;
  --silver-text-muted-accessible: #6F6F6F;
}

html[data-theme="night"] {
  --gold-text-accessible: #F7E27D;
  --gold-text-compact-accessible: #F7E27D;
  --silver-text-muted-accessible: #D5DDE8;
}

.nav-logo-text span,
.hero-title .gold-word,
.footer-brand-title span {
  color: var(--gold-text-accessible);
}

.notice-badge {
  color: var(--gold-text-compact-accessible);
}

.money-inline--silver span:first-child {
  color: var(--silver-text-muted-accessible);
}