*{box-sizing:border-box}
body{margin:0;background:#fff;font-family:Tahoma,Arial,sans-serif;display:flex;justify-content:center;padding:15px}

/* ===== النافذة (الخلفية الزرقاء مثل الصورة) ===== */
.win{width:362px;background:linear-gradient(180deg,#2f86d8 0,#5aa3e6 34px,#b9d8f5 34px,#d6e8f9 230px,#d6e8f9 100%);
     border:1px solid #6d9fd1;padding:0 0 4px}
.logo{margin:0;height:34px;display:flex;align-items:center;justify-content:center;font:bold 20px Tahoma;color:#d6f04a;
      text-shadow:0 1px 0 #2a6a14,0 0 6px rgba(255,255,255,.4)}

/* صندوق معلومات السيرفر */
.info{margin:8px 8px 0;border:1px solid #8fb6de;background:linear-gradient(#e3eff9,#c9def3);direction:rtl;padding:4px 6px 6px}
.info h2{margin:0 4px 4px;font:bold 16px Tahoma;color:#163f6e;text-align:right}
.info .row{display:flex;align-items:center;height:30px;border:1px solid #a4c4e4;border-top:none;background:#d3e5f6}
.info .row:first-of-type{border-top:1px solid #a4c4e4}
.info .row span{width:105px;font-size:11px;color:#2f5683;padding-right:8px}
.info .row b{flex:1;font:bold 17px Verdana,Arial;color:#0d2a4c;direction:ltr;text-align:center;padding-left:40px}
.back{direction:rtl;font-size:9px;color:#5f86b0;margin:4px 12px 0;text-align:right}
.back{margin-bottom:14px}

/* التبويبات */
.tabs{display:flex;direction:rtl;margin:0 2px;background:#fff;border:1px solid #9aa9b8;border-bottom:none;height:24px}
.tabs span{font:bold 14px Tahoma,Arial;color:#000;padding:2px 8px 0;border-left:1px solid #9aa9b8;background:#fff;cursor:default}
.tabs span.active{padding-left:12px}

/* ===== القائمة ===== */
.list{margin:0 2px;height:690px;overflow-y:scroll;background:#fff;border:1px solid #9aa9b8;padding-top:2px}
.list::-webkit-scrollbar{width:17px}
.list::-webkit-scrollbar-track{background:#f0f0f0;border-left:1px solid #e6e6e6}
.list::-webkit-scrollbar-thumb{background:#cdcdcd;border:2px solid #f0f0f0;border-width:0 2px}
.list::-webkit-scrollbar-thumb:hover{background:#a6a6a6}
.list::-webkit-scrollbar-button:single-button{height:17px;background:#f0f0f0 no-repeat center/7px 4px;display:block}
.list::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath d='M0 4L3.5 0L7 4z' fill='%23606060'/%3E%3C/svg%3E")}
.list::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath d='M0 0L3.5 4L7 0z' fill='%23606060'/%3E%3C/svg%3E")}

/* السطر: هامش أبيض على اليسار ثم الرقم ثم العلم ثم الاسم */
.list ul{list-style:none;margin:0;padding:0}
.list li{margin:0;padding:0}
.list a{display:flex;align-items:center;height:22.5px;margin-left:24px;padding:0 3px 0 2px;text-decoration:none;
        cursor:pointer;border:1px solid transparent;border-width:1px 0 1px 1px;position:relative}
.cnt{width:25px;flex:none;font:bold 15px Verdana,Arial;color:#1f3dd4;white-space:nowrap;letter-spacing:-.3px;position:relative;z-index:1}

/* أيقونة / علم الدولة (يتداخل قليلاً مع آخر رقم كما في الصورة) */
.ico{width:23px;height:17px;flex:none;position:relative;z-index:2;margin-left:-2px;background:no-repeat center/100% 100%}
.ico.flag{border-radius:1px 3px 3px 1px;box-shadow:0 0 0 .5px rgba(0,0,0,.35);
          clip-path:polygon(0 8%,25% 0,50% 8%,75% 2%,100% 8%,100% 92%,75% 86%,50% 94%,25% 86%,0 92%)}
.ico.flag::after{content:"";position:absolute;inset:0;
          background:linear-gradient(90deg,rgba(255,255,255,.35) 0,rgba(0,0,0,.18) 28%,rgba(255,255,255,.28) 55%,rgba(0,0,0,.2) 80%,rgba(255,255,255,.15) 100%)}
.ico.custom{background-size:contain;width:23px;height:20px}

.nm{flex:1;direction:rtl;text-align:right;font:bold 14px Tahoma,Arial;color:#4c4c4c;white-space:nowrap;overflow:hidden;
    text-overflow:clip;padding-right:2px;text-shadow:0 1px 0 #fff,0 0 1px rgba(0,0,0,.25)}

/* ===== غرفة VIP: خلفية حمراء فاتحة مع طوق ===== */
.list a.vip{background:#ff4a4a;border-color:#e40000;
            box-shadow:inset 0 0 0 1px #ff7d7d}
.list a.vip .cnt{color:#2244dd}
.list a.vip .nm{color:#a80000;text-shadow:0 0 1px #ff9a9a,0 1px 0 #ff8080}

.list a:hover{filter:brightness(.96)}

/* ===== صفحة الغرفة ===== */
.room-wrap{width:100%;max-width:1100px}
.room-bar{display:flex;justify-content:space-between;align-items:center;background:#2f86d8;color:#fff;padding:8px 12px;font-weight:bold;direction:rtl}
.room-bar h1{margin:0;font-size:16px}
.room-bar a{color:#fff}
.room-desc{direction:rtl;margin:0;padding:8px 12px;font-size:13px;color:#444;background:#f3f8fd;border:1px solid #2f86d8;border-top:none}
.room-body{background:#fff;min-height:600px;border:1px solid #2f86d8}