/* هوية أراسكو للأعلاف على نظام بَيْن: نفس البطاقات البيضاء بحد 1px والأزرار الداكنة والخطوط،
   بألوان أراسكو — الأزرق الداكن 7463C #12365B، الأزرق 660C #1B75BC، الأخضر 361C #39B54A، الأخضر الداكن 349C #006838 */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url(fonts/plex-ar-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url(fonts/plex-ar-500.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url(fonts/plex-ar-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url(fonts/plex-ar-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url(fonts/plex-lat-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url(fonts/plex-lat-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url(fonts/plex-lat-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url(fonts/plex-lat-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Alexandria'; font-weight: 500; font-display: swap; src: url(fonts/alex-ar-500.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Alexandria'; font-weight: 600; font-display: swap; src: url(fonts/alex-ar-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Alexandria'; font-weight: 700; font-display: swap; src: url(fonts/alex-ar-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Alexandria'; font-weight: 800; font-display: swap; src: url(fonts/alex-ar-800.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Alexandria'; font-weight: 500; font-display: swap; src: url(fonts/alex-lat-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Alexandria'; font-weight: 600; font-display: swap; src: url(fonts/alex-lat-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Alexandria'; font-weight: 700; font-display: swap; src: url(fonts/alex-lat-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Alexandria'; font-weight: 800; font-display: swap; src: url(fonts/alex-lat-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }

:root {
  --bg: #f5f7f6;
  --card: #ffffff;
  --sunk: #eff3f1;
  --line: #e2e8e5;
  --line2: #cfd8d4;
  --ink: #12365B;          /* Arasco Dark Blue — مكان «حبر» بَيْن */
  --ink2: #1a4672;
  --text: #13283d;
  --muted: #5b6b78;
  --faint: #97a5ae;
  --blue: #1B75BC;         /* Arasco Light Blue */
  --green: #39B54A;        /* Arasco Light Green — مكان النحاسي */
  --green-d: #006838;      /* Arasco Dark Green */
  --ok: #2f9a4a;
  --warn: #c7811c;
  --danger: #c0392b;
  --grad: linear-gradient(90deg, #39B54A 0%, #11773d 55%, #026839 100%);
  --grad-blue: linear-gradient(135deg, #1c75bb 0%, #185388 45%, #16355a 100%);
  --radius: 14px;
  --font: 'IBM Plex Sans Arabic', 'SF Arabic', 'Segoe UI', Tahoma, sans-serif;
  --display: 'Alexandria', 'IBM Plex Sans Arabic', 'SF Arabic', sans-serif;
  --shadow: 0 1px 2px rgba(18, 54, 91, .05), 0 8px 24px -14px rgba(18, 54, 91, .25);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.2px; margin: 0; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }

/* شعار أراسكو وشريط «Feed الأعلاف» كما على الأكياس */
.feed-lockup { display: inline-grid; justify-items: left; gap: 4px; }
.feed-lockup .logo { display: block; height: 46px; width: auto; }
.feed-ribbon { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; height: 22px; width: 70%; padding: 0 24% 0 10px;
  color: #fff; font: 600 13px/1 var(--font); clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%);
  background: linear-gradient(90deg, #47ad4d 0%, #11773d 50%, #026839 76%, #1c75bb 77%, rgba(28, 117, 187, .55) 90%, rgba(28, 117, 187, 0) 100%); }
.feed-ribbon b { font-family: 'Segoe UI', Arial, sans-serif; font-weight: 700; letter-spacing: .2px; }