/*
Theme Name: TrpMix Pro Ultimate
Author: The Architect
Description: النسخة النهائية مع وضع ليلي، كلمات أغاني، وشبكة مربعات.
Version: 3.0
*/

:root {
    --bg-color: #f4f4f4; --card-bg: #ffffff; --text-primary: #333; --accent: #ff0055;
}

/* فئات الوضع الليلي */
body.dark-mode {
    --bg-color: #121212; --card-bg: #1e1e1e; --text-primary: #e0e0e0;
}

body { direction: rtl; background-color: var(--bg-color); color: var(--text-primary); font-family: sans-serif; transition: 0.3s; margin: 0; }
.container { width: 95%; max-width: 1100px; margin: auto; }

/* الهيدر وزر الوضع الليلي */
header { background: #1a1a1a; color: #fff; padding: 15px 0; text-align: center; position: relative; }
#dark-toggle { position: absolute; left: 20px; top: 15px; cursor: pointer; background: var(--accent); border: none; color: #fff; padding: 5px 10px; border-radius: 5px; }

/* الشبكة المربعة (Grid) */
.mhrgnat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; padding: 20px 0; }
.mhr-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; border: 1px solid #ddd; transition: 0.3s; }
.mhr-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.mhr-thumb { position: relative; aspect-ratio: 1/1; background: #000; }
.mhr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mhr-details { padding: 10px; text-align: center; }
.mhr-details h3 { font-size: 14px; margin: 0; height: 38px; overflow: hidden; color: var(--text-primary); }

/* الوسوم والكلمات */
.tag-item { background: #eee; font-size: 10px; padding: 2px 5px; margin: 2px; border-radius: 3px; color: #333; }
.lyrics-container { background: var(--card-bg); padding: 20px; border-right: 4px solid var(--accent); margin: 20px 0; text-align: center; white-space: pre-line; }

/* أزرار التحميل */
.download-area { background: var(--card-bg); border: 2px dashed var(--accent); padding: 20px; border-radius: 10px; text-align: center; }
.btn-main-download { display: inline-block; background: #25d366; color: #fff; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 15px; }

@media (max-width: 480px) { .mhrgnat-grid { grid-template-columns: repeat(2, 1fr); } }