.tp-v10-wrap { position: relative; width: 100%; margin: 20px auto; font-family: 'Segoe UI', sans-serif; color: #fff; }
.tp-top { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; margin-bottom: 15px; }
.tp-top h3 { margin: 0; color: #d4af37; text-transform: uppercase; font-size: 18px; }
#tp-filter { background: #000; color: #fff; border: 1px solid #d4af37; padding: 8px; border-radius: 4px; cursor: pointer; }

#mynetwork { width: 100%; height: 800px; border: 1px dashed rgba(255,255,255,0.2); border-radius: 8px; background: transparent; cursor: grab; }
#mynetwork:active { cursor: grabbing; }

/* أزرار الزوم العائمة */
.tp-zoom-btns { position: absolute; bottom: 50px; right: 20px; display: flex; flex-direction: column; gap: 5px; z-index: 10; }
.tp-zoom-btns button { width: 40px; height: 40px; background: #fff; color: #000; border: none; border-radius: 50%; font-size: 20px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: 0.2s; }
.tp-zoom-btns button:hover { background: #d4af37; transform: scale(1.1); }

/* بطاقة المعلومات */
.tp-card { position: absolute; top: 80px; left: 20px; width: 250px; background: rgba(10,10,10,0.95); border-left: 5px solid #d4af37; padding: 20px; border-radius: 5px; display: none; z-index: 100; box-shadow: 5px 5px 20px rgba(0,0,0,0.5); }
.tp-card h4 { margin: 0 0 10px 0; color: #d4af37; font-size: 20px; }
.tp-card hr { border: 0; border-top: 1px solid #444; margin: 15px 0; }
.tp-card p { font-size: 14px; line-height: 1.5; color: #ddd; }

.tp-legend { text-align: center; margin-top: 10px; color: #ccc; font-size: 12px; }
.dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; margin-left: 5px; border:1px solid #555; }
.white { background: #fff; } .green { background: #4CAF50; } .orange { background: #FF9800; }