/* ╔══════════════════════════════════════════════════════════════════╗
   ║  سهرة — الصفحات + الجوال (يتحمّل بعد app.css فيغلبه بترتيب المصدر) ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════ الرئيسية ═══════════ */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; }
.spot { position: relative; min-height: 470px; border-radius: 30px; overflow: hidden; border: 1px solid var(--line2); background: #0a0818; box-shadow: var(--sh); }
.spot-sk { display: grid; place-items: center; height: 100%; min-height: 470px; }
.sl { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s, visibility .9s; }
.sl.on { opacity: 1; visibility: visible; }
.sl-bg { position: absolute; inset: 0; }
.sl-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.sl.on .sl-bg img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.14) translateX(1.5%); } to { transform: scale(1.02) translateX(0); } }
.sl-bg .fb { font-size: 0; }
.sl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(6, 4, 18, .1) 0%, rgba(6, 4, 18, .55) 40%, rgba(6, 4, 18, .95) 100%), linear-gradient(0deg, rgba(6, 4, 18, .85), transparent 55%); }
.sl-in { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; gap: 26px; padding: 34px; }
.sl-poster { position: relative; width: 190px; aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden; flex-shrink: 0; box-shadow: 0 24px 50px -16px #000, 0 0 0 2px rgba(255, 255, 255, .25); transform: translateY(20px); opacity: 0; transition: .7s .15s cubic-bezier(.2, .8, .2, 1); }
.sl.on .sl-poster { transform: none; opacity: 1; }
.sl-poster img { width: 100%; height: 100%; object-fit: cover; }
.sl-tx { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 640px; transform: translateY(20px); opacity: 0; transition: .7s .25s cubic-bezier(.2, .8, .2, 1); }
.sl.on .sl-tx { transform: none; opacity: 1; }
.sl-k { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sl-k .kmark { position: static; }
.sl-k em { font-style: normal; font-weight: 800; color: var(--acc); }
.sl-tx h2 { font: 400 clamp(34px, 3.6vw, 54px)/1.1 var(--fd); text-shadow: 0 4px 24px rgba(0, 0, 0, .9); }
.sl-sub { color: var(--ink2); font-size: 15px; }
.sl-act { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-dots { position: absolute; z-index: 3; bottom: 18px; inset-inline-end: 22px; display: flex; gap: 7px; }
.sl-dots button { width: 34px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.sl-dots button.on { background: rgba(255, 255, 255, .35); }
.sl-dots button.on i { display: block; height: 100%; background: var(--acc); animation: dotFill 7s linear forwards; transform-origin: right; }
@keyframes dotFill { from { transform: scaleX(0); } }
.side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hello { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.hello-top { display: flex; align-items: center; gap: 14px; }
.hello-top small { color: var(--acc); font-weight: 700; font-size: 14px; }
.hello-top h2 { font-size: 26px; margin-bottom: 4px; }
.hello-date { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.hello-date b { font: 400 34px/1 var(--fd); color: var(--acc); direction: rtl; }
.hello-date span { color: var(--ink2); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: color-mix(in srgb, var(--sc) 14%, rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); transition: .2s; }
.st:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--sc) 26%, rgba(0, 0, 0, .3)); }
.st svg { color: var(--sc); width: 20px; height: 20px; }
.st b { font-size: 22px; line-height: 1.1; }
.st small { font-size: 12px; color: var(--ink2); font-weight: 600; }
.st--fav { --sc: #ff4d7a; } .st--w { --sc: #4fa8ff; } .st--d { --sc: #2fd38a; } .st--p { --sc: #ffb02e; }
.alerts { padding: 18px; flex: 1; min-height: 0; }
.al-l { display: flex; flex-direction: column; gap: 6px; }
.al-i { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; transition: .15s; }
.al-i:hover { background: rgba(255, 255, 255, .07); }
.al-i.new { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.al-p { display: grid; place-items: center; width: 56px; height: 42px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .08); flex-shrink: 0; color: var(--acc); }
.al-p img { width: 100%; height: 100%; object-fit: cover; }
.al-t { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.al-t small { color: var(--mut); white-space: nowrap; overflow: hidden; }
.tonightbar { display: flex; align-items: center; gap: 18px; padding: 16px 18px; overflow: hidden; }
.tb-h { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-inline-end: 18px; border-inline-end: 1px solid var(--line); }
.tb-h > svg { width: 44px; height: 44px; padding: 9px; border-radius: 14px; background: linear-gradient(135deg, var(--acc2), color-mix(in srgb, var(--acc2) 40%, #000)); color: #fff; }
.tb-h b { display: block; font: 400 28px/1 var(--fd); }
.tb-h small { color: var(--mut); font-size: 12.5px; }
.tb-l { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; flex: 1; min-width: 0; }
.tb-l > .spin { margin: 6px auto; }
.tn-i { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; padding-inline: 7px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); flex-shrink: 0; transition: .2s; }
.tn-i:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.tn-i.fav { border-color: #ff4d7a; background: rgba(255, 77, 122, .12); }
.tn-i.out { opacity: .6; }
.tn-p { position: relative; width: 44px; aspect-ratio: 2/3; border-radius: 9px; overflow: hidden; }
.tn-p img { width: 100%; height: 100%; object-fit: cover; }
.tn-p .kmark { top: auto; bottom: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 6px; }
.tn-p .kmark svg { width: 12px; height: 12px; }
.tn-t { display: flex; flex-direction: column; font-size: 13px; }
.tn-t > b { font-size: 14px; max-width: 170px; text-align: right; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.tn-t small { color: var(--ink2); }
.tn-t small b { color: var(--acc); }
.tn-heart { position: absolute; top: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ff3d6e; color: #fff; }
.tn-heart svg { width: 12px; height: 12px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.duo > .row { min-width: 0; }
.rankbox { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.rk-l { display: flex; flex-direction: column; gap: 2px; }

/* ═══════════ صفحة القسم ═══════════ */
.sec-hero { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 30px 34px; overflow: hidden;
  background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--tone) 32%, transparent), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), var(--plate); border-color: color-mix(in srgb, var(--tone) 40%, transparent); }
.sec-hero::before, .sec-hero::after { content: ''; position: absolute; width: 26px; height: 26px; border: 3px solid var(--tone); opacity: .8; }
.sec-hero::before { top: 12px; inset-inline-start: 12px; border-inline-end: 0; border-bottom: 0; border-start-start-radius: 10px; }
.sec-hero::after { bottom: 12px; inset-inline-end: 12px; border-inline-start: 0; border-top: 0; border-end-end-radius: 10px; }
.sh-emblem { display: grid; place-items: center; width: 130px; height: 130px; border-radius: 34px; color: #fff; background: linear-gradient(140deg, var(--tone), color-mix(in srgb, var(--tone) 35%, #000)); box-shadow: 0 20px 50px -14px var(--tone), 0 0 0 2px rgba(255, 255, 255, .22) inset; --icon-hole: color-mix(in srgb, var(--tone) 60%, #000); }
.sh-emblem svg { width: 78px; height: 78px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4)); }
.browse--anime .sh-emblem svg { animation: shuriken 9s linear infinite; }
@keyframes shuriken { to { transform: rotate(360deg); } }
.browse--tr .sh-emblem svg { animation: tulip 4s ease-in-out infinite; }
@keyframes tulip { 50% { transform: translateY(-5px) scale(1.04); } }
.sh-tx { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-tx > small { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-weight: 700; }
.sh-tx > small .kmark { position: static; width: 26px; height: 26px; }
.sh-tx h1 { font: 400 clamp(40px, 4.4vw, 64px)/1.05 var(--fd); text-shadow: 0 4px 24px rgba(0, 0, 0, .7); }
.sh-tx p { color: var(--ink2); font-size: 17px; }
.sh-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sh-mosaic { position: relative; width: 300px; height: 220px; }
.mo { position: absolute; width: 112px; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 34px -12px #000, 0 0 0 2px rgba(255, 255, 255, .2); transition: .35s cubic-bezier(.2, .8, .2, 1); }
.mo img { width: 100%; height: 100%; object-fit: cover; }
.mo--0 { left: 94px; top: 6px; z-index: 5; transform: rotate(0); }
.mo--1 { left: 20px; top: 26px; z-index: 4; transform: rotate(-9deg); }
.mo--2 { left: 168px; top: 26px; z-index: 4; transform: rotate(9deg); }
.mo--3 { left: -40px; top: 52px; z-index: 3; transform: rotate(-17deg) scale(.9); opacity: .8; }
.mo--4 { left: 228px; top: 52px; z-index: 3; transform: rotate(17deg) scale(.9); opacity: .8; }
.sh-mosaic:hover .mo--1 { transform: rotate(-14deg) translateX(-14px); }
.sh-mosaic:hover .mo--2 { transform: rotate(14deg) translateX(14px); }
.mo:hover { z-index: 9 !important; transform: scale(1.08) !important; opacity: 1 !important; }
/* جدول الأسبوع */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.wk-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 18px; background: var(--plate); border: 1px solid var(--line); }
.wk-col.today { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent), 0 14px 30px -14px var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 40%), var(--plate); }
.wk-h { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.wk-col.today .wk-h { background: var(--acc); color: var(--acc-ink); }
.wk-h b { font-size: 15px; }
.wk-h small { font-size: 12px; opacity: .8; }
.wk-l { display: flex; flex-direction: column; gap: 6px; }
.wk-i { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 11px; transition: .15s; min-width: 0; }
.wk-i:hover { background: rgba(255, 255, 255, .08); }
.wk-p { position: relative; width: 34px; aspect-ratio: 2/3; border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.wk-p img { width: 100%; height: 100%; object-fit: cover; }
.wk-p .fb { font-size: 12px; }
.wk-t { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.wk-t b { font-size: 12.5px; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-t small { color: var(--mut); }
.wk-none { text-align: center; color: var(--mut); padding: 10px 0; }

/* ═══════════ صفحة العمل ═══════════ */
.sh-hero { position: relative; min-height: 600px; margin: calc(-26px) calc(var(--gut) * -1) 0; border-radius: 0 0 36px 36px; overflow: hidden; display: flex; align-items: flex-end; }
.sh-hero--sk { display: grid; place-items: center; }
.sh-media { position: absolute; inset: 0; }
.sh-bgimg { position: absolute; inset: 0; }
.sh-bgimg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 14s ease-out forwards; }
.sh-bgimg .fb { font-size: 0; }
.sh-trailer { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.4s; pointer-events: none; }
.sh-trailer.on { opacity: 1; }
.sh-trailer iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%) scale(1.16); border: 0; pointer-events: none; }
.sh-shade { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(5, 4, 14, .15) 0%, rgba(5, 4, 14, .45) 40%, rgba(5, 4, 14, .92) 80%), linear-gradient(0deg, var(--bg) 0%, rgba(5, 4, 14, .7) 26%, transparent 60%), linear-gradient(180deg, rgba(5, 4, 14, .65), transparent 24%); }
.sh-in { position: relative; z-index: 2; display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: end; gap: 34px; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 120px calc(var(--gut) + 8px) 36px; }
.sh-poster { position: relative; aspect-ratio: 2 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -18px #000, 0 0 0 2px rgba(255, 255, 255, .22), 0 0 60px -20px var(--c, var(--acc)); animation: posterIn .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes posterIn { from { opacity: 0; transform: translateY(30px) rotate(-3deg); } }
.sh-poster img { width: 100%; height: 100%; object-fit: cover; }
.sh-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .7); color: #fff; backdrop-filter: blur(4px); transition: .25s; opacity: .9; }
.sh-play svg { width: 30px; height: 30px; margin-inline-start: -4px; }
.sh-play:hover { background: var(--acc); color: var(--acc-ink); transform: scale(1.1); border-color: transparent; }
.sh-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: gIn .8s .1s cubic-bezier(.2, .8, .2, 1) both; }
.sh-k { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sh-k .kmark { position: static; width: 36px; height: 36px; }
.sh-k > em { font-style: normal; font-weight: 800; font-size: 15px; color: var(--acc); }
.sh-info h1 { font: 400 clamp(38px, 4.6vw, 70px)/1.05 var(--fd); text-shadow: 0 6px 30px rgba(0, 0, 0, .9); }
.sh-sub { color: var(--ink2); font-size: 16px; font-weight: 500; margin-top: -6px; }
.sh-ov { max-width: 780px; font-size: 16px; line-height: 1.95; color: #ece8ff; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.sh-ov.open { -webkit-line-clamp: unset; }
.sh-act { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-lists { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sh-mute { position: absolute; z-index: 3; top: calc(var(--head) + 16px); inset-inline-end: calc(var(--gut) + 8px); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; backdrop-filter: blur(6px); transition: .2s; }
.sh-mute.on { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.sh-mute svg { width: 24px; height: 24px; }
.progctl { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px; border-radius: 16px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line2); }
.progv { display: flex; flex-direction: column; align-items: center; min-width: 96px; line-height: 1.2; }
.progv small { font-size: 11.5px; color: var(--mut); }
.progv b { font: 400 24px/1.1 var(--fd); color: var(--acc); }
.progv i { font-style: normal; font-size: 11.5px; color: var(--mut); }
.progbar { position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-top: -8px; }
.fact { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 1px; align-items: center; align-content: center; padding: 14px 16px; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 22%, transparent), transparent 60%), var(--plate); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); box-shadow: var(--sh); }
.fact-ic { grid-row: 1 / 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tone); color: #0b0816; box-shadow: 0 8px 20px -8px var(--tone); }
.fact-ic svg { width: 21px; height: 21px; }
.fact-l { font-size: 13.5px; color: var(--ink2); font-weight: 700; }
.fact .big { font: 400 24px/1.15 var(--fd); color: #fff; }
.fact .big b { font: inherit; }
.fact small { color: var(--mut); font-size: 12.5px; }
.ring { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin: 2px 0; border-radius: 50%; background: conic-gradient(var(--tone) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); }
.ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #120e26; }
.ring b { position: relative; font: 400 19px var(--fd); }
.epchips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.epchip { display: flex; flex-direction: column; align-items: center; min-width: 108px; padding: 9px 14px; border-radius: 16px; background: var(--plate); border: 1.5px solid var(--line2); transition: .2s; flex-shrink: 0; }
.epchip b { font-size: 15px; }
.epchip small { font-size: 11.5px; color: var(--mut); min-height: 16px; }
.epchip.up { border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.epchip.up small { color: var(--acc); font-weight: 700; }
.epchip:hover { background: var(--plate3); }
.epchip.on { background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 70%, var(--acc2))); color: var(--acc-ink); border-color: transparent; box-shadow: 0 10px 24px -10px var(--acc); }
.epchip.on small { color: var(--acc-ink); opacity: .8; }
.tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tlist > .spin, .tlist > .empty { grid-column: 1 / -1; }
.tcard { display: flex; flex-direction: column; gap: 10px; text-align: start; padding: 10px; border-radius: 20px; background: var(--plate); border: 1px solid var(--line); transition: .25s; }
.tcard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 18px 40px -16px #000, 0 0 30px -12px var(--acc); }
.tc-img { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; }
.tc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tcard:hover .tc-img img { transform: scale(1.06); }
.tc-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; border: 2px solid rgba(255, 255, 255, .8); transition: .2s; }
.tcard:hover .tc-play { background: var(--acc); color: var(--acc-ink); border-color: transparent; transform: scale(1.12); }
.tc-play svg { margin-inline-start: -3px; }
.tc-img em { position: absolute; top: 8px; inset-inline-start: 8px; font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 8px; background: #ff3b3b; color: #fff; }
.tc-t { display: flex; flex-direction: column; padding-inline: 4px; min-width: 0; }
.tc-t b { font-size: 16px; color: var(--acc); }
.tc-t small { color: var(--ink2); font-size: 13px; text-align: right; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.vids { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.vids h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.rg--ppl { gap: 16px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px; border-radius: 20px; transition: .2s; }
.person:hover { background: rgba(255, 255, 255, .06); transform: translateY(-4px); }
.pp { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: #15112c; box-shadow: 0 14px 30px -14px #000, 0 0 0 1.5px rgba(255, 255, 255, .14); }
.pp img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .5s; }
.person:hover .pp img { transform: scale(1.06); }
.pp .fb { font-size: 30px; }
.person b { font-size: 14.5px; line-height: 1.35; }
.person small { color: var(--mut); font-size: 12.5px; line-height: 1.5; }
.rg--va { gap: 14px; }
.va { display: grid; grid-template-columns: 74px 74px 1fr; align-items: center; gap: 10px; padding: 9px; border-radius: 20px; background: var(--plate); border: 1px solid var(--line); transition: .2s; min-width: 0; }
.va[href]:hover { border-color: color-mix(in srgb, var(--acc2) 60%, transparent); transform: translateY(-3px); }
.va-ch, .va-p { position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; background: #15112c; }
.va-ch img, .va-p img { width: 100%; height: 100%; object-fit: cover; }
.va-ch small { position: absolute; inset-inline: 0; bottom: 0; text-align: center; font-size: 10.5px; font-weight: 800; padding: 2px; background: rgba(0, 0, 0, .7); }
.va-p { border: 2px solid var(--acc2); }
.va-p .fb { font-size: 20px; }
.va-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.va-t b { font-size: 14.5px; line-height: 1.35; }
.va-t small { display: flex; align-items: center; gap: 5px; color: var(--acc2); font-size: 12.5px; font-weight: 700; }
.va-t small svg { width: 14px; height: 14px; }
.dirs { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.dirs h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.dirs h3 svg { color: var(--acc); }
.dir-l { display: flex; flex-wrap: wrap; gap: 12px; }
.dir { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; padding-inline: 8px 18px; border-radius: 18px; background: var(--plate); border: 1px solid var(--line); transition: .2s; }
.dir:hover { border-color: color-mix(in srgb, var(--acc) 60%, transparent); transform: translateY(-3px); }
.dir .pp { width: 58px; aspect-ratio: 1; border-radius: 14px; }
.dir span:last-child { display: flex; flex-direction: column; }
.dir small { color: var(--mut); }
.epl { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.epl-i { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 16px; background: var(--plate); border: 1px solid var(--line); }
.epl-i.up { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.epl-img { width: 110px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #15112c; }
.epl-img img { width: 100%; height: 100%; object-fit: cover; }
.epl-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; font: 400 22px var(--fd); background: rgba(255, 255, 255, .08); }
.epl-i.up .epl-n { background: var(--acc); color: var(--acc-ink); }
.epl-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.epl-t b { font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.epl-t small { color: var(--mut); font-size: 12.5px; }
.epl-cd { padding: 4px 10px; border-radius: 10px; background: color-mix(in srgb, var(--acc) 20%, transparent); color: var(--acc); font-size: 13px; white-space: nowrap; }
.epl-cd b { color: #fff; }
.epl-ok { display: inline-flex; align-items: center; gap: 4px; color: #6ff0b0; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.epl-ok svg { width: 15px; height: 15px; }

/* ═══════════ صفحة الشخص ═══════════ */
.pr-hero { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 30px; align-items: start; }
.pr-photo { position: relative; aspect-ratio: 3/4; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -20px #000, 0 0 0 2px rgba(255, 255, 255, .2); }
.pr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.pr-role { position: absolute; inset-inline: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px; border-radius: 12px; background: var(--acc); color: var(--acc-ink); font-weight: 800; }
.pr-tx { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pr-tx h1 { font: 400 clamp(36px, 4vw, 58px)/1.1 var(--fd); }
.pr-native { color: var(--ink2); font-size: 18px; margin-top: -6px; }
.pr-bio { font-size: 15.5px; line-height: 2; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.pr-bio.open { -webkit-line-clamp: unset; }
.rg--roles { gap: 14px; }
.role { display: grid; grid-template-columns: 80px 56px 1fr; align-items: center; gap: 10px; padding: 9px; border-radius: 20px; background: var(--plate); border: 1px solid var(--line); transition: .2s; min-width: 0; }
.role:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc2) 60%, transparent); }
.role-ch { position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; background: #15112c; box-shadow: 0 0 0 2px var(--acc2); }
.role-ch img { width: 100%; height: 100%; object-fit: cover; }
.role-ch em { position: absolute; inset-inline: 0; bottom: 0; font-style: normal; text-align: center; font-size: 11px; font-weight: 800; background: var(--acc); color: var(--acc-ink); }
.role-po { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; opacity: .9; }
.role-po img { width: 100%; height: 100%; object-fit: cover; }
.role-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.role-t b { font-size: 15px; line-height: 1.35; }
.role-t small { color: var(--mut); font-size: 12.5px; }

/* ═══════════ المكتبة ═══════════ */
.lib-hero { display: flex; align-items: center; gap: 22px; padding: 24px 28px; flex-wrap: wrap; }
.lh-ic { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: linear-gradient(135deg, #2fd38a, #0b6a42); color: #fff; box-shadow: 0 14px 34px -12px #2fd38a; }
.lh-ic svg { width: 40px; height: 40px; }
.lib-hero h1 { font: 400 44px/1.1 var(--fd); }
.lib-hero p { color: var(--ink2); }
.lib-tabs { display: flex; gap: 8px; margin-inline-start: auto; padding: 5px; border-radius: 18px; background: rgba(0, 0, 0, .35); }
.lib-tabs button { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 14px; font-weight: 800; font-size: 16px; color: var(--ink2); transition: .2s; }
.lib-tabs button.on { background: var(--acc); color: var(--acc-ink); box-shadow: 0 10px 24px -10px var(--acc); }
.lib-bar { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 15px; background: rgba(255, 255, 255, .06); border: 1.5px solid var(--line2); font-weight: 700; transition: .2s; }
.pill svg { color: var(--pc); width: 20px; height: 20px; }
.pill b { display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 7px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: 13px; }
.pill:hover { background: rgba(255, 255, 255, .1); }
.pill.on { background: var(--pc); color: #0b0816; border-color: transparent; box-shadow: 0 10px 24px -10px var(--pc); }
.pill.on svg { color: #0b0816; }
.pill.on b { background: rgba(0, 0, 0, .2); }
.lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lib-tools .inp { flex: 1 1 240px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.fbtn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--line2); transition: .2s; text-align: start; }
.fbtn > svg { width: 22px; height: 22px; color: var(--mut); }
.fbtn span { display: flex; flex-direction: column; line-height: 1.25; }
.fbtn small { font-size: 12px; color: var(--mut); }
.fbtn b { font-size: 15px; }
.fbtn.set { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.fbtn.set > svg { color: var(--acc); }
.fbtn i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, .12); }
.fbtn i svg { width: 14px; height: 14px; }

/* ═══════════ التقويم ═══════════ */
.cal-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px 24px; padding: 22px 26px; }
.ch-t { display: flex; align-items: center; gap: 16px; }
.ch-ic { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; background: linear-gradient(135deg, #4fa8ff, #1b3fa0); color: #fff; box-shadow: 0 14px 30px -12px #4fa8ff; }
.ch-ic svg { width: 38px; height: 38px; }
.ch-t h1 { font: 400 42px/1.1 var(--fd); }
.ch-t p { color: var(--ink2); }
.ch-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.pickbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 130px; height: 62px; padding: 0 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1.5px solid var(--line2); transition: .2s; }
.pickbtn small { font-size: 12px; color: var(--mut); font-weight: 600; }
.pickbtn b { font: 400 26px/1.1 var(--fd); color: var(--acc); }
.pickbtn:hover { border-color: var(--acc); transform: translateY(-2px); }
.ch-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; }
.lg { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.lg i { width: 14px; height: 14px; border-radius: 5px; background: var(--lc); box-shadow: 0 0 10px var(--lc); }
.cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.month { padding: 16px; }
.m-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.m-dows span { text-align: center; font-weight: 800; font-size: 14px; color: var(--ink2); padding: 6px 0; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.m-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.dcell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; aspect-ratio: 1 / 1; min-height: 96px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1.5px solid var(--line); text-align: start; transition: .18s; overflow: hidden; }
.dcell.pad { background: transparent; border-color: transparent; }
button.dcell:hover { background: rgba(255, 255, 255, .1); border-color: var(--line2); transform: translateY(-2px); }
.dcell.past { opacity: .62; }
.dcell.has { border-color: color-mix(in srgb, var(--lc, var(--acc)) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--lc, var(--acc)) 16%, transparent), transparent 70%), rgba(255, 255, 255, .045); }
.dcell.today { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent), 0 10px 26px -10px var(--acc); opacity: 1; }
.dn { font: 400 24px/1 var(--fd); }
.dcell.today .dn { color: var(--acc); }
.tday { position: absolute; top: 8px; inset-inline-end: 8px; font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 7px; background: var(--acc); color: var(--acc-ink); }
.dev { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evc { display: flex; align-items: center; gap: 5px; padding: 2px 5px 2px 2px; padding-inline: 2px 5px; border-radius: 8px; background: color-mix(in srgb, var(--lc) 26%, rgba(0, 0, 0, .35)); border-inline-start: 3px solid var(--lc); font-size: 11.5px; min-width: 0; }
.evc img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.evc b { font-weight: 700; text-align: right; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.evdot { width: 7px; height: 7px; border-radius: 50%; background: var(--lc); flex-shrink: 0; margin-inline: 4px 0; }
.rep { display: flex; margin-inline-start: auto; opacity: .75; }
.rep svg { width: 11px; height: 11px; }
.evmore { font-size: 11.5px; font-weight: 800; color: var(--acc); padding-inline: 4px; }
.cal-side { padding: 18px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--head) + 20px); }
.up-i, .wkr { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 14px; text-align: start; width: 100%; border-inline-start: 4px solid var(--lc); background: rgba(255, 255, 255, .04); transition: .15s; }
.up-i:hover { background: rgba(255, 255, 255, .09); }
.up-p { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; flex-shrink: 0; background: rgba(255, 255, 255, .08); color: var(--acc); }
.up-p img { width: 100%; height: 100%; object-fit: cover; }
.up-t { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; }
.up-t b { font-size: 14px; text-align: right; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.up-t small { color: var(--mut); }
/* نافذة اليوم */
.m-day .m-box { width: min(860px, 100%); }
.dm { display: grid; gap: 22px; }
.dm h4 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 10px; color: var(--acc); }
.dm-list { display: flex; flex-direction: column; gap: 8px; }
.dmi { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: color-mix(in srgb, var(--lc) 12%, rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); border-inline-start: 5px solid var(--lc); }
.dmi-p { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: rgba(255, 255, 255, .08); color: var(--acc); }
.dmi-p img { width: 100%; height: 100%; object-fit: cover; }
.dmi-t { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.dmi-t b { font-size: 16px; }
.dmi-t span { color: var(--ink2); font-size: 14px; }
.dmi-t small { display: flex; align-items: center; gap: 4px; color: var(--mut); font-size: 12.5px; flex-wrap: wrap; }
.dmi-t small svg { width: 13px; height: 13px; }
.lvl { font-style: normal; font-weight: 800; padding: 1px 9px; border-radius: 8px; background: var(--lc); color: #0b0816; font-size: 12px; }
.dmi-a { display: flex; gap: 6px; }
.dm-form { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 20px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.lvls { display: flex; flex-wrap: wrap; gap: 8px; }
.lvls button { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 15px; background: rgba(255, 255, 255, .05); border: 1.5px solid color-mix(in srgb, var(--lc) 50%, transparent); font-weight: 800; transition: .18s; }
.lvls button i { width: 14px; height: 14px; border-radius: 5px; background: var(--lc); }
.lvls button.on { background: var(--lc); color: #0b0816; box-shadow: 0 10px 24px -10px var(--lc); }
.lvls button.on i { background: #0b0816; }
.msearch { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.sq-grid > .spin, .sq-grid > .al-empty { grid-column: 1 / -1; }
.sq { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--line); text-align: center; transition: .15s; }
.sq:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); transform: translateY(-3px); }
.sq-i { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
.sq-i img { width: 100%; height: 100%; object-fit: cover; }
.sq b { text-align: center; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq small { color: var(--mut); font-size: 11.5px; }
.msel { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1.5px solid var(--acc); }
.msel > img, .msel > .fb { position: relative; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.msel > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.msel small { display: flex; align-items: center; gap: 6px; color: var(--ink2); }
.msel small .kmark { position: static; width: 22px; height: 22px; border-radius: 7px; }
.msel small .kmark svg { width: 14px; height: 14px; }
.frow .fld { flex: 1 1 160px; }
.frow .toggle { align-self: flex-end; height: 50px; }

/* ═══════════ البروفايل ═══════════ */
.pf-hero { position: relative; overflow: hidden; padding: 0; }
.pf-banner { position: relative; height: 170px; overflow: hidden; background: linear-gradient(120deg, var(--acc), var(--acc2)); }
.pf-blur { position: absolute; inset: -40px; }
.pf-blur img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.4); opacity: .75; }
.pf-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--plate), transparent 70%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 22px); }
.pf-main { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 26px; padding: 0 30px 28px; margin-top: -90px; }
.pf-av { position: relative; display: flex; flex-direction: column; align-items: center; }
.av--hero { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7)); }
.tbadge--plate { position: relative; margin-top: -16px; z-index: 3; height: 34px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.tbadge--plate::before, .tbadge--plate::after { content: ''; position: absolute; top: 50%; width: 14px; height: 22px; margin-top: -11px; background: var(--t3); z-index: -1; }
.tbadge--plate::before { inset-inline-start: -9px; clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%, 40% 50%); }
.tbadge--plate::after { inset-inline-end: -9px; clip-path: polygon(100% 0, 0 15%, 0 85%, 100% 100%, 60% 50%); }
.pf-tx { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-bottom: 6px; }
.pf-tx h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font: 400 clamp(36px, 4vw, 56px)/1.1 var(--fd); }
.pf-user { color: var(--ink2); font-weight: 500; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pst { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sc) 14%, rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); }
.pst svg { color: var(--sc); width: 22px; height: 22px; }
.pst b { font: 400 26px/1 var(--fd); }
.pst small { color: var(--ink2); font-weight: 600; }
.pst--fav { --sc: #ff4d7a; } .pst--w { --sc: #4fa8ff; } .pst--d { --sc: #2fd38a; } .pst--d2 { --sc: #2fd3c0; } .pst--p { --sc: #ffb02e; }
.pf-set { align-self: start; margin-top: 110px; }
.pf-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pe { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.pe--wide { grid-column: 1 / -1; }
.pe h3 { display: flex; align-items: center; gap: 9px; font-size: 19px; }
.pe h3 svg { color: var(--acc); }
.pe h4 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; color: var(--ink2); margin-bottom: 8px; }
.pe-av { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pe-av-c { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fr-o, .ti-o, .ts-o { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--line2); transition: .18s; }
.fr-o:hover, .ti-o:hover, .ts-o:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.fr-o b { font-size: 13.5px; }
.fr-o.on, .ti-o.on, .ts-o.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); }
.fr-o em, .ti-o em, .ts-o em, .opt em, .mode em, .tused { position: absolute; top: -9px; inset-inline-end: 10px; font-style: normal; font-size: 11px; font-weight: 900; padding: 1px 9px; border-radius: 8px; background: var(--acc); color: var(--acc-ink); }
.tgroup { display: flex; flex-direction: column; }
.titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ti-o { padding: 16px 8px; }
.tstyles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ts-o small { color: var(--ink2); font-weight: 600; }

/* ═══════════ مركز التحكم (الإعدادات) ═══════════ */
.cc-head { display: flex; align-items: center; gap: 18px; }
.cc-ic { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 24px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--acc-ink); box-shadow: 0 16px 36px -12px var(--acc); }
.cc-ic svg { width: 42px; height: 42px; animation: aSpin 14s linear infinite; }
.cc-head h1 { font: 400 46px/1.1 var(--fd); text-shadow: 0 4px 20px rgba(0, 0, 0, .7); }
.cc-head p { color: var(--ink2); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
/* الخراطيش */
.carts { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 16px; padding-top: 6px; }
.cart { position: relative; display: flex; flex-direction: column; height: 196px; padding: 18px 14px 12px; border-radius: 20px 20px 12px 12px; text-align: center; background: linear-gradient(180deg, #2a2440, #17132a); border: 1.5px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 30px -14px #000, inset 0 2px 0 rgba(255, 255, 255, .1); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.cart-notch { position: absolute; top: -1.5px; left: 50%; width: 44%; height: 12px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: var(--bg); border: 1.5px solid rgba(255, 255, 255, .14); border-top: 0; }
.cart-label { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 55%, #fff 0%), color-mix(in srgb, var(--cc) 30%, #000)); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 6px 14px -6px #000; overflow: hidden; position: relative; }
.cart-label::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 14px); }
.cart-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(0, 0, 0, .28); }
.cart-ic svg { width: 28px; height: 28px; }
.cart-label b { position: relative; z-index: 1; font-size: 16px; line-height: 1.3; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.cart-label small { position: relative; z-index: 1; font-size: 11.5px; opacity: .9; }
.cart-pins { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.cart-pins i { width: 10px; height: 8px; border-radius: 2px; background: linear-gradient(180deg, #ffd27a, #b8860b); }
.cart-in { position: absolute; top: -12px; inset-inline-end: 12px; font-style: normal; font-size: 11.5px; font-weight: 900; padding: 2px 10px; border-radius: 9px; background: var(--cc); color: #0b0816; opacity: 0; transform: translateY(6px); transition: .3s; }
.cart:hover { transform: translateY(-6px) rotate(-1deg); }
.cart.on { transform: translateY(14px); border-color: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 40%, transparent), 0 0 40px -6px var(--cc), 0 18px 30px -14px #000; }
.cart.on .cart-in { opacity: 1; transform: none; }
.console { position: relative; }
.cs-frame { padding: 14px; border-radius: 30px; background: linear-gradient(180deg, #2a2440, #15112a); border: 1.5px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -24px #000, inset 0 2px 0 rgba(255, 255, 255, .08); }
.cs-screen { position: relative; min-height: 360px; padding: 26px; border-radius: 20px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cc, var(--acc)) 14%, transparent), transparent 60%), rgba(6, 5, 16, .94); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc, var(--acc)) 40%, transparent), inset 0 0 60px rgba(0, 0, 0, .8); display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.cs-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); }
.cs-screen.boot { animation: crtOn .5s ease-out; }
@keyframes crtOn { 0% { filter: brightness(3) saturate(0); clip-path: inset(49% 0 49% 0); } 50% { clip-path: inset(10% 0 10% 0); } 100% { filter: none; clip-path: inset(0); } }
.cs-t { display: flex; align-items: center; gap: 10px; font: 400 30px/1.1 var(--fd); color: var(--cc, var(--acc)); }
.cs-screen h3 { display: flex; align-items: center; gap: 9px; font-size: 18px; margin-top: 6px; }
.cs-screen h3 svg { color: var(--cc, var(--acc)); }
.cs-screen h3 small { color: var(--mut); font-weight: 500; font-size: 13px; margin-inline-start: 6px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode, .opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--line2); text-align: center; transition: .2s; }
.mode > svg, .opt > svg { width: 32px; height: 32px; color: var(--cc, var(--acc)); }
.mode b, .opt b { font-size: 16.5px; }
.mode small, .opt small { color: var(--mut); font-size: 13px; }
.mode:hover, .opt:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.mode.on, .opt.on { border-color: var(--cc, var(--acc)); background: color-mix(in srgb, var(--cc, var(--acc)) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, var(--acc)) 25%, transparent); }
.mode em, .opt em { background: var(--cc, var(--acc)); color: #0b0816; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.aa { font-family: var(--fd); line-height: 1; color: var(--cc, var(--acc)); height: 32px; display: grid; place-items: center; }
.cprev { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.cprev--ring i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cc); }
.cprev--ring b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cc); }
.cprev--glow i { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, var(--cc), transparent 70%); }
.cprev--blade i { width: 36px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--cc), #fff); transform: rotate(-30deg); }
.secmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sm { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--line2); text-align: start; transition: .2s; }
.sm:hover { border-color: var(--cc, var(--acc)); transform: translateY(-3px); }
.sm-n { font-weight: 800; font-size: 15px; padding-inline: 4px; }
.sm-c { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cc, var(--acc)); font-weight: 700; padding-inline: 4px; }
.tgal h3 small { margin-inline-start: 8px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tcard2 { position: relative; padding: 0; border-radius: 18px; border: 2px solid transparent; transition: .2s; }
.tcard2:hover { transform: translateY(-4px); }
.tcard2.on { border-color: var(--cc, var(--acc)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, var(--acc)) 30%, transparent), 0 14px 30px -12px var(--cc, var(--acc)); }
.tused { max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 4px; }
.tused svg { width: 12px; height: 12px; }
/* معاينة الثيم */
.tp { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--sky); isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.tp--sm { aspect-ratio: 16 / 9; border-radius: 12px; }
.tp .art { z-index: 1; }
.tp * { animation-play-state: paused; }
.tp:hover * { animation-play-state: running; }
.tp-l { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent); text-align: start; }
.tp-l b { font: 400 22px/1.1 var(--fd); color: #fff; }
.tp-l small { color: var(--tacc); font-size: 12px; font-weight: 700; direction: ltr; text-align: end; }
html[dir=rtl] .tp-l small { text-align: start; }
.pstate { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; border: 1.5px solid; }
.pstate > svg { width: 40px; height: 40px; padding: 8px; border-radius: 13px; flex-shrink: 0; }
.pstate > div { display: flex; flex-direction: column; gap: 3px; }
.pstate span { color: var(--ink2); font-size: 14px; }
.pstate--on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pstate--on > svg { background: var(--ok); color: #03170d; }
.pstate--off, .pstate--unsupported { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pstate--off > svg, .pstate--unsupported > svg { background: var(--warn); color: #1f1300; }
.pstate--denied { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.pstate--denied > svg { background: var(--bad); color: #fff; }
.howto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.hw { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.hw--wide { grid-column: 1 / -1; }
.hw h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 16px; }
.hw h4 svg { color: var(--cc, var(--acc)); }
.hw ol { margin: 0; padding-inline-start: 20px; color: var(--ink2); font-size: 14px; line-height: 2; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pe--danger { border-color: rgba(255, 64, 96, .4); }
.kv { display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.kv span { color: var(--mut); min-width: 90px; }

/* ═══════════ إدارة الموقع ═══════════ */
.ad-head { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-color: rgba(255, 215, 0, .35); background: linear-gradient(90deg, rgba(255, 215, 0, .14), transparent 60%), var(--plate); }
.ad-ic { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; background: linear-gradient(135deg, #fff3b0, #ffb02e); color: #2a1800; box-shadow: 0 14px 34px -12px #ffc23a; }
.ad-ic svg { width: 38px; height: 38px; }
.ad-head h1 { font: 400 42px/1.1 var(--fd); }
.ad-head p { color: var(--ink2); }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 16px; font-weight: 800; background: var(--plate); border: 1.5px solid var(--line2); transition: .2s; }
.ad-tabs button.on { background: linear-gradient(135deg, #fff3b0, #ffc23a); color: #2a1800; border-color: transparent; box-shadow: 0 10px 24px -10px #ffc23a; }
.ad-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; min-height: 300px; }
.ad-body h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.ad-body h2 svg { color: #ffc23a; }
.ad-body h2 small { font-size: 14px; color: var(--mut); }
.adt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.adt { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%), rgba(255, 255, 255, .03); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); }
.adt > svg { width: 30px; height: 30px; color: var(--tone); }
.adt b { font: 400 34px/1.1 var(--fd); }
.adt small { color: var(--ink2); font-weight: 600; }
.lvl-ed { display: flex; flex-direction: column; gap: 10px; }
.lvr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 8px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .04); border-inline-start: 5px solid var(--lc); }
.swatch { display: grid; place-items: center; width: 52px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1.5px solid var(--line2); }
.swatch i { width: 26px; height: 26px; border-radius: 8px; background: var(--lc); box-shadow: 0 0 12px var(--lc); }
.lvr-prev { padding-inline: 8px; }
.ulist { display: flex; flex-direction: column; gap: 8px; }
.urow { display: grid; grid-template-columns: auto minmax(0, 1.4fr) 1fr 1fr auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.urow.banned { opacity: .6; border-color: var(--bad); }
.u-t { display: flex; flex-direction: column; min-width: 0; }
.u-t small { color: var(--mut); text-align: end; }
.u-m { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink2); }
.u-a { display: flex; gap: 6px; }

/* ═══════════ البحث العام ═══════════ */
.m-search .m-box { width: min(1080px, 100%); }
.sx { display: flex; flex-direction: column; gap: 16px; }
.sx-in { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border-radius: 20px; background: rgba(0, 0, 0, .35); border: 2px solid var(--acc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 18%, transparent); }
.sx-in svg { width: 26px; height: 26px; color: var(--acc); }
.sx-in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 20px; font-weight: 600; }
.m-search .m-body { padding-top: 64px; }
.m-search .m-x--float { top: 12px; }
.sx-in kbd { font: 700 12px var(--f); padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: var(--mut); }
.sx-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; min-height: 160px; }
.sx-res > .spin { grid-column: 1 / -1; }
.sx-hint { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--mut); padding: 30px; text-align: center; }
.sx-hint svg { color: var(--acc); width: 24px; height: 24px; }
.sx-col h4 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.sx-col--tr h4 { border-color: var(--tr); } .sx-col--anime h4 { border-color: var(--an); }
.sx-col h4 small { color: var(--mut); }
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.sx-i { display: flex; flex-direction: column; gap: 5px; transition: .2s; }
.sx-i:hover { transform: translateY(-4px); }
.sx-p { position: relative; aspect-ratio: 2/3; border-radius: 13px; overflow: hidden; background: #15112c; box-shadow: 0 10px 20px -10px #000; }
.sx-p img { width: 100%; height: 100%; object-fit: cover; }
.sx-p .kmark { width: 24px; height: 24px; border-radius: 8px; top: 5px; inset-inline-start: 5px; }
.sx-p .kmark svg { width: 15px; height: 15px; }
.sx-i b { text-align: right; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-i small { color: var(--mut); font-size: 12px; }

/* ═══════════ الشاشات الأصغر ═══════════ */
@media (max-width: 1500px) {
  .tab { padding: 10px 13px; }
  .hbtn--search span, .hbtn--search kbd { display: none; }
  .hbtn--search { min-width: 0; width: 46px; padding: 0; justify-content: center; }
}
@media (max-width: 1280px) {
  .tab-t { font-size: 15px; }
  .tab-ic { width: 30px; height: 30px; }
  .hbtn--set span { display: none; }
  .hbtn--set { width: 46px; padding: 0; justify-content: center; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .sh-mosaic { display: none; }
  .sec-hero { grid-template-columns: auto 1fr; }
}
@media (max-width: 1080px) {
  .tab .tab-ic { display: none; }
  .me-t { display: none; }
  .me-chip { padding: 0 6px; }
  .hero-grid { grid-template-columns: 1fr; }
  .side { display: grid; grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
  .cal-body { grid-template-columns: 1fr; }
  .cal-side { position: static; }
  .week { grid-template-columns: repeat(7, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .pf-main { grid-template-columns: auto 1fr; }
  .pf-set { grid-column: 1 / -1; margin-top: 0; justify-self: start; }
  .urow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .urow .u-m { display: none; }
}
@media (max-width: 900px) {
  :root { --head: 64px; --gut: 16px; }
  .tabs { display: none; }
  .brand { margin-inline-end: auto; }
  .logo-mark { width: 38px; height: 38px; }
  .brand-word { font-size: 28px; }
  .hbtn { height: 42px; }
  .hbtn--ico, .hbtn--search, .hbtn--set { width: 42px; }
  .me-chip { height: 46px; }
  .me-chip .av { --av: 34px !important; }
  #tabbar { position: fixed; z-index: 50; inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; border-radius: 22px; background: rgba(10, 8, 24, .92); border: 1px solid var(--line2); box-shadow: 0 20px 40px -12px #000; backdrop-filter: blur(16px); }
  .tb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border-radius: 16px; font-size: 11.5px; font-weight: 700; color: var(--ink2); }
  .tb svg { width: 23px; height: 23px; }
  .tb.on { background: var(--acc); color: var(--acc-ink); box-shadow: 0 8px 20px -8px var(--acc); }
  #view { padding-bottom: 120px; }
  #toasts { top: calc(var(--head) + 8px); inset-inline: 10px; width: auto; }
  .spot, .spot-sk { min-height: 560px; }
  .sl-in { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 22px 18px 20px; gap: 12px; }
  .sl-poster { width: 104px; }
  .sl-sub { display: none; }
  .sl-act .favbtn span { display: none; }
  .sl-dots { top: 16px; bottom: auto; inset-inline-end: 16px; }
  .side { grid-template-columns: 1fr; }
  .sh-hero { min-height: 0; margin-top: -16px; }
  .sh-in { grid-template-columns: 1fr; padding: 90px var(--gut) 24px; gap: 18px; }
  .sh-poster { width: 160px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-ic { width: 38px; height: 38px; }
  .sec-hero { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
  .sh-emblem { width: 86px; height: 86px; border-radius: 24px; }
  .sh-emblem svg { width: 50px; height: 50px; }
  .pr-hero { grid-template-columns: 1fr; }
  .pr-photo { width: 180px; }
  .pf-edit { grid-template-columns: 1fr; }
  .cal-head { grid-template-columns: 1fr; }
  .ch-nav { justify-content: flex-start; }
  .secmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modes { grid-template-columns: 1fr; }
  .g-wrap { grid-template-columns: 1fr; gap: 26px; }
  .g-brand { align-items: center; text-align: center; }
  .g-brand .brand-word { font-size: 78px; }
  .g-logo .logo-mark { width: 84px; height: 84px; }
  .g-feats { display: none; }
  .g-brand p { font-size: 16px; }
  .tn { grid-template-columns: 1fr; }
  .tn-slot { width: 180px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hbtn--set, #hTonight { display: none; }
  .rg { gap: 12px; }
  .rh h2 { font-size: 19px; }
  .rh-ic { width: 42px; height: 42px; }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
  .rg[style*="--cw:172px"], .rg[style*="--cw:150px"] { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .ep { height: 150px; }
  .ep-poster { width: 76px; }
  .ep-n { font-size: 25px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .tonightbar { flex-direction: column; align-items: stretch; }
  .tb-h { border: 0; padding: 0; }
  .m-grid, .m-dows { gap: 4px; }
  .dcell { min-height: 0; padding: 4px; border-radius: 10px; gap: 2px; }
  .dn { font-size: 17px; }
  .tday { display: none; }
  .evc { padding: 0; border-radius: 4px; height: 6px; border-inline-start: 0; background: var(--lc); }
  .evc img, .evc b, .evc .rep, .evc .evdot { display: none; }
  .evmore { font-size: 10px; }
  .pickbtn { min-width: 100px; height: 54px; }
  .pickbtn b { font-size: 21px; }
  .lib-tabs { margin-inline-start: 0; width: 100%; }
  .lib-tabs button { flex: 1; justify-content: center; }
  .pf-main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pf-tx h1 { justify-content: center; }
  .pf-stats { justify-content: center; }
  .frames { grid-template-columns: repeat(2, 1fr); }
  .va { grid-template-columns: 60px 60px 1fr; }
  .role { grid-template-columns: 70px 48px 1fr; }
  .lvr { grid-template-columns: 52px minmax(0, 1fr) auto auto auto; }
  .lvr-prev { display: none; }
  .m-body { padding: 16px; }
  .modal { padding: 10px; }
  .sx-res { grid-template-columns: 1fr; }
  .sx-in input { font-size: 17px; }
  .ask-row { flex-direction: column-reverse; }
  .facts { gap: 10px; }
  .fact { padding: 12px 14px; }
  .fact .big { font-size: 21px; }
  .sh-act .btn--lg { height: 48px; padding: 0 16px; font-size: 15px; }
  .sl-act .btn--lg { height: 46px; padding: 0 14px; font-size: 14.5px; }
  .g-card { padding: 22px 18px; }
  .carts { grid-template-columns: repeat(2, 1fr); }
  .cart { height: 170px; }
  .cs-screen { padding: 18px; }
}