:root{--surface-muted:#F4F7F9;--surface-white:#FFFFFF;--text-main:#1F2A37;--text-muted:#5B6B7F;--border-neutral:#E3E9EE;--border-gold:#EBD9A4;--surface-gold:#FFF8E5;--status-live-bg:#E4F4EB;--status-live-fg:#0B7A4B;--status-stopped-bg:#FCE9E6;--status-stopped-fg:#BE3A2D}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* ===== الأساس ===== */
*{box-sizing:border-box}
body{margin:0}
button{font-family:inherit;cursor:pointer;border:0}
button:focus-visible{outline:3px solid #2F6FDE;outline-offset:2px}

.page{
  min-height:100vh;
  background-color:var(--surface-muted);
  color:var(--text-main);
  font-family:'IBM Plex Sans Arabic', system-ui, sans-serif;
  padding:0 16px 20px;
  background-image:
    radial-gradient(720px 340px at 85% -40px, rgba(240,203,114,0.30), transparent 70%),
    linear-gradient(#E6ECF0 1px, transparent 1px),
    linear-gradient(90deg, #E6ECF0 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;
  animation:gridmove 40s linear infinite;
}
@keyframes gridmove{to{background-position:0 0, 0 44px, 44px 0}}

.wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* تحافظ صفوف الأونصة على الأرقام كاملة داخل عرض البطاقة. */
.ounce-price-row,.ounce-range-values{min-width:0;flex-wrap:wrap}
.ounce-price-row #ounce-price,.ounce-range-values > span{max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}

/* الأسعار والعناوين تلتف فقط عندما لا تتسع المساحة. */
.iraq-heading,.gold-price-heading,.karats-summary{flex-wrap:wrap;min-width:0}
.iraq-heading h2,.gold-price-heading > span:first-child,.karats-summary > span:first-child{min-width:0;overflow-wrap:anywhere}
#g21-price,#m21-price{min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
#karats .krow{display:flex!important;gap:8px;flex-wrap:wrap}
#karats .krow > span:first-child{flex:1 1 10rem;min-width:0}
#karats .krow > span:nth-child(2){max-width:100%;overflow-x:auto;overflow-y:hidden}
#karats .karat-update-line{flex:0 0 100%}

header.rise{background:var(--surface-white);border-radius:14px;margin-top:16px;padding:14px 16px !important}

/* ===== الدخول المتدرّج ===== */
.rise{animation:rise 0.8s cubic-bezier(0.2,0.8,0.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ===== البطاقات ===== */
.card,.telegram-card{
  background:var(--surface-white);border:1px solid var(--border-neutral);border-radius:20px;
  box-shadow:0 1px 2px rgba(31,42,55,0.04);
  transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s, border-color 0.35s;
}
.card{position:relative}

.hud::before,.hud::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border:2px solid #D9A93A;animation:bracket 3.2s ease-in-out infinite;
}
.hud::before{top:10px;right:10px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.hud::after{bottom:10px;left:10px;border-right:0;border-top:0;border-bottom-left-radius:6px;animation-delay:1.6s}
@keyframes bracket{0%,100%{opacity:0.25}50%{opacity:1}}
.ounce-card:not([data-connection-state="live"])::before,
.ounce-card:not([data-connection-state="live"])::after{animation:none;opacity:0.25}

.gold-card{
  position:relative;overflow:hidden;background:var(--surface-gold);border:1px solid var(--border-gold);border-radius:20px;
  transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s, border-color 0.35s;
}

.gold-price-title{display:inline-flex;align-items:center;gap:4px;min-width:0}
.gold-price-title > span{min-width:0;overflow-wrap:anywhere}
.gold-price-dialog{overscroll-behavior:contain;border:1px solid var(--border-gold);border-radius:22px;padding:0;width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);color:var(--text-main);background:var(--surface-white);font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;box-shadow:0 16px 45px rgba(31,42,55,.18)}
.gold-price-dialog::backdrop{background:rgba(20,29,40,.48);animation:goldBackdropIn 220ms ease-out}
.gold-price-dialog.is-closing::backdrop{animation:goldBackdropOut 180ms ease-in forwards}
@keyframes goldBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes goldBackdropOut{from{opacity:1}to{opacity:0}}
.gold-price-details{padding:24px;display:grid;gap:18px}
.gold-price-details header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gold-price-details h2{font-size:18px;font-weight:700;margin:0;min-width:0}
.gold-detail-heading{display:flex;align-items:center;gap:8px;min-width:0}
.gold-detail-price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gold-detail-change[hidden]{display:none}
.gold-price-details button{flex:none;width:36px;height:36px;border-radius:50%;font-size:24px;color:var(--text-main);background:#f1f4f6}
.gold-detail-price{font-size:clamp(40px,7vw,56px);line-height:1.1;font-weight:700;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:2px 8px;margin-right:-8px;border-radius:12px}
.gold-detail-currency{font-size:16px;font-weight:600;color:#8A5A00}
.gold-detail-change{font-size:15px}
@media (min-width:900px){.gold-detail-price{font-size:36px}}
.gold-detail-time{font-size:13px;color:var(--text-muted)}
.gold-detail-range{background:var(--surface-muted);border-radius:14px;min-height:48px;padding:10px 16px;display:flex;flex-direction:column;gap:8px}
.gold-detail-range-title{font-size:13px;color:var(--text-muted)}
.gold-detail-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#bfe3d0,#e7ecef 50%,#f6c9c3);position:relative}
.gold-detail-marker{position:absolute;top:50%;width:0;height:0;transition:left 1s cubic-bezier(.2,.8,.2,1)}
.gold-detail-dot,.gold-detail-pulse{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:999px;background:var(--text-main)}
.gold-detail-dot{border:3px solid var(--surface-white);box-shadow:0 1px 3px rgba(31,42,55,.3)}
.gold-detail-pulse{animation:ring 2s ease-out infinite}
.gold-price-dialog:not([data-price-state="live"]) .gold-detail-pulse{animation:none;opacity:0}
.gold-detail-limits{display:flex;justify-content:space-between;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.gold-detail-low{color:var(--status-stopped-fg)}
.gold-detail-high{color:var(--status-live-fg)}
@media(prefers-reduced-motion:reduce){.gold-price-dialog,.gold-price-dialog::backdrop,.gold-price-dialog.is-closing::backdrop{animation:none}}
/* ===== النبض ===== */
.pulse-ring{animation:ring 2s ease-out infinite}
.ounce-card:not([data-connection-state="live"]) .pulse-ring{animation:none;opacity:0}
@keyframes ring{0%{transform:scale(1);opacity:0.55}100%{transform:scale(3.2);opacity:0}}

/* ===== عدّاد التحديث ===== */
#cd-fill.run{animation:cd 5s linear both}
@keyframes cd{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* مسافة وحواف تأثير الأسعار */
#g21-price,#m21-price,.kp{padding:2px 8px;margin-right:-8px;border-radius:12px}
/* ===== وميض السعر ===== */
.price-flash.flash-up{animation:fu 1.4s ease-out}
.price-flash.flash-down{animation:fd 1.4s ease-out}
@keyframes fu{0%{background-color:var(--status-live-bg);color:var(--status-live-fg)}100%{background-color:transparent;color:var(--text-main)}}
@keyframes fd{0%{background-color:var(--status-stopped-bg);color:var(--status-stopped-fg)}100%{background-color:transparent;color:var(--text-main)}}

.bob-up{animation:bobUp 1.6s ease-in-out infinite}
.bob-down{animation:bobDown 1.6s ease-in-out infinite}
.ounce-card:not([data-connection-state="live"]) #ounce-arrow{animation-play-state:paused}
@keyframes bobUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ===== شارات التغير ===== */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums}

/* فتح وإغلاق أسعار الأعيرة */
.karats-summary{-webkit-tap-highlight-color:transparent;min-height:57px;box-sizing:border-box;padding:12px 0;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}

.karats-disclosure .karats-summary{min-height:66px;border-bottom:1px solid #EDF1F4}
.karats-units{margin-top:12px}
.karats-disclosure #karats{border-top:1px solid #EDF1F4}
.karats-disclosure #karats .krow:first-child{border-top:0}

/* اختيار وحدة أسعار الأعيرة */
.karats-units{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;margin-bottom:12px;background:var(--surface-muted);border-radius:14px}
.karats-unit{min-height:44px;background:transparent;color:var(--text-muted);font-size:15px;font-weight:600;border-radius:10px;-webkit-tap-highlight-color:transparent}
.karats-unit[aria-pressed="true"]{background:var(--text-main);color:var(--surface-white)}
.karats-unit:focus-visible{outline:2px solid #a77c18;outline-offset:2px}
.krow .kp{font-size:clamp(15px,4vw,24px)!important}

/* ===== صفوف الأعيرة ===== */
.krow{margin:0 -12px;padding:14px 12px;border-top:1px solid #EDF1F4;transition:background-color 0.25s;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.krow:hover{background-color:var(--surface-gold)}
.badge{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;background:#EEF2F5;color:var(--text-main)}
.badge.gold{background:#F6E7B8;color:#6B4600}

/* ===== تقليل الحركة ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}




/* زر القائمة المنسوخ من مشروع الجنيه */
.menu-toggle{position:static;z-index:3;display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border:1px solid var(--border-neutral);border-radius:12px;background:var(--surface-muted);color:var(--text-main);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
.menu-toggle span{display:block;width:24px;height:2px;border-radius:2px;background:currentColor;pointer-events:none;transition:transform .18s ease,opacity .18s ease}
.menu-toggle:active{transform:scale(.9);background:rgba(94,231,255,.14);border-color:rgba(120,220,255,.3)}
.menu-toggle:focus-visible{outline:2px solid #7ceaf5;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.menu-toggle,.menu-toggle span{transition:none}}
/* شريط النصوص أسفل الصفحة */
.gold-legal-footer{box-sizing:border-box;height:40px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;border:1px solid var(--border-neutral);border-radius:20px;background:var(--surface-white);color:var(--text-muted);font-size:12px;line-height:1.2;white-space:nowrap}
.gold-legal-items{display:flex;align-items:center;gap:16px;font-size:16px;font-weight:600}
.gold-legal-divider{width:1px;height:24px;background:linear-gradient(180deg,rgba(91,107,127,.12),rgba(91,107,127,.45),rgba(91,107,127,.12));flex-shrink:0}
@media(max-width:700px){.gold-legal-footer{gap:6px;padding:0 8px;font-size:clamp(8px,2.35vw,12px)}}

@media(max-width:700px){.page{padding-bottom:14px}}

/* قناة تيليجرام */
.telegram-card{display:grid;gap:16px;padding:24px;color:var(--text-main)}
.telegram-heading{display:flex;align-items:center;gap:12px}
.telegram-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;background:#0088cc;border-radius:10px}
.telegram-card h2{min-width:0;margin:0;font-size:22px;line-height:1.5}
.telegram-card p{margin:0;color:var(--text-muted);font-size:14px;line-height:24px}
.telegram-join{display:flex;align-items:center;justify-content:center;width:100%;min-height:53px;padding:11px 20px;border-radius:10px;background:var(--text-main);color:var(--surface-white);font-size:19px;font-weight:700;text-decoration:none}
.telegram-join:focus-visible{outline:3px solid #a77c18;outline-offset:3px}
@media(max-width:700px){.telegram-card{padding:22px}.telegram-card h2{font-size:20px}.telegram-card p{font-size:13px}}
@media(max-width:380px){.telegram-card{padding:18px}.telegram-card h2{font-size:18px}}

/* نبض مباشر صغير */
.live-pulse{position:relative;display:inline-flex;align-items:center;direction:ltr;overflow:hidden;width:32px;height:12px}
.live-pulse svg{display:block;opacity:.65}
.live-pulse-dot{position:absolute;left:0;top:5px;width:3px;height:3px;border-radius:50%;background:currentColor;animation:live-pulse-move 2.4s linear infinite}
@keyframes live-pulse-move{0%{transform:translate(0,0);opacity:0}5%{opacity:1}23.3%{transform:translate(7px,0)}33.3%{transform:translate(10px,-4px)}46.7%{transform:translate(14px,4px)}60%{transform:translate(18px,-6px)}70%{transform:translate(21px,0)}95%{opacity:1}100%{transform:translate(30px,0);opacity:0}}
@media(prefers-reduced-motion:reduce){.live-pulse-dot{animation:none;display:none}}

/* مكونات مشتركة لحالة الاتصال والوقت */
.clock-icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-left:4px;opacity:.75}
.status-badge{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap;padding:3px 9px;border-radius:999px;font-size:13px;font-weight:600}
.status-badge[data-state="live"]{background:var(--status-live-bg);color:var(--status-live-fg)}
.status-badge[data-state="stopped"]{background:var(--status-stopped-bg);color:var(--status-stopped-fg)}
.live-pulse svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.status-badge[data-state="stopped"] .live-pulse-dot{animation-name:live-stopped-move}
@keyframes live-stopped-move{0%{transform:translateX(0);opacity:0}15%,85%{opacity:1}100%{transform:translateX(29px);opacity:0}}

.update-line{font-size:13px;color:var(--text-muted)}
.karat-update-line{grid-column:1 / -1;font-weight:400}

@media(prefers-reduced-motion:reduce){.status-badge[data-state="stopped"] .live-pulse-dot{animation:none}}

.telegram-card + .gold-legal-footer{margin-top:10px}

.gold-legal-items a{padding:0;background:transparent;color:inherit;font:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.gold-legal-items a:focus-visible{outline:2px solid #a77c18;outline-offset:3px}

 .menu-soon-dialog{box-sizing:border-box;width:min(90vw,440px);max-width:90vw;min-height:200px;margin:auto;padding:40px 24px;border:1px solid var(--border-neutral);border-radius:24px;background:var(--surface-white);color:var(--text-main);font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:24px;font-weight:700;text-align:center;box-shadow:0 12px 35px rgba(31,42,55,.15)}
.menu-soon-dialog::backdrop{background:rgba(31,42,55,.35)}

.menu-soon-dialog::backdrop{transition:background-color 240ms ease-out}
.menu-soon-dialog.is-closing::backdrop{background-color:transparent}
@media(prefers-reduced-motion:reduce){.menu-soon-dialog::backdrop{transition:none}}

/* ترتيب الكمبيوتر */
@media (min-width:900px){
 .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 .wrap > header,.karats-section,.telegram-card,.gold-legal-footer{grid-column:1 / -1}
 .ounce-section,.iraq-section{display:contents!important}
 .ounce-card,.iraq-card{min-width:0}
 .telegram-card + .gold-legal-footer{margin-top:10px}
}

@media (min-width:900px){
 .iraq-card > div:first-child{padding-top:8px!important;padding-bottom:8px!important}
 .iraq-card > div:nth-child(2) > div{padding-top:8px!important;padding-bottom:8px!important;gap:4px!important}
 .iraq-card #g21-price,.iraq-card #m21-price{font-size:36px!important}
}

.status-badge[data-state="connecting"]{background:var(--surface-muted);color:var(--text-muted)}
.status-badge[data-state="connecting"] .live-pulse-dot{animation-name:live-stopped-move}
@media(prefers-reduced-motion:reduce){.status-badge[data-state="connecting"] .live-pulse-dot{animation:none}}



/* شرح شريط مدى سعر الأونصة */
.ounce-range-heading{display:flex;align-items:center;gap:4px}
.ounce-range-help{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;margin-block:-5px;padding:0;background:transparent;color:#95A2B0;touch-action:manipulation}
.ounce-range-help::before{content:"";position:absolute;inset:-10px}
.ounce-range-help svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
.ounce-range-help:focus-visible{outline:2px solid #a77c18;outline-offset:0;border-radius:50%}
.ounce-range-explanation{gap:10px;color:var(--text-main);font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;line-height:1.8}
.ounce-range-explanation h2{font-size:21px;margin:0}
.ounce-range-explanation p{font-size:15px;margin:0}
.range-example{background:var(--surface-muted);border-radius:16px;padding:16px;margin:0}
.range-example-label{font-weight:700;font-size:14px;margin-bottom:6px}
.range-example-current{text-align:center;color:var(--text-main);font-size:13px;line-height:1.6;margin-bottom:12px}
.range-example-current b,.range-example-limits b{font-size:16px;display:inline-block;font-variant-numeric:tabular-nums}
.range-example-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,#BFE3D0,#E7ECEF 50%,#F6C9C3)}
.range-example-dot{position:absolute;left:50%;top:50%;width:16px;height:16px;border:3px solid var(--surface-white);border-radius:50%;background:var(--text-main);transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(31,42,55,.3)}
.range-example-limits{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:1.6;margin-top:10px}
.range-example-limits span:first-child{color:var(--status-stopped-fg)}
.range-example-limits span:last-child{color:var(--status-live-fg);text-align:left}

.gold-price-details[hidden]{display:none}