:root {
  --ink: #02050f; --deep: #040b20; --panel: #07123a; --panel2: #091843;
  --edge: rgba(24,52,134,.75); --edge-soft: rgba(90,162,255,.16); --edge-strong: rgba(90,162,255,.42);
  --blue: #1f6bff; --sky: #5aa2ff; --text: #eaf1ff; --text2: #c6d6ff; --mute: #92a8dc; --ok: #3ddc97; --bad: #ff5d6c;
  --topbg: rgba(2,5,15,.88); --glow: rgba(31,107,255,.34); --glow-strong: rgba(31,107,255,.8);
  --tint: rgba(31,107,255,.12); --tint2: rgba(31,107,255,.24);
  --code: #040a20; --bar: #050d2b; --warn-bg: rgba(255,200,60,.16); --warn-fg: #ffd36b;
  --shine: rgba(255,255,255,.16); --shimmer: #ffffff; --spark: 150,195,255;
  --hero-a: rgba(3,9,28,.97); --hero-b: rgba(3,9,28,.6);
  --bg1: rgba(31,107,255,.18); --bg2: rgba(31,107,255,.08);
  --card-top: #091a47; --card-bot: #030a1f; --ring: #ffffff; --num: #ffffff;
  --f-display: "Lalezar", "Tajawal", system-ui, sans-serif;
  --f-body: "Tajawal", system-ui, sans-serif;
  --f-num: "Rajdhani", "Tajawal", system-ui, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f1f5ff; --deep: #e6eeff; --panel: #ffffff; --panel2: #e9f0ff;
    --edge: #c7d6f6; --edge-soft: #dbe6fb; --edge-strong: #8fb0f2;
    --sky: #1b55d6; --bad: #d6293b; --text: #0a1a45; --text2: #2c4278; --mute: #5b6f9f;
    --topbg: rgba(255,255,255,.86); --glow: rgba(31,107,255,.25); --glow-strong: rgba(31,107,255,.45);
    --tint: rgba(31,107,255,.1); --tint2: rgba(31,107,255,.18);
    --code: #eef3ff; --bar: #dbe6ff; --warn-bg: #fff1cc; --warn-fg: #8a5a00;
    --shine: rgba(255,255,255,.75); --shimmer: #7db0ff; --spark: 31,107,255;
    --hero-a: rgba(255,255,255,.96); --hero-b: rgba(255,255,255,.6);
    --bg1: rgba(31,107,255,.16); --bg2: rgba(31,107,255,.08);
    --card-top: #ffffff; --card-bot: #e9f0ff; --num: #0a1a45;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink: #f1f5ff; --deep: #e6eeff; --panel: #ffffff; --panel2: #e9f0ff;
  --edge: #c7d6f6; --edge-soft: #dbe6fb; --edge-strong: #8fb0f2;
  --sky: #1b55d6; --bad: #d6293b; --text: #0a1a45; --text2: #2c4278; --mute: #5b6f9f;
  --topbg: rgba(255,255,255,.86); --glow: rgba(31,107,255,.25); --glow-strong: rgba(31,107,255,.45);
  --tint: rgba(31,107,255,.1); --tint2: rgba(31,107,255,.18);
  --code: #eef3ff; --bar: #dbe6ff; --warn-bg: #fff1cc; --warn-fg: #8a5a00;
  --shine: rgba(255,255,255,.75); --shimmer: #7db0ff; --spark: 31,107,255;
  --hero-a: rgba(255,255,255,.96); --hero-b: rgba(255,255,255,.6);
  --bg1: rgba(31,107,255,.16); --bg2: rgba(31,107,255,.08);
  --card-top: #ffffff; --card-bot: #e9f0ff; --num: #0a1a45;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--ink);
  background-image:
    radial-gradient(900px 520px at 85% -10%, var(--bg1), transparent 70%),
    radial-gradient(700px 480px at 0% 40%, var(--bg2), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.7;
  padding-inline: 16px; padding-block: 0 0;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1240px; margin-inline: auto; }
#sparks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.shell { position: relative; z-index: 1; }

.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  margin-inline: -16px; padding: 10px 16px;
  background: var(--topbg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge-soft);
}
.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px var(--blue), 0 0 18px var(--glow-strong); }
.brand b { font-family: var(--f-display); font-size: 1.55rem; font-weight: 400; letter-spacing: .02em; line-height: 1; display: block; }
.brand small { display: block; font-family: var(--f-num); font-size: .78rem; color: var(--sky); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
nav { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.brand { justify-self: start; }
.acct { justify-self: end; }
nav a { padding: 8px 16px; border-radius: 10px; font-weight: 700; color: var(--mute); border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s; }
nav a:hover, nav a.on { color: var(--text); background: var(--tint2); border-color: var(--edge-strong); }
.tool { position: relative; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); border: 1px solid var(--edge-strong); color: var(--text); cursor: pointer; }
.tool:hover { background: var(--tint2); }
.tool svg { width: 14px; height: 14px; }
.eq { display: none; gap: 2px; align-items: flex-end; height: 11px; }
.eq i { width: 2.5px; background: var(--sky); border-radius: 2px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .25s; } .eq i:nth-child(3) { animation-delay: .5s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 11px; } }
.tool[aria-pressed="true"] .eq { display: flex; }
.tool[aria-pressed="true"] .note { display: none; }
.tool.hint::after { content: ""; position: absolute; inset: -3px; border-radius: 11px; border: 2px solid var(--sky); animation: ring 1.8s infinite; pointer-events: none; }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.tool .moon { display: none; }
.tool.is-light .moon { display: block; }
.tool.is-light .sun { display: none; }
.dock { position: fixed; z-index: 40; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); direction: ltr; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px; border-radius: 12px; background: var(--topbg); backdrop-filter: blur(12px); border: 1px solid var(--edge-strong); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.dock-tools { display: flex; align-items: center; gap: 5px; }
.dock-toggle { width: 100%; min-width: 26px; height: 16px; padding: 0; border: 0; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--mute); background: transparent; }
.dock-toggle:hover { color: var(--text); background: var(--tint2); }
.dock-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.dock.is-min .dock-tools { display: none; }
.dock.is-min { padding: 2px; }
.dock.is-min .dock-toggle { width: 26px; }
.dock.is-min .dock-toggle svg { transform: rotate(180deg); }
#vol { width: 54px; height: 12px; margin-inline: 4px 2px; accent-color: var(--blue); }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 20px; border-radius: 12px;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #2f7bff, #1346c9);
  box-shadow: 0 6px 22px var(--glow), inset 0 1px 0 rgba(255,255,255,.25);
  border: 0; cursor: pointer; font-size: 1rem;
}
.cta:hover { filter: brightness(1.12); }
.ghost { padding: 9px 20px; border-radius: 12px; font-weight: 800; border: 1px solid var(--edge-strong); color: var(--text); background: var(--tint); }
.ghost:hover { background: var(--tint2); }

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent 38%, var(--shine) 50%, transparent 62%);
  transform: translateX(-130%); animation: sweep 7s ease-in-out infinite;
}
@keyframes sweep { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 28px; align-items: start; padding-block: 28px; }
.view { display: flex; flex-direction: column; gap: 48px; min-width: 0; animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
section { scroll-margin-top: 96px; }

.hero {
  border-radius: 22px; border: 1px solid var(--edge-strong); padding: 34px;
  background: linear-gradient(120deg, var(--hero-a) 38%, var(--hero-b)), var(--deep);
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: center;
}
.hero > * { position: relative; z-index: 1; }
.eyebrow { font-family: var(--f-num); letter-spacing: .24em; color: var(--sky); font-weight: 700; font-size: .9rem; text-transform: uppercase; }
h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.15; margin: 6px 0 12px; text-wrap: balance; }
h1 em {
  font-style: normal; color: transparent;
  background: linear-gradient(100deg, var(--sky) 20%, var(--shimmer) 50%, var(--sky) 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px var(--glow-strong));
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }
.hero p { color: var(--text2); max-width: 52ch; margin: 0 0 22px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-logo { justify-self: center; }
.hero-logo img { width: 100%; max-width: 250px; aspect-ratio: 1; border-radius: 50%; display: block; box-shadow: 0 0 0 3px var(--ring), 0 0 0 7px var(--blue), 0 0 60px var(--glow-strong); }

.head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.head h2 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; margin: 0; line-height: 1.2; }
.head span { font-family: var(--f-num); color: var(--sky); letter-spacing: .22em; font-size: .85rem; text-transform: uppercase; font-weight: 700; }
.head::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--blue), transparent); }

.forum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cat { display: flex; gap: 14px; align-items: center; padding: 16px 18px; min-width: 0; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; transition: transform .2s, border-color .2s; }
.cat:hover { transform: translateY(-3px); border-color: var(--sky); }
.cat .ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--tint2); color: var(--sky); }
.cat h3 { margin: 0; font-size: 1.05rem; }
.cat p { margin: 0; color: var(--mute); font-size: .9rem; line-height: 1.5; }
.cat.big { grid-column: 1 / -1; gap: 22px; padding: 28px 30px; border-color: var(--edge-strong); background: linear-gradient(120deg, var(--tint2), var(--panel) 70%); box-shadow: 0 14px 40px var(--glow); }
.cat.big .ic { width: 72px; height: 72px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #3a85ff, #123fb8); box-shadow: 0 10px 26px var(--glow); }
.cat.big .ic svg { width: 36px; height: 36px; }
.cat.big h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; line-height: 1.2; margin-bottom: 4px; }
.cat.big p { font-size: 1rem; color: var(--text2); }
.soon { margin-inline-start: auto; font-size: .72rem; font-weight: 800; padding: 2px 10px; border-radius: 99px; background: var(--tint); color: var(--sky); white-space: nowrap; }

.events { display: flex; flex-direction: column; gap: 12px; }
.ev { display: flex; gap: 16px; align-items: center; padding: 14px 18px; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; min-width: 0; }
.date { flex: none; width: 66px; text-align: center; border-radius: 12px; padding: 6px 0; background: linear-gradient(160deg, #2f7bff, #1043bd); color: #fff; font-family: var(--f-num); line-height: 1.1; }
.date b { display: block; font-size: 1.9rem; }
.date small { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.ev h3 { margin: 0; font-size: 1.08rem; }
.ev p { margin: 0; color: var(--mute); font-size: .92rem; }
.ev .when { margin-inline-start: auto; font-family: var(--f-num); color: var(--sky); font-weight: 600; white-space: nowrap; }

.lead { color: var(--mute); margin: -6px 0 18px; }
.tablewrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--edge); background: var(--panel); }
table { width: 100%; border-collapse: collapse; min-width: 540px; }
th { text-align: start; padding: 14px 18px; background: var(--panel2); color: var(--sky); font-weight: 800; font-size: .95rem; }
td { padding: 14px 18px; border-top: 1px solid var(--edge-soft); vertical-align: middle; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--tint); }
.ntitle { font-weight: 700; font-size: 1.05rem; }
.ntitle:hover { color: var(--sky); text-decoration: underline; text-underline-offset: 4px; }
.nsum { color: var(--mute); font-size: .9rem; margin-top: 2px; }
td.d { white-space: nowrap; font-family: var(--f-num); font-weight: 600; color: var(--sky); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: .72rem; font-weight: 800; color: #fff; background: var(--blue); padding: 1px 10px; border-radius: 99px; margin-inline-end: 10px; }

.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sky); }
.back:hover { text-decoration: underline; text-underline-offset: 4px; }
.article { padding: 30px 32px; border-radius: 20px; background: var(--panel); border: 1px solid var(--edge); }
.article .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.article .meta time { font-family: var(--f-num); font-weight: 600; color: var(--sky); font-size: 1.05rem; }
.article h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.25; margin: 0 0 18px; text-wrap: balance; }
.article img.cover { display: block; max-width: 100%; border-radius: 14px; margin-bottom: 20px; border: 1px solid var(--edge); }
.article p { max-width: 68ch; margin: 0 0 16px; line-height: 1.95; color: var(--text2); font-size: 1.05rem; }
.article p:last-child { margin-bottom: 0; }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.prod { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--edge); min-width: 0; transition: transform .2s, border-color .2s; }
.prod:hover { transform: translateY(-4px); border-color: var(--sky); }
.prod:hover::after { animation-duration: 1.4s; }
.pic { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3a85ff, #123fb8); box-shadow: 0 8px 20px var(--glow); }
.pic svg { width: 28px; height: 28px; }
.prod h3 { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.prod ul { margin: 0; padding: 0; list-style: none; color: var(--mute); font-size: .9rem; line-height: 1.6; flex: 1; }
.prod li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: var(--sky); }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-family: var(--f-num); font-weight: 700; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.price small { font-size: 1rem; color: var(--mute); margin-inline-end: 3px; }
.buy .cta { padding: 8px 20px; }

.server {
  border-radius: 22px; padding: 22px; min-width: 0;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot) 75%);
  border: 1px solid var(--edge-strong);
  box-shadow: 0 0 0 1px var(--tint), 0 20px 60px var(--glow);
}
.server > * { position: relative; z-index: 1; }
.server .logo { display: block; width: 130px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 12px; }
.chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { font-family: var(--f-num); font-weight: 700; letter-spacing: .1em; font-size: .85rem; padding: 2px 12px; border-radius: 99px; border: 1px solid var(--edge-strong); background: var(--tint); }
.server h3 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; text-align: center; margin: 0 0 2px; line-height: 1.2; }
.server .sub { text-align: center; color: var(--mute); margin: 0 0 14px; font-size: .95rem; line-height: 1.5; }
.live { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-weight: 700; }
.live .state { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(61,220,151,.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61,220,151,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); } }
.count { display: flex; align-items: baseline; justify-content: center; gap: 8px; direction: ltr; font-family: var(--f-num); margin: 4px 0 6px; }
.count b { font-size: 4rem; line-height: 1; font-weight: 700; color: var(--num); text-shadow: 0 0 30px var(--glow-strong); font-variant-numeric: tabular-nums; }
.count > span { font-size: 1.7rem; color: var(--mute); font-weight: 600; }
.count-label { text-align: center; color: var(--sky); font-weight: 700; margin-bottom: 10px; }
.bar { height: 12px; border-radius: 99px; background: var(--bar); border: 1px solid var(--edge); overflow: hidden; direction: ltr; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: repeating-linear-gradient(135deg, #2f7bff 0 10px, #1a52d6 10px 20px); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.addr { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; direction: ltr; }
.addr code, .addr .ipcode { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 9px 12px; border-radius: 10px; background: var(--code); border: 1px solid var(--edge); font-family: var(--f-num); font-size: 1rem; font-weight: 600; color: var(--text); }
.addr .ipcode { display: block; text-decoration: none; cursor: pointer; transition: border-color .2s, color .2s; }
.addr .ipcode:hover { border-color: var(--sky); color: var(--sky); }
.addr .ipcode.off { cursor: not-allowed; opacity: .55; text-decoration: line-through; }
.addr .ipcode.off:hover { border-color: var(--edge); color: var(--text); }
.server.closed .dot { background: var(--bad); animation: none; }
.server.closed .state { color: var(--bad); }
.server.closed .count b { text-shadow: none; opacity: .55; }
.cta[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(1) brightness(.75); box-shadow: none; }
.addr button { flex: none; padding: 0 14px; border-radius: 10px; font-weight: 800; cursor: pointer; color: var(--text); background: var(--tint2); border: 1px solid var(--edge-strong); }
.addr button:hover { filter: brightness(1.2); }
.server .cta { width: 100%; padding: 13px; font-size: 1.1rem; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 14px; border-radius: 99px; font-size: .8rem; font-weight: 800; color: var(--sky); background: var(--tint); border: 1px solid var(--edge-strong); }
.pill svg { width: 14px; height: 14px; }
.about h2 em, .chead h2 em { font-style: normal; color: var(--sky); }

.about { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 34px; align-items: center; padding: 34px; border-radius: 26px; border: 1px solid var(--edge-strong); background: linear-gradient(135deg, var(--panel), var(--deep)); box-shadow: 0 20px 60px var(--glow); }
.about-body > * { position: relative; z-index: 1; }
.about h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.2; margin: 12px 0 14px; text-wrap: balance; }
.about-body > p { color: var(--text2); margin: 0 0 22px; max-width: 58ch; }
.afeats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.af { display: flex; gap: 12px; align-items: flex-start; }
.afi { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--sky); background: var(--tint2); border: 1px solid var(--edge); }
.afi svg { width: 20px; height: 20px; }
.af h3 { margin: 0 0 2px; font-size: 1rem; }
.af p { margin: 0; color: var(--mute); font-size: .85rem; line-height: 1.55; }
.wbtn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #0a1a45; border-color: transparent; }
.wbtn:hover { background: #e6eeff; }
:root[data-theme="light"] .wbtn { background: #0a1a45; color: #fff; }
.about-pic { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; border: 1px solid var(--edge-strong); background: linear-gradient(180deg, #0a1450 0%, #2a2f9e 55%, #5b6bff 100%); box-shadow: 0 24px 60px rgba(0,0,0,.45); transform: rotate(-2deg); }
.about-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-pic .about-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-pic .cap { position: absolute; inset-inline: 0; bottom: 0; padding: 36px 18px 16px; color: #fff; background: linear-gradient(transparent, rgba(3,8,30,.9)); }
.about-pic .cap b { display: block; font-family: var(--f-num); font-size: 1.5rem; letter-spacing: .06em; line-height: 1; }
.about-pic .cap small { font-family: var(--f-num); font-weight: 700; letter-spacing: .24em; color: #9fc2ff; font-size: .7rem; }

.chead { text-align: center; margin-bottom: 26px; }
.chead h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.3; margin: 12px 0 6px; text-wrap: balance; }
.chead p { margin: 0; color: var(--mute); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge); transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; }
.step:hover { transform: translateY(-4px); border-color: var(--sky); box-shadow: 0 14px 36px var(--glow); }
.step .n { position: absolute; top: 14px; inset-inline-start: 20px; font-family: var(--f-num); font-size: 2.6rem; line-height: 1; font-weight: 700; color: var(--tint2); }
.step .si { margin-top: 38px; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3a85ff, #123fb8); box-shadow: 0 8px 20px var(--glow); }
.step .si svg { width: 26px; height: 26px; }
.step h3 { margin: 6px 0 0; font-size: 1.15rem; }
.step p { margin: 0; color: var(--mute); font-size: .9rem; line-height: 1.6; }

.socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.soc { --c: #5865f2; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--panel); border: 1px solid var(--edge); transition: transform .2s, border-color .2s, box-shadow .2s; }
.soc:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 14px 36px color-mix(in srgb, var(--c) 40%, transparent); }
.soc .art { height: 130px; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--c) 55%, #050a1c), #050a1c 85%); }
.soc .art svg { width: 62px; height: 62px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 90%, transparent)); }
.soc .info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.soc h3 { margin: 0; font-size: 1.1rem; }
.soc p { margin: 0; color: var(--mute); font-size: .85rem; line-height: 1.5; }
.soc .go { flex: none; padding: 7px 16px; border-radius: 10px; font-weight: 800; font-size: .9rem; color: #fff; background: var(--c); }

.power { font-family: var(--f-num); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; direction: ltr; }
.power b { color: var(--sky); font-weight: 700; filter: drop-shadow(0 0 8px var(--glow-strong)); }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(2,6,20,.66); backdrop-filter: blur(4px); }
.sheet { width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.sheet h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; margin: 0 0 4px; }
.toast { position: fixed; z-index: 60; top: calc(78px + env(safe-area-inset-top, 0px)); left: 16px; max-width: calc(100vw - 32px); padding: 7px 14px; border-radius: 10px; font-size: .85rem; font-weight: 700; color: var(--text); background: var(--topbg); backdrop-filter: blur(10px); border: 1px solid var(--edge-strong); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.toast.in { animation: toastin .25s ease both; }
@keyframes toastin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.login-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; font-weight: 800; cursor: pointer; color: #fff; background: #5865f2; border: 0; box-shadow: 0 6px 20px rgba(88,101,242,.45); }
.login-btn:hover { filter: brightness(1.1); }
.login-btn svg, .login-btn img { width: 18px; height: 18px; }
.user-chip { position: relative; }
.user-chip b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.user-chip .av, .msg .av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #5865f2; font-size: .9rem; }
.av.img { background-size: cover !important; background-position: center !important; color: transparent; box-shadow: 0 0 0 2px var(--edge-strong); }

.chat { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: 0 14px 40px var(--glow); }
.chat-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; background: var(--panel2); border-bottom: 1px solid var(--edge); }
.hashic { color: var(--sky); font-family: var(--f-num); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.chat-on { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--mute); font-size: .88rem; font-weight: 700; }
.msgs { height: 440px; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg .mb { min-width: 0; }
.msg .mh { display: flex; align-items: baseline; gap: 10px; }
.msg .mh b { font-size: .95rem; }
.msg .mh time { color: var(--mute); font-size: .75rem; font-family: var(--f-num); white-space: nowrap; }
.msg p { margin: 2px 0 0; color: var(--text2); overflow-wrap: anywhere; line-height: 1.6; }
.msg.me p { color: var(--text); }
.composer { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--edge); background: var(--panel2); }
.composer input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; background: var(--code); border: 1px solid var(--edge); color: var(--text); font: inherit; }
.composer input:focus { outline: none; border-color: var(--sky); }
.composer .cta svg { transform: scaleX(-1); }

.sheet.pay, .sheet.login { position: relative; width: min(460px, 100%); padding: 24px; border-radius: 22px; }
.sheet .x { position: absolute; top: 16px; inset-inline-end: 16px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; color: var(--mute); background: transparent; border: 0; }
.sheet .x:hover { color: var(--text); background: var(--tint); }
.sheet .x svg { width: 18px; height: 18px; }
.pay h3 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; margin: 0 0 6px; }
.pay h3 svg { width: 24px; height: 24px; color: var(--sky); }
.pay .sub { margin: 0 0 14px; color: var(--mute); font-size: .95rem; }
.sheet .item { margin: 0 0 14px; padding: 8px 14px; border-radius: 10px; background: var(--tint); color: var(--sky); font-weight: 800; }
.pstep { margin-bottom: 14px; padding: 16px; border-radius: 14px; background: var(--deep); border: 1px solid var(--edge); }
.pstep:last-child { margin-bottom: 0; }
.ph { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-weight: 700; line-height: 1.5; }
.ph b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-num); color: var(--sky); background: var(--tint2); }
.paybtn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 12px; font-weight: 800; color: #fff; background: #0070ba; box-shadow: 0 6px 18px rgba(0,112,186,.45); }
.paybtn:hover { filter: brightness(1.12); }
.paybtn svg { width: 20px; height: 20px; }
.dc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--code); border: 1px solid var(--edge); }
.dci { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #5865f2; }
.dci svg { width: 22px; height: 22px; }
.dc b { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--f-num); font-size: 1.1rem; }
.dc button { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; color: var(--mute); background: transparent; border: 0; }
.dc button:hover { color: var(--text); background: var(--tint); }
.dc button svg { width: 19px; height: 19px; }
.login { text-align: center; }
.lg-ic { margin: 4px auto 14px; width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #6c78ff, #4350d8); box-shadow: 0 10px 26px rgba(88,101,242,.5); }
.lg-ic svg { width: 34px; height: 34px; }
.lg-ic img { width: 38px; height: 38px; object-fit: contain; }
.login h3 { font-size: 1.7rem; }
.login p { margin: 6px 0 18px; color: var(--mute); }
.discordbtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; border-radius: 12px; font-size: 1.05rem; font-weight: 800; cursor: pointer; color: #fff; background: #5865f2; border: 0; box-shadow: 0 8px 22px rgba(88,101,242,.5); }
.discordbtn:hover { filter: brightness(1.1); }
.discordbtn svg, .discordbtn img { width: 20px; height: 20px; object-fit: contain; }

@media (max-width: 1020px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .side { display: contents; }
  .fxw { max-width: 520px; width: 100%; margin-inline: auto; }
  .server { order: -1; max-width: 520px; width: 100%; margin-inline: auto; }
}
@media (max-width: 680px) {
  .article { padding: 22px 18px; }
  .cat.big { padding: 20px 18px; gap: 14px; }
  .cat.big .ic { width: 56px; height: 56px; }

  .about { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .about-pic { max-width: 260px; margin-inline: auto; order: -1; }
  .afeats, .steps { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .hero-logo { order: -1; }
  .hero-logo img { max-width: 170px; }
  .forum { grid-template-columns: minmax(0, 1fr); }
  .ev { flex-wrap: wrap; }
  .ev .when { margin-inline-start: 0; width: 100%; }
  .top .wrap { grid-template-columns: 1fr auto; row-gap: 8px; }
  nav { grid-column: 1 / -1; grid-row: 2; }
  .acct { grid-column: 2; grid-row: 1; }
  .brand { grid-column: 1; grid-row: 1; }
  .tform { grid-template-columns: minmax(0, 1fr); }
  .msgs { height: 380px; }
  .socials { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot, .shine::after, h1 em, .view, .eq i, .tool.hint::after { animation: none; }
  .bar i, .cat, .prod, .step, .soc { transition: none; }
  .toast.in { animation: none; }
}

/* ---- رسالة فاضية بالنقاشات ---- */
.msgs .empty { margin: auto; color: var(--mute); text-align: center; }

/* ---- بوابة ربط الحساب ---- */
.gate { width: min(520px, 100%); margin-inline: auto; padding: 34px 24px; text-align: center; border-radius: 20px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: 0 14px 40px var(--glow); }
.gate h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; margin: 0; }
.gate p { margin: 6px 0 18px; color: var(--mute); }
.gate .lg-ic { margin: 0 auto 14px; }
.gate .discordbtn { max-width: 340px; margin-inline: auto; }

/* ---- التذاكر ---- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tcard { display: flex; gap: 14px; align-items: center; padding: 18px; min-width: 0; background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.tcard:hover { transform: translateY(-3px); border-color: var(--sky); box-shadow: 0 12px 30px var(--glow); }
.tcard .ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #3a85ff, #123fb8); box-shadow: 0 8px 20px var(--glow); }
.tcard h3 { margin: 0; font-size: 1.08rem; }
.tcard p { margin: 0; color: var(--mute); font-size: .88rem; line-height: 1.5; }

.tk-acct { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 18px; border-radius: 14px; background: var(--tint); border: 1px solid var(--edge-strong); }
.tk-acct .av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #5865f2; }
.tk-acct b { display: block; font-size: 1.05rem; line-height: 1.3; }
.tk-acct small { color: var(--mute); font-weight: 700; }

.tform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge); }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld.wide { grid-column: 1 / -1; }
.fld label { font-weight: 800; font-size: .95rem; }
.fld .req { font-style: normal; color: var(--bad); margin-inline-start: 4px; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 11px 14px; border-radius: 12px; background: var(--code); border: 1px solid var(--edge); color: var(--text); font: inherit; }
.fld textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--tint2); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--mute); opacity: .7; }
.fld .hint { color: var(--mute); font-size: .8rem; }
.tk-send { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.tk-send .cta { padding: 11px 28px; }
.tk-send .cta:disabled { opacity: .6; cursor: wait; }

.tk-done { text-align: center; padding: 34px 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: 0 14px 40px var(--glow); }
.tk-done h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; margin: 10px 0 4px; }
.tk-done p { margin: 4px 0; color: var(--text2); }
.tk-done .row { justify-content: center; margin-top: 18px; }
.tk-ok { margin: 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3ddc97, #16996a); box-shadow: 0 10px 26px rgba(61,220,151,.4); }
.tk-ok svg { width: 32px; height: 32px; }
.tkid { font-family: var(--f-num); font-size: 1.2rem; color: var(--sky); letter-spacing: .08em; }

/* ---- صفحة 404 ---- */
.nf { text-align: center; padding: 60px 16px; }
.nf-code { display: block; font-family: var(--f-num); font-size: 6rem; line-height: 1; color: var(--sky); text-shadow: 0 0 40px var(--glow-strong); }
.nf h2 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; margin: 8px 0; }
.nf p { color: var(--mute); margin: 0 0 20px; }

/* ---- أيقونات بصور (PNG/WebP) بدل SVG: بدّل الملف داخل assets/icons/ فقط ---- */
.si img { width: 56%; height: 56%; object-fit: contain; }
.afi img { width: 52%; height: 52%; object-fit: contain; }
.cat .ic img { width: 56%; height: 56%; object-fit: contain; }
.cat.big .ic img { width: 58%; height: 58%; }
.soc .art img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 90%, transparent)); }

/* ---- الفوتر ---- */
.foot { position: relative; overflow: hidden; margin-top: 56px; margin-inline: -16px; padding: 56px 16px calc(24px + 70px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--edge-soft); background: linear-gradient(180deg, transparent, var(--deep) 60%); }
.foot .wrap { position: relative; }
.foot-main { display: flex; justify-content: space-between; gap: 40px 56px; flex-wrap: wrap; }
.foot-brand { max-width: 360px; flex: 1 1 260px; }
.fb-logo { display: inline-flex; align-items: center; gap: 12px; }
.fb-logo img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--blue), 0 0 18px var(--glow-strong); }
.fb-logo b { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .03em; line-height: 1; }
.foot-brand p { margin: 16px 0 18px; color: var(--text2); line-height: 1.8; }
.foot-soc { display: flex; gap: 10px; }
.foot-soc a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, #3a85ff, #123fb8); border: 1px solid var(--edge-strong); box-shadow: 0 6px 16px var(--glow); transition: transform .2s, box-shadow .2s; }
.foot-soc a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px var(--glow-strong); }
.foot-soc img { width: 22px; height: 22px; object-fit: contain; }
.foot-cols { display: flex; gap: 40px 64px; flex-wrap: wrap; }
.fcol { display: flex; flex-direction: column; gap: 10px; min-width: 130px; }
.fcol h4 { margin: 0 0 8px; padding-inline-start: 12px; border-inline-start: 3px solid var(--blue); font-size: 1.05rem; line-height: 1.2; }
.fcol a { color: var(--mute); font-size: .95rem; transition: color .2s; }
.fcol a:hover { color: var(--sky); }
.foot-bottom { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--edge-soft); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: var(--mute); font-size: .9rem; }

/* ---- زر الرجوع للأعلى ---- */
.totop { position: fixed; z-index: 40; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; color: #fff; background: linear-gradient(145deg, #3a85ff, #123fb8); border: 1px solid var(--edge-strong); box-shadow: 0 8px 22px var(--glow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { transform: translateY(-3px); }
.totop svg { width: 22px; height: 22px; }
@media (max-width: 680px) {
  .foot { padding-top: 40px; }
  .foot-cols { gap: 28px 40px; }
}

/* ---- البحث ---- */
.acct { display: flex; align-items: center; gap: 8px; }
.sbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; color: var(--text); background: var(--tint); border: 1px solid var(--edge-strong); }
.sbtn:hover { background: var(--tint2); }
.sbtn svg { width: 18px; height: 18px; }
.modal.sm { align-items: start; padding-top: min(12vh, 90px); z-index: 60; }
.sheet.search { width: min(640px, 100%); padding: 0; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; max-height: min(78vh, 640px); }
.sbox { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--edge-soft); color: var(--mute); }
.sbox > svg { width: 20px; height: 20px; flex: none; }
.sbox input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; color: var(--text); background: transparent; border: 0; outline: 0; }
.sbox input::-webkit-search-cancel-button { display: none; }
.sbox button { cursor: pointer; background: transparent; border: 0; padding: 0; }
.sbox kbd { font-family: var(--f-num); font-size: .75rem; padding: 2px 8px; border-radius: 6px; color: var(--mute); border: 1px solid var(--edge); background: var(--tint); }
.slist { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.slist a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; }
.slist a:hover, .slist a.on { background: var(--tint2); border-color: var(--edge-strong); }
.sk { flex: none; margin-top: 2px; font-size: .72rem; font-weight: 800; padding: 1px 10px; border-radius: 99px; color: #fff; background: var(--blue); }
.sb { display: flex; flex-direction: column; min-width: 0; }
.sb b { font-size: 1rem; }
.sb em { font-style: normal; font-size: .8rem; color: var(--sky); font-weight: 700; }
.sb small { color: var(--mute); font-size: .85rem; line-height: 1.55; }
.slist mark { background: var(--tint2); color: var(--sky); border-radius: 3px; padding: 0 2px; }
.shint { padding: 22px 12px; text-align: center; color: var(--mute); }
@media (max-width: 680px) { .sbtn { width: 38px; height: 38px; } }

/* ---- قائمة الحساب ---- */
.chip-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 12px; border-radius: 12px; cursor: pointer; color: var(--text); background: var(--tint); border: 1px solid var(--edge-strong); font-weight: 700; font-size: inherit; }
.chip-btn:hover, .chip-btn[aria-expanded="true"] { background: var(--tint2); }
.chip-btn b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.chip-btn .caret { width: 14px; height: 14px; color: var(--mute); transition: transform .2s; }
.chip-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.menu { position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline-end: 0; min-width: 148px; padding: 4px; border-radius: 11px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: 0 12px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 1px; }
.menu a, .menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; padding: 6px 10px; border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; color: var(--text); background: transparent; border: 0; cursor: pointer; }
.menu svg { flex: none; width: 15px; height: 15px; padding: 4px; box-sizing: content-box; border-radius: 7px; background: var(--tint); color: var(--sky); transition: background .2s; }
.menu a:hover svg, .menu button:hover svg { background: var(--tint2); }
.menu a:hover, .menu button:hover { background: var(--tint2); }
.menu .out { color: var(--bad); }
.menu .out svg { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }

/* ---- شارة الإصدار القادم فوق الأزرار ---- */

/* ---- التذاكر ---- */
.mt { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.mt-list { display: flex; flex-direction: column; gap: 10px; }
.mt-item { display: block; width: 100%; text-align: start; padding: 14px 16px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--edge); transition: border-color .2s, background .2s; }
.mt-item:hover { border-color: var(--sky); }
.mt-item.on { border-color: var(--sky); background: var(--tint2); }
.mt-item b { display: block; font-size: 1rem; }
.mt-item small { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--mute); font-family: var(--f-num); }
.st { font-family: var(--f-body); font-size: .72rem; font-weight: 800; padding: 1px 10px; border-radius: 99px; color: #fff; background: var(--blue); }
.st.wait { background: #c28a0a; }
.st.ans { background: #16996a; }
.st.closed { background: #6b7694; }
.mt-view { padding: 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge); min-width: 0; }
.mt-view h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; }
.mt-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0 14px; color: var(--mute); font-size: .9rem; }
.mt-meta .tkid { font-family: var(--f-num); direction: ltr; color: var(--sky); font-weight: 700; }
.mt-fields { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--tint); display: grid; gap: 8px; }
.mt-fields div { display: grid; gap: 0; }
.mt-fields dt { font-size: .8rem; color: var(--mute); font-weight: 700; }
.mt-fields dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bub { max-width: 88%; padding: 10px 14px; border-radius: 14px; background: var(--tint); border: 1px solid var(--edge); }
.bub.admin { align-self: flex-start; background: var(--tint2); border-color: var(--edge-strong); }
.bub.user { align-self: flex-end; }
.bub .bh { display: flex; gap: 10px; align-items: baseline; font-size: .8rem; color: var(--mute); }
.bub .bh b { color: var(--text); font-size: .9rem; }
.bub.admin .bh b { color: var(--sky); }
.bub p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.wait-note { padding: 12px 14px; border-radius: 12px; text-align: center; color: var(--mute); background: var(--tint); margin-bottom: 14px; }
.mt-reply { display: flex; flex-direction: column; gap: 10px; }
.mt-reply textarea { width: 100%; font: inherit; color: var(--text); background: var(--code); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 12px; resize: vertical; min-height: 90px; }
.mt-reply textarea:focus { outline: 2px solid var(--sky); border-color: transparent; }
.mt-reply .cta { align-self: flex-start; border: 0; cursor: pointer; }
.mt-empty { padding: 40px 20px; text-align: center; border-radius: 18px; background: var(--panel); border: 1px dashed var(--edge-strong); color: var(--mute); }
.mt-empty .cta { margin-top: 14px; display: inline-block; }
@media (max-width: 900px) { .mt { grid-template-columns: minmax(0, 1fr); } }

/* ---- سياسة الخصوصية ---- */
.article h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; margin: 26px 0 8px; }
.article ul { max-width: 68ch; margin: 0 0 16px; padding-inline-start: 22px; color: var(--text2); line-height: 1.95; font-size: 1.05rem; }
.article .upd { color: var(--sky); font-family: var(--f-num); font-weight: 600; }

.subbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--edge); }
.subbar a { padding: 8px 20px; border-radius: 10px; font-weight: 800; color: var(--mute); border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s; }
.subbar a:hover, .subbar a.on { color: var(--text); background: var(--tint2); border-color: var(--edge-strong); }

/* شريط الإعلان */
.notice { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(100deg, var(--tint2), var(--tint)); border: 1px solid var(--edge-strong); border-inline-start: 4px solid var(--sky); box-shadow: 0 8px 24px var(--glow); }
.notice .n-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3a85ff, #123fb8); }
.notice .n-ic svg { width: 20px; height: 20px; }
.notice p { margin: 0; flex: 1; min-width: 0; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.notice .n-x { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: var(--mute); background: transparent; border: 1px solid transparent; }
.notice .n-x:hover { color: var(--text); background: var(--tint2); border-color: var(--edge-strong); }
.notice .n-x svg { width: 15px; height: 15px; }
.msg .mdel { margin-inline-start: auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--mute); background: transparent; border: 0; opacity: .6; }
.msg .mdel:hover { color: var(--bad); background: var(--tint); opacity: 1; }
.msg .mh { align-items: center; }
.msg { width: 100%; } .msg .mb { flex: 1; }
.composer input:disabled { opacity: .7; }
.composer button:disabled { opacity: .5; cursor: not-allowed; }
.user-chip .av.img, .msg .av.img { background-size: cover; background-position: center; }

/* ===== لوحة الإدارة ===== */
body[data-page="admin"] .grid { grid-template-columns: minmax(0, 1fr); }
/* صفحة الملف الشخصي: بدون عمود السيرفر الجانبي */
body[data-page="member"] .grid { grid-template-columns: minmax(0, 1fr); }
body[data-page="member"] .side { display: none; }
body[data-page="admin"] .server { display: none; }
body[data-page="admin"] .wrap { max-width: 1400px; padding-inline: 20px; }
.adm-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.adm-tabs { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: 0 14px 40px var(--glow); }
.adm-tabs button { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; color: var(--mute); background: transparent; border: 1px solid transparent; text-align: start; }
.adm-tabs button svg { width: 20px; height: 20px; flex: none; }
.adm-tabs button:hover { color: var(--text); background: var(--tint); }
.adm-tabs button.on { color: #fff; background: linear-gradient(135deg, #2f7bff, #1043bd); box-shadow: 0 8px 20px rgba(31, 107, 255, .35); }
.adm-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.adm-card { padding: 24px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: 0 14px 40px var(--glow); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.adm-card h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; }
.adm-card h4 { margin: 0; font-size: 1.05rem; color: var(--sky); }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.adm-stat { position: relative; padding: 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge-strong); overflow: hidden; }
.adm-stat::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--c, var(--blue)); }
.adm-stat b { display: block; font-family: var(--f-num); font-size: 2.4rem; line-height: 1.1; }
.adm-stat span { color: var(--mute); font-weight: 700; }
.adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.adm-scroll { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.adm-table th, .adm-table td { padding: 12px 12px; text-align: start; border-bottom: 1px solid var(--edge-soft); vertical-align: middle; }
.adm-table th { color: var(--mute); font-weight: 800; white-space: nowrap; }
.adm-table tr:hover td { background: var(--tint); }
.adm-card input:not([type=checkbox]), .adm-card select, .adm-card textarea { padding: 11px 14px; border-radius: 12px; background: var(--code); border: 1px solid var(--edge); color: var(--text); font: inherit; min-width: 0; }
.adm-card input:focus, .adm-card select:focus, .adm-card textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--tint2); }
.adm-card textarea { width: 100%; resize: vertical; }
.adm-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.adm-form input:not([type=checkbox]), .adm-form select { flex: 1 1 220px; }
.adm-form .full { flex: 1 1 100%; }
.adm-card button:not(.ghost), .adm-table button { padding: 7px 14px; border-radius: 10px; font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; color: var(--text); background: var(--tint); border: 1px solid var(--edge-strong); }
.adm-card button:not(.ghost):hover { background: var(--tint2); }
.adm-card button.red { color: var(--bad); }
.adm-card button:disabled { opacity: .4; cursor: default; }
.adm-card .ghost { cursor: pointer; font: inherit; font-weight: 800; padding: 10px 22px; }
.adm-card a.ghost { display: inline-block; }
.adm-table .acts, .adm-item .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sm { color: var(--mute); font-size: .84rem; }
.chk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.adm-user { display: flex; align-items: center; gap: 12px; }
.adm-user .av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #5865f2; background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--edge-strong); }
.adm-role { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .8rem; font-weight: 800; color: var(--text); background: var(--tint2); }
.adm-group { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--tint); }
.adm-group-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge); flex-wrap: wrap; }
.adm-warn { padding: 14px 18px; border-radius: 14px; background: rgba(255, 93, 108, .12); border: 1px solid var(--bad); font-size: .95rem; }
@media (max-width: 900px) {
  .adm-layout { grid-template-columns: minmax(0, 1fr); }
  .adm-tabs { position: static; flex-direction: row; overflow-x: auto; }
  .adm-tabs button { white-space: nowrap; }
}

/* ===== إحصائيات المنتدى (الرئيسية، تحت السيرفر) ===== */
.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body[data-page="admin"] .side { display: none; }
.fxw { border-radius: 18px; padding: 12px 14px; min-width: 0; background: linear-gradient(180deg, var(--card-top), var(--card-bot) 75%); border: 1px solid var(--edge-strong); box-shadow: 0 0 0 1px var(--tint), 0 14px 40px var(--glow); }
.fxw[hidden] { display: none; }
.fxw h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; margin: 0 0 8px; line-height: 1.3; }
.fxw-st { display: flex; gap: 6px; margin-bottom: 8px; }
.fxw-st div { flex: 1; text-align: center; padding: 5px 2px; border-radius: 10px; background: var(--tint); border: 1px solid var(--edge-soft); line-height: 1.2; }
.fxw-st b { display: block; font-family: var(--f-num); font-size: .95rem; }
.fxw-st small { color: var(--mute); font-size: .68rem; }
.fxw-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.fxw-tabs button { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--edge); background: var(--tint); color: var(--mute); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.fxw-tabs button:hover { color: var(--text); }
.fxw-tabs button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.fxw-list { list-style: none; margin: 0; padding: 0; min-height: 90px; }
.fxw-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--edge-soft); min-width: 0; }
.fxw-list li:first-child { border-top: 0; }
.fxw-av { position: relative; flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: linear-gradient(145deg, #3a85ff, #123fb8); color: #fff; font-weight: 800; font-size: .75rem; }
.fxw-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fxw-tx { flex: 1; min-width: 0; line-height: 1.3; }
.fxw-tx a, .fxw-tx b { display: block; color: var(--text); font-weight: 700; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxw-tx a:hover { color: var(--sky); }
.fxw-tx small { display: block; color: var(--mute); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxw-m { flex: none; text-align: center; padding: 2px 7px; border-radius: 7px; background: var(--tint); font-size: .66rem; color: var(--mute); line-height: 1.25; }
.fxw-m b { display: block; font-family: var(--f-num); color: var(--text); font-size: .8rem; }
.fxw-empty { padding: 20px 0; text-align: center; color: var(--mute); font-size: .82rem; }

/* ---- زر التذاكر بجنب البحث + العداد ---- */
.tkbtn { position: relative; text-decoration: none; }
.tkbtn[hidden], .adbtn[hidden] { display: none; }
.adbtn { text-decoration: none; }
.tkbtn .tkn { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 800 .7rem/18px Rajdhani, Tajawal, sans-serif; text-align: center; color: var(--text); background: var(--tint2); border: 1px solid var(--edge-strong); }
.tkbtn.has .tkn { color: #fff; background: #e0283b; border-color: #e0283b; }
.tkbtn.has svg { color: #ff8a95; }

.msg .mh a.mname { font-weight: 800; text-decoration: none; }
.msg .mh a.mname:hover { text-decoration: underline; }
.fxw-tx small a { display: inline; font-size: inherit; font-weight: inherit; color: inherit; white-space: nowrap; overflow: visible; }
.fxw-tx small a:hover { color: var(--sky); text-decoration: underline; }
.msg .mh a.mname { font-size: .95rem; }
.fxw-al { display: contents; }
.msg a.av { text-decoration: none; }
.adm-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; margin: 12px 0; }
.adm-pgrid .chk { align-items: flex-start; font-weight: 600; font-size: .9rem; }
.adm-pgrid .chk input { margin-top: 4px; }

.adm-pgrid { display: block; }
.adm-pg { border: 1px solid var(--line, rgba(146,168,220,.22)); border-radius: 12px; padding: 10px 14px 12px; margin: 0 0 12px; min-width: 0; }
.adm-pg legend { padding: 0 8px; font-weight: 800; font-size: .92rem; color: inherit; }
.adm-pg .chk { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-weight: 600; font-size: .9rem; }
.adm-pg .chk input { margin-top: 4px; }
.adm-ulink { color: inherit; text-decoration: none; }
.adm-ulink:hover b { text-decoration: underline; }

/* ---- اختيار اللغة (أسفل الصفحة) + اتجاه الإنجليزي ---- */
html.pre-en .shell { visibility: hidden; }
.langpick { display: inline-flex; align-items: center; gap: 8px; color: var(--muted, inherit); }
.langpick svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.langpick select { appearance: auto; font: inherit; font-size: .9rem; font-weight: 700; color: inherit; background: var(--bar, rgba(255,255,255,.06)); border: 1px solid rgba(127,150,200,.35); border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.langpick select:focus-visible { outline: 2px solid #5aa2ff; outline-offset: 2px; }
.langpick select option { color: #111; background: #fff; }
.foot-bottom { gap: 10px; }
.lang-en body, .lang-en .shell { font-family: "Tajawal", "Rajdhani", system-ui, sans-serif; }


.plist { margin: 12px 0 4px; border: 1px solid var(--edge-strong); border-radius: 12px; background: var(--tint); }
.plist summary { cursor: pointer; padding: 9px 14px; font-weight: 800; }
.plist ul { list-style: none; margin: 0; padding: 0 14px 10px; max-height: 220px; overflow-y: auto; display: grid; gap: 4px; }
.plist li { padding: 4px 10px; border-radius: 8px; background: rgba(127,127,127,.12); font-size: .95rem; overflow-wrap: anywhere; }

/* شارات الأعضاء في لوحة الإدارة */
.adm-bchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.adm-bchips span{padding:1px 8px;border-radius:99px;background:var(--tint2);border:1px solid var(--edge-strong);font-size:.72rem;font-weight:800}
.adm-bpick{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.sheet .adm-row{margin-top:8px}

/* ===== الشارات (مشتركة: المنتدى + لوحة الإدارة) =====
   الحجم 170x30 والخط Arial Bold 11px مثل الصورة المرجعية. اللون يجي من --c (يحدده الأدمن) */
.fx-bgs{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:12px;align-items:center}
.fx-bgg{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.fx-pips{display:flex;justify-content:center;gap:2px;direction:ltr;margin:0 0 2px}
.fx-pips i{display:block;width:5px;height:8px;border-radius:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--rc,#e0283b) 72%,#fff),var(--rc,#e0283b))}
.fx-bg{--c:#b28a38;--g1:color-mix(in srgb,var(--c) 82%,#fff);--g2:color-mix(in srgb,var(--c) 68%,#000);--bd:color-mix(in srgb,var(--c) 50%,#fff);
  position:relative;direction:ltr;display:flex;align-items:center;gap:4px;width:152px;max-width:100%;height:18px;padding:0 6px 0 2px;border-radius:4px;border:1px solid var(--bd);box-sizing:border-box;
  background:linear-gradient(180deg,var(--g1),var(--g2));color:#fff;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -6px 10px rgba(0,0,0,.12)}
.fx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28) 0 16%,transparent 16% 100%);pointer-events:none}
.fx-bg .bi{position:relative;z-index:1;flex:none;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--c) 45%,#fff);box-sizing:border-box;box-shadow:inset 0 0 4px rgba(0,0,0,.45)}
.fx-bg .bi svg{width:10px;height:10px;color:#fff3c4}
.fx-bg b{position:relative;z-index:1;flex:1;min-width:0;text-align:center;font:400 10px/1 Silkscreen,Tahoma,Arial,sans-serif!important;color:#fff3cf;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:keep-all}
.adm-bsheet{width:min(520px,100%)}
.adm-bdefs{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.adm-bdef{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-bdef .fx-bg{flex:none}.adm-bdef .sm{flex:1}
.adm-bprev{display:flex;justify-content:center;padding:14px;margin:10px 0;border-radius:12px;background:var(--tint);border:1px solid var(--edge-soft)}
.adm-bf{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-weight:800;font-size:.88rem}
.adm-bf input:not([type=color]){padding:8px 10px;border-radius:10px;border:1px solid var(--edge-strong);background:var(--code);color:var(--text);font:inherit}
.adm-bcol{display:flex;gap:8px;align-items:center}.adm-bcol input[type=color]{width:46px;height:36px;padding:0;border:0;background:none;cursor:pointer}.adm-bcol input[maxlength="7"]{width:110px;direction:ltr}
.adm-bicons{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.adm-bicons button{height:40px;border-radius:10px;border:1px solid var(--edge-strong);background:var(--code);color:var(--text);cursor:pointer;display:grid;place-items:center}
.adm-bicons button.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue);background:var(--tint2)}
.adm-bicons svg{width:22px;height:22px}
.adm-bpick .chk{display:flex;align-items:center;gap:10px}
.adm-bpick .fx-bg{flex:none}

/* نافذة تعديل العضو (لوحة الإدارة) */
.adm-eu-av .av { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; color: #fff; background: #5865f2; background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--edge-strong); }

/* بوت التذاكر */
.bub.bot { align-self: flex-start; background: rgba(61,220,151,.08); border-color: rgba(61,220,151,.35); }
.bub.bot .bh b { color: #3ddc97; }
.bub .bottag { display: inline-block; margin-inline-start: 4px; padding: 0 6px; border-radius: 6px; font: 800 .65rem/16px Rajdhani, Tajawal, sans-serif; letter-spacing: .06em; color: #06281b; background: #3ddc97; vertical-align: 1px; }
.bub a { color: var(--sky); text-decoration: underline; overflow-wrap: anywhere; }
.bub.sys { align-self: center; max-width: 100%; text-align: center; padding: 4px 12px; background: transparent; border: 0; color: var(--mute); }
.bub.sys p { display: inline; margin: 0; font-size: .85rem; line-height: 1.5; }
.bub.sys time { margin-inline-start: 8px; font-size: .75rem; opacity: .8; }
.rate-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--tint); border: 1px solid var(--edge-strong); }
.rate-box b { display: block; font-size: .85rem; color: var(--sky); }
.rate-box p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }

/* الأعضاء الجدد (الرئيسية) وصفحة الأعضاء */
.nmx { border-radius: 20px; padding: 16px; background: var(--panel); border: 1px solid var(--edge); }
.nmx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nmx-txt h3 { margin: 0; font-size: 1.05rem; }
.nmx-txt p { margin: 2px 0 0; color: var(--mute); font-size: .82rem; }
.nmx-all { flex: none; padding: 7px 16px; border-radius: 10px; font-weight: 800; font-size: .88rem; color: var(--text); background: var(--tint); border: 1px solid var(--edge); transition: border-color .15s, background .15s; }
.nmx-all:hover { border-color: var(--sky); background: var(--tint2); }
.nm-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.nm-u { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--tint); border: 1px solid var(--edge-soft); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, background .15s; }
.nm-u:hover { transform: translateY(-2px); border-color: var(--edge-strong); background: var(--tint2); }
.nm-av { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(145deg, #3a85ff, #123fb8); border: 2px solid var(--edge-strong); }
.nm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nm-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.nm-tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.nm-tx small { color: var(--mute); font-size: .72rem; }
.nm-empty { grid-column: 1 / -1; padding: 14px 0; text-align: center; color: var(--mute); font-size: .9rem; }
/* ===== قائمة الأعضاء (جدول) ===== */
.mem-filter { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 12px; border-radius: 14px; background: var(--tint); border: 1px solid var(--edge-soft); }
.mem-frow { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.mem-fl { font-weight: 800; font-size: .85rem; color: var(--text2); }
.mem-az { display: flex; flex-wrap: wrap; gap: 4px; direction: ltr; }
.mem-az button, .mem-grp button, .mem-pager button { min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 6px; background: var(--panel); color: var(--text); font: 700 .78rem var(--f-body, inherit); cursor: pointer; }
.mem-az button:hover, .mem-grp button:hover, .mem-pager button:hover:not(:disabled) { border-color: var(--sky); }
.mem-az button.on, .mem-grp button.on, .mem-pager button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.mem-frow input { flex: 1; min-width: 180px; max-width: 320px; font: inherit; color: var(--text); background: var(--code); border: 1px solid var(--edge); border-radius: 12px; padding: 8px 12px; }
.mem-frow input:focus { outline: 2px solid var(--sky); border-color: transparent; }
.mem-grp { display: flex; flex-wrap: wrap; gap: 6px; }
.mem-grp button { height: 30px; padding: 0 12px; border-radius: 99px; font-size: .82rem; }
.mem-grp button i { font-style: normal; opacity: .7; margin-inline-start: 4px; font-family: var(--f-num); }
.mem-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.mem-count { color: var(--mute); font-size: .85rem; }
.mem-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; direction: ltr; }
.mem-pager em { color: var(--mute); font-style: normal; padding: 0 2px; }
.mem-pager .mem-pn { color: var(--mute); font-size: .85rem; direction: rtl; }
.mem-pager button:disabled { opacity: .45; cursor: default; }
.mem-table { border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--panel); }
.mem-th, .mem-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 1fr .8fr 1fr 1fr; gap: 10px; align-items: center; padding: 10px 14px; }
.mem-th { background: var(--tint); border-bottom: 1px solid var(--edge); }
.mem-h { background: none; border: 0; padding: 0; font: 800 .9rem var(--f-body, inherit); color: var(--text); cursor: pointer; text-align: start; }
.mem-h:hover, .mem-h.on { color: var(--sky); }
.mem-h i { font-style: normal; font-size: .65rem; }
.mem-row { border-top: 1px solid var(--edge-soft); }
.mem-row:first-child { border-top: 0; }
.mem-row:hover { background: var(--tint); }
.mem-c { min-width: 0; font-size: .86rem; color: var(--text2); font-family: var(--f-num); }
.mem-c-name { display: flex; align-items: flex-start; gap: 12px; font-family: inherit; }
.mem-c-rating { display: flex; justify-content: flex-start; }
.mem-c-rating .ug-rate i { width: 5px; height: 8px; }
.mem-av-a { flex: none; }
.mem-av2 { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; overflow: visible; background: linear-gradient(145deg,#2a2f45,#12162a); color: #fff; font-weight: 800; border: 2px solid var(--rc, #fff); }
.mem-av2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.mem-on { position: absolute; bottom: -4px; inset-inline-end: -4px; width: 12px; height: 12px; border-radius: 50%; background: #3ddc97; border: 2px solid var(--panel); }
.mem-onl { color: #3ddc97; font-weight: 700; font-family: inherit; }
.mem-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; max-width: 190px; }
.mem-nmrow { display: flex; align-items: center; gap: 6px; }
.mem-nmrow a { color: inherit; }
.mem-row b.fx-nm { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 4px 8px 1px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 88%, #fff), var(--rc)); color: #fff; font-family: var(--f-display, Lalezar), Tajawal, sans-serif; font-weight: 400; line-height: 1.35; text-shadow: 0 2px 2px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.5); overflow-wrap: anywhere; }
.mem-pm { color: var(--mute); display: inline-grid; }
.mem-pm:hover { color: var(--sky); }
.mem-who .fx-rc { margin-top: 0; }
.mem-empty { padding: 30px; text-align: center; color: var(--mute); }
@media (max-width: 760px) {
  .mem-th { display: none; }
  .mem-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .mem-c-name { grid-column: 1 / -1; }
  .mem-c[data-l]::before { content: attr(data-l) ": "; color: var(--mute); font-family: var(--f-body, inherit); }
  .mem-c-rating { grid-column: 1 / -1; }
}

/* لون اسم العضو = لون رتبته (نفس ألوان كرت الرتبة بالمنتدى). الرتب الداكنة لها نسخة أفتح للوضع الداكن */
.rkn.rkn.rkn { color: var(--rkd, var(--rk, inherit)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .rkn.rkn.rkn { color: var(--rk, inherit); } }
:root[data-theme="light"] .rkn.rkn.rkn { color: var(--rk, inherit); }

/* زر إخفاء/إظهار قسم «أعضاء جدد» بالرئيسية */
.nm-toggle { order: 2; align-self: center; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--edge); background: var(--tint); color: var(--mute); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; transition: border-color .15s, color .15s; }
.nm-toggle:hover { border-color: var(--sky); color: var(--text); }

/* نقطة «متصل» جنب صورة اللاعب (تظهر فقط للمتصل) */
.ug-on { position: absolute; bottom: 0; inset-inline-end: 0; z-index: 2; width: 11px; height: 11px; border-radius: 50%; background: #3ddc97; border: 2px solid var(--panel, #fff); box-shadow: 0 0 6px rgba(61,220,151,.8); pointer-events: none; }
.fxw-av { overflow: visible; } .fxw-av img { border-radius: 50%; } .fxw-av .ug-on { width: 9px; height: 9px; border-width: 1.5px; }
.nm-av { overflow: visible; } .nm-av img { border-radius: 50%; } .nm-av .ug-on { width: 12px; height: 12px; border-width: 2px; }
.msg .av { position: relative; } .msg .av .ug-on { width: 9px; height: 9px; border-width: 1.5px; }

/* لوحة الإدارة: اختيار لون الرتبة */
.adm-color { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.adm-color input[type="color"] { width: 48px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--edge-strong); background: var(--tint); cursor: pointer; }
.adm-color #pcprev { font-size: 1rem; }

/* ---- الشريط العلوي: تبويبات بخط ضوئي ينزل على حافة الهيدر ---- */
.top { padding-block: 0; box-shadow: 0 12px 34px -22px var(--glow-strong); }
.top .wrap { align-items: stretch; }
.top .brand, .top .acct { align-self: center; margin-block: 10px; }
.brand img { flex: none; object-fit: cover; }
nav.mainnav { position: relative; display: flex; flex-wrap: nowrap; align-self: stretch; align-items: stretch; gap: 6px; padding: 0; }
nav.mainnav a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border: 0; border-radius: 0; background: none;
  font-weight: 800; font-size: .98rem; white-space: nowrap; color: var(--mute); transition: color .25s; }
nav.mainnav a svg { width: 20px; height: 20px; flex: none; padding: 4px; box-sizing: content-box; border-radius: 9px; background: var(--tint); transition: background .25s, color .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
nav.mainnav a:hover { color: var(--text); background: none; }
nav.mainnav a:hover svg { background: var(--tint2); transform: translateY(-2px); }
nav.mainnav a.on { color: var(--text); background: none; }
nav.mainnav a.on svg { color: #fff; background: linear-gradient(135deg, var(--sky), var(--blue)); box-shadow: 0 4px 14px var(--glow-strong); }
.nav-pill { position: absolute; z-index: 0; top: auto; bottom: -1px; height: 3px; inset-inline-start: 0; width: 0; border-radius: 3px 3px 0 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sky) 25%, var(--blue) 50%, var(--sky) 75%, transparent);
  box-shadow: 0 0 14px 1px var(--glow-strong);
  transition: transform .45s cubic-bezier(.3,1.25,.4,1), width .45s cubic-bezier(.3,1.25,.4,1), opacity .2s; }
.nav-pill.ready { opacity: 1; }
.nav-pill::before { content: ""; position: absolute; inset-inline: -14%; bottom: 3px; height: 62px; pointer-events: none;
  background: linear-gradient(to top, var(--glow), transparent); clip-path: polygon(14% 100%, 86% 100%, 100% 0, 0 0); transform: scaleY(-1); transform-origin: center; opacity: .9; }
/* الضو ممنوع يطلع من الشريط: كل شي داخل الشريط ينقص عند حدوده */
nav.mainnav, .sbar-in { overflow: hidden; }
nav.mainnav .nav-pill, .sbar-in .nav-pill { bottom: 0; }
.nav-pill::after { display: none; }
@media (max-width: 760px) {
  .top .wrap { row-gap: 0; }
  .top .brand, .top .acct { margin-block: 10px; }
  nav.mainnav { width: 100%; gap: 0; }
  nav.mainnav a { flex: 1 1 0; min-width: 0; justify-content: center; flex-direction: column; gap: 3px; padding: 8px 2px 10px; font-size: .74rem; }
  nav.mainnav a svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .nav-pill, nav.mainnav a svg { transition: none; } }

/* ---- بانر الهيدر (GIF) ---- */
.banner-wrap { padding-top: 14px; }
.banner { position: relative; display: block; overflow: hidden; border-radius: 20px; line-height: 0;
  border: 1px solid var(--edge-strong);
  box-shadow: 0 18px 44px -20px var(--glow-strong), 0 0 0 4px var(--tint); }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 975 / 225; object-fit: cover; object-position: center; }
.banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--shine), inset 0 -40px 50px -30px rgba(2,5,15,.45); }
@media (max-width: 760px) {
  .banner-wrap { padding-top: 10px; }
  .banner { border-radius: 16px; }
  .banner img { aspect-ratio: auto; height: 130px; }
}

/* ---- v4: بانر يتبع وضع الموقع (داكن/أبيض) + شريط يبدأ من الرئيسية ---- */
.hero-head { margin-inline: -16px; background: var(--ink); padding: 0 16px; }
.banner { display: block; max-width: 975px; margin-inline: auto; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: none; line-height: 0; }
.banner::after { display: none; }
.banner img { width: 100%; height: auto; aspect-ratio: 975 / 225; }
.banner .b-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .banner .b-dark { display: none; }
  :root:not([data-theme="dark"]) .banner .b-light { display: block; }
}
:root[data-theme="light"] .banner .b-dark { display: none; }
:root[data-theme="light"] .banner .b-light { display: block; }
:root[data-theme="dark"] .banner .b-dark { display: block; }
:root[data-theme="dark"] .banner .b-light { display: none; }
.top .wrap { grid-template-columns: 1fr auto; }
nav.mainnav { justify-self: start; }
@media (max-width: 760px) {
  .top .wrap { grid-template-columns: 1fr; row-gap: 0; }
  .top .acct { grid-column: 1; grid-row: 1; justify-self: end; margin-block: 8px 4px; }
  nav.mainnav { grid-column: 1; grid-row: 2; }
}

/* ---- v5: البانر غير قابل للضغط/كليك يمين + الشريط يمتد من أقصى اليمين لأقصى اليسار ---- */
body { margin: 0; }
.banner { cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.banner img { pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }
:root { --edge-l: linear-gradient(to bottom,#133787 0px,#133789 8px,#123582 16px,#102f74 24px,#0f2b6b 32px,#0f2b6b 40px,#0f2b6a 48px,#0e2a67 56px,#0e2965 64px,#0e2965 72px,#0e2964 80px,#0d2760 88px,#0c2254 96px,#091b42 104px,#061330 112px,#040d20 120px,#030918 128px,#020813 136px,#02060f 144px,#01050e 152px,#01050e 160px,#01050d 168px,#01050c 176px,#01040b 184px,#01040b 185px,#01040b 186px,#010308 187px,#010308 188px,#010409 189px,#01040a 190px,#02050f 198px,#02050f 206px,#02050f 214px,#02050f 222px,#02050f 224px); --edge-r: linear-gradient(to bottom,#030918 0px,#030a18 8px,#030a19 16px,#040b1c 24px,#040d20 32px,#050e23 40px,#050f25 48px,#040f24 56px,#050f26 64px,#05112a 72px,#061330 80px,#071636 88px,#071738 96px,#071637 104px,#071432 112px,#06122c 120px,#051027 128px,#051027 136px,#06112a 144px,#06132f 152px,#071535 160px,#08183a 168px,#08193d 176px,#08193d 184px,#08193d 185px,#08193d 186px,#010308 187px,#010409 188px,#010409 189px,#01040a 190px,#02050e 198px,#02050f 206px,#02050f 214px,#02050f 222px,#02050f 224px); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --edge-l: linear-gradient(to bottom,#cae2fc 0px,#cae2fc 8px,#c9e2fc 16px,#c5dffb 24px,#c3defb 32px,#c2defb 40px,#c1ddfb 48px,#c1dcfa 56px,#c0dcfa 64px,#c0dcfa 72px,#c1dcfa 80px,#c1dcf9 88px,#c0dbf8 96px,#bcd7f6 104px,#b4d0f2 112px,#acc8ec 120px,#a7c2e7 128px,#a4bfe4 136px,#a2bde4 144px,#a1bce3 152px,#a1bce3 160px,#a1bce2 168px,#a0bbe2 176px,#a0bbe2 184px,#a0bbe2 185px,#a0bbe2 186px,#9bb2ca 187px,#9eb5cf 188px,#a3bad4 189px,#a8c0db 190px,#ecf2fe 198px,#f1f5ff 206px,#f1f5ff 214px,#f1f5ff 222px,#f1f5ff 224px); --edge-r: linear-gradient(to bottom,#afcbef 0px,#afccf0 8px,#b0ccf0 16px,#b0cdf0 24px,#b1cef1 32px,#b1cff2 40px,#b1d0f3 48px,#b0d0f4 56px,#b1d0f4 64px,#b2d2f5 72px,#b5d4f6 80px,#b7d6f6 88px,#b9d7f6 96px,#bad7f6 104px,#bad6f5 112px,#bad5f4 120px,#bbd5f3 128px,#bdd6f4 136px,#bfd8f4 144px,#c1d9f5 152px,#c2daf6 160px,#c3dbf7 168px,#c4dcf7 176px,#c4dcf7 184px,#c4dcf7 185px,#c4dcf7 186px,#9fb6ce 187px,#a3bad2 188px,#a8bed7 189px,#adc3dc 190px,#e4edfb 198px,#f1f5ff 206px,#f1f5ff 214px,#f1f5ff 222px,#f1f5ff 224px); }
}
:root[data-theme="light"] { --edge-l: linear-gradient(to bottom,#cae2fc 0px,#cae2fc 8px,#c9e2fc 16px,#c5dffb 24px,#c3defb 32px,#c2defb 40px,#c1ddfb 48px,#c1dcfa 56px,#c0dcfa 64px,#c0dcfa 72px,#c1dcfa 80px,#c1dcf9 88px,#c0dbf8 96px,#bcd7f6 104px,#b4d0f2 112px,#acc8ec 120px,#a7c2e7 128px,#a4bfe4 136px,#a2bde4 144px,#a1bce3 152px,#a1bce3 160px,#a1bce2 168px,#a0bbe2 176px,#a0bbe2 184px,#a0bbe2 185px,#a0bbe2 186px,#9bb2ca 187px,#9eb5cf 188px,#a3bad4 189px,#a8c0db 190px,#ecf2fe 198px,#f1f5ff 206px,#f1f5ff 214px,#f1f5ff 222px,#f1f5ff 224px); --edge-r: linear-gradient(to bottom,#afcbef 0px,#afccf0 8px,#b0ccf0 16px,#b0cdf0 24px,#b1cef1 32px,#b1cff2 40px,#b1d0f3 48px,#b0d0f4 56px,#b1d0f4 64px,#b2d2f5 72px,#b5d4f6 80px,#b7d6f6 88px,#b9d7f6 96px,#bad7f6 104px,#bad6f5 112px,#bad5f4 120px,#bbd5f3 128px,#bdd6f4 136px,#bfd8f4 144px,#c1d9f5 152px,#c2daf6 160px,#c3dbf7 168px,#c4dcf7 176px,#c4dcf7 184px,#c4dcf7 185px,#c4dcf7 186px,#9fb6ce 187px,#a3bad2 188px,#a8bed7 189px,#adc3dc 190px,#e4edfb 198px,#f1f5ff 206px,#f1f5ff 214px,#f1f5ff 222px,#f1f5ff 224px); }
:root[data-theme="dark"] { --edge-l: linear-gradient(to bottom,#133787 0px,#133789 8px,#123582 16px,#102f74 24px,#0f2b6b 32px,#0f2b6b 40px,#0f2b6a 48px,#0e2a67 56px,#0e2965 64px,#0e2965 72px,#0e2964 80px,#0d2760 88px,#0c2254 96px,#091b42 104px,#061330 112px,#040d20 120px,#030918 128px,#020813 136px,#02060f 144px,#01050e 152px,#01050e 160px,#01050d 168px,#01050c 176px,#01040b 184px,#01040b 185px,#01040b 186px,#010308 187px,#010308 188px,#010409 189px,#01040a 190px,#02050f 198px,#02050f 206px,#02050f 214px,#02050f 222px,#02050f 224px); --edge-r: linear-gradient(to bottom,#030918 0px,#030a18 8px,#030a19 16px,#040b1c 24px,#040d20 32px,#050e23 40px,#050f25 48px,#040f24 56px,#050f26 64px,#05112a 72px,#061330 80px,#071636 88px,#071738 96px,#071637 104px,#071432 112px,#06122c 120px,#051027 128px,#051027 136px,#06112a 144px,#06132f 152px,#071535 160px,#08183a 168px,#08193d 176px,#08193d 184px,#08193d 185px,#08193d 186px,#010308 187px,#010409 188px,#010409 189px,#01040a 190px,#02050e 198px,#02050f 206px,#02050f 214px,#02050f 222px,#02050f 224px); }
@media (min-width: 976px) {
  .hero-head { position: relative; }
  .hero-head::before, .hero-head::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; background-repeat: no-repeat; }
  .hero-head::before { left: 0; background-image: var(--edge-l); }
  .hero-head::after { right: 0; background-image: var(--edge-r); }
  .banner { position: relative; z-index: 1; }
  .banner img {
    clip-path: inset(0 4.1% 0 4.1%);
    -webkit-mask-image: linear-gradient(to right, transparent 4.1%, #000 9.85%, #000 90.15%, transparent 95.9%);
            mask-image: linear-gradient(to right, transparent 4.1%, #000 9.85%, #000 90.15%, transparent 95.9%);
  }
}

/* ---- v6: البانر يميل ثلاثي الأبعاد مع حركة الماوس ---- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .banner {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(var(--sc, 1), var(--sc, 1), 1);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
  }
  .banner.tilting { transition: transform .12s ease-out; }
  .banner::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 83%; pointer-events: none; z-index: 2; opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) calc(var(--gy, 50%) * 1.2), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%);
    transition: opacity .4s ease;
  }
  .banner.tilting::before { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (min-width: 976px) {
  .banner::before {
    left: 4.1%; right: 4.1%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* زر إخفاء/إظهار إحصائيات المنتدى (مخفي افتراضياً) */
.fxw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fxw-head h3 { margin: 0; }
.fxw-toggle { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--edge); background: var(--tint); color: var(--mute); font: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; transition: border-color .15s, color .15s; }
.fxw-toggle:hover { border-color: var(--sky); color: var(--text); }
.fxw-body { margin-top: 8px; }

/* محتوى التحديث (من المحرر) */
.nbody{line-height:1.9;overflow-wrap:anywhere}
.nbody img{max-width:100%;height:auto;border-radius:12px;margin:8px 0}
.nbody blockquote{margin:10px 0;padding:8px 14px;border-inline-start:3px solid var(--sky);background:var(--tint);border-radius:8px}
.nbody ul,.nbody ol{padding-inline-start:22px}
.nbody a{color:var(--sky);text-decoration:underline}
.nbody p{margin:0 0 10px}

/* شريط تحت الهيدر (داخل الهيدر فيلصق معه): خيارات أخرى + الأعضاء */
.sbar { margin-inline: -16px; padding-inline: 16px; background: var(--topbg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--edge-soft); }
.sbar-in { position: relative; display: flex; justify-content: flex-start; align-items: stretch; gap: 2px; max-width: 1240px; margin-inline: auto; }
.sbar a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: none; font-weight: 800; font-size: .74rem; white-space: nowrap; color: var(--mute); transition: color .25s; }
.sbar a[hidden] { display: none; }
.sbar a svg { width: 13px; height: 13px; flex: none; padding: 3px; box-sizing: content-box; border-radius: 7px; background: var(--tint); transition: background .25s, color .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.sbar a:hover, .sbar a.on { color: var(--text); }
.sbar a:hover svg { background: var(--tint2); transform: translateY(-2px); }
.sbar a.on svg { color: #fff; background: linear-gradient(135deg, var(--sky), var(--blue)); box-shadow: 0 4px 14px var(--glow-strong); }
/* ضوء الشريط الصغير: على قد الشريط، ويختفي عند النزول للأسفل */
.sbar .nav-pill { height: 2px; box-shadow: 0 0 8px 1px var(--glow-strong); transition: transform .45s cubic-bezier(.3,1.25,.4,1), width .45s cubic-bezier(.3,1.25,.4,1), opacity .3s; }
.sbar .nav-pill::before { height: 24px; bottom: 2px; }
.sbar.scrolled .nav-pill, .sbar.scrolled .nav-pill.ready { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sbar a svg { transition: none; } }

/* ===== شريط الإعلانات (تحت شريط الأعضاء): بلاطات 205×105، صفين، حركة تلقائية، وزر إخفاء/إظهار ===== */
.adsw { margin-inline: -16px; padding-inline: 16px; }
.adsw[hidden] { display: none; }
.ads-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1), opacity .3s; padding-top: 12px; }
.ads-clip { overflow: hidden; min-height: 0; }
.adsw.shut .ads-body { grid-template-rows: 0fr; opacity: 0; padding-top: 0; }
.ads-in { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 0 6px; direction: ltr; }
.ads-vp { overflow: hidden; direction: ltr; flex: none; border-radius: 8px; padding-block: 4px; margin-block: -4px; }
.ads-track { display: flex; gap: 13px; direction: ltr; will-change: transform; }
.ad-c { flex: none; width: 205px; display: flex; flex-direction: column; gap: 13px; }
.ad-t { display: block; width: 205px; height: 105px; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge-soft); background: var(--panel); box-shadow: 0 3px 10px rgba(0,0,0,.28); transition: transform .25s, box-shadow .25s, border-color .25s; }
.ad-t img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
a.ad-t:hover { transform: translateY(-2px); border-color: var(--edge-strong); box-shadow: 0 8px 20px var(--glow); }
.ads-ar { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--edge-strong); background: var(--tint); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.ads-ar:hover { background: var(--tint2); transform: scale(1.08); }
.ads-ar svg { width: 16px; height: 16px; }
.ads-in.noarrows .ads-ar { display: none; }
.ads-tg { display: flex; align-items: center; gap: 6px; margin: 0 auto; padding: 3px 14px 4px; border: 1px solid var(--edge-soft); border-top: 0; border-radius: 0 0 10px 10px; background: var(--topbg); color: var(--mute); font: 800 .7rem var(--f-body); cursor: pointer; transition: color .2s, background .2s; }
.ads-tg:hover { color: var(--text); background: var(--tint2); }
.ads-tg svg { width: 13px; height: 13px; transition: transform .3s; }
.adsw.shut .ads-tg svg { transform: rotate(180deg); }
.adsw.shut .ads-tg { border-top: 1px solid var(--edge-soft); border-radius: 0 0 10px 10px; }
/* الإعلانات تنزل من فوق عند الفتح */
.adsw.shut .ads-in { transform: translateY(-110%); opacity: 0; }
.adsw.drop .ads-in { animation: adsdrop .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes adsdrop { from { transform: translateY(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) { .ads-ar { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .ads-body, .ads-in, .ad-t { transition: none; animation: none !important; } }
/* حركة الإعلانات: الصور الثابتة تتحرك (تقريب خفيف + لمعة) مثل البانر، وGIF تتحرك بنفسها */
.ad-t { position: relative; }
.ad-t.mv img { animation: adzoom 7s ease-in-out infinite alternate; }
.ad-t.mv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: adshine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes adzoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes adshine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .ad-t.mv img, .ad-t.mv::after { animation: none; } }

/* اختيار مراقبي القسم في لوحة الإدارة */
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.adm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 99px; background: var(--tint2); font-weight: 800; font-size: .88rem; }
.adm-chip button { border: 0; background: rgba(128,128,128,.25); color: inherit; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; padding: 0; }
.adm-find { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; border: 1px solid var(--edge-strong); border-radius: 10px; padding: 4px; max-width: 360px; }
.adm-find[hidden] { display: none; }
.adm-find button { text-align: start; border: 0; background: transparent; color: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.adm-find button:hover { background: var(--tint2); }

/* عداد الرسائل الجديدة فوق صورة الحساب (فوق يسار) */
.chip-btn { position: relative; }

.chat-rooms { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; background: var(--panel2); border-bottom: 1px solid var(--edge); }
.chat-rooms[hidden] { display: none; }
.chat-rooms button { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--tint); color: var(--mute); font: inherit; font-weight: 800; font-size: .82rem; cursor: pointer; transition: color .2s, background .2s; }
.chat-rooms button:hover { color: var(--text); }
.chat-rooms button.on { color: #fff; background: linear-gradient(135deg, var(--sky), var(--blue)); border-color: transparent; }

/* ===== النجوم + شريط التقييم (تحت بطاقة الرتبة) ===== */
.ug-rate{display:flex;justify-content:center;gap:2px;direction:ltr}
.ug-rate i{display:block;width:5px;height:8px;border-radius:1px;background:rgba(128,128,150,.28)}
.ug-rate i.on{background:linear-gradient(180deg,color-mix(in srgb,var(--rc,#e0283b) 72%,#fff),var(--rc,#e0283b))}
.ug-stars{display:inline-flex;justify-content:center;direction:ltr;line-height:1;font-size:15px;letter-spacing:0}
.ug-stars i{font-style:normal;color:rgba(128,128,150,.45)}
.ug-stars i.on{color:#f5b301;text-shadow:0 0 1px #a87500}
.ug-rep{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;margin-top:10px}
.ug-rep .ug-rate i{width:6px;height:9px}

/* زر إخفاء/إظهار الإعلانات يتدلى من فوق (تحت شريط الأعضاء مباشرة) */
.adsw .wrap { display: flex; flex-direction: column; }
.adsw .ads-tg { margin: 0 auto; }
.adsw .ads-body { padding-top: 12px; }
.adsw.shut .ads-tg svg { transform: rotate(180deg); }


/* V3 UI: easier administration navigation without changing site-wide branding */
body[data-page="admin"] .adm-layout-v4{grid-template-columns:228px minmax(0,1fr);gap:18px}
body[data-page="admin"] .adm-layout-v4 .adm-tabs{top:78px;gap:0;padding:12px;max-height:calc(100vh - 95px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.adm-navintro{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;color:var(--text);border-bottom:1px solid var(--edge-soft)}
.adm-navintro b{font-family:var(--f-display);font-size:1.35rem;font-weight:400}.adm-navintro small{letter-spacing:2px;font:700 .65rem var(--f-num);color:var(--sky)}
.adm-navsearch{display:flex;flex-direction:column;gap:5px;color:var(--mute);font-size:.74rem;margin:13px 3px}
.adm-navsearch input{box-sizing:border-box;width:100%;min-width:0;border-radius:9px;border:1px solid var(--edge-strong);background:var(--code);color:var(--text);font:600 .79rem var(--f-body);padding:10px;outline:0}
.adm-navsearch input:focus{border-color:var(--sky);box-shadow:0 0 0 2px var(--tint2)}
.adm-navgrp{border-top:1px solid var(--edge-soft);padding-top:9px;margin-top:8px;display:flex;flex-direction:column;gap:3px}
.adm-navgrp[hidden]{display:none}.adm-navhead{color:var(--mute);font-weight:800;font-size:.77rem;padding:5px 12px}
.adm-layout-v4 .adm-tabs .adm-navgrp button{padding:9px 10px;font-size:.87rem;min-height:40px;gap:9px;width:100%}
.adm-layout-v4 .adm-tabs .adm-navgrp button svg{width:18px;height:18px}
.adm-navfooter{padding:12px 8px 2px;color:var(--mute);font-size:.73rem;line-height:1.5}
.adm-pagehead{padding:2px 2px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.adm-crumb{color:var(--sky);font-size:.74rem;font-weight:800}.adm-pagehead h3{font:400 1.8rem/1.3 var(--f-display);margin:3px 0;color:var(--text)}.adm-pagehead h3:focus{outline:none}.adm-pagehead p{font-size:.86rem;margin:0;color:var(--mute)}
.adm-back{border-radius:10px;border:1px solid var(--edge-strong);background:var(--tint);color:var(--text);font:800 .85rem var(--f-body);cursor:pointer;padding:9px 14px}.adm-back:hover{background:var(--tint2)}
.adm-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
.adm-card .adm-quick button{display:flex;flex-direction:column;align-items:start;gap:5px;background:var(--tint);border:1px solid var(--edge-strong);padding:12px 14px;min-height:75px;text-align:start;color:var(--text);cursor:pointer;transition:background .16s,border-color .16s}
.adm-card .adm-quick button:hover{background:var(--tint2);border-color:var(--sky)}.adm-quick button span{font-size:.96rem;font-weight:800}.adm-quick button small{font-size:.76rem;color:var(--mute);font-weight:600}
@media(max-width:900px){body[data-page="admin"] .adm-layout-v4{grid-template-columns:minmax(0,1fr)}body[data-page="admin"] .adm-layout-v4 .adm-tabs{position:static;max-height:none;overflow:visible;flex-direction:column} .adm-tabgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.adm-navgrp{margin:0}.adm-navfooter{display:none}}
@media(max-width:540px){.adm-tabgroups{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-pagehead h3{font-size:1.5rem}.adm-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-layout-v4 .adm-tabs .adm-navgrp button{font-size:.78rem;padding:8px}}

/* V3 City update: compact member moderation and rank cards */
body[data-page="admin"] .adm-role-badge{display:flex;align-items:center;justify-content:center;min-width:188px;}
body[data-page="admin"] .adm-role-badge .ugrank{display:block;transform:none!important;max-width:none;}
body[data-page="admin"] .adm-table td:nth-child(2){min-width:200px;}
body[data-page="admin"] .adm-table .acts{min-width:210px;}
body[data-page="admin"] .adm-table .acts button{padding:6px 10px;font-size:.82rem;}
body[data-page="admin"] .adm-bchips .adm-bchip{border-color:var(--badge-color,var(--edge-strong));box-shadow:inset 0 0 0 1px var(--badge-color,var(--edge-strong));}
.adm-penalty{display:inline-flex;direction:rtl;align-items:center;margin:5px 5px 0 0;border-radius:7px;padding:3px 7px;font-size:.73rem;font-weight:700;background:var(--tint2);border:1px solid var(--edge-strong);}
.adm-penalty--ban{color:#fa7e8d;border-color:#bd3b51;}
.adm-penalty--mute{color:#f7bb69;border-color:#b88032;}
.adm-penalty-dialog{max-width:520px;width:min(92vw,520px);}
.adm-penalty-dialog #penCustom{align-items:end;}
.adm-penalty-dialog textarea{width:100%;min-height:80px;resize:vertical;}
@media(max-width:800px){body[data-page="admin"] .adm-role-badge .ugrank{transform:scale(.82)!important;transform-origin:right center;} body[data-page="admin"] .adm-role-badge{min-width:155px;}}

/* Sprite badges and uploaded image badges */
/* UNITY GAMING — Animated single-file sprite (35 badges, each 152x18) */
.ug-badge {
 display:inline-block; width:152px; height:18px;
 vertical-align:middle; flex:none;
 background-image:url("../assets/badges/unity_badges_35_sprite.webp");
 background-repeat:no-repeat;
 background-size:760px 126px; /* source is 1520x252 @2x */
 image-rendering:auto;
}
@media (prefers-reduced-motion:reduce) {
 .ug-badge { background-image:url("../assets/badges/unity_badges_35_still.png"); }
}
.ug-badge--forum_admin { background-position:-0px -0px; } /* ادارة المنتدى */
.ug-badge--deputy_admin { background-position:-152px -0px; } /* وكيل اداري */
.ug-badge--server_managers { background-position:-304px -0px; } /* مسؤولي السيرفر */
.ug-badge--server_moderator { background-position:-456px -0px; } /* مراقب السيرفر */
.ug-badge--supervisor { background-position:-608px -0px; } /* مشرف */
.ug-badge--moderator { background-position:-0px -18px; } /* مراقب */
.ug-badge--senior_moderator { background-position:-152px -18px; } /* مراقب عام */
.ug-badge--supporters { background-position:-304px -18px; } /* الداعمين */
.ug-badge--premium { background-position:-456px -18px; } /* الامتياز */
.ug-badge--special_agent { background-position:-608px -18px; } /* SPECIAL AGENT */
.ug-badge--server_developer { background-position:-0px -36px; } /* مطور السيرفر */
.ug-badge--forum_developer { background-position:-152px -36px; } /* مطور المنتدى */
.ug-badge--designer { background-position:-304px -36px; } /* مصمم */
.ug-badge--photographer { background-position:-456px -36px; } /* مصور */
.ug-badge--content_creator { background-position:-608px -36px; } /* صانع محتوى */
.ug-badge--tournament_winner { background-position:-0px -54px; } /* الفائز في البطولة */
.ug-badge--legendary_rating { background-position:-152px -54px; } /* تقييم اسطوري */
.ug-badge--royal_rating { background-position:-304px -54px; } /* تقييم ملكي */
.ug-badge--special_rating { background-position:-456px -54px; } /* تقييم مميز */
.ug-badge--gold_rating { background-position:-608px -54px; } /* تقييم ذهبي */
.ug-badge--best_player { background-position:-0px -72px; } /* افضل لاعب */
.ug-badge--best_supervisor { background-position:-152px -72px; } /* افضل مشرف */
.ug-badge--best_moderator { background-position:-304px -72px; } /* افضل مراقب */
.ug-badge--silver_rating { background-position:-456px -72px; } /* تقييم فضي */
.ug-badge--bronze_rating { background-position:-608px -72px; } /* تقييم برونزي */
.ug-badge--featured_member { background-position:-0px -90px; } /* عضو مميز */
.ug-badge--veteran_member { background-position:-152px -90px; } /* عضو قديم */
.ug-badge--active_member { background-position:-304px -90px; } /* عضو نشيط */
.ug-badge--former_admin { background-position:-456px -90px; } /* اداري سابق */
.ug-badge--suspended { background-position:-608px -90px; } /* موقوف */
.ug-badge--police_chief { background-position:-0px -108px; } /* مسؤول الشرطة */
.ug-badge--ramadan_kareem { background-position:-152px -108px; } /* رمضان كريم */
.ug-badge--eid_mubarak { background-position:-304px -108px; } /* عيد مبارك */
.ug-badge--discord_moderator { background-position:-456px -108px; } /* مراقب الديسكورد */
.ug-badge--discord_managers { background-position:-608px -108px; } /* مسؤولي الديسكورد */

/* Custom uploads are independent images; original CSS badges remain the default. */
.fx-badge-img{display:block;width:152px;height:18px;max-width:100%;object-fit:contain;vertical-align:middle;flex:none}
.fx-bgimg{width:152px;height:18px;display:inline-block;max-width:100%;flex:none;vertical-align:middle}
.adm-bsprite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:6px;max-height:208px;overflow:auto;margin:8px 0;padding:8px;border:1px solid var(--edge-soft);border-radius:10px}
.adm-bsprite-grid button{border:1px solid var(--edge-strong);background:var(--tint);padding:6px;border-radius:8px;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.adm-bsprite-grid button.on{outline:2px solid var(--sky);border-color:var(--sky)}
.adm-btype{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0;color:var(--text2);font-size:.85rem}
.adm-btype label{display:flex;align-items:center;gap:4px;cursor:pointer}
.adm-bhint{font-size:.76rem;color:var(--mute);margin:4px 0}
.adm-bprev .ug-badge{flex:none}
/* زر حذف التذكرة */
.ghost.danger { color: var(--bad); border-color: var(--bad); }
.ghost.danger:hover { background: var(--bad); color: #fff; }

/* صفحات الأعضاء الجدد */
.nm-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.nm-pager[hidden] { display: none; }
.nm-pg { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--edge-soft); background: var(--tint); color: var(--text); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .15s, border-color .15s; }
.nm-pg:hover:not(:disabled):not(.on) { background: var(--tint2); border-color: var(--edge-strong); }
.nm-pg.on { background: var(--sky, #3b82f6); border-color: transparent; color: #fff; cursor: default; }
.nm-pg:disabled { opacity: .4; cursor: not-allowed; }
.nm-dots { color: var(--mute); padding: 0 2px; }

/* معلومات اللاعب (لوحة الإدارة) */
.sheet.adm-info{position:relative;max-width:720px;width:min(720px,94vw);max-height:90vh;overflow:auto}
.adm-info h4{margin:16px 0 8px;font-size:.95rem}
.adm-info-x{position:absolute;top:8px;inset-inline-start:10px;border:0;background:transparent;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer;opacity:.7}
.adm-info-head{display:flex;align-items:center;gap:16px;margin:4px 0 6px;padding-inline-start:26px}
.adm-info-head>img,.adm-info-noav{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;background:#5865f2;display:grid;place-items:center;font-weight:800;font-size:2rem;color:#fff}
.adm-info-sav{margin-inline-start:auto;text-align:center}
.adm-info-sav img{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 4px}
.adm-info-sav small{font-size:.7rem;opacity:.7}
.adm-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.adm-info-grid>div{background:var(--code);border:1px solid var(--edge-strong);border-radius:10px;padding:8px 10px;min-width:0}
.adm-info-grid small{display:block;font-size:.74rem;opacity:.7;margin-bottom:2px}
.adm-info-grid b{display:block;font-size:.9rem;word-break:break-all}
.adm-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.adm-copy{border:1px solid var(--edge-strong);background:transparent;color:inherit;border-radius:6px;font:inherit;font-size:.7rem;padding:1px 7px;margin-inline-start:6px;cursor:pointer}

/* ===== تحكم الديسكورد ===== */
.vf-prev{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:14px 0;padding:14px;border-radius:14px;background:var(--code);border:1px solid var(--edge-soft);max-width:520px}
.vf-embed{width:100%;padding:12px 14px;border-radius:8px;background:var(--panel2);border-inline-start:4px solid var(--blue)}
.vf-embed p{margin:0;color:var(--text2);font-size:.95rem;line-height:1.8;white-space:pre-wrap}
.vf-btn{display:inline-block;padding:8px 18px;border-radius:6px;background:#4f545c;color:#fff;font-weight:700;font-size:.9rem}
.vf-id{font-family:var(--f-num);color:var(--mute);font-size:.95rem}
.dc-sheet{max-width:520px}
.dc-sec{margin:14px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--edge-soft);background:var(--tint)}
.dc-sec>b{display:block;margin-bottom:8px}
.dc-sec select{flex:1 1 180px}
.dc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.dc-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-weight:700;font-size:.85rem;border:1px solid var(--c);background:var(--panel2)}
.dc-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.dc-chip button{border:0;background:transparent;color:var(--mute);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}
.dc-chip button:hover{color:var(--bad)}

/* ===== رولات وخيارات تحكم الديسكورد (بطاقات بدل القوائم المنسدلة) ===== */
.dc-roles{display:flex;flex-wrap:wrap;gap:8px;max-height:230px;overflow-y:auto;padding:2px}
.dc-role{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--text2,var(--text));background:var(--panel2);border:1px solid var(--edge-strong);transition:background .15s,border-color .15s,transform .1s}
.dc-role::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,#99aab5);flex:none}
.dc-role:hover:not([disabled]){border-color:var(--c,#99aab5);transform:translateY(-1px)}
.dc-role.on{color:var(--text);border-color:var(--c,#99aab5);background:color-mix(in srgb,var(--c,#99aab5) 22%,var(--panel2))}
.dc-role.on::after{content:"✓";font-size:.8rem;color:var(--c,#99aab5)}
.dc-role[disabled]{opacity:.55;cursor:not-allowed}
.dc-role[hidden]{display:none}
span.dc-role{cursor:default}
.dc-search{width:100%;margin:0 0 10px;padding:8px 12px;border-radius:10px;border:1px solid var(--edge-strong);background:var(--code);color:var(--text);font:inherit}
.dc-opts{display:flex;flex-wrap:wrap;gap:8px}
.dc-opt{padding:6px 14px;border-radius:10px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--text2,var(--text));background:var(--panel2);border:1px solid var(--edge-strong)}
.dc-opt:hover{border-color:var(--blue,#2f7bff)}
.dc-opt.on{color:#fff;background:var(--blue,#2f7bff);border-color:var(--blue,#2f7bff)}
.dc-sec .adm-row{margin-top:10px}
.dc-custom{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.dc-custom input{width:130px;padding:7px 10px;border-radius:10px;border:1px solid var(--edge-strong);background:var(--code);color:var(--text);font:inherit}
.dc-vrole{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0}
.dc-tag{display:inline-flex;flex-direction:column;gap:2px;padding:4px 10px;border-radius:8px;font-weight:700;font-size:.8rem;background:var(--tint2,var(--tint));border:1px solid var(--edge-strong);color:#fa7e8d}
.dc-tag.tmp{color:#f7bb69}
.dc-tag small{font-weight:600;color:var(--mute)}

/* ===== الابتسامات: حجم ثابت صغير (ما ينعدل) + زر ولوحة الاختيار ===== */
img.ug-smi{display:inline-block !important;width:22px !important;height:22px !important;min-width:22px !important;max-width:22px !important;max-height:22px !important;object-fit:contain;border-radius:0 !important;vertical-align:-6px;margin:0 1px !important;float:none !important;pointer-events:none;-webkit-user-drag:none;user-select:none}
.ug-smibtn{flex:none;display:grid;place-items:center;width:42px;border-radius:12px;border:1px solid var(--edge);background:var(--code);color:var(--mute);cursor:pointer;padding:0}
.ug-smibtn:hover{color:var(--sky);border-color:var(--sky)}
.ug-smipop{position:fixed;z-index:9999;display:grid;grid-template-columns:repeat(7,34px);gap:2px;padding:8px;max-height:200px;overflow:auto;border-radius:14px;background:var(--panel);border:1px solid var(--edge-strong,var(--edge));box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ug-smipop button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:none;cursor:pointer;padding:0}
.ug-smipop button:hover{background:var(--tint2,rgba(255,255,255,.08))}
.ug-smipop img.ug-smi{pointer-events:none}
.fx-smbwrap{display:flex;gap:8px;align-items:center}

/* الانتقال لصفحة برقم (قائمة الأعضاء) */
.mem-pager .mem-jmp{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;direction:rtl}
.mem-pager .mem-jin{width:92px;height:28px;padding:0 8px;border:1px solid var(--edge);border-radius:6px;background:var(--panel);color:var(--text);font:700 .78rem var(--f-body,inherit)}
.mem-pager .mem-jin:focus{outline:0;border-color:var(--sky)}

/* ===== إحصائيات الموقع + المتواجدون الآن (الرئيسية) — نفس تنسيق أسفل المنتدى ===== */
.ss { display: flex; flex-direction: column; gap: 14px; }
.ss[hidden], .ss [hidden] { display: none !important; }
.ss .head { margin-bottom: 4px; }
:where(.ss) .rkctx { --rc: #00e5ff; --rt: #000; }
.fx-tgw { display: inline-block; max-width: 100%; vertical-align: middle; }
.ss .fx-tga { color: #fff; text-decoration: none; }
:where(.ss) b.fx-nm.fx-tg { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 8px 0; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 88%, #fff), var(--rc)); color: #fff; font-family: var(--f-display, Lalezar), Tajawal, sans-serif; font-weight: 400; line-height: 1.35; text-shadow: 0 2px 2px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.fx-tgw:hover { filter: brightness(1.08); }
.fx-pn2 { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; }
.fx-pn2 > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--edge-soft); background: var(--panel2); }
.fx-pn2 > header h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; color: var(--text); padding-inline-start: 10px; border-inline-start: 3px solid var(--blue); }
.fx-pn2 > header h3 svg { color: var(--sky); }
.fx-pn2-t { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--edge-soft); background: transparent; color: var(--mute); cursor: pointer; transition: transform .2s, background .2s; }
.fx-pn2-t:hover { background: var(--tint); color: var(--text); }
.fx-pn2.closed .fx-pn2-t { transform: rotate(180deg); }
.fx-pn2.closed .fx-pn2-b { display: none; }
.fx-pn2.closed > header { border-bottom: 0; }
.fx-pn2-b { padding: 14px 16px; display: grid; gap: 12px; color: var(--text2); line-height: 1.9; }
.fx-pn2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.fx-pn2-row b { color: var(--text); font-family: var(--f-num); }
.ss-filter { display: inline-flex; align-items: center; gap: 8px; padding: 2px 14px; border-radius: 99px; background: var(--tint); border: 1px solid var(--edge-strong); color: var(--text); font: inherit; font-size: .9rem; font-weight: 800; line-height: 1.6; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.ss-filter b { color: var(--text); font-family: var(--f-num); }
.ss-filter:hover { border-color: var(--sky); background: var(--tint2); transform: translateY(-1px); }
.ss-filter.on { background: var(--sky); border-color: transparent; color: #fff; }
.ss-filter.on b { color: #fff; }
.fx-onl { display: flex; align-items: center; gap: 14px; }
.fx-onl-ic { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--tint); color: var(--sky); }
.fx-onl-tx p { margin: 0; }
.fx-onl-h b { color: var(--sky); font-family: var(--f-num); }
.fx-onl-r { color: var(--mute); font-size: .9rem; }
.fx-onl-r b { color: var(--text); font-family: var(--f-num); }
.fx-onl-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fx-onl-m { color: var(--mute); font-size: .88rem; }
.fx-leg { margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--edge-soft); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; min-width: 0; }
.fx-leg legend { padding: 0 8px; font-size: .82rem; color: var(--mute); }
.fx-leg i { font-style: normal; color: var(--mute); font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.fx-leg .fx-tgw b.fx-nm.fx-tg { font-size: 12px; cursor: default; }
@media (max-width: 560px) { .fx-onl-ic { width: 46px; height: 46px; } .fx-onl-ic svg { width: 28px; height: 28px; } }


/* ===== زر المؤثرات: التأثيرات شغالة افتراضياً، وزر الإيقاف يضيف fx-lite للصفحة ===== */
#fxBtn { flex: none; width: 26px; height: 26px; color: #fff; border: 1px solid transparent; background: linear-gradient(135deg, #ffb020, #ff3d81 60%, #a855f7); box-shadow: none; transform: none; }
#fxBtn:hover { background: linear-gradient(135deg, #ffc247, #ff5a96 60%, #b86cf8); transform: none; }
#fxBtn svg { width: 14px; height: 14px; pointer-events: none; }
#fxBtn[aria-pressed="false"] { color: var(--mute); background: var(--tint); border-color: var(--edge-strong); }
#fxBtn[aria-pressed="false"]::before { content: ""; position: absolute; width: 18px; height: 2px; border-radius: 2px; background: #ff4d6d; transform: rotate(-45deg); pointer-events: none; }
html.fx-lite *, html.fx-lite *::before, html.fx-lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.fx-lite .shine::after, html.fx-lite .ad-t.mv::after { animation: none !important; display: none !important; }
html.fx-lite .ad-t.mv img, html.fx-lite h1 em, html.fx-lite .view { animation: none !important; }
html.fx-lite h1 em, html.fx-lite .soc .art svg, html.fx-lite .soc .art img, html.fx-lite .power b { filter: none !important; }
html.fx-lite #sparks { display: none !important; }
html.fx-lite .foot, html.fx-lite .foot-main { content-visibility: auto; contain-intrinsic-size: auto 420px; }

html.fx-lite .banner, html.fx-lite .banner img { transition: none !important; }

/* ألوان الرتب حسب الصورة */
.adm-role.r-admin { color: #fff; background: #d80000; }
.adm-role.r-deputy { color: #fff; background: #8e1111; }
.adm-role.r-gmonitor { color: #fff; background: #008000; }
.adm-role.r-monitor { color: #0b2a00; background: #44da14; }
.adm-role.r-sgmod { color: #fff; background: #0b1a89; }
.adm-role.r-mod { color: #fff; background: #244ff1; }
.adm-role.r-honor { color: #1b1b1b; background: #e8c70c; }
.adm-role.r-supporter { color: #fff; background: #e68523; }
.adm-role.r-vip { color: #00262b; background: #18c8d3; }
.adm-role.r-srvmonitor { color: #fff; background: #ae4f35; }
.adm-role.r-tsmonitor { color: #fff; background: #0f80d7; }
.adm-role.r-srvadmin { color: #fff; background: #7b539d; }
.adm-role.r-active { color: #fff; background: #000000; }
.adm-role.r-member { color: #fff; background: #000000; }
.adm-role.r-banned { color: #fff; background: #4d4f51; }
.rk-adm { --rk: #d80000; --rkd: #d80000; }
.rk-dep { --rk: #8e1111; --rkd: #8e1111; }
.rk-gmo { --rk: #008000; --rkd: #008000; }
.rk-mon { --rk: #44da14; --rkd: #44da14; }
.rk-sgm { --rk: #0b1a89; --rkd: #0b1a89; }
.rk-mod { --rk: #244ff1; --rkd: #244ff1; }
.rk-hon { --rk: #e8c70c; --rkd: #e8c70c; }
.rk-sup { --rk: #e68523; --rkd: #e68523; }
.rk-vip { --rk: #18c8d3; --rkd: #18c8d3; }
.rk-smo { --rk: #ae4f35; --rkd: #ae4f35; }
.rk-tsm { --rk: #0f80d7; --rkd: #0f80d7; }
.rk-sad { --rk: #7b539d; --rkd: #7b539d; }
.rk-act { --rk: #8a93a8; --rkd: #d5d9e6; }
.rk-new { --rk: #8a93a8; --rkd: #d5d9e6; }
.rk-ban { --rk: #4d4f51; --rkd: #4d4f51; }
:where(.ss) [data-rk="adm"] { --rc: #d80000; --rt: #fff; }
:where(.ss) [data-rk="dep"] { --rc: #8e1111; --rt: #fff; }
:where(.ss) [data-rk="gmo"] { --rc: #008000; --rt: #fff; }
:where(.ss) [data-rk="mon"] { --rc: #44da14; --rt: #0b2a00; }
:where(.ss) [data-rk="sgm"] { --rc: #0b1a89; --rt: #fff; }
:where(.ss) [data-rk="mod"] { --rc: #244ff1; --rt: #fff; }
:where(.ss) [data-rk="hon"] { --rc: #e8c70c; --rt: #1b1b1b; }
:where(.ss) [data-rk="sup"] { --rc: #e68523; --rt: #fff; }
:where(.ss) [data-rk="vip"] { --rc: #18c8d3; --rt: #00262b; }
:where(.ss) [data-rk="smo"] { --rc: #ae4f35; --rt: #fff; }
:where(.ss) [data-rk="tsm"] { --rc: #0f80d7; --rt: #fff; }
:where(.ss) [data-rk="sad"] { --rc: #7b539d; --rt: #fff; }
:where(.ss) [data-rk="act"] { --rc: #000000; --rt: #fff; }
:where(.ss) [data-rk="new"] { --rc: #000000; --rt: #fff; }
:where(.ss) [data-rk="ban"] { --rc: #4d4f51; --rt: #fff; }
.fx-rank.new,.fx-rank.act{background:#000;color:#fff;box-shadow:inset 0 0 0 1px #61417c!important}

/* الأعضاء: شارة سوداء موحدة بكل الأماكن */
html .fx-tgw[data-rk="new"] b.fx-nm.fx-tg,html .mem-row[data-rk="new"] b.fx-nm,html .fx-side[data-rk="new"] b.fx-nm,html .fx-tk-by[data-rk="new"] b.fx-nm{background:#000;color:#fff;text-shadow:none;box-shadow:inset 0 0 0 1px #61417c}
html .fx-tgw[data-rk="new"] .fx-tga{color:#fff}