/* ep-shell — isolated styles (prefix .eps-) for the shared identity / links / ad slot */
:root { --eps-w: 196px; }
.eps-col, .eps-flow { font-family: 'Plex Arabic', 'Plex Arabic SK', 'Plex Arabic FR', 'Plex Arabic MG', 'Plex Arabic EP', 'Segoe UI', Tahoma, sans-serif; color: #eef2fb; direction: rtl; box-sizing: border-box; }
.eps-col *, .eps-flow * { box-sizing: border-box; }
.eps-col[hidden], .eps-flow[hidden] { display: none !important; }

/* ---------- desktop column on the physical left ---------- */
.eps-col { position: fixed; left: 0; top: 0; bottom: 0; width: var(--eps-w); z-index: 30; background: #070a12; border-right: 1px solid rgba(148,163,220,.18); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #2a3350 transparent; }
.eps-colin { position: sticky; top: 0; padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 12px; }
/* reserve the column: shift every app frame / page body to the right of it */
html.eps-wide #app, html.eps-wide #skApp, html.eps-wide #frApp, html.eps-wide #mgApp { left: var(--eps-w) !important; }
html.eps-wide body.ep-body { padding-left: var(--eps-w); }

.eps-brand { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 12px; background: linear-gradient(135deg, rgba(108,92,240,.22), rgba(79,70,229,.08)); border: 1px solid rgba(157,140,255,.35); }
.eps-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1rem; color: #fff; background: linear-gradient(135deg, #7a66ff, #4f46e5); box-shadow: 0 0 12px rgba(122,102,255,.45); }
.eps-name { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.eps-sub { font-size: .62rem; color: #97a3bd; }

.eps-links ul { list-style: none; margin: 0; padding: 0; }
.eps-links a { display: flex; align-items: center; gap: 7px; text-decoration: none; color: #cfd6ee; border-radius: 9px; transition: background .2s, color .2s, border-color .2s; }
.eps-links a:hover, .eps-links a:focus-visible { color: #fff; background: rgba(122,102,255,.18); outline: none; }
.eps-links a:focus-visible { box-shadow: 0 0 0 2px #9d8cff; }
.eps-links svg { flex: none; color: #c3b8ff; }
.eps-grid ul { display: flex; flex-direction: column; gap: 2px; }
.eps-grid a { padding: 5px 7px; font-size: .74rem; }

.eps-adwrap { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(148,163,220,.16); }
.eps-adlabel { font-size: .62rem; color: #8a93ad; letter-spacing: .02em; margin-bottom: 5px; text-align: center; }
/* space reserved before the ad loads (limits layout shift); content is never stretched or clipped */
.eps-col .eps-adbox { width: 100%; min-height: 600px; }
.eps-adbox ins.adsbygoogle { width: 100%; }

/* ---------- in-flow block (narrow screens / phones: below the simulation) ---------- */
.eps-flow { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(20,26,44,.74); border: 1px solid rgba(148,163,220,.16); display: flex; flex-direction: column; gap: 10px; }
.eps-chips ul { display: flex; flex-wrap: wrap; gap: 5px; }
.eps-chips a { padding: 5px 9px; font-size: .72rem; border: 1px solid rgba(148,163,220,.24); background: #0e1324; }
.eps-flow .eps-adbox { width: 100%; min-height: 280px; }