/* (14 أكتوبر 2026) خطوط Alexandria و IBM Plex Sans Arabic من سيرفرنا (عربي + لاتيني فقط): كانت من Google وتحجب أول رسم */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Alexandria-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Alexandria-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Alexandria-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Alexandria-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/Alexandria-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/Alexandria-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Node Deals — نموذج Mini App بأسلوب Liquid Glass (نفس نظام ALPHA BOT):
   المحتوى صلب وواضح، والزجاج على طبقة التحكم فقط: الشريط السفلي، الأوراق، الإشعار العائم، زر الوضع. */
:root {
  --accent: #0071e3; --accent-ink: #fff;
  --paper: #ffffff; --mist: #f2f2f7; --tile: #f5f5f7; --ink: #000; --label: #1d1d1f; --sub: #6e6e73; --faint: #aeaeb2;
  --sep: rgb(60 60 67 / .14); --card: #ffffff; --field: #eef0f5; --field-line: rgb(60 60 67 / .2);
  --red: #ff3b30; --green: #34c759; --green-ink: #1a7f37; --orange: #ff9500;
  /* (14 أكتوبر 2026، مراجعة الواجهة UI-3) أحبار للنصوص: الأحمر/البرتقالي/الأزرق الأصلي تباينها 3.2–4.2 على الأبيض والأزرق 2.9 على رمادي الليلي */
  --accent-text: #0066cc; --soft-text: #0058b0; --red-ink: #d70015; --orange-ink: #c93400; --soft: 12%;
  --ease: cubic-bezier(.23, 1, .32, 1); --spring: cubic-bezier(.32, .72, 0, 1); --bounce: cubic-bezier(.34, 1.45, .64, 1);
  --g-bg: rgb(255 255 255 / .66); --g-strong: rgb(255 255 255 / .8); --g-filter: blur(14px) saturate(1.5);
  --dock-bg: rgb(255 255 255 / .58); --dock-filter: blur(16px) saturate(1.8);   /* (17 أكتوبر) الشريط بقيم 13 أكتوبر */
  --g-shadow: 0 0 0 .5px rgb(0 0 0 / .07), 0 12px 32px -8px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .05), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .45);
  --rim: linear-gradient(155deg, rgb(255 255 255 / .95), rgb(255 255 255 / .12) 32%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / .55));
  --lens: rgb(0 0 0 / .065); --seg-bg: rgb(118 118 128 / .12); --seg-thumb: #fff;
  --aura-a: rgb(0 113 227 / .22); --aura-b: rgb(52 199 89 / .16);
  --gutter: 16px;
  --safe-b: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --safe-t: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --f-display: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #000; --mist: #000; --tile: #2c2c2e; --ink: #fff; --label: #f5f5f7; --sub: #98989d; --faint: #636366; --sep: rgb(84 84 88 / .5); --card: #1c1c1e; --field: #2c2c2e; --field-line: rgb(255 255 255 / .14);
  --green-ink: #4cd964; --accent-text: #4aa3ff; --soft-text: #4aa3ff; --red-ink: #ff6961; --orange-ink: #ffb340; --soft: 22%;
  --g-bg: rgb(30 30 32 / .64); --g-strong: rgb(36 36 38 / .84); --g-filter: blur(20px) saturate(1.4);
  --dock-bg: rgb(44 44 46 / .55); --dock-filter: blur(20px) saturate(1.6) brightness(1.08);
  --g-shadow: 0 0 0 .5px rgb(255 255 255 / .16), 0 16px 36px -10px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(255 255 255 / .06);
  --rim: linear-gradient(155deg, rgb(255 255 255 / .5), rgb(255 255 255 / .06) 32%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / .22));
  --lens: rgb(255 255 255 / .1); --seg-bg: rgb(118 118 128 / .24); --seg-thumb: #636366;
  --aura-a: rgb(10 132 255 / .2); --aura-b: rgb(48 209 88 / .12);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #000; --mist: #000; --tile: #2c2c2e; --ink: #fff; --label: #f5f5f7; --sub: #98989d; --faint: #636366; --sep: rgb(84 84 88 / .5); --card: #1c1c1e; --field: #2c2c2e; --field-line: rgb(255 255 255 / .14);
  --green-ink: #4cd964; --accent-text: #4aa3ff; --soft-text: #4aa3ff; --red-ink: #ff6961; --orange-ink: #ffb340; --soft: 22%;
  --g-bg: rgb(30 30 32 / .64); --g-strong: rgb(36 36 38 / .84); --g-filter: blur(20px) saturate(1.4);
  --dock-bg: rgb(44 44 46 / .55); --dock-filter: blur(20px) saturate(1.6) brightness(1.08);
  --g-shadow: 0 0 0 .5px rgb(255 255 255 / .16), 0 16px 36px -10px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(255 255 255 / .06);
  --rim: linear-gradient(155deg, rgb(255 255 255 / .5), rgb(255 255 255 / .06) 32%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / .22));
  --lens: rgb(255 255 255 / .1); --seg-bg: rgb(118 118 128 / .24); --seg-thumb: #636366;
  --aura-a: rgb(10 132 255 / .2); --aura-b: rgb(48 209 88 / .12);
  color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); background: var(--mist); color: var(--label); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100vh; user-select: none; -webkit-user-select: none; }
input { user-select: text; -webkit-user-select: text; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* (UI-3) .hero .v / .stat b / .meta b كانت تغلب .up/.dn فيظهر الربح أبيض/أسود */
.up { color: var(--green-ink) !important; } .dn { color: var(--red-ink) !important; }

/* ---------- مادة الزجاج ---------- */
.g { position: relative; isolation: isolate; background: var(--g-bg); -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter); box-shadow: var(--g-shadow); }
.g::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1; background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.press { transition: transform 260ms var(--bounce); } .press:active { transform: scale(.94); transition-duration: 90ms; }
.aura { position: fixed; inset: 0 0 auto; height: 380px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 85% -10%, var(--aura-a), transparent 70%), radial-gradient(50% 60% at 0% 0%, var(--aura-b), transparent 70%); }

/* ---------- الهيكل ---------- */
.app { padding-block: calc(var(--safe-t) + 14px) calc(var(--safe-b) + 112px); padding-inline: var(--gutter); max-width: 720px; margin-inline: auto; }
.top { display: flex; align-items: center; gap: 12px; margin-block: 4px 16px; }
.logo { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; font: 800 18px var(--f-display); flex: none; letter-spacing: .5px;
  background: radial-gradient(120% 120% at 20% 10%, #6fb4ff, var(--accent) 55%, #003e7e); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 8px 18px -8px var(--accent); }
.top .grow { flex: 1; min-width: 0; }
.top h1 { font: 800 24px/1.15 var(--f-display); color: var(--ink); }
.top p { color: var(--sub); font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; flex: none; color: var(--label); }
.demo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sub); background: var(--card); box-shadow: 0 0 0 .5px var(--sep);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 14px; }
.demo i { width: 7px; height: 7px; border-radius: 9px; background: var(--orange); }
.title { font: 800 28px/1.2 var(--f-display); color: var(--ink); margin: 4px 2px 14px; text-wrap: balance; }
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; }
.sec h2 { font: 700 19px var(--f-display); color: var(--ink); }
.sec span, .sec button { color: var(--sub); font-size: 13.5px; }
.sec button { color: var(--accent-text); font-weight: 600; }

/* البطاقات الصلبة */
.card { background: var(--card); border-radius: 24px; box-shadow: 0 0 0 .5px var(--sep), 0 6px 18px -12px rgb(0 0 0 / .18); animation: rise 480ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.hero { padding: 18px 18px 16px; }
.hero .k { font-size: 13px; color: var(--sub); }
.hero .v { font: 800 36px/1.15 var(--f-display); color: var(--ink); margin-top: 2px; }
.hero .v small { font: 600 16px var(--f-body); color: var(--sub); margin-inline-start: 4px; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--sub); }
.hero .meta b { color: var(--label); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.stat { padding: 13px 15px; }
.stat span { font-size: 12.5px; color: var(--sub); }
.stat b { display: block; font: 700 21px/1.3 var(--f-display); color: var(--ink); margin-top: 2px; }
.stat i { font-style: normal; font-size: 12px; color: var(--sub); }
.meter { height: 6px; border-radius: 9px; background: var(--tile); margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 9px; background: var(--accent); transition: width 700ms var(--spring); }

/* التنبيه */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 22px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--orange) 14%, var(--card)); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--orange) 30%, transparent); animation: rise 480ms var(--ease) both; }
.alert .ic { color: var(--orange); margin-top: 2px; }
.alert b { display: block; font-size: 15px; color: var(--label); }
.alert p { font-size: 13.5px; color: var(--sub); margin-top: 2px; }
.alert .btn { margin-top: 10px; }
.ok-row { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 20px; margin-bottom: 12px; font-size: 14px; font-weight: 600;
  background: color-mix(in srgb, var(--green) 13%, var(--card)); color: var(--green-ink); }

/* الصفقة */
.trade { padding: 14px 16px 12px; margin-bottom: 12px; }
.trade .hd { display: flex; align-items: center; gap: 10px; }
.coin { position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; font: 800 14px var(--f-display); color: #fff; flex: none;
  background: radial-gradient(120% 120% at 25% 15%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000)); }
.trade .hd .grow { flex: 1; min-width: 0; }
.trade .hd b { font-size: 16.5px; font-weight: 700; }
.trade .hd .grow > span { display: block; font-size: 12.5px; color: var(--sub); }
.pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.long { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-ink); }
.pill.short { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red-ink); }
.pill.gray { background: var(--tile); color: var(--sub); }
.pnl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pnl .big { font: 800 28px/1.1 var(--f-display); transition: color 300ms; }
.pnl .roe { font-size: 15px; font-weight: 700; }
.spark { display: block; width: 100%; height: 46px; margin-top: 8px; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: .5px solid var(--sep); }
.kv div span { display: block; font-size: 11.5px; color: var(--sub); }
.kv div b { font-size: 14px; font-weight: 600; }
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.acts button { height: 40px; border-radius: 14px; font-size: 14px; font-weight: 600; background: var(--tile); color: var(--label); transition: transform 260ms var(--bounce); }
.acts button:active { transform: scale(.93); }
.acts button.all { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-ink); }

/* القوائم */
.list { background: var(--card); border-radius: 22px; box-shadow: 0 0 0 .5px var(--sep); overflow: hidden; animation: rise 480ms var(--ease) both; }
.row { display: flex; gap: 12px; align-items: center; padding: 11px 14px; position: relative; }
.row + .row::before { content: ""; position: absolute; top: 0; inset-inline: 68px 0; border-top: .5px solid var(--sep); }
.row .coin { width: 38px; height: 38px; font-size: 12.5px; }
.coin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; opacity: 0; transition: opacity 250ms ease; }
.coin.lg { background: var(--card); color: transparent; box-shadow: 0 0 0 .5px var(--sep); }
.coin.lg img { opacity: 1; }
.row .grow { flex: 1; min-width: 0; }
.row .grow b { display: block; font-size: 15px; font-weight: 600; }
.row .grow span { font-size: 12.5px; color: var(--sub); }
.row .end { text-align: end; }
.row .end b { display: block; font-size: 15px; }
.row .end > span:not(.pill) { font-size: 12px; color: var(--sub); }
.dicon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tile); color: var(--sub); }
.dicon.av-ph { position: relative; overflow: hidden; border-radius: 50%; background: hsl(var(--h, 210) 46% 44%); color: #fff; font-weight: 700; }   /* (UI-3) الحرف أبيض على لون من الاسم (كان رماديًا لا يُرى بالليلي) */
.dicon.av-ph .avimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dicon.in { color: var(--green-ink); background: color-mix(in srgb, var(--green) 14%, transparent); }
.dicon.out { color: var(--red); background: color-mix(in srgb, var(--red) 11%, transparent); }

/* الأزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding-inline: 22px; border-radius: 999px; font-weight: 600; font-size: 16px;
  white-space: nowrap; transition: transform 260ms var(--bounce), opacity 200ms; }
.btn:active { transform: scale(.96); transition-duration: 90ms; }
.btn-acc { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 22px -10px var(--accent); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-soft { background: color-mix(in srgb, var(--accent) var(--soft), transparent); color: var(--soft-text); }   /* على الخلفية الملونة يحتاج أغمق قليلًا (4.5) */
.btn-red { background: var(--red); color: #fff; }
.btn-sm { height: 38px; padding-inline: 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* المحفظة */
.addr { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.addr .grow { flex: 1; min-width: 0; }
.addr span { display: block; font-size: 12px; color: var(--sub); }
.addr code { display: block; font: 600 14px ui-monospace, "SF Mono", Menlo, monospace; color: var(--label); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.copy { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tile); color: var(--accent-text); flex: none; }
.addr + .addr { border-top: .5px solid var(--sep); }

/* النماذج */
.group-t { font-size: 13px; color: var(--sub); margin: 20px 16px 7px; }
.form { background: var(--card); border-radius: 22px; box-shadow: 0 0 0 .5px var(--sep); overflow: hidden; animation: rise 480ms var(--ease) both; }
.field { display: flex; align-items: center; gap: 12px; padding-inline: 16px; min-height: 54px; position: relative; }
.field + .field::before { content: ""; position: absolute; top: 0; inset-inline: 16px 0; border-top: .5px solid var(--sep); }
.field label { flex: 1; min-width: 0; font-size: 15px; }
.field label small { display: block; font-size: 12px; color: var(--sub); }
.field input[type="number"], .field input[type="text"] { width: 96px; border: 0; background: var(--tile); border-radius: 12px; font: inherit; font-size: 15px; color: var(--label);
  outline: none; padding: 7px 10px; text-align: center; }
.field.col { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 12px; }
.hint { font-size: 12.5px; color: var(--sub); margin: 7px 16px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 34px; padding-inline: 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--tile); display: inline-flex; align-items: center; gap: 6px; }
.chip .ic { width: 15px; height: 15px; stroke-width: 2.4; color: var(--sub); }
.chip.add { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 11%, transparent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.switch { position: relative; width: 51px; height: 31px; border-radius: 999px; background: rgb(120 120 128 / .32); flex: none; transition: background-color 250ms ease; }
.switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16); transition: transform 380ms var(--spring), width 200ms ease; }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(var(--sw-x, -20px)); }
[dir="ltr"] .switch { --sw-x: 20px; }   /* (12 أكتوبر، صورة المالك) بالإنكليزي كانت النقطة تتحرك لليسار فتطلع خارج المفتاح */

/* التحكم المقسّم */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--seg-bg); }
.seg.mb { margin-bottom: 14px; }
.seg button { position: relative; z-index: 1; height: 36px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.seg button[aria-checked="true"] { font-weight: 700; }
.seg-thumb { position: absolute; top: 4px; left: 4px; height: 36px; border-radius: 999px; background: var(--seg-thumb); box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04);
  transition: transform 480ms var(--spring), width 480ms var(--spring), scale 280ms var(--bounce); }
.seg.pressing .seg-thumb { scale: 1.08 1.16; }
.seg { touch-action: pan-y; }   /* (14 أكتوبر) السحب الأفقي للمؤشر لنا، والعمودي تمرير للصفحة */

/* الإدارة */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { font-size: 11.5px; color: var(--sub); font-weight: 600; text-align: start; padding: 6px 4px; }
.tbl td { padding: 8px 4px; border-top: .5px solid var(--sep); }
.tbl td:last-child, .tbl th:last-child { text-align: end; }
.scroll { overflow-x: auto; }
.sig { padding: 14px 16px; margin-bottom: 12px; }
.sig .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sig .hd .grow { flex: 1; min-width: 0; }
.sig .hd b { font-size: 16px; }
.sig .hd .grow > span { display: block; font-size: 12.5px; color: var(--sub); }
.sig .tot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: .5px solid var(--sep); font-size: 14px; font-weight: 700; }

/* الشريط السفلي */
.dock { position: fixed; inset-inline: 0; bottom: calc(var(--safe-b) + 12px); z-index: 40; display: flex; justify-content: center; padding-inline: var(--gutter); pointer-events: none; }
.tabs { pointer-events: auto; position: relative; display: flex; height: 64px; padding: 6px; border-radius: 999px; flex: 1; max-width: 480px; }
.tab { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 52px; min-width: 0;
  border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--sub); transition: color 220ms ease; }
.tab .ic { width: 24px; height: 24px; }
.tab[aria-current="true"] { color: var(--accent-text); }
.tab .dot { position: absolute; top: 5px; inset-inline-start: calc(50% + 5px); width: 9px; height: 9px; border-radius: 9px; background: var(--orange); box-shadow: 0 0 0 2px var(--g-strong); }
.lens { position: absolute; top: 6px; left: 0; height: 52px; border-radius: 999px; background: var(--lens); z-index: 0;
  transition: transform 520ms var(--spring), width 520ms var(--spring), scale 300ms var(--bounce); }
.tabs.pressing .lens { scale: 1.08 1.16; }

/* الأوراق والإشعار */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .32); opacity: 0; pointer-events: none; transition: opacity 360ms ease; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 61; max-height: 86vh; max-width: 720px; margin-inline: auto; border-radius: 32px 32px 0 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--g-strong); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 -20px 50px -20px rgb(0 0 0 / .35); transform: translateY(104%);
  visibility: hidden; transition: transform 560ms var(--spring), visibility 0s linear 560ms; }
.sheet.on { transform: none; visibility: visible; transition: transform 560ms var(--spring), visibility 0s; }
.sheet { bottom: var(--kb, 0px); max-height: calc(86vh - var(--kb, 0px)); }   /* (UI-3) لوحة المفاتيح (iOS) لا تغطي الخانات */
.sheet .grab { width: 38px; height: 5px; border-radius: 9px; background: var(--faint); opacity: .6; margin: 8px auto 0; flex: none; }
.sheet .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 4px; }
.sheet .bar h3 { font: 700 18px var(--f-display); color: var(--ink); }
.sheet .body { overflow-y: auto; padding: 4px var(--gutter) calc(var(--safe-b) + 18px); }
.xbtn { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--tile); }
.xbtn .ic { width: 17px; height: 17px; stroke-width: 2.3; }
.sum { background: var(--card); border-radius: 20px; box-shadow: 0 0 0 .5px var(--sep); padding: 4px 16px; margin-block: 8px 14px; }
.sum div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; font-size: 14.5px; color: var(--sub); }
.sum div + div { border-top: .5px solid var(--sep); }
.sum div b { color: var(--label); }
.wallets { display: grid; gap: 8px; margin-block: 8px 14px; }
.wallets button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 .5px var(--sep); text-align: start; }
.wallets button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.wallets .wl { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font: 800 13px var(--f-display); flex: none; }
/* (UI-3) الإشعار فوق رأس الصفحة: خلفية شبه صلبة بتمويه قوي (كان زجاجًا شفافًا بعدسة فوق زجاج فيصعب قراءته) */
.toast { background: var(--g-strong); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--g-shadow); }
/* (13 أكتوبر، طلب المالك) التوست أعلى الشاشة تحت أزرار تيليجرام (--safe-t) بدل فوق الشريط السفلي، ويدخل/يخرج من الأعلى */
.toast { position: fixed; inset-inline: var(--gutter); top: calc(var(--safe-t) + 10px); z-index: 70; max-width: 420px; margin-inline: auto;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--label);
  transform: translateY(-30px) scale(.96); opacity: 0; pointer-events: none; transition: transform 520ms var(--spring), opacity 240ms ease; }
.toast.on { transform: none; opacity: 1; }
.toast .ic { color: var(--green); }
.still .card, .still .list, .still .form, .still .alert { animation: none; }
/* (14 أكتوبر، مراجعة الحركة) تقليل الحركة: بلا حركة ظهور (كانت 1ms مع both ⇒ إطار فارغ للكروت مع كل رسم)، والنافذة تظهر بتلاشٍ قصير بلا انزلاق مثل iOS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .card, .list, .form, .alert, .ok-row { animation: none !important; }
  #sheet { transform: none !important; opacity: 0; visibility: hidden; transition-property: opacity, visibility !important; transition-duration: .2s !important; }
  #sheet.on { opacity: 1; visibility: visible; }
  #scrim { transition-duration: .2s !important; }
}

/* داخل تيليجرام: أزرار الإجراء الرئيسية على BottomButton/SecondaryButton بدل أزرار الصفحة */
.tgb .inpage { display: none !important; }
.row[data-act] { cursor: pointer; }
.row[data-act]:active { background: var(--tile); }
.trade.focus { box-shadow: 0 0 0 2px var(--accent), 0 10px 26px -12px var(--accent); transition: box-shadow 400ms ease; }
/* صورة البوت بدل الحروف */
.logo.av { background: #000; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 .5px var(--sep), 0 8px 18px -10px rgb(0 0 0 / .45); }
.logo.av img { width: 100%; height: 100%; display: block; }
/* ملء الشاشة: المحتوى يختفي بنعومة تحت أزرار تيليجرام العلوية (إغلاق/القائمة) بدل أن يتداخل معها */
.topfade { display: none; }
.tgb .topfade { display: block; position: fixed; inset: 0 0 auto; z-index: 30; pointer-events: none; height: calc(var(--safe-t) + 14px);
  background: linear-gradient(to bottom, var(--mist) 0, color-mix(in srgb, var(--mist) 88%, transparent) 60%, transparent); }
/* شاشة «قريبًا» لغير المالك */
.soon { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding-inline: 12px; }
.soon .logo { width: 96px; height: 96px; }
.soon h1 { font: 800 30px var(--f-display); color: var(--ink); margin-top: 6px; }
.soon p { color: var(--sub); max-width: 34ch; }
/* مبالغ الشحن السريعة */
.amts { margin-block: 6px 12px; }
.amts .chip { min-width: 64px; justify-content: center; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--accent) !important; color: #fff; }   /* (UI-3) الاختيار بلون التطبيق مثل باقي الاختيارات (كان أسود/أبيض) */
.addrin { width: 100%; font: 500 15px var(--f-body) !important; font-variant-numeric: tabular-nums; text-align: start !important; background: var(--tile); border: 0; border-radius: 12px; padding: 10px 12px; color: var(--label); outline: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }
p.hint:empty { display: none; }

/* الخانات واضحة في الوضعين: خلفية تختلف عن البطاقة + إطار، وإطار أزرق عند الكتابة */
.field input[type="number"], .field input[type="text"], .addrin, .amtbox {
  background: var(--field) !important; box-shadow: inset 0 0 0 1px var(--field-line); border: 0; border-radius: 12px; color: var(--label); transition: box-shadow 160ms ease; }
.field input[type="number"]:focus, .field input[type="text"]:focus, .addrin:focus, .amtbox:focus-within { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.field input::placeholder, .addrin::placeholder, .amtbox input::placeholder { color: var(--faint); }
.addrin { padding: 12px 14px !important; }
/* خانة المبلغ الكبيرة: رقم كبير بعرض كامل ووحدته بجانبه */
.amtbox { display: flex; align-items: center; gap: 8px; padding: 6px 14px; }
.amtbox input { flex: 1; min-width: 0; border: 0; background: none !important; box-shadow: none !important; font: 700 26px/1.4 var(--f-display); color: var(--ink); outline: none; padding: 6px 0; text-align: start; direction: ltr; }
.amtbox span { font-weight: 600; color: var(--sub); }
.field input.addrin { width: 100%; }
.amtbox input { text-align: right; }
.field .amtbox input { width: auto; flex: 1; text-align: right; background: none !important; box-shadow: none !important; padding: 6px 0; }
.linkbtn { color: var(--accent-text); font-weight: 600; font-size: 13px; margin-inline-start: 6px; }
.hero .k .pill { margin-inline-start: 6px; vertical-align: middle; }
/* خطوات الشحن: ربط المحفظة ثم الدفع */
.step { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 .5px var(--sep); margin-bottom: 10px; }
.step .sn { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; flex: none; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.step .sn .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.step .grow { flex: 1; min-width: 0; }
.step b { display: block; font-size: 15.5px; }
.step span:not(.sn) { font-size: 13px; color: var(--sub); }
.step.done .sn { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green-ink); }
.step.off { opacity: .5; }
.step.done .num { color: var(--label); font-size: 14px; }
.step.done + .chips.amts { margin-top: 14px; }
.pill.wait { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange-ink); }
/* (12 أكتوبر) بيانات حقيقية: التحميل والأخطاء والشاشات الجديدة */
.demo.err { color: var(--red-ink); }
.demo.err i { background: var(--red); }
.demo button { margin-inline-start: 8px; color: var(--accent-text); font-weight: 700; font-size: 12px; }
/* (UI-3) وميض التحميل: طبقة تتحرك (transform بلا إعادة رسم كل إطار)، مرئية بالليلي، ومن اليمين لليسار بالعربي */
.skel { position: relative; overflow: hidden; background: var(--card); box-shadow: 0 0 0 .5px var(--sep); margin-bottom: 12px; border-radius: 22px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: skel 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, var(--shine, rgb(0 0 0 / .05)), transparent); }
[dir="rtl"] .skel::after { animation-direction: reverse; }
:root[data-theme="dark"] .skel { --shine: rgb(255 255 255 / .07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skel { --shine: rgb(255 255 255 / .07); } }
@keyframes skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.card.empty { text-align: center; }
.card.empty .k { font-size: 15px; color: var(--label); font-weight: 600; }
.card.empty .hint { margin: 6px 0 0; }
.card.empty .btn { margin-top: 12px; }
.tl { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 0; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 .5px var(--sep); }
.tl li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; position: relative; }
.tl li + li { box-shadow: inset 0 .5px 0 var(--sep); }
.tl li b { font-weight: 600; font-size: 14px; }
.tl li span { font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.tl.steps li { flex-direction: column; gap: 3px; }
.tl.steps li span { white-space: normal; }
/* (16 أكتوبر) رقم بدائرة لكل خطوة (الاتصال، ربط المنصة، حساب المتداول) */
.tl.steps { counter-reset: st; }
.tl.steps li { counter-increment: st; padding-inline-start: 52px; }
.tl.steps li::before { content: counter(st); position: absolute; inset-inline-start: 16px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 700 13px/1 var(--f-display, system-ui); }
.ipline { display: inline-flex; align-items: center; gap: 8px; }
.ipline code { font-size: 14px; color: var(--label); }
.card.md { padding: 16px; overflow-x: auto; }
.card.md h4 { font-size: 16px; margin: 4px 0 8px; }
.card.md p { font-size: 13.5px; color: var(--sub); margin: 6px 0; overflow-wrap: anywhere; }
.card.md code { font-size: 12px; overflow-wrap: anywhere; }
.card.md .tbl { margin: 6px 0 10px; }
.toast.err .ic { color: var(--red); }
textarea.addrin { width: 100%; resize: vertical; min-height: 120px; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.5; color: var(--label); }
.stat[role="button"], .row[role="button"], .trade .hd[role="button"] { cursor: pointer; }
.sheet .acts, #sheet .acts { margin-top: 4px; }
.sig .hd bdi { font-variant-numeric: tabular-nums; }
/* (12 أكتوبر) مسافات الإدارة: مربعات الأرقام ومربع الإشارة لا تتلاصق، وأزرار الإشارة 2×2 */
.stats { margin-bottom: 12px; }
.form + .card, .form + .stats, .stats + .card { margin-top: 12px; }
.sig .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sig .acts button { font-size: 14.5px; }
/* (12 أكتوبر) قطرة الزجاج فوق الشريط (مثل تيليجرام iOS 26): أكبر من الشريط، تكبّر ما تحتها، وتتمطط بالسرعة */
.tabs { touch-action: none; -webkit-user-select: none; user-select: none; transition: scale 380ms var(--bounce); }
.tabs.drop-on { scale: 1.03; }
.drop { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: 999px; opacity: 0; scale: .62;
  background: var(--g-strong); transform-origin: 50% 50%; will-change: transform;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .34), inset 0 2px 9px rgb(255 255 255 / .22), inset 0 -7px 14px rgb(0 0 0 / .16), 0 12px 26px -10px rgb(0 0 0 / .45);
  transition: opacity 140ms ease, scale 200ms cubic-bezier(.2, .8, .3, 1); }   /* الاختفاء: قصير وبلا ارتداد */
.drop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 30% 0%, rgb(255 255 255 / .28), transparent 55%), radial-gradient(90% 60% at 70% 110%, rgb(255 255 255 / .12), transparent 60%); }
.tabs.drop-on .drop { opacity: 1; scale: 1; transition: opacity 160ms ease, scale 360ms var(--bounce); }   /* الظهور: بارتداد */
.tabs.drop-on .lens { opacity: 0; }
.lens { transition: transform 520ms var(--spring), width 520ms var(--spring), scale 300ms var(--bounce), opacity 220ms ease; }
.drop-row { position: absolute; left: 0; top: 0; display: flex; height: 64px; padding: 6px; transform-origin: 0 0; }
.drop-row .tab { color: var(--accent); }
.drop-row .tab .ic { filter: drop-shadow(0 0 .5px currentColor); }
@media (prefers-reduced-motion: reduce) { .drop { display: none; } .tabs.drop-on { scale: 1; } .tabs.drop-on .lens { opacity: 1; } }
.tabs.drop-on > .tab[aria-current="true"] { color: var(--sub); }   /* أثناء السحب: الأزرق لما تحت القطرة فقط */
/* (12 أكتوبر) شاشات المشترك: التسجيل، QR، شرح الربط بالصور، أزرار سريعة */
.onb { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 4px 24px; }
.onb .logo { width: 88px; height: 88px; }
.onb h1 { font: 800 28px var(--f-display); color: var(--ink); margin-top: 4px; }
.onb .sub { color: var(--sub); max-width: 34ch; font-size: 15px; }
.onb .list { width: 100%; text-align: start; margin-top: 6px; }
.onb .row .grow span { white-space: normal; }
.steps3 { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.steps3 span { background: var(--card); box-shadow: 0 0 0 .5px var(--sep); border-radius: 16px; padding: 10px 6px; font-size: 12.5px; color: var(--sub); display: grid; gap: 4px; }
.steps3 b { font: 800 17px var(--f-display); color: var(--accent); }
details.terms { width: 100%; text-align: start; }
details.terms summary { cursor: pointer; color: var(--accent-text); font-weight: 600; font-size: 14px; padding: 8px 4px; list-style: none; text-align: center; }
details.terms summary::-webkit-details-marker { display: none; }
details.terms .card.md { max-height: 50vh; overflow-y: auto; }
.onb .btn-block { width: 100%; }
.btns.quick { margin: 0 0 4px; }
.btns .btn .ic { width: 18px; height: 18px; }
.qrbox { background: #fff; border-radius: 22px; padding: 14px; width: min(260px, 100%); margin: 4px auto 6px; box-shadow: 0 0 0 .5px var(--sep); }
.qrbox svg { display: block; width: 100%; height: auto; }
#lkGuide { margin-top: 10px; }
.shots { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin-bottom: 4px; }
.shots figure { flex: 0 0 72%; max-width: 260px; height: 440px; margin: 0; scroll-snap-align: center; position: relative; }   /* (UI-3) ارتفاع ثابت: لا قفز مع تحميل كل صورة */
.shots img { width: 100%; height: 100%; object-fit: contain; object-position: top; border-radius: 16px; box-shadow: 0 0 0 .5px var(--sep); display: block; background: var(--tile); }
.shots figcaption { display: none; position: absolute; top: 8px; inset-inline-start: 8px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font: 700 12.5px var(--f-display); }
.dock[hidden] { display: none; }   /* .dock يضبط display فيتجاوز سمة hidden */
.sum div b.up { color: var(--green-ink); } .sum div b.dn { color: var(--red-ink); }
/* (12 أكتوبر) دفعة الإدارة */
.sig .acts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sig .acts + .acts { margin-top: 8px; }
.sig .sum { margin-block: 6px 0; }
.uex { margin-top: 10px; }
.uex .btn { margin-top: 8px; }
.acts button:disabled { opacity: .55; }
/* (12 أكتوبر) اللغة */
.onb { position: relative; }
.onb .langbtn { position: absolute; top: 4px; inset-inline-end: 4px; margin: 0; font-size: 14px; }
/* (12 أكتوبر) تبديل الثيم: الصورة الجديدة تنبثق دائرةً من زر الثيم فوق القديمة (التحريك في app.js setTheme) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* (12 أكتوبر، طلب المالك «صاير تلاصق») مسافة ثابتة بين الصناديق المتتالية التي كانت ملتصقة:
   بحث المشتركين ⟂ القائمة · المنصتان ⟂ خطوات الربط · «شرح بالصور» ⟂ الحقول · التنبيه ⟂ الخطوات · الحقل ⟂ زر التثبيت ·
   العملات ⟂ نموذج السحب · نص QR ⟂ العناوين · عنوان «آخر الصفقات» ⟂ القائمة */
.form + .list, .form + #subsList, .chips + .tl, .chips + .form, .list + .tl, .form + .btn-block, .hint + .list,
details > summary + .list, details > summary + .card, .linkbtn + .form, #lkGuide + .form { margin-top: 12px; }
/* أهداف لمس أكبر للروابط النصية وزر «تحديث» (كانت 20px ارتفاعًا) */
.linkbtn { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 4px; }
.sec > button { min-height: 36px; padding-inline: 10px; }
.onb .langbtn { min-height: 36px; padding-inline: 12px; }
/* شريط بحث المشتركين وترتيبهم */
.subsbar .field input { flex: 1; min-width: 0; }
.sortbtn { flex: none; }
.sortbtn .ic { color: var(--accent); }
.addrin.mono { font: 500 14px ui-monospace, "SF Mono", Menlo, monospace !important; }   /* (UI-3) العناوين والمفاتيح والرموز فقط */
/* (12 أكتوبر، المراجعة البصرية بالإنكليزي) صف الزرّين: يتشاركان الصف إن كفى العرض، وإلا ينزل كل زر لصف كامل
   (كان النص الطويل «Sent without a memo?» و«Open the caller account» يدفع الزر الآخر خارج الشاشة) */
.btns { display: flex; flex-wrap: wrap; }
.btns > .btn { flex: 1 1 auto; min-width: 0; padding-inline: 18px; }
/* (12 أكتوبر، المراجعة البصرية) بالوضع الليلي كان لون أزرار الكروت والرقاقات = لون الكرت نفسه (#1c1c1e) فتبدو نصًا بلا زر:
   «25% 50% 75%»، «ادخل الآن»، «XRP ×». تعبئة الحقول (أفتح قليلًا من الكرت) في الوضعين، والإجراء الرئيسي بلون التطبيق */
.acts button, .chip { background: var(--field); }
.acts button.go { background: var(--accent); color: var(--accent-ink); }
.chip.add { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* (13 أكتوبر، صورة المالك «يوجد تلاصق») بطاقة أرباح المتداول ⟂ بطاقة الربح تحتها */
.card.earn { margin-bottom: 12px; }
.card.earn .foot { margin-top: 10px; }
.card.earn .v { color: var(--green-ink); }   /* (13 أكتوبر، طلب المالك) الربح بالأخضر */

/* (13 أكتوبر، طلب المالك) إغلاق مركز المشترك: سوق أو ليمت على السعر المعروض */
.sig .seg.uot { margin-top: 12px; }
.sig .seg.uot + .lim-hint, .sig .lim-hint { font-size: 12.5px; color: var(--sub); margin: 8px 4px 0; }

/* (13 أكتوبر، طلب المالك) لوحة المتداول: ثلاثة مؤشرات بصف */
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats.three .stat b { font-size: 21px; }
.stats.three .stat span, .stats.three .stat i { font-size: 12px; }
.stats.three + .btn-block { margin: 2px 0 6px; }

/* (13 أكتوبر) نموذج الإشارة: خانة السعر بعرض ثابت فيبقى العنوان ونسبته بسطر (كانت 100% فتنحشر كلمة بكل سطر) */
.field input.addrin.pxin { width: 132px; flex: none; text-align: center; }
.sheet .form + .chips, #sheet .form + .chips { margin-top: 10px; }
/* (13 أكتوبر) اسم المشترك في جدول الإشارة يفتح ورقته: بلون النص وخط منقّط (لون التمييز كان تباينه 3.6 بالفاتح) */
.tbl .linkbtn { color: var(--label); text-decoration: underline dotted; text-underline-offset: 3px; font: inherit; padding: 0; min-height: 0; }
.card.hero + .list { margin-top: 10px; }   /* (13 أكتوبر) بطاقة الأداء ثم الأفضل/الأسوأ: كانتا متلاصقتين */
.form + .alert, .card + .alert { margin-top: 12px; }   /* (13 أكتوبر، صورة المالك) بطاقة العملة وتنبيه الإشارة المفتوحة كانا متلاصقين */

/* (13 أكتوبر) بطاقة «الإشارة التوأم» */
.twsum { margin-top: 12px; }
.twacts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.twacts .btn { min-width: 0; max-width: 100%; }
.twacts .twup { height: auto; min-height: 50px; padding-block: 8px; flex-direction: column; gap: 2px; }
.twacts .twup small { display: block; font-size: 12.5px; font-weight: 500; opacity: .8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twacts .acts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }

/* (14 أكتوبر 2026، مراجعة الواجهة - الدفعة UI-1) */
.alert.halt { background: color-mix(in srgb, var(--red) 12%, var(--card)); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--red) 35%, transparent); }
.alert.halt .ic { color: var(--red); }
.btn-red-soft { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--red-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 32%, transparent); }
.btns.col { flex-direction: column; }
.btns.col:empty { display: none; }
.sg { white-space: nowrap; }                                   /* جزء من سطر «a · b · c» لا ينكسر وسطه */
.hint.err { color: var(--red-ink); }
textarea.addrin.addr2 { min-height: 0; resize: none; font: 500 14px/1.45 ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; }
.addr code.addrfull { word-spacing: .1em; line-height: 1.5; }
.sig .kv { margin-top: 8px; }

/* (14 أكتوبر 2026، مراجعة الواجهة - الدفعة UI-3: الزجاج والألوان وسهولة الاستخدام) */
.sheet:not(.on) { pointer-events: none; }   /* نافذة تُغلق (انزلاق أو تلاشٍ) لا تستقبل لمسًا: كانت «ادخل الآن» قابلة للضغط أثناء اختفائها */
/* مساحة لمس 44px للأزرار الصغيرة (طبقة غير مرئية حولها؛ الشكل كما هو) */
:is(.switch, .chip, .seg button, .xbtn, .copy, .btn-sm, .acts button, .linkbtn, .demo button, .sec > button) { position: relative; }
:where(.switch, .chip, .seg button, .xbtn, .copy, .btn-sm, .acts button, .linkbtn, .demo button, .sec > button)::before { content: ""; position: absolute; inset: -6px 0; }   /* :where ⇒ بلا وزن فتغلبه القيم الخاصة تحته */
.switch::before { inset: -7px -2px; } .xbtn::before { inset: -5px; } .copy::before { inset: -4px; } .demo button::before { inset: -13px -6px; }
.tbl .linkbtn::before { inset: -9px 0; }
/* خط عربي أكبر بقليل للتسميات الصغيرة */
:lang(ar) .tab { font-size: 11.5px; } :lang(ar) .kv div span, :lang(ar) .tbl th { font-size: 12.5px; }
/* النافذة مفتوحة ⇒ الشريط السفلي يختفي (لا زجاج تحت زجاج) */
.sheet-on #dock { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
#dock { transition: opacity 200ms ease, visibility 0s; }
.sheet .grab, .sheet .bar { touch-action: none; }                /* سحب النافذة لأسفل */
.sheet .bar h3:focus { outline: none; }
/* (17 أكتوبر، المالك: «ما رجع مثل قبل، Liquid glass style») الشريط وحده بزجاج 13 أكتوبر: أشف وأكثر تشبعًا، والانكسار من liquid()
   بضبابية 3 (data-blur/sat/bright)؛ وحيث لا انكسار (iOS) ضبابية الشريط القديمة. البطاقات والأوراق كما هي (UI-3). */
.dock .tabs.g { background: var(--dock-bg); -webkit-backdrop-filter: var(--dock-filter); backdrop-filter: var(--dock-filter); }
/* (17 أكتوبر 2026، المالك: «شريط الازرار كان اجمل سابقا من كان زجاجي») أُزيل التعتيم تحت الشريط: كان يغطي المحتوى خلف الزجاج
   فيبدو الشريط صلبًا (أسود في الوضع الداكن). الزجاج نفسه (g lq) يبقى بتمويهه. */
/* تقليل الشفافية أو تباين أعلى ⇒ أسطح صلبة بلا تمويه */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .g, .sheet, .toast, .drop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .g, .toast { background: var(--card) !important; } .sheet { background: var(--mist) !important; }
}

/* (14 أكتوبر 2026، مراجعة الواجهة - الدفعة UI-4: الترجمة والنصوص) */
#usrFind, #fanFind { unicode-bidi: plaintext; text-align: start !important; }   /* اتجاه النص من محتواه (كان dir=auto يصير LTR والخانة فارغة) */
.stat > span, .stat > i, .row .grow > span { display: block; line-height: 1.45; }   /* بالإنكليزي كانت الأسطر الملفوفة متباعدة 25px */

/* (14 أكتوبر 2026، مراجعة الواجهة - الدفعة UI-5) */
.todo { margin: 0 0 12px; }
.chip.warn { background: color-mix(in srgb, var(--orange) 16%, transparent) !important; color: var(--orange-ink); }
.chip.bad { background: color-mix(in srgb, var(--red) 14%, transparent) !important; color: var(--red-ink); }
.chip.good { background: color-mix(in srgb, var(--green) 14%, transparent) !important; color: var(--green-ink); }
.bcprev { margin: 10px 4px 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--card); box-shadow: 0 0 0 .5px var(--sep); font-size: 15px; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere; max-width: 85%; }   /* معاينة الرسالة كما تصل في المحادثة */
.sigpx { font-size: 12.5px; color: var(--sub); margin-top: 8px; }
.acts-t { font-size: 12px; color: var(--sub); margin: 10px 2px -4px; }
.fansort { align-items: center; margin-bottom: 10px; }
.fansort .hint { margin: 0 4px 0 0; }
.hint.inv { margin: 0; }
/* (14 أكتوبر مساءً) لقب المتداول على صفقات المشترك */
.by { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--label); }
.by .ic { width: 12px; height: 12px; }
/* (15 أكتوبر، صورة المالك «وش ذا التداخل») بطاقة حساب التداول في ورقة المتداول: الرأس صف واحد والنص لا يتداخل */
.card.sub { display: flex; flex-direction: column; gap: 10px; }
.card.sub .hd { display: flex; align-items: center; gap: 10px; }
.card.sub .hd .grow { flex: 1; min-width: 0; }
.card.sub .hd .grow > b { display: block; font-size: 15px; }
.card.sub .hd .grow > span { display: block; font-size: 12.5px; color: var(--sub); }
.card.sub .hd .pill { flex: none; }
/* (15 أكتوبر 2026، طلب المالك «بنر مثل بوت التجربة») بطاقات تُسحب جانبًا أعلى الرئيسية - لوحات فنية داكنة بكل الثيمات */
.bnr { margin: 2px calc(var(--gutter) * -1) 14px; }
.bnr-track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.bnr-track::-webkit-scrollbar { display: none; }
.bnr-card { position: relative; scroll-snap-align: start; aspect-ratio: 1.85; border-radius: 26px; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(110% 95% at 15% 10%, var(--b1), transparent 62%), linear-gradient(160deg, var(--b2), var(--b3));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.bnr-results { --b1: #2ed57340; --b2: #12301f; --b3: #08130d; }
.bnr-start { --b1: #4f8cff45; --b2: #16233f; --b3: #0a1120; }
.bnr-safety { --b1: #34c7b945; --b2: #0f302d; --b3: #081816; }
.bnr-invite { --b1: #c56cf045; --b2: #2a1638; --b3: #130a1c; }
.bnr-gram { --b1: #3aa0ff50; --b2: #10243d; --b3: #091320; }
.bnr-chip { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* «أبو نود»: كبير بطرف البطاقة، رجلاه خلف الشريط الزجاجي، وهالة ذهبية خلفه؛ والرسمة الصغيرة بين الشارة والشريط */
.bnr-dog { position: absolute; z-index: 1; inset-inline-end: 3%; bottom: -13%; height: 108%; width: auto; max-width: 52%; object-fit: contain; object-position: bottom;
  pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 14px 22px rgb(0 0 0 / .55)); }
.bnr-halo { position: absolute; z-index: 0; inset-inline-end: -6%; top: -18%; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 205 96 / .30), rgb(255 205 96 / .10) 55%, transparent); }
.bnr-art { position: absolute; top: 48px; bottom: 74px; inset-inline-start: 14px; width: 46%; display: flex; align-items: center; justify-content: flex-start; z-index: 1; }
.bnr-art:empty { display: none; }
.bnr-prop { height: 100%; max-height: 78px; width: auto; filter: drop-shadow(0 10px 16px rgb(0 0 0 / .5)) drop-shadow(0 0 22px rgb(255 205 96 / .35)); user-select: none; -webkit-user-drag: none; }
.bnr-coins { display: flex; position: relative; z-index: 1; }
.bnr-coins .coin { width: 46px; height: 46px; font-size: 12px; box-shadow: 0 8px 18px rgb(0 0 0 / .45), 0 0 0 3px rgb(255 255 255 / .1); }
.bnr-coins .coin + .coin { margin-inline-start: -12px; }
.bnr-coins .coin { position: relative; } .bnr-coins .coin:nth-child(1) { z-index: 3; } .bnr-coins .coin:nth-child(2) { z-index: 2; }  /* الأكثر ربحًا فوق */
.bnr-line { position: absolute; z-index: 0; inset-inline-start: 6%; bottom: 30%; height: 30%; width: 88%; opacity: .5; }
.bnr-steps { display: flex; gap: 8px; padding-top: 18px; }
.bnr-steps span { position: relative; width: 46px; height: 46px; display: grid; place-items: center; }
.bnr-step { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); user-select: none; -webkit-user-drag: none; }
.bnr-steps span:nth-child(2) { transform: translateY(-8px); } .bnr-steps span:nth-child(3) { transform: translateY(-16px); }
.bnr-steps i { position: absolute; top: -7px; inset-inline-start: -7px; width: 20px; height: 20px; border-radius: 999px; background: linear-gradient(180deg, #ffe6a3, #ffb938); box-shadow: 0 2px 6px rgb(0 0 0 / .4); color: #1a1408;
  font: 800 12px/20px var(--f-display, system-ui); text-align: center; font-style: normal; z-index: 1; }
.bnr-bar { position: absolute; inset-inline: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 18px;
  background: rgb(0 0 0 / .32); border: 1px solid rgb(255 255 255 / .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bnr-bar .grow { flex: 1; min-width: 0; }
.bnr-bar b { display: block; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnr-bar span { display: block; font-size: 12px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnr-btn { flex: none; height: 34px; padding-inline: 14px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; font-size: 13px; }
.bnr-dots { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.bnr-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--faint); transition: width .25s, background .25s; }
.bnr-dots i.on { width: 18px; background: var(--label); }
@media (prefers-reduced-motion: reduce) { .bnr-dots i { transition: none; } }

/* (15 أكتوبر، روح للبوت) ترحيب أبو نود بالرئيسية: فقاعة كلام بلون النجاح، ونسخة ليلية هادئة */
.greet { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 14px; padding-inline-start: 4px; }
.greet-dog { flex: none; height: 64px; width: auto; margin-bottom: -2px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); user-select: none; -webkit-user-drag: none; }
.greet-b { position: relative; flex: 1; min-width: 0; padding: 10px 14px; border-radius: 18px; border-end-start-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line, rgb(127 127 127 / .14)); }
.greet-b b { display: block; font-size: 16px; line-height: 1.35; }
.greet-b span { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; color: var(--up); }
.greet-b span .ic { width: 15px; height: 15px; flex: none; }
.greet.night .greet-b span { color: var(--sub); }
/* (15 أكتوبر) احتفال الربح: بطاقة داكنة فخمة بكل الثيمات + قصاصات ذهبية؛ الحركة المخففة ⇒ قصاصات ثابتة */
.win { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px 20px; pointer-events: none; opacity: 0; transition: opacity .25s; }
.win.on { opacity: 1; pointer-events: auto; }
.win:not(.on) .win-conf { display: none; }
.win-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.win-card { position: relative; width: min(340px, 100%); margin-top: 0; padding: 0 20px 20px; overflow: hidden; border-radius: 28px; text-align: center; color: #fff;
  background: radial-gradient(90% 55% at 50% 0%, rgb(255 205 96 / .26), transparent 70%), linear-gradient(170deg, #1c1e2b, #0b0c12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 30px 80px -20px rgb(0 0 0 / .7); transform: translateY(18px) scale(.96); transition: transform .4s cubic-bezier(.2, .9, .3, 1.25); }
.win.on .win-card { transform: none; }
/* (16 أكتوبر) مقطع أبو نود أعلى البطاقة بعرضها، أطرافه تذوب بالبطاقة (خلفيته كحلية مثلها) */
.win-vid { display: block; width: calc(100% + 40px); max-width: none; max-height: 42vh; aspect-ratio: 1; height: auto; margin: 0 -20px 2px; object-fit: cover; background: #151722;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
/* (16 أكتوبر) الاحتفال + مقطع الرمش فوقه بنفس المكان والقناع؛ الرمش يظهر أول ما يشتغل */
.win-media { position: relative; width: calc(100% + 40px); max-height: 42vh; aspect-ratio: 1; margin: 0 -20px 2px; background: #151722; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.win-media .win-vid { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; -webkit-mask-image: none; mask-image: none; }
.win-media .win-idle { opacity: 0; }
.win-media .win-idle.on { opacity: 1; }
.win-t { display: block; font: 800 24px/1.25 var(--f-display, system-ui); }
.win-v { margin-top: 2px; font: 800 44px/1.15 var(--f-display, system-ui); color: #34c759; }
.win-card p { margin: 2px 0 16px; font-size: 15px; color: rgb(255 255 255 / .72); }
.win-btns { display: flex; gap: 10px; }
.win-btns button { flex: 1; height: 46px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.win-b1 { background: #fff; color: #111; }
.win-b2 { background: rgb(255 255 255 / .12); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.win-conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.win-conf i { position: absolute; top: -24px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)) scale(var(--s));
  animation: winfall 2.8s var(--d) cubic-bezier(.25, .6, .4, 1) both; }
@keyframes winfall { from { transform: translateY(0) rotate(var(--r)) scale(var(--s)); } to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)) scale(var(--s)); } }
@media (prefers-reduced-motion: reduce) { .win-conf i { animation: none; top: var(--y); } .win, .win-card { transition: none; } }

/* (15 أكتوبر، المالك: «كلمة الدفع ton connect غبية») بطاقة «اشحن من محفظتك» بالمحفظة: لوحة داكنة فخمة بأبو نود وشعاري العملتين */
.paycard { position: relative; display: flex; align-items: center; width: 100%; min-height: 116px; margin: 14px 0 6px; padding: 16px 18px; padding-inline-end: 138px;
  border-radius: 24px; overflow: hidden; color: #fff; text-align: start; isolation: isolate;
  background: radial-gradient(70% 120% at 12% 30%, rgb(255 205 96 / .22), transparent 62%), linear-gradient(160deg, #1d2030, #0b0c12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), 0 16px 32px -20px rgb(0 0 0 / .7); transition: transform .15s; }
.paycard:active { transform: scale(.98); }
.paycard .grow { position: relative; z-index: 1; min-width: 0; }
.paycard b { display: block; font: 800 19px/1.3 var(--f-display, system-ui); }
.paycard .grow > span { display: block; margin-top: 3px; font-size: 13px; color: rgb(255 255 255 / .74); }
.paycard-coins { display: flex !important; gap: 6px; margin-top: 10px; }
.paycard-coins .coin { width: 28px; height: 28px; font-size: 9px; box-shadow: 0 4px 10px rgb(0 0 0 / .4); }
.paycard-dog { position: absolute; z-index: 0; inset-inline-end: 4px; bottom: -40px; height: 162px; width: auto; pointer-events: none; user-select: none;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / .55)); }
/* نافذة الدفع: أبو نود بفقاعة، أسماء المحافظ، والعملة بطاقتين */
.payhero { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.payhero-dog { flex: none; height: 62px; width: auto; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); user-select: none; }
.payhero-b { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 18px; border-end-start-radius: 6px; background: var(--card); font-weight: 600; font-size: 14.5px; line-height: 1.45;
  box-shadow: inset 0 0 0 1px var(--line, rgb(127 127 127 / .14)); }
.wallets { display: flex; flex-wrap: wrap; gap: 8px; }
.wallets button { padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--label); background: var(--card); box-shadow: inset 0 0 0 1px var(--line, rgb(127 127 127 / .14)); transition: transform .15s; }
.wallets button:active { transform: scale(.96); }
.step.done .wl-ic { flex: none; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35)); }
.assets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.asset { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; text-align: start; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line, rgb(127 127 127 / .16)); transition: box-shadow .2s, transform .15s; }
.asset:active { transform: scale(.98); }
.asset[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent), 0 6px 16px -10px var(--accent); }
.asset .coin { flex: none; width: 36px; height: 36px; }
.asset .grow { min-width: 0; }
.asset b { display: block; font-size: 16px; }
.asset .grow > span { display: block; font-size: 12px; color: var(--sub); line-height: 1.35; }

/* (15 أكتوبر، بقية الواجهات) الحالة الفاضية بأبو نود، والترحيب أول مرة */
.empty.has-dog { display: grid; justify-items: center; text-align: center; padding-top: 18px; }
.empty-dog { height: 118px; width: auto; margin-bottom: 6px; filter: drop-shadow(0 10px 16px rgb(0 0 0 / .3)); user-select: none; -webkit-user-drag: none; }
.empty.has-dog .hint { max-width: 32ch; }
.onb-hero { display: grid; justify-items: center; margin-bottom: -6px; }
.onb-dog { height: 190px; width: auto; filter: drop-shadow(0 16px 24px rgb(0 0 0 / .35)); user-select: none; -webkit-user-drag: none; }
.onb-say { justify-content: center; margin: 10px 0 14px; }
.onb-say .payhero-b { flex: 0 1 auto; border-radius: 18px; text-align: center; font-size: 15px; }
/* (المالك: «ما لقيت أدوّر على الفرصة الجاية…») فقاعة كلام فوق أبو نود بالحالة الفاضية */
.empty-say { position: relative; margin-bottom: 10px; padding: 8px 14px; border-radius: 16px; font-weight: 700; font-size: 14.5px; color: var(--label);
  background: var(--tile, var(--card)); box-shadow: inset 0 0 0 1px var(--line, rgb(127 127 127 / .16)); }
.empty-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: inherit; box-shadow: inset -1px -1px 0 0 var(--line, rgb(127 127 127 / .16)); border-radius: 2px; }
.payhero.warn .payhero-b { box-shadow: inset 0 0 0 1.5px var(--orange, #ff9f0a); }
/* (المالك: «صورة ابو نود ناقصه») صورة النص العلوي لاصقة بحافة الكرت السفلية (كأنه واقف ورا الحافة) لا طايرة بقصّة صدر واضحة */
.alert.has-dog { position: relative; overflow: hidden; padding-inline-end: 112px; }
.alert-dog { position: absolute; bottom: 0; inset-inline-end: 8px; height: 96px; width: 100px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); user-select: none; -webkit-user-drag: none; }
/* وبالترحيب والفقاعات (ما في حافة يلصق بها): أسفل الصورة يتلاشى بدل خط القص */
.greet-dog, .payhero-dog { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.soon-dog { display: block; height: 200px; width: auto; margin: 0 auto 6px; filter: drop-shadow(0 16px 24px rgb(0 0 0 / .35)); user-select: none; -webkit-user-drag: none; }

/* (15 أكتوبر، المالك: «صفحة الاعدادات ترتبها اكثر») بطاقة أبو نود، عناوين بأيقونة، وأيقونة ملوّنة بأول كل صف */
.setprof { position: relative; display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; padding: 14px 16px; padding-inline-start: 104px; min-height: 100px;
  border-radius: 24px; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(70% 120% at 88% 30%, rgb(255 205 96 / .2), transparent 60%), linear-gradient(160deg, #1d2030, #0b0c12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.setprof-dog { position: absolute; inset-inline-start: 6px; bottom: 0; height: 96px; width: 92px; object-fit: contain; object-position: bottom center; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .5)); }
.setprof .grow { min-width: 0; flex: 1; }
.setprof b { display: block; font: 800 19px/1.3 var(--f-display, system-ui); }
.setprof .grow > span { display: block; font-size: 13px; color: rgb(255 255 255 / .7); }
.setprof .setprof-st { display: flex !important; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.setprof-st i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #30d158; box-shadow: 0 0 0 3px rgb(48 209 88 / .2); }
.setprof-st.off i { background: #ff9f0a; box-shadow: 0 0 0 3px rgb(255 159 10 / .2); }
.group-t { display: flex; align-items: center; gap: 8px; }
.group-t .ic { width: 17px; height: 17px; flex: none; opacity: .8; }
.set-sub { margin: 10px 4px 6px; font-size: 13px; font-weight: 600; color: var(--sub); }
.field > .fi { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--fc); color: #fff; margin-inline-end: 10px; }
.field > .fi .ic { width: 18px; height: 18px; }
.field > .av-ph { flex: none; margin-inline-end: 10px; }
.sigclosing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; color: var(--sub); }
.hint.warn { color: var(--orange, #ff9f0a); font-weight: 600; }

/* (16 أكتوبر 2026) المحفظة: بطاقة العنوان الخاص (نسخ وQR بنفسها) + مربع ملوّن لكل حركة */
.group-t + .paycard { margin-top: 0; }
.depcard { display: grid; gap: 10px; margin-top: 10px; padding: 14px 16px; background: var(--card); border-radius: 22px; box-shadow: 0 0 0 .5px var(--sep); }
.dep-hd { display: flex; align-items: center; gap: 12px; }
.dep-hd .grow { flex: 1; min-width: 0; }
.dep-hd .grow b { display: block; font-size: 15px; font-weight: 600; }
.dep-hd .grow span { font-size: 12.5px; color: var(--sub); }
.dep-addr { display: block; padding: 10px 12px; border-radius: 12px; background: var(--tile); color: var(--label); direction: ltr; text-align: left;
  font: 600 13.5px/1.45 ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.dep-btns { display: flex; gap: 8px; }
.dep-btns .btn { flex: 1; }
.dep-note { font-size: 12.5px; color: var(--sub); }
.dep-or { margin: 18px 16px 7px; font-size: 13px; color: var(--sub); }
.row > .fi, .dep-hd > .fi { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--fc); color: #fff; }
.row > .fi .ic, .dep-hd > .fi .ic { width: 20px; height: 20px; }

/* (16 أكتوبر) ورقة QR: شعار Node بنص الرمز + سطر العملات */
.qrbox { position: relative; }
.qr-logo { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 22%; border: 4px solid #fff; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.qr-coins { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 14px; font-size: 13px; color: var(--sub); }
.qr-coins .coin { width: 24px; height: 24px; font-size: 9px; }
.qr-coins span:last-child { margin-inline-start: 4px; }

/* (16 أكتوبر) لوحة المالك: «يحتاج انتباهك» */
.own-att { margin-bottom: 14px; }
.own-att .payhero { margin-bottom: 10px; }

/* (16 أكتوبر) نافذة الشحن: «من محفظتك بضغطة» صف واضح، وتحته عنوانه الخاص */
.payopt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 22px; background: var(--card); color: var(--label); text-align: start;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.payopt:active { transform: scale(.98); }
.payopt .grow { flex: 1; min-width: 0; }
.payopt .grow b { display: block; font-size: 15px; font-weight: 600; }
.payopt .grow span { font-size: 12.5px; color: var(--sub); }
.payopt > .fi { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--fc); color: #fff; }
.payopt > .fi .ic { width: 20px; height: 20px; }

/* (19 أكتوبر 2026) صورة المتداول في ورقة نتائجه */
.card.hero.ti { position: relative; }
.ti-av { position: absolute; top: 16px; inset-inline-end: 16px; }
.ti-av .dicon.av-ph { width: 56px; height: 56px; font-size: 22px; }

/* (22 أكتوبر 2026) بطاقة دين المتداول: العنوان داخلها بعرض كامل */
.alert.debt > div { min-width: 0; flex: 1; }
.alert.debt .list { margin: 10px 0 0; }
.alert.debt code { word-break: break-all; }

/* (25 أكتوبر 2026) تبويب «غرام» */
.gacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.gacts .btn { width: 100%; padding-inline: 12px; }
.gacts.g1 { grid-template-columns: minmax(0, 1fr); }   /* (12 نوفمبر 2026) زر وحيد بعرض كامل: «سد كل صفقاتي على كل المنصات» */
.gpre { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; margin: 0; max-height: 360px; overflow: auto; }
.gchk { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--sep); display: inline-grid; place-items: center; background: transparent; color: var(--accent-ink, #fff); }
.gchk[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.gchk .ic { width: 16px; height: 16px; }
.gh { margin: 4px 2px 2px; font-size: 18px; }
.gsub { margin: 0 2px 10px; color: var(--sub); font-size: 13px; }
.gtools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.gpos .acts { margin-top: 10px; }
/* (المرحلة 2 لتبويب غرام) تأكيد السحب في ربط المنصة، وأكثر من عنوان IP بالخطوة */
.gchkline { display: flex; gap: 8px; align-items: center; margin: 10px 2px; font-size: 14px; }
.gchkline input { width: 18px; height: 18px; accent-color: var(--accent); }
.steps .ipline { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.gacts .btn-block { flex: 1 1 100%; }
.gh.gterms { margin: 8px 4px 12px; font-size: 20px; line-height: 1.35; }
/* (25 أكتوبر، المالك: «الخانة محشوكة») حالة فاضية بتبويب بوت الخطوة: مسافات داخلية ونص هادئ بالوسط */
.card.gempty { padding: 18px 20px; color: var(--sub); text-align: center; font-size: 14px; line-height: 1.6; }