*{box-sizing:border-box}
body{margin:0;background:#EFEAF1;font-family:'Readex Pro',system-ui,sans-serif;color:#2A1636}
a{color:#3E2050;text-decoration:none}
a:hover{color:#7A4A93}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 20px;background:#2E1740;color:#F3EDE2;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#F3EDE2;font-size:14px;font-weight:600}
.brand img{width:30px;height:30px;border-radius:9px;object-fit:cover}
.brand:hover{color:#E4CE96}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.crumbs a,.crumbs span{color:#E8DCEF}
.crumbs a{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.09)}
.crumbs a:hover{background:#C9A44C;color:#2E1740}
.crumbs .off{opacity:.35}
.wrap{padding:22px 16px 56px;max-width:1560px;margin:0 auto}
.stage{margin:0}
.screen-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.badge{background:#3E2050;color:#F3EDE2;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px}
.screen-head h1{font-size:16px;font-weight:500;color:#4A3A52;margin:0}
.stage{position:relative;overflow:hidden;padding:0 0 40px}
.board{width:1440px;transform-origin:top right}
/* العناصر القابلة للنقر داخل الشاشة */
.nv{cursor:pointer}
.nv:hover{outline:2px solid #C9A44C;outline-offset:2px;border-radius:10px}
body.show-nv .nv{box-shadow:inset 0 0 0 1.5px rgba(201,164,76,.85);border-radius:8px}
.ctx{opacity:.85}
#nvHint{font:inherit;font-size:13px;color:#E8DCEF;background:rgba(255,255,255,.09);
  border:0;padding:5px 11px;border-radius:999px;cursor:pointer}
#nvHint:hover{background:#C9A44C;color:#2E1740}
/* الفهرس */
.hero{padding:40px 20px 8px;max-width:1560px;margin:0 auto}
.hero h1{font-size:26px;margin:0 0 8px}
.hero p{margin:0;color:#6A5A72;font-size:14px;line-height:2}
.round{max-width:1560px;margin:0 auto;padding:26px 20px 0}
.round h2{font-size:18px;margin:0 0 14px;color:#2A1636}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #E9E2ED;border-radius:16px;
  padding:16px 18px;transition:.15s}
.card:hover{border-color:#C9A44C;box-shadow:0 12px 26px rgba(42,22,54,.10);transform:translateY(-2px)}
.card .b{align-self:flex-start;background:#EDE3F2;color:#3E2050;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.card .t{font-size:13.5px;color:#3A2C42;line-height:1.9}
footer{max-width:1560px;margin:0 auto;padding:34px 20px;color:#8A7A92;font-size:12.5px}
.h1:hover{background:#4A2A63}
.h2:hover{background:#F4F0F6}
.h3:hover{color:#F7F4F0}
.h4:hover{background:#D8B461}
.h5:hover{background:#FBF8FC}
.h6:hover{color:#3E2050}
.h7:hover{background:#3C2153;color:#F7F4F0}
.h8:hover{background:#EDE3F2}
.h9:hover{background:#F7F3F9;color:#3E2050}
.h10:hover{background:#FBF9F6}