/* =====================================================================
   محفظة شبكة الذهبية — استايل "التطبيق" (v15)
   م. مروان الشاذلي — الذهبية نت
   ---------------------------------------------------------------------
   تخطيط مستوحى من تطبيقات البنوك: هيدر بترحيب، بطاقة رصيد بارزة،
   قائمة مربّعات، قائمة جانبية منسدلة.
   ⚠️ الألوان كلها من متغيّرات ثيم الذهبية — لا لون ثابت واحد هنا،
   فيبقى كل ثيم (ذهبي/سماوي/أخضر/بنفسجي) على حاله.
   يُحمَّل هذا الملف فقط عند اختيار الاستايل من الإعدادات.
   ===================================================================== */

body.ui-app{ background:var(--navy) }

/* ---------- الهيدر: ترحيب + زر القائمة ---------- */
/* هيدر داكن — الأزرار الذهبية تُرى بوضوح عليه (v16.1) */
body.ui-app .topbar{
  background:linear-gradient(180deg,var(--navy2),var(--navy));
  border-bottom:2px solid var(--gold); padding:11px 16px;
  box-shadow:0 3px 16px rgba(0,0,0,.34);
}
body.ui-app .topbar .brand{ display:none }
body.ui-app .apphead{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
}
body.ui-app .apphead .greet{ min-width:0; line-height:1.45 }
body.ui-app .apphead .greet .g1{ color:var(--muted); font-size:12px }
body.ui-app .apphead .greet .g2{
  color:var(--gold); font-size:16px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* شارة نوع الحساب داخل الهيدر */
body.ui-app .apphead .g0{
  display:inline-flex; align-items:center; gap:4px; margin-bottom:3px;
  background:rgba(246,219,160,.14); border:1px solid var(--line);
  color:var(--gold); border-radius:20px; padding:2px 9px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
body.ui-app .apphead .hbtns{ display:flex; align-items:center; gap:6px; flex:0 0 auto }
body.ui-app .apphead .ic{
  width:38px; height:38px; border-radius:11px; cursor:pointer; text-decoration:none;
  background:rgba(246,219,160,.12); border:1px solid var(--line);
  color:var(--gold); font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; position:relative;
}
body.ui-app .apphead .ic:hover{ background:rgba(246,219,160,.22); border-color:var(--gold) }
body.ui-app .apphead .ic:active{ transform:scale(.94) }
body.ui-app .apphead .ic .dot{
  position:absolute; top:5px; left:5px; min-width:16px; height:16px; border-radius:9px;
  background:var(--bad); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}

/* ---------- بطاقة الرصيد البارزة ---------- */
.hero-acct{
  background:linear-gradient(150deg,var(--gold),var(--gold2));
  border-radius:20px; padding:17px 18px; margin-bottom:8px;
  color:var(--onGold); position:relative; overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.26);
}
.hero-acct::after{
  content:''; position:absolute; inset:auto -30% -60% 40%;
  height:170px; border-radius:50%; background:rgba(255,255,255,.13);
}
.hero-acct .ha-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:1 }
.hero-acct .ha-id{ font-size:19px; font-weight:700; direction:ltr; letter-spacing:.5px }
.hero-acct .ha-sub{ font-size:12.5px; opacity:.82; margin-top:2px }
.hero-acct .ha-av{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  background:rgba(0,0,0,.16); border:2px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.hero-acct .ha-bal{
  display:flex; align-items:center; gap:9px; margin-top:13px; position:relative; z-index:1;
}
.hero-acct .ha-bal .lbl{ font-size:12.5px; opacity:.82 }
.hero-acct .ha-bal .val{ font-size:23px; font-weight:800; direction:ltr; letter-spacing:.5px }
.hero-acct .ha-bal .eye{
  background:rgba(0,0,0,.14); border:none; border-radius:9px; cursor:pointer;
  color:var(--onGold); padding:5px 9px; font-size:14px; line-height:1;
}
.hero-acct .ha-foot{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; position:relative; z-index:1;
}
.hero-acct .ha-chip{
  background:rgba(0,0,0,.15); border-radius:20px; padding:5px 11px;
  font-size:11.5px; font-weight:600;
}
.hero-acct .ha-mini{
  background:none; border:none; cursor:pointer; color:var(--onGold);
  font-size:15px; padding:2px 5px; opacity:.85;
}

/* نقاط الشرائح تحت البطاقة */
.hero-dots{ display:flex; justify-content:center; gap:6px; margin:10px 0 16px }
.hero-dots i{ width:7px; height:7px; border-radius:50%; background:var(--line); display:block }
.hero-dots i.on{ background:var(--gold); width:18px; border-radius:6px }

/* ---------- شبكة القائمة (مربّعات) ---------- */
.appmenu-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:14px; margin-bottom:16px;
}
.appmenu-wrap > h2{
  margin:0 0 12px; text-align:center; color:var(--gold);
  font-size:15px; font-weight:700; letter-spacing:1px;
}
.appmenu{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
@media(max-width:360px){ .appmenu{ gap:8px } }
.appmenu a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:96px; padding:12px 7px; text-decoration:none; text-align:center;
  background:var(--navy2); border:1px solid var(--line); border-radius:16px;
  color:var(--ink); transition:.15s; position:relative; min-width:0;
}
.appmenu a:active{ transform:scale(.96) }
.appmenu a:hover{ border-color:var(--gold); background:var(--hero) }
.appmenu a .mi{ font-size:26px; line-height:1 }
.appmenu a .mt{
  font-size:12px; font-weight:600; color:var(--ink); line-height:1.35;
  overflow-wrap:anywhere;
}
.appmenu a .mb{
  position:absolute; top:7px; left:7px; min-width:18px; height:18px; border-radius:10px;
  background:var(--bad); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.appmenu a.hot{ border-color:var(--gold) }
.appmenu a.hot .mi{ filter:drop-shadow(0 0 8px rgba(246,219,160,.35)) }

/* ---------- القائمة الجانبية ---------- */
.appdrawer{
  position:fixed; inset:0; z-index:900; display:none;
}
.appdrawer.on{ display:block }
.appdrawer .dw-back{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
}
.appdrawer .dw-panel{
  position:absolute; top:0; bottom:0; right:0; width:min(80vw,320px);
  background:var(--navy); border-left:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto;
  animation:dwIn .22s ease-out;
}
@keyframes dwIn{ from{ transform:translateX(100%) } to{ transform:translateX(0) } }
.appdrawer .dw-head{
  background:linear-gradient(150deg,var(--gold),var(--gold2));
  padding:22px 18px 18px; text-align:center; color:var(--onGold);
}
.appdrawer .dw-head .av{
  width:76px; height:76px; border-radius:50%; margin:0 auto 10px;
  background:rgba(0,0,0,.17); border:3px solid rgba(255,255,255,.65);
  display:flex; align-items:center; justify-content:center; font-size:36px;
}
.appdrawer .dw-head .nm{ font-size:16px; font-weight:700; line-height:1.4 }
.appdrawer .dw-head .sb{ font-size:12px; opacity:.82; margin-top:3px }
.appdrawer .dw-list{ padding:10px 0 }
.appdrawer .dw-list a{
  display:flex; align-items:center; gap:13px; padding:14px 20px;
  color:var(--ink); text-decoration:none; font-size:14.5px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.appdrawer .dw-list a:hover{ background:var(--panel); color:var(--gold) }
.appdrawer .dw-list a .di{ font-size:19px; width:26px; text-align:center; flex:0 0 auto }
.appdrawer .dw-list a.danger{ color:var(--bad) }
.appdrawer .dw-close{
  position:absolute; top:12px; left:12px; z-index:2;
  width:34px; height:34px; border-radius:10px; border:none; cursor:pointer;
  background:rgba(0,0,0,.18); color:var(--onGold); font-size:17px;
}
.appdrawer .dw-ver{
  margin-top:auto; padding:16px 20px; text-align:center;
  color:var(--muted); font-size:11.5px; border-top:1px solid var(--line);
}

/* ---------- عنوان قسم بنمط التطبيق ---------- */
body.ui-app .card{ border-radius:18px }
.appsec{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 10px;
}
.appsec h2{ margin:0; font-size:15.5px }

/* ---------- صفحة الدخول بنمط التطبيق ---------- */
body.ui-app.login-app{ background:linear-gradient(180deg,var(--gold),var(--gold2) 42%,var(--navy) 42%) }
.applogin{
  background:var(--panel); border:1px solid var(--line); border-radius:22px;
  padding:20px 18px; box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.applogin .lg-logo{ text-align:center; margin-bottom:14px }
.applogin .lg-logo img{ max-width:170px; border-radius:14px; background:#fff; padding:8px }
.applogin label{ font-size:13px }
.applogin .lg-main{
  display:flex; gap:9px; margin-top:16px;
}
.applogin .lg-main .btn{ flex:1 }
.applogin .lg-alt{ display:flex; flex-direction:column; gap:9px; margin-top:14px }
.applogin .lg-alt a{
  display:block; text-align:center; text-decoration:none; padding:12px;
  border:1px solid var(--gold); border-radius:12px; color:var(--gold);
  font-size:14px; font-weight:600; background:transparent;
}
.applogin .lg-alt a:hover{ background:rgba(246,219,160,.08) }
.appver{ text-align:center; color:var(--muted); font-size:11.5px; margin:18px 0 4px }

/* ---------- شرائح الإعلانات أعلى صفحة الدخول ---------- */
.appbanner{
  border-radius:18px; overflow:hidden; margin-bottom:14px;
  background:var(--panel); border:1px solid var(--line);
}
.appbanner .bn{
  padding:18px; text-align:center; color:var(--ink);
  background:linear-gradient(150deg,var(--hero),var(--panel));
}
.appbanner .bn h3{ margin:0 0 6px; color:var(--gold); font-size:16px }
.appbanner .bn p{ margin:0; font-size:13.5px; line-height:1.7 }

/* لا نطبع القائمة الجانبية ولا الهيدر */
@media print{ .appdrawer, .apphead, .hero-acct .eye{ display:none !important } }

/* ضمان وضوح أزرار الشريط العلوي في كل الواجهات (v16.1) */
body.ui-app .topbar .navToggle,
body.ui-app .topbar .btn.ghost,
body.ui-app .topbar .btn{
  background:rgba(246,219,160,.12) !important;
  border:1px solid var(--line) !important;
  color:var(--gold) !important;
}
body.ui-app .topbar .navToggle:hover,
body.ui-app .topbar .btn:hover{ border-color:var(--gold) !important }
body.ui-app .topbar .brand{ color:var(--gold) }
body.ui-app .rolebadge{ background:rgba(246,219,160,.14); color:var(--gold) }
/* شريط علوي بلون الحساب أعلى الصفحة */
body.ui-app::before{ height:4px }