/* ============================================================
   مسابقاتي / الحساب
   يعتمد على app.css و contest-b.css
   ============================================================ */

/* ---------- بطاقة الحساب ---------- */
.me{
  display:flex;align-items:center;gap:13px;
  padding:16px;border-radius:20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 18%,var(--surface)),var(--surface));
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.me__av{
  flex:0 0 auto;width:64px;height:64px;border-radius:18px;overflow:hidden;
  background:var(--surface-2);border:2px solid color-mix(in srgb,var(--gold) 45%,transparent);
}
.me__av img{width:100%;height:100%;object-fit:cover}
.me__in{min-width:0;flex:1}
.me__in b{display:block;font-size:17px;margin-bottom:2px}
.me__in span{display:block;font-size:13px;color:var(--text-2);direction:ltr;text-align:start}
.me__id{
  display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums;
}
.me__lock{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;margin-inline-start:6px;
  padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--green) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  color:var(--green);font-size:11px;font-weight:800;
}
.me__lock svg{width:11px;height:11px;stroke-width:2.6}

/* ---------- أرقام سريعة ---------- */
.mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mstats div{
  padding:13px 10px;border-radius:16px;text-align:center;
  background:var(--surface);border:1px solid var(--line);
}
.mstats b{display:block;font-size:21px;font-variant-numeric:tabular-nums;line-height:1.3}
.mstats span{font-size:11.5px;color:var(--text-2)}

/* ---------- تبويبات ---------- */
.tabs{
  display:flex;gap:5px;padding:5px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--line);
}
.tabs button{
  flex:1;min-width:0;padding:10px 8px;border:0;border-radius:12px;cursor:pointer;
  background:transparent;color:var(--text-2);
  font-size:13px;font-weight:800;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  transition:background .2s ease,color .2s ease;
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{
  background:var(--surface);color:var(--text);
  box-shadow:var(--shadow-sm);
}
.tabs .n{
  display:inline-block;margin-inline-start:5px;padding:0 6px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 22%,transparent);
  color:var(--brand-2);font-size:11px;
}

/* ---------- صفوف العناصر ---------- */
.rows{display:flex;flex-direction:column;gap:9px}
.row{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .18s ease,transform .18s ease;
}
a.row:hover{border-color:color-mix(in srgb,var(--brand) 50%,transparent);transform:translateY(-2px)}
.row__ic{
  flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:44px;border-radius:13px;font-size:21px;
  background:var(--surface-2);border:1px solid var(--line);
}
.row__ic img{width:76%;height:76%;object-fit:contain}
.row__in{min-width:0;flex:1}
.row__in b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__in span{display:block;font-size:12px;color:var(--text-2);margin-top:2px}
.row__go{flex:0 0 auto;color:var(--text-2)}
.row__go svg{width:17px;height:17px}

/* شارات الحالة */
.chip2{
  flex:0 0 auto;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:800;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);
}
.chip2--open{
  background:color-mix(in srgb,var(--green) 14%,transparent);
  border-color:color-mix(in srgb,var(--green) 40%,transparent);color:var(--green);
}
.chip2--draw{
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border-color:color-mix(in srgb,var(--gold) 44%,transparent);color:#a86c05;
}
[data-theme="dark"] .chip2--draw{color:var(--gold-2)}
.chip2--win{
  background:color-mix(in srgb,var(--brand) 18%,transparent);
  border-color:color-mix(in srgb,var(--brand) 42%,transparent);color:var(--brand-2);
}

/* ---------- جائزة ---------- */
.prz{
  display:flex;flex-direction:column;gap:11px;
  padding:14px;border-radius:18px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 13%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
}
.prz__top{display:flex;align-items:center;gap:12px}
.prz__art{
  flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--surface);border:2px solid color-mix(in srgb,var(--gold) 48%,transparent);
  overflow:hidden;
}
.prz__art img{width:78%;height:78%;object-fit:contain}
.prz__in{min-width:0;flex:1}
.prz__in b{display:block;font-size:15px}
.prz__in span{display:block;font-size:12px;color:var(--text-2);margin-top:2px}
.prz__act{display:flex;gap:8px}
.prz__act .btn{flex:1;padding:11px 14px;border-radius:12px;font-size:14px}

/* ---------- إشعار ---------- */
.nt{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
}
.nt--new{
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  border-color:color-mix(in srgb,var(--brand) 34%,transparent);
}
.nt__ic{flex:0 0 auto;font-size:19px;line-height:1.3}
.nt__in{min-width:0;flex:1}
.nt__in b{display:block;font-size:13.5px;margin-bottom:2px}
.nt__in p{font-size:12.5px;color:var(--text-2);line-height:1.65}
.nt__in time{display:block;font-size:11px;color:var(--text-2);margin-top:4px}
.nt__dot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--brand-2);margin-top:6px;
}

/* ---------- حالة فاضية ---------- */
.empty{
  text-align:center;padding:34px 20px;border-radius:20px;
  background:var(--surface);border:1px dashed var(--line);
}
.empty__ic{font-size:42px;line-height:1;display:block;margin-bottom:12px;opacity:.75}
.empty b{display:block;font-size:16px;margin-bottom:6px}
.empty p{font-size:13.5px;color:var(--text-2);margin-bottom:18px}
.empty .btn{padding:13px 22px;border-radius:14px}

@media (max-width:420px){
  .mstats b{font-size:19px}
  .tabs button{font-size:12px;padding:9px 5px}
}