:root {
    --bg1:#1a0f0a; --bg2:#2b1810; --card:#3a241a; --card2:#2f1d14;
    --gold:#c9a961; --gold-light:#e8d5a8; --ink:#f5efe6; --muted:#b8a898;
    --line:rgba(255,255,255,.08); --bad:#e05252; --ok:#3ecf8e; --btn:#c9a961;
    /* صور الخلفية */
    --bg-image:none; --bg-image-size:cover; --bg-image-repeat:no-repeat; --bg-image-opacity:1;
    --card-image:none; --card-image-size:cover; --card-image-repeat:no-repeat; --card-image-opacity:1;

    /* ===== طبقة الزجاج — كلها مشتقة من الألوان التسعة أعلاه =====
       يعني أي لون تغيّره من الإعدادات، الزجاج يتبعه تلقائياً */
    --glass-tint: color-mix(in srgb, var(--card) 62%, transparent);   /* جسم الزجاج */
    --glass-soft: color-mix(in srgb, var(--card) 40%, transparent);   /* زجاج أخف */
    --glass-edge: color-mix(in srgb, var(--gold) 26%, transparent);   /* الحافة المضيئة */
    --glass-rim:  color-mix(in srgb, var(--ink) 14%, transparent);    /* الإطار الداخلي */
    --glass-blur: 16px;
    --glass-shadow: 0 6px 22px -10px color-mix(in srgb, var(--bg1) 72%, transparent);
    --glass-glow: 0 0 0 1px color-mix(in srgb, var(--gold) 15%, transparent);
    --ease: cubic-bezier(.22,.61,.36,1);
    /* لون النص فوق الأزرار واللمسات — يُحسب تلقائياً في shared.js حسب سطوع اللون.
       القيم هنا احتياطية فقط لو تعذّر تشغيل الجافاسكربت */
    --on-btn: #15242e; --on-gold: #15242e;
  }

  /* احتياطي للمتصفحات القديمة اللي ما تعرف color-mix */
  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root {
      --glass-tint: var(--card); --glass-soft: var(--card2);
      --glass-edge: var(--line); --glass-rim: var(--line);
      --glass-shadow: 0 6px 22px -10px rgba(0,0,0,.45); --glass-glow: none;
    }
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body {
    font-family:'Tajawal',Tahoma,Arial,sans-serif; min-height:100vh;
    background:
      radial-gradient(900px 560px at 82% -8%,  color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%),
      radial-gradient(760px 520px at 12% 102%, color-mix(in srgb, var(--gold-light) 11%, transparent), transparent 60%),
      linear-gradient(165deg, var(--bg1), color-mix(in srgb, var(--bg1) 82%, var(--card)));
    background-attachment: fixed;
    color:var(--ink);
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    position:relative;
  }
  /* طبقة صورة خلفية الصفحة — تحت المحتوى، بشفافية قابلة للتحكم */
  body::before {
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image: var(--bg-image);
    background-size: var(--bg-image-size);
    background-repeat: var(--bg-image-repeat);
    background-position: center;
    opacity: var(--bg-image-opacity);
  }
  #root { max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
  .topbar {
    display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
    background: color-mix(in srgb, var(--bg1) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border-bottom: 1px solid var(--glass-rim);
  }
  .brand { font-weight:800; font-size:16px; }
  .brand small { display:block; font-size:10px; color:var(--muted); font-weight:400; }
  .logo {
    width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
    font-weight:800; color:var(--on-gold); overflow:hidden;
    background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 55%, var(--bg1)));
    box-shadow: 0 3px 12px -4px color-mix(in srgb, var(--gold) 55%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
  }
  .page { flex:1; padding:16px 18px 90px; display:none; }
  .page.active { display:block; }
  .card {
    background: var(--glass-tint);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
    backdrop-filter: blur(var(--glass-blur)) saturate(135%);
    border: 1px solid var(--glass-rim);
    border-radius: 18px; padding: 20px; margin-bottom: 14px;
    position: relative; overflow: hidden;
    box-shadow: var(--glass-shadow), inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
    animation: glassIn .42s var(--ease) both;
  }
  /* الحافة العلوية المضيئة */
  .card::after {
    content:''; position:absolute; top:0; inset-inline:14%; height:1px; z-index:2; pointer-events:none;
    background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
  }
  @keyframes glassIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { .card { animation:none; } }

  /* بطاقات قابلة للطي (تبويبي الإعدادات والمحتوى بلوحة الإدمن) */
  #tab-content > .card > h1, #tab-settings > .card > h1 {
    cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  #tab-content > .card > h1::after, #tab-settings > .card > h1::after {
    content:'▾'; font-size:13px; color:var(--muted); transition:transform .2s var(--ease); flex-shrink:0;
  }
  #tab-content > .card.collapsed > h1::after, #tab-settings > .card.collapsed > h1::after { transform:rotate(-90deg); }
  #tab-content > .card.collapsed > *:not(h1), #tab-settings > .card.collapsed > *:not(h1) { display:none; }
  #tab-content > .card.collapsed, #tab-settings > .card.collapsed { padding-bottom:20px; }
  /* طبقة صورة خلفية البطاقة — تحت محتوى البطاقة، بشفافية قابلة للتحكم */
  .card::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image: var(--card-image);
    background-size: var(--card-image-size);
    background-repeat: var(--card-image-repeat);
    background-position: center;
    opacity: var(--card-image-opacity);
    border-radius:inherit;
  }
  .card > * { position:relative; z-index:1; }
  .center { text-align:center; }
  h1 { font-size:18px; margin-bottom:4px; }
  label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
  input, select, textarea {
    width:100%; padding:12px 14px; border-radius:12px;
    border:1px solid var(--glass-rim);
    background: var(--glass-soft);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    color:var(--ink); font-family:inherit; font-size:14px; margin-bottom:14px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  }
  input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
  input:focus, select:focus, textarea:focus {
    outline:none;
    border-color: color-mix(in srgb, var(--gold) 58%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 17%, transparent);
    background: color-mix(in srgb, var(--card) 55%, transparent);
  }
  button {
    border:0; border-radius:12px; padding:12px 16px; font-family:inherit;
    font-weight:700; font-size:14px; cursor:pointer;
    transition: transform .14s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
  }
  button:active { transform: translateY(1px) scale(.994); }
  .btn-primary {
    width:100%; color:var(--on-btn); position:relative; overflow:hidden;
    background: linear-gradient(135deg, var(--btn), color-mix(in srgb, var(--btn) 58%, var(--bg1)));
    box-shadow: 0 5px 16px -7px color-mix(in srgb, var(--btn) 72%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
  }
  /* لمعة تمر على الزر عند اللمس */
  .btn-primary::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, #fff 26%, transparent) 50%, transparent 62%);
    transform: translateX(-120%); transition: transform .62s var(--ease);
  }
  .btn-primary:hover::after, .btn-primary:active::after { transform: translateX(120%); }
  .btn-ghost {
    background: var(--glass-soft); color:var(--ink);
    border:1px solid var(--glass-rim);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .btn-ghost:hover { border-color: color-mix(in srgb, var(--gold) 42%, transparent); }
  .btn-danger {
    background: color-mix(in srgb, var(--bad) 15%, transparent); color:var(--bad);
    border:1px solid color-mix(in srgb, var(--bad) 28%, transparent);
  }
  @media (prefers-reduced-motion: reduce) { button, .btn-primary::after { transition:none; } }
  .btn-sm { padding:7px 12px; font-size:12px; }
  .msg { font-size:13px; margin-top:8px; min-height:18px; }
  .msg.err { color:var(--bad); } .msg.ok { color:var(--ok); }
  .row { display:flex; gap:10px; }
  .row > * { flex:1; }
  .cust-item { background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:13px; padding:14px; margin-bottom:10px; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
  .cust-item .name { font-weight:700; }
  .cust-item .phone { color:var(--muted); font-size:12px; direction:ltr; text-align:right; }
  .cust-item .bal { color:var(--gold-light); font-weight:800; direction:ltr; text-align:right; }
  .cust-menu-btn {
    flex-shrink:0; width:30px; height:30px; border-radius:9px; font-size:18px; font-weight:800;
    background:var(--glass-soft); border:1px solid var(--glass-rim); color:var(--ink); cursor:pointer;
    display:grid; place-items:center; line-height:1;
  }
  .cust-menu-btn:hover { border-color:color-mix(in srgb, var(--gold) 35%, transparent); }
  .cust-menu { display:flex; flex-direction:column; gap:7px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
  .cust-menu.hidden { display:none; }
  .cust-menu button { width:100%; text-align:center; }
  .cust-details { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:7px; }
  .cust-details .d-row { font-size:11.5px; color:var(--muted); line-height:1.6; }
  .cust-details .d-row b { color:var(--ink); }
  .cust-details .d-row.gold { color:var(--gold-light); font-weight:700; font-size:12px; }
  .cust-details .d-row.gold b { color:var(--gold-light); }
  /* تفاصيل الأكواد حسب الباقة ببطاقة الزبون (لوحة الإدمن): اليمين اسم الباقة + جيجاتها، واليسار العدد */
  .pkg-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--gold-light); }
  .pkg-head b { font-size:12.5px; direction:rtl; }
  .pkg-list { border:1px solid var(--line); border-radius:12px; background:var(--card2); overflow:hidden; }
  .pkg-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; }
  .pkg-row + .pkg-row { border-top:1px solid var(--line); }
  .pkg-info { display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; }
  .pkg-name { font-size:15.5px; font-weight:800; color:var(--ink); }
  .pkg-gb {
    font-size:12.5px; font-weight:800; direction:ltr; color:var(--gold-light);
    background:color-mix(in srgb, var(--gold) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--gold) 28%, transparent);
    border-radius:20px; padding:2px 10px;
  }
  .pkg-count { flex-shrink:0; text-align:center; line-height:1.15; min-width:44px; }
  .pkg-count b { display:block; font-size:22px; font-weight:800; color:var(--gold-light); direction:ltr; }
  .pkg-count i { display:block; font-style:normal; font-size:10px; color:var(--muted); margin-top:1px; }

  /* شريط الأخبار (صفحات الزبون): تحت الهيدر، بحجم متوسط، رسالة وحدة */
  .newsbar { margin:10px 18px 0; }
  .newsbar-in {
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px;
    background:var(--glass-soft); border:1px solid color-mix(in srgb, var(--gold) 32%, var(--glass-rim));
    color:var(--ink); font-size:13px; font-weight:600; line-height:1.6; text-decoration:none;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .newsbar-ic { flex-shrink:0; font-size:15px; line-height:1; }
  .newsbar-go { flex-shrink:0; color:var(--gold-light); font-size:14px; }
  a.newsbar-in.has-link:hover { border-color:color-mix(in srgb, var(--gold) 55%, transparent); }
  .newsbar-track { position:relative; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-align:center; height:1.6em; }
  .newsbar-text { display:inline-block; }
  .newsbar-track.marquee .newsbar-text {
    position:absolute; left:0; top:0; will-change:transform;
    animation:newsTicker var(--dur, 20s) linear infinite;
  }
  .newsbar-in:hover .newsbar-track.marquee .newsbar-text,
  .newsbar-in:active .newsbar-track.marquee .newsbar-text { animation-play-state:paused; }
  .newsbar-track.wrap { height:auto; white-space:normal; text-align:right; }
  @keyframes newsTicker { from { transform:translateX(var(--from)); } to { transform:translateX(var(--to)); } }
  @media (prefers-reduced-motion: reduce) {
    .newsbar-track.marquee .newsbar-text { animation:none; position:static; }
  }

  .pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; padding:4px 2px; }
  .pager span { font-size:12px; color:var(--muted); font-weight:700; }
  .pager button[disabled] { opacity:.4; pointer-events:none; }
  .badge { display:inline-block; font-size:11px; padding:3px 9px; border-radius:20px; font-weight:700; }
  .badge.active { background:rgba(62,207,142,.16); color:var(--ok); }
  .badge.banned { background:rgba(224,82,82,.16); color:var(--bad); }
  .badge.muted { background:rgba(255,255,255,.08); color:var(--muted); }
  .footer { text-align:center; padding:14px; color:var(--muted); font-size:11px; }
  .hidden { display:none !important; }
  .tabbar { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:14px; }
  .tab {
    color:var(--muted); border-radius:11px; padding:9px 10px;
    font-size:12.5px; font-weight:700; text-align:center;
    background: var(--glass-soft);
    border:1px solid transparent;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .tab:hover { color:var(--ink); }
  .tab[data-tab="wholesale"] { grid-column:1 / -1; }
  .tab.active {
    color: var(--on-gold);
    background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 58%, var(--bg1)));
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--gold) 68%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
  }
  .tabpanel { display:none; }
  .tabpanel.active { display:block; }
  .cat-item, .srv-item, .offer-item { background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:13px; padding:14px; margin-bottom:10px; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
  .item-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .mini-badge { display:inline-block; font-size:11px; padding:3px 9px; border-radius:20px; font-weight:700; background:rgba(255,255,255,.08); color:var(--muted); margin-inline-end:6px; }
  .offer-card {
    background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:15px;
    padding:16px; margin-bottom:12px; position:relative; overflow:hidden;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
  }
  .offer-card:hover { transform:translateY(-2px); border-color: color-mix(in srgb, var(--gold) 34%, transparent); }
  .featured-heading { display:flex; align-items:center; gap:8px; margin:4px 0 10px; font-size:16px; font-weight:800; }
  .featured-card {
    background: linear-gradient(160deg, var(--glass-soft), var(--glass-tint));
    border:1px solid color-mix(in srgb, var(--gold) 46%, transparent);
    border-radius:15px; padding:16px; margin-bottom:12px; position:relative;
    -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%);
    box-shadow: 0 0 22px -14px color-mix(in srgb, var(--gold) 72%, transparent);
  }
  .featured-card .popular-badge { position:absolute; top:-9px; left:14px; background:linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--gold) 58%,var(--bg1))); color:var(--on-gold); font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px; z-index:3; box-shadow:0 2px 8px -3px color-mix(in srgb, var(--gold) 70%, transparent); }
  .featured-card .cat-pill { font-size:11px; color:var(--muted); margin-top:2px; }
  .gb-badge {
    display:inline-block; margin-inline-start:7px; font-size:11px; font-weight:800;
    color:var(--gold-light); background:color-mix(in srgb, var(--gold) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--gold) 28%, transparent);
    border-radius:20px; padding:2px 9px; direction:ltr; vertical-align:middle;
  }
  .offer-card .price { font-size:22px; font-weight:800; color:var(--gold-light); direction:ltr; text-align:left; }
  .offer-card .feat { font-size:12px; color:var(--muted); margin-top:6px; }
  .offer-card .unavail { color:var(--bad); font-size:12px; font-weight:700; margin-top:8px; }
  .cat-browse-item {
    background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:15px;
    padding:16px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;
    cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition: transform .18s var(--ease), border-color .18s var(--ease);
  }
  .cat-browse-item:hover { transform:translateX(-3px); border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
  .banner-slide { border-radius:16px; padding:22px 18px; margin-bottom:14px; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--card2), var(--card)); background-size:cover; background-position:center; min-height:120px; display:flex; flex-direction:column; justify-content:center; }
  .banner-slide .banner-tag { display:inline-block; background:color-mix(in srgb, var(--bg1) 55%, transparent); color:var(--gold-light); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:8px; width:fit-content; }
  .banner-slide h2 { font-size:19px; margin-bottom:4px; text-shadow:0 1px 4px color-mix(in srgb, var(--bg1) 62%, transparent); }
  .banner-slide p { font-size:13px; color:var(--muted); text-shadow:0 1px 4px color-mix(in srgb, var(--bg1) 62%, transparent); margin-bottom:10px; }
  /* بالثيم الفاتح الظل يضر أكثر مما ينفع ما لم تكن هناك صورة خلفية */
  [data-theme-light="yes"] .banner-slide:not([style*="background-image"]) h2,
  [data-theme-light="yes"] .banner-slide:not([style*="background-image"]) p { text-shadow:none; }
  .banner-slide .banner-btns { display:flex; gap:8px; }
  .banner-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.35); color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; }
  .banner-nav.prev { right:10px; } .banner-nav.next { left:10px; }
  .sub-card { background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:13px; padding:14px; margin-top:10px; text-align:center; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
  .sub-card .qr-box { background:#fff; border-radius:10px; padding:10px; display:inline-block; margin:10px 0; }
  .sub-card .qr-box svg { display:block; width:160px; height:160px; }
  .wh-card { padding:16px; }
  .wh-title { margin:0 0 4px; font-size:17px; }
  .wh-line { color:var(--muted); font-size:12.5px; margin-bottom:12px; }
  .wh-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; }
  .wh-grid label { display:block; font-size:12px; margin-bottom:4px; }
  .wh-grid input { width:100%; text-align:center; direction:ltr; }
  .wh-card .btn-primary { width:100%; margin-top:12px; }
  .wh-hint { color:var(--muted); font-size:11.5px; margin-top:10px; text-align:center; }
  .wh-results { margin-top:14px; padding-top:12px; border-top:1px solid var(--glass-rim); }
  .wh-results-head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:700; margin-bottom:8px; }
  .wh-results-list { display:flex; flex-wrap:wrap; gap:8px; }
  .wh-dl { display:inline-block; padding:8px 12px; border-radius:10px; background:var(--glass-soft); border:1px solid var(--glass-rim); color:var(--gold-light); font-size:13px; font-weight:700; text-decoration:none; direction:ltr; }
  .wh-dl:active { transform:translateY(1px); }
  .subs-item .sub-file-link { margin-top:8px; text-align:center; }
  body.wholesale .store-only { display:none !important; }
  .wh-only { display:none !important; }
  body.wholesale .wh-only { display:flex !important; }
  body.wholesale .nav-top { grid-template-columns:repeat(4, 1fr); }
  .subs-item .sub-undl { margin-top:10px; text-align:center; }
  .subs-item .sub-undl .msg { margin:6px 0 0; min-height:0; font-size:12px; }
  .subs-item .sub-file { margin-top:12px; text-align:center; }
  .subs-item .sub-file-hint { margin-top:6px; color:var(--muted); font-size:12px; }
  .subs-item .sub-file .msg { margin:6px 0 0; min-height:0; font-size:12px; }
  .subs-item .sub-toggle { margin-top:10px; text-align:center; }
  .subs-item .sub-toggle .msg { margin:6px 0 0; min-height:0; font-size:12px; }
  /* حالة ملف الجملة: نقطة + كلمة بنفس اللون */
  .fs { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; background:var(--glass-soft); border:1px solid var(--glass-rim); }
  .fs-dot { width:9px; height:9px; border-radius:50%; background:currentColor; display:inline-block; }
  .fs-online   { color:var(--ok,#3ecf8e); }
  .fs-offline  { color:var(--warn,#f2b84b); }
  .fs-finished { color:var(--bad,#e05252); }
  .fs-disabled, .fs-unknown { color:var(--muted); }
  .subs-item .sub-regen { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
  .subs-item .sub-regen .msg { margin:0; min-height:0; font-size:12px; }
  .sub-link-row { display:flex; gap:8px; align-items:center; margin-top:8px; }
  .sub-link-row input { flex:1; direction:ltr; text-align:left; font-family:monospace; font-size:11px; margin:0; }
  .live-status { background:var(--card); border-radius:10px; padding:10px 12px; margin-top:10px; text-align:right; }
  .live-status .row-line { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-top:4px; }
  .live-status .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-start:5px; }
  .dot.on { background:var(--ok); } .dot.off { background:var(--bad); } .dot.unknown { background:var(--muted); }
  .live-refresh-btn { font-size:11px; padding:4px 10px; }
  /* حقل كلمة المرور مع زر إظهار/إخفاء */
  .pw-field { position:relative; }
  .pw-field input { padding-inline-start:44px; }
  .pw-field .pw-eye {
    position:absolute; inset-inline-start:6px; top:0; height:46px;
    background:transparent; border:0; padding:0 10px; cursor:pointer;
    font-size:17px; line-height:1; color:var(--muted); display:flex; align-items:center;
  }
  .pw-field .pw-eye:hover { color:var(--gold-light); }

  /* ===== دفتر مبيعات الموزّع — لوحة ترتيب مفتوحة ===== */
  .sal-wrap { font-size:12px; position:relative; }

  .sal-bell { position:absolute; top:2px; inset-inline-end:2px; background:transparent; border:0; cursor:pointer; font-size:17px; padding:5px 6px; color:var(--muted); z-index:2; }
  .sal-bell:hover { color:var(--gold-light); }
  .sal-bell .n { position:absolute; top:-1px; inset-inline-end:-1px; background:var(--gold); color:var(--on-gold); font-size:8px; font-weight:800; min-width:13px; height:13px; border-radius:7px; display:grid; place-items:center; padding:0 2px; }

  /* الرقم الكبير: إجمالي المبيعات بلا أي حلقة أو رسم بياني */
  .sal-hero { text-align:center; padding:20px 10px 14px; }
  .sal-hero b { display:block; font-size:36px; font-weight:800; color:var(--gold-light); direction:ltr; line-height:1.15; letter-spacing:-.5px; }
  .sal-hero i { display:block; margin-top:6px; font-size:12px; color:var(--muted); font-style:normal; }

  /* إحصائيات فرعية: ملف / زبون */
  .sal-sub { display:flex; align-items:center; justify-content:center; gap:30px; padding-bottom:18px; margin-bottom:16px; border-bottom:1px solid var(--line); }
  .sal-sub .s { text-align:center; line-height:1.3; }
  .sal-sub .s b { display:block; font-size:17px; font-weight:800; color:var(--ink); direction:ltr; }
  .sal-sub .s i { display:block; font-size:10px; color:var(--muted); font-style:normal; margin-top:2px; }

  /* نموذج الإضافة */
  .sal-form { display:grid; grid-template-columns:1.6fr .8fr 1fr auto; gap:6px; margin-bottom:14px; }
  .sal-form input, .sal-form select { margin:0; padding:8px 8px; font-size:12px; border-radius:8px; min-width:0; }
  .sal-form .ok {
    padding:8px 11px; font-size:13px; font-weight:800; border-radius:9px; cursor:pointer; border:0;
    background: linear-gradient(135deg, var(--btn), color-mix(in srgb, var(--btn) 58%, var(--bg1)));
    color: var(--on-btn);
    box-shadow: 0 3px 11px -5px color-mix(in srgb, var(--btn) 72%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
  }
  .sal-form .ok:disabled { opacity:.5; cursor:default; }

  /* صف الزبون — لوحة ترتيب */
  .sal-row {
    background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:14px;
    padding:13px 14px; margin-bottom:10px; cursor:pointer;
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    transition: border-color .18s var(--ease), background .18s var(--ease);
  }
  .sal-row:hover { border-color: color-mix(in srgb, var(--gold) 32%, transparent); }
  .sal-row.open { background: var(--glass-tint); border-color: color-mix(in srgb, var(--gold) 26%, transparent); }
  .sal-row .head { display:flex; align-items:center; gap:10px; }
  .sal-row .rank { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--muted); font-size:11px; font-weight:800; display:grid; place-items:center; }
  .sal-row.top .rank { background:linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--gold) 58%,var(--bg1))); color:var(--on-gold); }
  .sal-row .nm { flex:1; font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sal-row .qt { flex:0 0 auto; font-size:12px; color:var(--muted); direction:ltr; }
  .sal-row .am { flex:0 0 auto; font-size:13px; font-weight:800; color:var(--gold-light); direction:ltr; }
  .sal-row .car { flex:0 0 auto; font-size:9px; color:var(--muted); transition:transform .15s; }
  .sal-row.open .car { transform:rotate(180deg); }

  /* الشريط النسبي: مقارنة بصرية بأكثر زبون شراءً */
  .sal-row .bar { margin-top:10px; height:6px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; }
  .sal-row .bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 55%,var(--bg1)),var(--gold)); }

  /* عمليات الزبون (تنفتح بالضغط) */
  .sal-ops { margin-top:7px; padding-top:7px; border-top:1px solid var(--line); }
  .sal-op { display:flex; align-items:center; gap:6px; padding:5px 0; font-size:11px; }
  .sal-op + .sal-op { border-top:1px dashed var(--line); }
  .sal-op .d { flex:1; color:var(--muted); direction:ltr; text-align:right; font-size:10px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sal-op .v { flex:0 0 auto; direction:ltr; }
  .sal-op .ic { flex:0 0 auto; background:transparent; border:0; cursor:pointer; font-size:12px; padding:2px 3px; color:var(--muted); line-height:1; }
  .sal-op .ic:hover { color:var(--gold-light); }
  .sal-op .ic.del:hover { color:var(--bad, #e06a5a); }
  .sal-ops .foot { display:flex; justify-content:flex-end; margin-top:6px; }
  .sal-ops .foot button { font-size:10px; padding:4px 9px; border-radius:7px; background:transparent; border:1px solid var(--line); color:var(--bad, #e06a5a); cursor:pointer; font-family:inherit; }

  /* تعديل سطري */
  .sal-edit { display:grid; grid-template-columns:1.6fr .8fr 1fr auto auto; gap:4px; padding:5px 0; }
  .sal-edit input { margin:0; padding:6px 7px; font-size:11px; border-radius:7px; min-width:0; }
  .sal-edit button { padding:6px 8px; font-size:11px; border-radius:7px; border:0; cursor:pointer; font-family:inherit; }
  .sal-edit .sv { background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--btn) 58%,var(--bg1))); color:var(--on-btn); font-weight:800; }
  .sal-edit .cn { background:var(--card); color:var(--muted); }

  /* سجل الإشعارات */
  .sal-logs { background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:12px; padding:8px 10px; margin-bottom:8px; max-height:168px; overflow-y:auto; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .sal-log { display:flex; gap:6px; padding:4px 0; font-size:10px; line-height:1.4; }
  .sal-log + .sal-log { border-top:1px dashed var(--line); }
  .sal-log .t { flex:0 0 auto; font-size:11px; }
  .sal-log .x { flex:1; min-width:0; }
  .sal-log .x span { display:block; color:var(--muted); font-size:9px; direction:ltr; text-align:right; }

  .sal-empty { text-align:center; color:var(--muted); font-size:11px; padding:14px 0; }
  .sal-msg { font-size:11px; margin-bottom:7px; }

  @media (max-width:420px) {
    .sal-form, .sal-edit { grid-template-columns:1fr 1fr; }
    .sal-form input:first-child, .sal-edit input:first-child { grid-column:1 / -1; }
  }

  /* شريط تمرير رفيع يناسب الزجاج */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 40%, transparent) transparent; }
  *::-webkit-scrollbar { width:6px; height:6px; }
  *::-webkit-scrollbar-track { background:transparent; }
  *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 36%, transparent); border-radius:6px; }

  /* تحديد النص */
  ::selection { background: color-mix(in srgb, var(--gold) 34%, transparent); color: var(--ink); }

  /* ===== صورة خلفية للقسم والعرض =====
     ثلاث طبقات: الصورة ثم طبقة تعتيم ثابتة ثم المحتوى.
     التعتيم يضمن قراءة النص مع أي صورة، فاتحة كانت أو مزدحمة. */
  .has-bg-image { position:relative; overflow:hidden; isolation:isolate; }
  .has-bg-image > .bg-layer {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-size:cover; background-position:center; background-repeat:no-repeat;
  }
  /* طبقة التعتيم — مشتقة من لون البطاقة فتتبع أي ثيم */
  .has-bg-image > .bg-layer::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--card) 72%, transparent),
      color-mix(in srgb, var(--card) 88%, transparent)
    );
  }
  /* المحتوى فوق الطبقتين */
  .has-bg-image > *:not(.bg-layer) { position:relative; z-index:1; }

  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .has-bg-image > .bg-layer::after { background: rgba(0,0,0,.55); }
  }

  /* ===== نافذة التأكيد المخصّصة ===== */
  .wd-backdrop {
    position:fixed; inset:0; z-index:9000;
    display:flex; align-items:center; justify-content:center;
    padding:22px calc(18px + env(safe-area-inset-right, 0px)) 22px calc(18px + env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--bg1) 72%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: wdFade .16s var(--ease) both;
  }
  .wd-box {
    width:100%; max-width:340px; border-radius:18px; padding:20px;
    background: var(--card);
    border:1px solid var(--glass-rim);
    box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--bg1) 92%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
    position:relative; overflow:hidden;
    animation: wdPop .22s var(--ease) both;
  }
  .wd-box::after {
    content:''; position:absolute; top:0; inset-inline:18%; height:1px;
    background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
  }
  .wd-icon { font-size:26px; text-align:center; margin-bottom:8px; line-height:1; }
  .wd-title { font-size:16px; font-weight:800; text-align:center; margin-bottom:6px; color:var(--ink); }
  .wd-text { font-size:13px; color:var(--muted); text-align:center; line-height:1.7; margin-bottom:14px; }

  /* صفوف التفاصيل (اسم الباقة، السعر…) */
  .wd-rows { background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:12px; padding:10px 12px; margin-bottom:14px; }
  .wd-row { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; padding:4px 0; }
  .wd-row + .wd-row { border-top:1px dashed var(--line); }
  .wd-row span { color:var(--muted); flex:0 0 auto; }
  /* unicode-bidi: plaintext يختار الاتجاه من أول حرف — فـ"25,000 د.ع" تبقى صحيحة
     و"ahmed" تبقى صحيحة كذلك، بدون فرض اتجاه واحد على الكل */
  .wd-row b { color:var(--ink); text-align:left; unicode-bidi:plaintext; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wd-row.accent b { color:var(--gold-light); font-size:15px; font-weight:800; }

  /* خانة كتابة التأكيد (للعمليات الخطرة) */
  .wd-guard { margin-bottom:14px; }
  .wd-guard label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; text-align:center; }
  .wd-guard input { margin:0; text-align:center; }

  .wd-actions { display:flex; gap:9px; }
  .wd-actions button { flex:1; }
  .wd-cancel { background:var(--glass-soft); color:var(--ink); border:1px solid var(--glass-rim); }
  .wd-ok { background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--btn) 58%,var(--bg1))); color:var(--on-btn); font-weight:800; }
  .wd-ok.danger { background:linear-gradient(135deg,var(--bad,#e06a5a),color-mix(in srgb,var(--bad,#e06a5a) 60%,var(--bg1))); color:#fff; }
  .wd-ok:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.3); }

  @keyframes wdFade { from { opacity:0; } to { opacity:1; } }
  @keyframes wdPop { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) {
    .wd-backdrop, .wd-box { animation:none; }
  }

  /* ═══════════════════════════════════════════════
     هيكل التنقّل الجديد — شريط علوي + شريط سفلي ثابت
     ═══════════════════════════════════════════════ */

  /* مساحة أسفل الصفحة حتى لا يغطي الشريط السفلي المحتوى */
  body.has-navbar { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- صف الأقسام العلوي (تحت البانر) ---------- */
  .nav-top { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px; }
  .nav-top.cols-4 { grid-template-columns:repeat(4, 1fr); }
  .nav-top button {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:12px 4px; border-radius:14px; min-width:0;
    background:var(--glass-soft); border:1px solid var(--glass-rim);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:var(--ink); font-size:11px; font-weight:700; position:relative;
    transition: transform .16s var(--ease), border-color .16s var(--ease);
  }
  .nav-top button:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--gold) 38%, transparent); }
  .nav-top .ic { font-size:19px; line-height:1; }
  .nav-top .lb { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

  /* ---------- الشريط السفلي الثابت ---------- */
  .nav-bottom {
    position:fixed; bottom:0; inset-inline:0; z-index:60;
    display:grid; grid-template-columns:repeat(4, 1fr);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg1) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-top:1px solid var(--glass-rim);
  }
  .nav-bottom button {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:7px 2px; border-radius:12px; background:transparent; min-width:0;
    color:var(--muted); font-size:10px; font-weight:700; position:relative;
  }
  .nav-bottom button .ic { font-size:18px; line-height:1; transition:transform .16s var(--ease); }
  .nav-bottom button .lb { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .nav-bottom button.active { color:var(--gold-light); background:var(--glass-soft); }
  .nav-bottom button.active .ic { transform:translateY(-1px) scale(1.08); }

  /* شارة العدّاد (الإشعارات) */
  .nav-badge {
    position:absolute; top:2px; inset-inline-end:calc(50% - 20px);
    background:var(--bad, #e06a5a); color:#fff;
    font-size:8px; font-weight:800; min-width:14px; height:14px;
    border-radius:8px; display:grid; place-items:center; padding:0 3px;
  }

  /* ---------- صفحة فرعية كاملة ---------- */
  .subpage { display:none; }
  .subpage.active { display:block; animation: glassIn .3s var(--ease) both; }
  .subpage-head {
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .subpage-head .back {
    flex:0 0 auto; display:grid; place-items:center;
    width:38px; height:38px; border-radius:12px; font-size:17px;
    background:var(--glass-soft); border:1px solid var(--glass-rim); color:var(--ink);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .subpage-head .back:hover { border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
  .subpage-head h2 { flex:1; font-size:17px; margin:0; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---------- نقاط البانر ---------- */
  .banner-dots { display:flex; justify-content:center; gap:6px; margin:9px 0 14px; }
  .banner-dots button {
    width:7px; height:7px; padding:0; border-radius:50%;
    background:color-mix(in srgb, var(--ink) 26%, transparent);
    transition: width .22s var(--ease), background .22s var(--ease);
  }
  .banner-dots button.active { width:20px; border-radius:4px; background:var(--gold); }

  /* ---------- هيكل التحميل ---------- */
  .skel { border-radius:14px; background:var(--glass-soft); position:relative; overflow:hidden; }
  .skel::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent);
    transform:translateX(-100%); animation: skelSweep 1.3s infinite;
  }
  @keyframes skelSweep { to { transform:translateX(100%); } }
  .skel-banner { height:150px; margin-bottom:14px; }
  .skel-row { height:72px; margin-bottom:8px; }
  @media (prefers-reduced-motion: reduce) { .skel::after { animation:none; } }

  /* شاشات ضيقة جداً */
  @media (max-width:340px) {
    .nav-top button { font-size:10px; padding:10px 3px; }
    .nav-bottom button { font-size:9px; }
    .nav-bottom button .ic, .nav-top .ic { font-size:16px; }
  }

  /* ===== اشتراكاتي ===== */
  .subs-item {
    background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:15px;
    padding:14px; margin-bottom:11px; position:relative; overflow:hidden;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .subs-item.expired { border-color: color-mix(in srgb, var(--bad,#e06a5a) 45%, transparent); }
  .subs-item .head { display:flex; align-items:flex-start; gap:9px; margin-bottom:9px; }
  .subs-item .who { flex:1; min-width:0; }
  .subs-item .who b { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .subs-item .who i { display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }

  .sub-state { flex:0 0 auto; font-size:10px; font-weight:800; padding:4px 9px; border-radius:20px; }
  .sub-state.ok     { background:rgba(80,200,120,.16); color:var(--ok,#5ac88a); }
  .sub-state.bad    { background:rgba(224,106,90,.16); color:var(--bad,#e06a5a); }
  .sub-state.unknown{ background:var(--glass-soft); color:var(--muted); border:1px solid var(--glass-rim); }

  /* تنبيه الانتهاء */
  .sub-alert {
    display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
    background:rgba(224,106,90,.13); color:var(--bad,#e06a5a);
    border:1px solid color-mix(in srgb, var(--bad,#e06a5a) 32%, transparent);
    border-radius:10px; padding:8px 10px; margin-bottom:10px;
  }

  /* شريط الجيجات */
  .sub-meter { margin-bottom:10px; }
  .sub-meter .lbl { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:5px; }
  .sub-meter .lbl b { color:var(--ink); direction:ltr; unicode-bidi:plaintext; }
  .sub-bar { height:7px; border-radius:5px; background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; }
  .sub-bar span { display:block; height:100%; border-radius:5px;
    background:linear-gradient(90deg, var(--gold), var(--gold-light));
    transition: width .4s var(--ease); }
  .sub-bar.warn span { background:linear-gradient(90deg, #e0a85a, #e06a5a); }
  .sub-bar.full span { background:var(--bad,#e06a5a); }

  /* صف معلومات */
  .sub-rows { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px; }
  .sub-rows div { text-align:center; background:var(--glass-soft); border:1px solid var(--glass-rim);
    border-radius:10px; padding:7px 4px; min-width:0; }
  .sub-rows b { display:block; font-size:13px; font-weight:800; direction:ltr; unicode-bidi:plaintext; }
  .sub-rows i { display:block; font-style:normal; font-size:9px; color:var(--muted); margin-top:2px; }
  .sub-rows .danger b { color:var(--bad,#e06a5a); }

  .sub-err { font-size:11px; color:var(--muted); background:var(--glass-soft);
    border:1px solid var(--glass-rim); border-radius:10px; padding:8px 10px; margin-bottom:10px; }

  /* خانة اسم المشتري بنافذة الشراء */
  .wd-field { margin-bottom:14px; }
  .wd-field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
  .wd-field input { margin:0; }
  .wd-field .hint { font-size:10px; color:var(--muted); margin-top:5px; text-align:center; }
  .wd-field .err { font-size:11px; color:var(--bad,#e06a5a); margin-top:5px; }

  /* ===== الشروحات ===== */
  .guide-item {
    background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:14px;
    margin-bottom:10px; overflow:hidden;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .guide-item > .gh {
    display:flex; align-items:center; gap:9px; padding:13px 14px; cursor:pointer; width:100%;
    background:transparent; color:var(--ink); text-align:start; border:0; font-family:inherit;
  }
  .guide-item .gh b { flex:1; font-size:14px; min-width:0; }
  .guide-item .gh .car { flex:0 0 auto; font-size:10px; color:var(--muted); transition:transform .18s var(--ease); }
  .guide-item.open .gh .car { transform:rotate(180deg); }
  .guide-body { padding:0 14px 14px; }
  .guide-body p { font-size:13px; line-height:1.9; color:var(--ink); margin:0 0 10px; white-space:pre-wrap; }
  .guide-body img { width:100%; border-radius:11px; margin-bottom:9px; display:block; border:1px solid var(--glass-rim); }

  /* ===== سياسة الاستخدام ===== */
  .policy-item {
    display:flex; gap:11px; background:var(--glass-soft); border:1px solid var(--glass-rim);
    border-radius:14px; padding:13px; margin-bottom:10px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .policy-item .num {
    flex:0 0 auto; width:25px; height:25px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--gold) 58%,var(--bg1)));
    color:var(--on-gold); font-size:11px; font-weight:800; display:grid; place-items:center;
  }
  .policy-item .pb { flex:1; min-width:0; }
  .policy-item .pb p { font-size:13px; line-height:1.9; margin:0; white-space:pre-wrap; }
  .policy-item .pb img { width:100%; border-radius:10px; margin-top:9px; display:block; border:1px solid var(--glass-rim); }

  /* ===== روابط التطبيقات ===== */
  .app-item {
    display:flex; gap:11px; background:var(--glass-soft); border:1px solid var(--glass-rim);
    border-radius:14px; padding:13px; margin-bottom:10px; align-items:flex-start;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .app-item .icon {
    flex:0 0 auto; width:50px; height:50px; border-radius:13px; overflow:hidden;
    background:var(--card2); display:grid; place-items:center; font-size:21px;
    border:1px solid var(--glass-rim);
  }
  .app-item .icon img { width:100%; height:100%; object-fit:cover; }
  .app-item .meta { flex:1; min-width:0; }
  .app-item .meta b { display:block; font-size:14px; }
  .app-item .meta i { display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:3px; line-height:1.6; }
  .app-links { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
  .app-links a {
    flex:1; min-width:110px; text-align:center; text-decoration:none;
    font-size:11px; font-weight:700; padding:8px 10px; border-radius:10px;
    background:var(--glass-soft); border:1px solid var(--glass-rim); color:var(--ink);
  }
  .app-links a:hover { border-color:color-mix(in srgb, var(--gold) 42%, transparent); }

  /* ===== الإشعارات ===== */
  .notif-item {
    display:flex; gap:10px; background:var(--glass-soft); border:1px solid var(--glass-rim);
    border-radius:13px; padding:12px; margin-bottom:9px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .notif-item.unread { border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
  .notif-item .ni { flex:0 0 auto; font-size:17px; line-height:1.2; }
  .notif-item .nb { flex:1; min-width:0; }
  .notif-item .nb b { display:block; font-size:13px; }
  .notif-item .nb p { font-size:12px; color:var(--muted); margin:4px 0 0; line-height:1.7; }
  .notif-item .nb time { display:block; font-size:10px; color:var(--muted); margin-top:5px; direction:ltr; unicode-bidi:plaintext; }
  .notif-item .dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-top:5px; }

  /* ===== إشعار عائم قصير (toast) ===== */
  .wd-toast-wrap {
    position:fixed; z-index:9500; left:0; right:0;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; align-items:center; gap:8px;
    pointer-events:none; padding:0 16px;
  }
  .wd-toast {
    display:flex; align-items:center; gap:9px; max-width:360px; width:fit-content;
    background:var(--card); border:1px solid var(--glass-rim); border-radius:13px;
    padding:11px 15px; font-size:13px; font-weight:700; color:var(--ink);
    box-shadow:0 12px 34px -12px color-mix(in srgb, var(--bg1) 92%, transparent);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    animation: toastIn .26s var(--ease) both;
  }
  .wd-toast.out { animation: toastOut .22s var(--ease) both; }
  .wd-toast .ti { flex:0 0 auto; font-size:16px; line-height:1; }
  .wd-toast.ok  { border-color:color-mix(in srgb, var(--ok,#5ac88a) 42%, transparent); }
  .wd-toast.err { border-color:color-mix(in srgb, var(--bad,#e06a5a) 42%, transparent); }

  @keyframes toastIn  { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
  @keyframes toastOut { to { opacity:0; transform:translateY(10px) scale(.97); } }
  @media (prefers-reduced-motion: reduce) {
    .wd-toast, .wd-toast.out { animation:none; }
  }

  /* ===== نافذة بيانات الدخول (نسخ وإرسال) ===== */
  .wd-creds {
    background:var(--glass-soft); border:1px solid var(--glass-rim); border-radius:12px;
    padding:12px; margin-bottom:12px;
  }
  .wd-creds .cr { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; font-size:13px; }
  .wd-creds .cr + .cr { border-top:1px dashed var(--line); }
  .wd-creds .cr span { color:var(--muted); flex:0 0 auto; font-size:12px; }
  .wd-creds .cr b {
    color:var(--ink); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px;
    direction:ltr; unicode-bidi:plaintext; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    user-select:all; -webkit-user-select:all;
  }
  .wd-creds .cr b.pw { color:var(--gold-light); letter-spacing:.5px; }
  .wd-copy-all {
    width:100%; margin-bottom:12px;
    background:var(--glass-soft); border:1px solid var(--glass-rim); color:var(--ink); font-weight:700;
  }
  .wd-copy-all.done { border-color:color-mix(in srgb, var(--ok,#5ac88a) 55%, transparent); color:var(--ok,#5ac88a); }
  .wd-note { font-size:11px; color:var(--muted); text-align:center; margin-bottom:12px; line-height:1.7; }

  /* زر توليد جنب خانة كلمة المرور */
  .pw-row { display:flex; gap:8px; margin-bottom:14px; }
  .pw-row input { margin:0; flex:1; }
  .pw-row button { flex:0 0 auto; }