:root {
    --bg-dark: #111827;
    /* خلفية داكنة جداً */
    --bg-card: #1f2937;
    /* لون الكروت */
    --primary: #10b981;
    /* أخضر رياضي */
    --primary-glow: rgba(16, 185, 129, 0.3);
    --accent: #3b82f6;
    /* أزرق للتحديات */
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --border: rgba(255, 255, 255, 0.08);
    --font-main: 'Tajawal', sans-serif;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    padding-bottom: 80px;
}

/* Auth Screen */
.full-screen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-box {
    width: 100%;
    max-width: 350px;
    text-align: center;
}

.logo-area h1 {
    margin: 0;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -1px;
}

.accent-text {
    color: var(--primary);
}

.form-group {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Inputs & Buttons */
input,
select {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

input:focus {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.05);
}

.btn {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-primary {
    background: var(--primary);
    color: #000;
    box-shadow: 0 4px 20px var(--primary-glow);
}

.btn-text {
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
}

/* ==================== Premium Glass Header ==================== */
.glass-header {
    /* الإبقاء على كافة خصائصك كما هي */
    background: #0a0f19 !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 0;
    z-index: 5000;

    /* 🔥 الإصلاح الحقيقي لمشكلة النوتش 🔥 */
    padding-top: env(safe-area-inset-top) !important;
    height: auto !important;
    /* السماح للهيدر بالتمدد ليشمل منطقة النوتش */
    min-height: 80px;
    /* الحفاظ على الارتفاع الأصلي للمحتوى */
}

/* التأكد من توسيط المحتوى داخل الارتفاع الجديد */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    /* ارتفاع ثابت للمحتوى الداخلي فقط */
    padding: 0 15px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand-logo {
    height: 55px;
    width: auto;
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    transition: transform 0.3s;
}

.brand-logo:active {
    transform: scale(0.95);
}

.user-greeting-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hello-text {
    font-size: 11px;
    color: var(--primary);
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.user-greeting-box h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.icon-badge {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}

.icon-badge:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
}

.icon-badge i {
    font-size: 20px;
}

.icon-badge.add-btn {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 10px var(--primary-glow);
    margin-left: 0;
}

/* Main Views */
.view {
    display: none;
    animation: fadeIn 0.3s ease;
    padding: 20px;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cards */
/* ==================== V3.1 Hero Rank Card (World Class Design) ==================== */

.hero-rank-card {
    position: relative;
    background: linear-gradient(145deg, #1f2937, #111827);
    /* تدرج داكن عميق */
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

/* تأثير إشعاع خلفي */
.hero-bg-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* الرأس: الرتبة والأيقونة */
.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.rank-label {
    font-size: 11px;
    color: #9ca3af;
    letter-spacing: 1px;
}

.rank-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.rank-title-row h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* الأيقونة المتوهجة */
.rank-icon-glow {
    font-size: 28px;
    background: rgba(255, 255, 255, 0.05);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px var(--primary-glow);
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.next-rank-box {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.next-label {
    font-size: 11px;
    color: #d1d5db;
    font-weight: bold;
}

.next-val {
    font-size: 10px;
    color: #6b7280;
    margin-top: 2px;
}

/* شريط التقدم الاحترافي */
.pro-progress-container {
    height: 12px;
    background: rgba(0, 0, 0, 0.4);
    /* داكن جداً للتباين */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 5px;
    z-index: 1;
}

.pro-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #34d399);
    border-radius: 20px;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

/* لمعة متحركة داخل الشريط */
.pro-progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: shimmerBar 2s infinite;
}

@keyframes shimmerBar {
    100% {
        transform: translateX(100%);
    }
}

.progress-text-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9ca3af;
    font-weight: bold;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

/* قسم الإحصائيات السفلي */
.hero-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-icon {
    font-size: 18px;
    color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-data {
    display: flex;
    flex-direction: column;
}

.h-val {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.h-lbl {
    font-size: 9px;
    color: #9ca3af;
}

.hero-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

/* Tabs */
.tabs-nav {
    display: flex;
    background: var(--bg-card);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
}

.tab-item.active {
    background: var(--bg-dark);
    color: var(--text-main);
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s;
}


/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 6000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* ==================== PREMIUM GLASS MODAL ==================== */
.modal-box {
    /* 1. الخلفية الزجاجية الداكنة */
    background: linear-gradient(145deg, rgba(20, 25, 35, 0.9), rgba(10, 15, 25, 0.95));
    backdrop-filter: blur(20px);
    /* التمويه الزجاجي */
    -webkit-backdrop-filter: blur(20px);
    /* لدعم الآيفون */

    /* 2. الأبعاد والتموضع (نفس منطقك القديم للموبايل) */
    width: 90%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;

    /* 3. الحدود والظلال (سر الفخامة) */
    padding: 25px;
    border-radius: 24px;
    /* زوايا أنعم */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* حدود خفيفة */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* لمعة من فوق */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    /* ظل عميق يرفع المودال */

    /* 4. تحسين النص */
    color: #fff;
}

/* 🔥 إضافة: تحسين شكل السكرول بار داخل المودال عشان يليق مع الزجاج */
.modal-box::-webkit-scrollbar {
    width: 6px;
}

.modal-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    margin: 10px 0;
    border-radius: 10px;
}

.modal-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.modal-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Utilities */
.error-msg {
    color: #ef4444;
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
}

/* Leaderboard Basic Styles */
.rank-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leader-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.2s;
}

.rank-col {
    font-size: 18px;
    font-weight: bold;
    width: 30px;
    text-align: center;
}

.avatar-col {
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--primary);
    border: 1px solid var(--border);
}

.info-col {
    flex: 1;
}

.info-col .name {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-main);
}

.info-col .region {
    font-size: 10px;
    color: var(--text-muted);
}

.dist-col {
    font-weight: 800;
    color: var(--accent);
    font-size: 14px;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-btn {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.filter-btn.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
}

/* Squads */
.squad-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 30px;
}

.squad-row {
    position: relative;
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

.squad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    width: 100%;
}

.squad-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.squad-name-box {
    flex: 1;
    margin-right: 12px;
}

.squad-name-box h4 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.squad-total-badge {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 14px;
}

.squad-stats-row {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 11px;
    color: #9ca3af;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-item i {
    color: var(--accent);
}

.squad-bg-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
    z-index: 0;
    transition: width 1.5s ease-out;
}

.squad-row.rank-1 {
    border: 1px solid #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
}

.squad-row.rank-1 .squad-rank {
    background: #f59e0b;
    color: #000;
}

.squad-row.rank-1 .squad-total-badge {
    background: #f59e0b;
    color: #000;
}

.squad-row.rank-2 {
    border-right: 4px solid #9ca3af;
}

.squad-row.rank-3 {
    border-right: 4px solid #cd7f32;
}

/* Logs */
.log-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-group {
    margin-bottom: 15px;
}

.log-month-header {
    font-size: 11px;
    color: var(--primary);
    background: rgba(16, 185, 129, 0.1);
    padding: 5px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: inline-block;
    font-weight: bold;
}

.log-row-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
}

.log-row-compact:active {
    background: rgba(255, 255, 255, 0.08);
}

.log-col-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 2;
}

.log-type-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.log-dist-val {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.log-dist-unit {
    font-size: 10px;
    color: var(--text-muted);
}

.log-col-meta {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.log-date-text {
    font-size: 11px;
    color: #e5e7eb;
}

.log-pace-text {
    font-size: 10px;
    color: var(--text-muted);
}

.log-col-actions {
    display: flex;
    gap: 8px;
}

.btn-mini-action {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

.btn-edit {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.btn-del {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-share {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.badge-record {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 8px;
    padding: 2px 6px;
    border-bottom-right-radius: 6px;
    font-weight: bold;
}

/* Feed & Actions */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}

.feed-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feed-card-compact {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feed-compact-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feed-compact-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
}

.feed-compact-text {
    font-size: 11px;
    color: #d1d5db;
}

.feed-compact-text strong {
    color: #fff;
}

.feed-compact-meta {
    font-size: 9px;
    color: var(--text-muted);
    display: block;
}

.feed-compact-action {
    display: flex;
    align-items: center;
    gap: 5px;
}

.feed-compact-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}

.feed-compact-btn.liked {
    color: #ef4444;
}

.feed-compact-count {
    font-size: 9px;
}

/* Comments System */
.comments-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comment-item {
    display: flex;
    gap: 10px;
    animation: fadeIn 0.2s ease;
}

.comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #374151;
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-bubble {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 12px 12px 12px;
    padding: 8px 12px;
    max-width: 85%;
}

.comment-user {
    font-size: 11px;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 2px;
    display: block;
}

.comment-msg {
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.4;
    word-break: break-word;
}

.comment-time {
    font-size: 9px;
    color: var(--text-muted);
    display: block;
    margin-top: 4px;
    text-align: left;
}

.comment-input-area {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-input-area input {
    flex: 1;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
}

.btn-send {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 10px var(--primary-glow);
    transition: 0.2s;
}

.btn-send:active {
    transform: scale(0.9);
}

/* Notifications & Settings */
.notif-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
}

.notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-content {
    font-size: 12px;
    color: #fff;
    flex: 1;
}

.badge-dot.active {
    background-color: #ef4444;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setting-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 12px;
    width: 100%;
    text-align: right;
    cursor: pointer;
    transition: 0.2s;
    color: #fff;
}

.setting-item:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.1);
}

.setting-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-dark);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.setting-text {
    display: flex;
    flex-direction: column;
}

.setting-text span {
    font-weight: bold;
    font-size: 14px;
}

.setting-text small {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.setting-item.delete {
    border-color: rgba(239, 68, 68, 0.3);
}

.setting-item.delete .setting-icon {
    color: #ef4444;
}

.setting-item.delete .setting-text {
    color: #ef4444;
}

.admin-card {
    background: rgba(31, 41, 55, 0.5);
    border: 1px dashed var(--accent);
    padding: 20px;
    border-radius: 16px;
}

/* Gamification & Goals */
.xp-container {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.xp-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 5px;
    color: var(--text-muted);
}

.xp-track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.xp-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px currentColor;
}

.xp-message {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 6px;
    text-align: center;
}

.rank-mubtadi {
    color: #9ca3af !important;
    --rank-color: #9ca3af;
}

.rank-hawy {
    color: #3b82f6 !important;
    --rank-color: #3b82f6;
}

.rank-runner {
    color: #10b981 !important;
    --rank-color: #10b981;
}

.rank-pro {
    color: #f59e0b !important;
    --rank-color: #f59e0b;
}

.rank-legend {
    color: #8b5cf6 !important;
    --rank-color: #8b5cf6;
}

.rank-legend .xp-fill {
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px #8b5cf6;
    }

    to {
        box-shadow: 0 0 20px #8b5cf6;
    }
}

.goal-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.goal-card:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.08);
}

.goal-title {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.goal-card h3 {
    margin: 5px 0;
    font-size: 18px;
    color: #fff;
}

.goal-sub {
    font-size: 11px;
    color: #a78bfa;
    font-weight: bold;
}

.goal-ring-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goal-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#8b5cf6 var(--p), rgba(255, 255, 255, 0.1) 0deg);
    mask: radial-gradient(transparent 55%, black 56%);
    -webkit-mask: radial-gradient(transparent 55%, black 56%);
    transition: --p 1s ease;
}

.goal-icon {
    position: absolute;
    color: #8b5cf6;
    font-size: 18px;
}

/* Section Title & Challenges */
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-title-row h4 {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.mini-challenges-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.mini-challenges-scroll::-webkit-scrollbar {
    display: none;
}

.mini-challenge-card {
    min-width: 130px;
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.mini-ch-title {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-ch-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 5px 0;
}

.mini-ch-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.5s;
}

.challenges-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}

.mission-card {
    position: relative;
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9), rgba(17, 24, 39, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.mission-card:active {
    transform: scale(0.98);
}

.mission-bg-icon {
    position: absolute;
    left: -20px;
    bottom: -20px;
    font-size: 100px;
    opacity: 0.05;
    color: #fff;
    transform: rotate(15deg);
    pointer-events: none;
}

.mission-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.mission-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.mission-meta {
    font-size: 12px;
    color: var(--accent);
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.mission-target-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.mission-progress-container {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 15px 0 10px;
    overflow: hidden;
    position: relative;
}

.mission-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: width 1s ease;
}

.mission-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
}

.btn-join-mission {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, #10b981, #059669);
    color: #fff;
    border: none;
    font-weight: bold;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Badges Fixed */
.badges-section {
    padding: 0 5px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    /* جعل الأوسمة صغيرة ومتجاورة */
    gap: 12px;
    padding: 10px;
    max-width: 450px;
    margin: 0 auto;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 5px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    min-height: 80px;
}

.badge-item.locked {
    opacity: 0.3;
    filter: grayscale(100%);
    transform: scale(0.9);
}

.badge-item.unlocked {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.badge-icon {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.badge-name {
    font-size: 10px;
    color: #e5e7eb;
    font-weight: bold;
    line-height: 1.3;
}

/* ==================== V3.1 Pro Profile & Records ==================== */

/* ==================== V3.2 Compact Hero Card ==================== */

.pro-hero-card.compact {
    background: linear-gradient(145deg, #111827, #1f2937);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
}

.pro-card-header {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 15px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.02), transparent);
}

/* الأفاتار المصغر */
.pro-avatar-box {
    position: relative;
    cursor: pointer;
}

.pro-avatar {
    width: 65px;
    height: 65px;
    /* تصغير الحجم */
    border-radius: 50%;
    background: #374151;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary);
    background-size: cover;
    background-position: center;
    /* لدعم الصور */
}

.edit-badge {
    position: absolute;
    bottom: 0;
    right: -5px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* المعلومات الجانبية */
.pro-info-box {
    flex: 1;
}

.pro-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pro-name-row h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.pro-rank-pill {
    font-size: 9px;
    background: var(--primary);
    color: #000;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 800;
}

.pro-meta-row {
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dot-sep {
    font-weight: bold;
    color: #4b5563;
}

/* شريط التقدم المصغر جداً */
.mini-xp-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-top: 8px;
    overflow: hidden;
}

.mini-xp-fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    border-radius: 10px;
    transition: width 1s;
}

/* الشريط السفلي للإحصائيات */
.pro-stats-strip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.p-strip-item {
    text-align: center;
}

.p-strip-val {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.p-strip-lbl {
    font-size: 9px;
    color: #6b7280;
    font-weight: bold;
    text-transform: uppercase;
}

.v-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
}

/* مودال اختيار الأفاتار */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.avatar-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border: 1px solid transparent;
}

.avatar-option.selected {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.1);
}

/* Chart */
.chart-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    height: 160px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.bar-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
}

.chart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.bar-bg {
    width: 100%;
    max-width: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    width: 100%;
    background: linear-gradient(to top, var(--primary), #34d399);
    border-radius: 4px;
    transition: height 1s ease;
    min-height: 4px;
}

.bar-fill.high {
    background: linear-gradient(to top, #10b981, #059669);
}

.bar-fill.med {
    background: linear-gradient(to top, #f59e0b, #d97706);
}

.bar-fill.low {
    background: linear-gradient(to top, #6b7280, #4b5563);
}

.bar-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 6px;
}

.bar-tooltip {
    font-size: 9px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: bold;
}

/* Share Card Hidden */
.share-card-template {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 320px;
    height: 500px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Tajawal', sans-serif;
    color: #fff;
    overflow: hidden;
    z-index: 9999;
}

.share-bg-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--primary);
    filter: blur(80px);
    opacity: 0.2;
    border-radius: 50%;
}

.share-logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--primary);
}

.share-logo {
    height: 30px;
    width: auto;
}

.share-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.share-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.share-user-info h3 {
    margin: 0;
    font-size: 18px;
}

.share-user-info span {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
}

.share-stat-box {
    text-align: center;
    margin: 20px 0;
}

.share-label {
    font-size: 14px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.share-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.share-num {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.share-unit {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary);
}

.share-details {
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.s-det-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #d1d5db;
}

.s-det-item i {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 5px;
}

.share-footer {
    text-align: center;
    font-size: 10px;
    color: #64748b;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: auto;
}

/* Coach Card */
.coach-card {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.coach-card::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.coach-icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.coach-content {
    flex: 1;
    z-index: 1;
}

.coach-label {
    font-size: 10px;
    color: #bfdbfe;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.coach-message {
    font-size: 13px;
    color: #fff;
    line-height: 1.4;
    font-weight: 500;
    margin: 0;
}

/* Podium (Leaderboard 2.0) */
.team-goal-card {
    background: linear-gradient(135deg, #1f2937, #111827);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.team-goal-card::before {
    content: '🏆';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 80px;
    opacity: 0.05;
    transform: rotate(20deg);
}

.team-title {
    font-size: 12px;
    color: #f59e0b;
    font-weight: bold;
    margin-bottom: 5px;
}

.team-val {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.team-goal-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #6b7280;
    margin-top: 8px;
}

.podium-section {
    margin-bottom: 30px;
    text-align: center;
}

.podium-title {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.podium-item:active {
    transform: scale(0.95);
}

.podium-avatar {
    border-radius: 50%;
    background: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #fff;
    border: 3px solid #4b5563;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.podium-item.rank-1 {
    order: 2;
    margin-bottom: 20px;
}

.podium-item.rank-1 .podium-avatar {
    width: 80px;
    height: 80px;
    font-size: 32px;
    border-color: #f59e0b;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, #111827, #f59e0b);
}

.crown-icon {
    position: absolute;
    top: -25px;
    font-size: 28px;
    animation: bounce 2s infinite;
    filter: drop-shadow(0 0 5px #f59e0b);
}

.podium-item.rank-2 {
    order: 1;
}

.podium-item.rank-2 .podium-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
    border-color: #9ca3af;
}

.podium-item.rank-3 {
    order: 3;
}

.podium-item.rank-3 .podium-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
    border-color: #b45309;
}

.podium-name {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    margin-top: 8px;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podium-dist {
    font-size: 12px;
    font-weight: 900;
    color: var(--primary);
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.leaderboard-controls {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.leaderboard-controls h4 {
    font-size: 16px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-large-toggle {
    display: flex;
    background: #111827;
    padding: 5px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.filter-large-toggle .filter-btn {
    flex: 1;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af;
    border: none;
    background: transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.filter-large-toggle .filter-btn.active {
    background: var(--primary);
    color: #000;
    font-weight: 800;
    box-shadow: 0 2px 10px var(--primary-glow);
}

.filter-large-toggle .filter-btn:active {
    transform: scale(0.97);
}

/* Loaders & Misc */
.loader-btn {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-left: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.offline-banner {
    position: fixed;
    top: -50px;
    left: 0;
    width: 100%;
    background-color: #ef4444;
    color: white;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    z-index: 9999;
    transition: top 0.3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.offline-banner.active {
    top: 0;
}

.install-pulse {
    animation: pulse-glow 2s infinite;
    border: 1px solid var(--primary);
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

/* Skeleton */
@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0));
    animation: shimmer 2s infinite;
}

.sk-leader-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.sk-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.sk-line {
    height: 10px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.sk-line.short {
    width: 40%;
}

.sk-line.long {
    width: 80%;
}

.sk-feed-card {
    padding: 15px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
}

.sk-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.sk-challenge-card {
    height: 100px;
    margin-bottom: 15px;
    border-radius: 16px;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid var(--border);
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    width: 90%;
    max-width: 350px;
    pointer-events: none;
}

.toast {
    background: rgba(17, 24, 39, 0.95);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    animation: slideUpFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

.toast.success {
    border-right: 4px solid #10b981;
}

.toast.error {
    border-right: 4px solid #ef4444;
}

.toast i {
    font-size: 18px;
}

.toast.success i {
    color: #10b981;
}

.toast.error i {
    color: #ef4444;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ==================== V2.0 Charts & Animations ==================== */

/* حاوية للتحكم في التمرير الأفقي للشارت الشهري */
.chart-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    /* نعومة التمرير في الآيفون */
}

/* زر التبديل بين أسبوعي وشهري */
.chart-toggle-row {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 10px;
}

.chart-toggle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.chart-toggle-btn.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
    font-weight: bold;
}

/* تحسين أعمدة الشارت */
.chart-column {
    min-width: 35px;
    /* عرض أدنى للعمود ليكون واضحاً */
}

.chart-container.monthly .chart-column {
    min-width: 20px;
    /* أعمدة أرفع للشهر */
    gap: 2px;
}

/* سكرول بار مخفي للشكل الجمالي */
.chart-scroll-wrapper::-webkit-scrollbar {
    height: 4px;
}

.chart-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* ==================== V3.0 Admin Command Center ==================== */

/* حاوية الجدول */
.admin-table-container {
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    min-width: 500px;
    /* لضمان العرض الجيد على الموبايل */
}

.admin-table th {
    text-align: right;
    color: var(--text-muted);
    padding: 10px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.admin-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    vertical-align: middle;
}

/* أزرار الإجراءات في الجدول */
.action-btn {
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    margin-left: 4px;
}

.btn-ban {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.btn-warn {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

/* بطاقات التنبيه (الغش) */
.alert-card {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-info strong {
    color: #ef4444;
    display: block;
    font-size: 12px;
}

.alert-info span {
    font-size: 10px;
    color: #fca5a5;
}

/* إحصائيات لوحة التحكم */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.dash-card {
    background: var(--bg-card);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.dash-num {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    display: block;
}

.dash-lbl {
    font-size: 10px;
    color: var(--text-muted);
}


/* 2. إصلاح وتجميل "أرقامي القياسية" (Records) */
.records-container {
    background: linear-gradient(135deg, #1c1917, #292524);
    /* لون برونزي داكن فخم */
    border-radius: 20px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 15px auto;
    /* توسيط الحاوية */
    max-width: 450px;
    /* تحديد عرض أقصى يمنع الضخامة */
    width: 95%;
    /* مرونة في الشاشات الصغيرة */
}

/* أيقونة خلفية */
.records-container::before {
    content: '🏅';
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 80px;
    opacity: 0.05;
    transform: rotate(-20deg);
}

.records-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f59e0b;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

/* الشبكة الجديدة المنظمة */
.records-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 أعمدة متساوية */
    gap: 10px;
    position: relative;
    z-index: 2;
}

.record-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.record-icon {
    font-size: 18px;
    color: #d6d3d1;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.05);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.record-val {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2px;
}

.record-lbl {
    font-size: 10px;
    color: #a8a29e;
}

/* Chart */
.chart-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    height: 160px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.bar-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
}

.chart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.bar-bg {
    width: 100%;
    max-width: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    width: 100%;
    background: linear-gradient(to top, var(--primary), #34d399);
    border-radius: 4px;
    transition: height 1s ease;
    min-height: 4px;
}

.bar-fill.high {
    background: linear-gradient(to top, #10b981, #059669);
}

.bar-fill.med {
    background: linear-gradient(to top, #f59e0b, #d97706);
}

.bar-fill.low {
    background: linear-gradient(to top, #6b7280, #4b5563);
}

.bar-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 6px;
}

.bar-tooltip {
    font-size: 9px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: bold;
}


/* ==================== V2.0 Custom Toasts ==================== */
.toast-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    width: 90%;
    max-width: 350px;
    pointer-events: none;
}

.toast {
    background: rgba(17, 24, 39, 0.95);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    animation: slideUpFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

.toast.success {
    border-right: 4px solid #10b981;
}

.toast.error {
    border-right: 4px solid #ef4444;
}

.toast i {
    font-size: 18px;
}

.toast.success i {
    color: #10b981;
}

.toast.error i {
    color: #ef4444;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}


/* ==================== Stylish Upload Zone V2.0 ==================== */

/* 1. الحاوية الرئيسية للمنطقة */
.upload-zone-wrapper {
    background: rgba(255, 255, 255, 0.03);
    /* خلفية أفتح قليلاً من المودال */
    border: 2px dashed var(--border);
    /* حدود متقطعة بلون هادئ */
    border-radius: 16px;
    /* زوايا دائرية ناعمة */
    padding: 25px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* تأثير عند اللمس أو المرور */
.upload-zone-wrapper:hover,
.upload-zone-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
    /* تغيير لون الحدود للون الأساسي عند التفاعل */
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
    /* وهج خفيف بلون البريماري */
}

/* 2. الليبل الذي يعمل كزر (يغطي المنطقة بالكامل) */
.upload-trigger-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 100%;
    height: 100%;
    gap: 15px;
}

/* 3. أيقونة الرفع الكبيرة */
.upload-icon-container {
    width: 60px;
    height: 60px;
    background: rgba(16, 185, 129, 0.1);
    /* خلفية شفافة بلون البريماري */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon-container i {
    font-size: 32px;
    color: var(--primary);
    /* لون الأيقونة */
    transition: transform 0.3s ease;
}

/* حركة بسيطة للأيقونة عند اللمس */
.upload-trigger-label:hover .upload-icon-container i {
    transform: scale(1.1) rotate(-5deg);
}

/* 4. النصوص داخل منطقة الرفع */
.upload-text-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.upload-main-text {
    font-size: 16px;
    font-weight: 600;
    color: #e5e7eb;
    /* لون نص فاتح */
}

.upload-sub-text {
    font-size: 13px;
    color: #9ca3af;
    /* لون نص رمادي */
}

/* 5. رسالة الحالة (جاري الرفع...) */
.upload-status-msg {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
    min-height: 20px;
    /* لحجز مكان حتى لو فارغة */
}

/* 6. تنسيق معاينة الصورة الفخم */
.stylish-preview {
    display: none;
    /* مخفية افتراضياً */
    width: 100%;
    max-height: 250px;
    /* أقصى ارتفاع عشان متغطيش على باقي المودال */
    object-fit: contain;
    /* الحفاظ على أبعاد الصورة */
    border-radius: 12px;
    margin-top: 20px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    /* إطار حول الصورة */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    /* ظل قوي للصورة */
    background: #000;
    /* خلفية سوداء في حالة الصور الشفافة */
}

/* تحسين في حالة وجود صورة: إخفاء عناصر الرفع القديمة لعدم الازدحام */
/* هذا السطر ذكي: إذا ظهرت الصورة، قم بإخفاء الليبل */
#img-preview[src*="http"]~.upload-trigger-label,
#img-preview[src*="data"]~.upload-trigger-label {
    /* يمكن تفعيل هذا لو أردت إخفاء زر الرفع بعد اختيار الصورة */
    /* display: none; */
}

/* بدلاً من الإخفاء، نصغر حجم الليبل ليبقى موجوداً لو أراد تغيير الصورة */
#img-preview:not([src=""])+.upload-trigger-label .upload-icon-container {
    width: 40px;
    height: 40px;
}

#img-preview:not([src=""])+.upload-trigger-label .upload-icon-container i {
    font-size: 20px;
}

/* ==================== Pro Activity Log V3.0 ==================== */

/* حاوية السجل */
#activity-log {
    padding-bottom: 20px;
}

/* رأس الشهر (Sticky Header) */
.log-month-header {
    font-size: 12px;
    font-weight: bold;
    color: var(--primary);
    background: var(--bg-dark);
    /* ليغطي المحتوى عند التمرير */
    padding: 10px 5px;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* كارت النشاط الواحد */
.log-row-compact {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    /* أيقونة - تفاصيل - أزرار */
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
    transition: transform 0.2s, background 0.2s;
}

.log-row-compact:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.05);
}

/* عمود الأيقونة */
.log-icon-wrapper {
    width: 40px;
    height: 40px;
    background: rgba(16, 185, 129, 0.1);
    /* خلفية خضراء شفافة */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
}

.log-icon-wrapper.walk {
    background: rgba(59, 130, 246, 0.1);
    /* أزرق للمشي */
    color: var(--accent);
}

/* عمود التفاصيل (الوسط) */
.log-details {
    display: flex;
    flex-direction: column;
    padding-right: 12px;
    /* مسافة بين الأيقونة والنص */
}

.log-main-stat {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.log-unit {
    font-size: 10px;
    font-weight: normal;
    color: var(--text-muted);
}

.log-sub-stat {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    gap: 10px;
}

/* عمود الإجراءات (اليسار) */
.log-actions {
    display: flex;
    gap: 5px;
}

.btn-icon-action {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
}

.btn-icon-action:hover {
    background: var(--bg-card);
    color: #fff;
}

.btn-icon-action.delete {
    color: #ef4444;
}

.btn-icon-action.share {
    color: var(--accent);
}

/* شارة الأرقام القياسية */
.badge-record-mini {
    position: absolute;
    top: -8px;
    left: 10px;
    background: linear-gradient(45deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3);
}

/* ==================== V4.0 Admin UI Updates ==================== */

.input-lbl {
    font-size: 11px;
    color: var(--primary);
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.advanced-rules-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    margin: 10px 0;
}

.rules-title {
    font-size: 11px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
}

.rules-title:hover {
    color: #fff;
}

.full-select {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    margin-bottom: 5px;
}

/* ==================== V5.0 Elite Challenges UI (أضف هذا في النهاية) ==================== */

.ch-card {
    position: relative;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: #1f2937;
    /* لون افتراضي */
}

/* زر الحذف للأدمن */
.admin-del-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239, 68, 68, 0.5);
    cursor: pointer;
}

/* 1. تصميم السرعة (أحمر ناري) */
.ch-card.speed-mode {
    background: linear-gradient(135deg, #450a0a, #1a0505);
    border-color: #ef4444;
    text-align: center;
}

.ch-card.speed-mode .ch-icon {
    font-size: 28px;
    color: #ef4444;
    margin-bottom: 10px;
}

.speed-gauge {
    margin: 10px 0;
    font-family: monospace;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
}

.speed-status {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
}

.ch-card.speed-mode.done {
    background: linear-gradient(135deg, #064e3b, #022c22);
    border-color: #10b981;
}

.ch-card.speed-mode.done .speed-gauge {
    color: #10b981;
}

/* 2. تصميم الالتزام (بنفسجي خلايا) */
.ch-card.habit-mode {
    background: linear-gradient(135deg, #312e81, #1e1b4b);
    border-color: #6366f1;
}

.habit-grid {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 15px;
    justify-content: center;
}

.habit-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.habit-dot.filled {
    background: #a855f7;
    border-color: #a855f7;
    box-shadow: 0 0 5px #a855f7;
    transform: scale(1.1);
}

.habit-counter {
    font-size: 14px;
    color: #e0e7ff;
    margin-top: 10px;
    display: block;
    text-align: center;
}

/* 3. تصميم المسافة (أزرق طريق) */
.ch-card.dist-mode {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

.dist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.dist-val-big {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.road-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
}

.road-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 4px;
    box-shadow: 0 0 10px #3b82f6;
}

.ch-join-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ==================== Skeleton UI Polish ==================== */

/* تحسين حركة اللمعان لتكون أنعم */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.skeleton::after {
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.15) 60%,
            rgba(255, 255, 255, 0));
    animation: shimmer 1.5s infinite;
    /* أسرع قليلاً */
}

/* تنسيق خاص لهيكل التحديات ليكون بنفس أبعاد الكروت الحقيقية */
.ch-card .skeleton {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ==================== V6.0 Streak Fire (سلسلة الحماس) ==================== */

.streak-badge {
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
    animation: flamePulse 2s infinite;
}

.streak-badge i {
    font-size: 14px;
}

@keyframes flamePulse {
    0% {
        box-shadow: 0 0 5px rgba(249, 115, 22, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.7);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 5px rgba(249, 115, 22, 0.4);
        transform: scale(1);
    }
}

/* ==================== V1.3 Updates ==================== */
.empty-state-mini {
    width: 100%;
    text-align: center;
    padding: 15px;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px dashed var(--border);
}



/* ==================== V1.4 Admin Overhaul ==================== */

/* 1. تبويبات الأدمن الفخمة */
.admin-tabs-wrapper {
    background: #111827;
    border: 1px solid var(--border);
    padding: 5px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    position: sticky;
    top: 70px;
    z-index: 99;
    /* تثبيت التبويبات عند التمرير */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.admin-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.admin-tab.active {
    background: var(--bg-card);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-content-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.admin-content-section.active {
    display: block;
}

/* 2. كروت الإحصائيات الجديدة */
.stats-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.stat-card-mini {
    background: linear-gradient(145deg, var(--bg-card), #111827);
    padding: 15px 10px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border);
}

.stat-val-big {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.stat-lbl-mini {
    font-size: 10px;
    color: var(--text-muted);
}

/* 3. كارت "المراقب" للجريات (Run Inspector) */
.inspector-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inspector-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.inspector-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.inspector-data {
    display: flex;
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 8px;
    align-items: center;
}

.insp-val {
    color: var(--primary);
    font-weight: 800;
    font-size: 14px;
}

.insp-actions {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.btn-insp {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: none;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
}

.btn-approve {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.btn-reject {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* 4. ستوديو التحديات */
.studio-header {
    background: linear-gradient(135deg, #1f2937, #111827);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--primary);
    margin-bottom: 20px;
    text-align: center;
}

.active-ch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 5px;
    border-left: 3px solid var(--primary);
}

/* ==================== V1.5 Live Dashboard ==================== */

/* تعديل الشبكة لتأخذ 4 أعمدة */
.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

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

/* تأثير النبض للمتواجدين */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
    animation: pulse-green 2s infinite;
    margin-left: 5px;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* تقسيم الشاشة لقسمين */
.live-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 480px) {
    .live-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* صناديق القوائم */
.admin-panel-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    height: 250px;
    display: flex;
    flex-direction: column;
}

.panel-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.panel-header h5 {
    margin: 0;
    font-size: 11px;
    color: #d1d5db;
    display: flex;
    align-items: center;
    gap: 5px;
}

.panel-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
}

/* عناصر القوائم المصغرة */
.mini-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
}

.mini-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.mini-info {
    flex: 1;
}

.mini-name {
    display: block;
    color: #fff;
    font-weight: bold;
}

.mini-sub {
    display: block;
    color: var(--text-muted);
    font-size: 9px;
}

.status-pill {
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.compact-alert {
    padding: 10px;
    background: rgba(239, 68, 68, 0.05);
}

.loader-placeholder {
    text-align: center;
    padding: 20px;
    color: #6b7280;
    font-size: 10px;
}

/* زر المتصدرون (في المنتصف + تنسيق ذهبي فخم) */
.ch-leaderboard-btn {
    position: absolute;
    top: 12px;
    /* مسافة من الحافة العلوية */
    left: 50%;
    /* وضع نقطة البداية في منتصف العرض */
    transform: translateX(-50%);
    /* سحب الزر لليسار بمقدار نصف حجمه ليتمركز بدقة */
    z-index: 20;
    /* لضمان ظهوره فوق أي عنصر آخر */

    background: rgba(0, 0, 0, 0.7);
    /* خلفية داكنة أكثر وضوحاً */
    border: 1px solid rgba(255, 215, 0, 0.3);
    /* حدود ذهبية خفيفة */
    color: #ffd700;
    /* لون النص ذهبي */

    padding: 4px 14px;
    border-radius: 20px;
    font-size: 10px;
    /* حجم خط مناسب */
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;

    display: flex;
    align-items: center;
    gap: 5px;

    cursor: pointer;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    /* ظل لإبراز الزر */
    transition: all 0.2s ease;
    white-space: nowrap;
    /* منع النص من النزول لسطرين */
}

.ch-leaderboard-btn:active {
    transform: translateX(-50%) scale(0.95);
    /* تأثير ضغط لطيف مع الحفاظ على التمركز */
    background: rgba(255, 215, 0, 0.1);
}

.ch-leaderboard-btn i {
    font-size: 13px;
    color: #fbbf24;
    /* لون أيقونة الكأس */
}


/* 2. كلاس جديد لتوسيط هيدر التحدي */
.ch-header-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 30px;
    /* مسافة علوية عشان الزرار ميغطيوش */
    margin-bottom: 15px;
}

/* تعديل بسيط لعنوان التحدي عشان ييجي في النص */
.ch-header-centered h3 {
    width: 100%;
    text-align: center;
}

/* ==================== V6.2 Compact Filters (Mobile Friendly) ==================== */

.filter-scroll-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    /* تقليل المسافة بين الأزرار قليلاً */
    margin: 15px 0 20px 0;
    flex-wrap: wrap;
}

.filter-pill {
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);

    /* 🔥 التعديلات هنا: تصغير الحجم */
    padding: 8px 16px;
    /* كان 12px 20px */
    border-radius: 50px;
    font-size: 11px;
    /* كان 13px */
    font-weight: 500;
    /* كان 600 (عشان يبقى أرفع) */
    font-family: 'Tajawal', sans-serif;
    /* لضمان التناسق */

    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-pill.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
    font-weight: 700;
    /* التمييز بالسمك عند التفعيل فقط */
    transform: scale(1.02);
    /* تكبير بسيط جداً */
    box-shadow: 0 2px 10px var(--primary-glow);
}

.filter-pill:active {
    transform: scale(0.95);
}

/* ==================== V6.1 Funny Empty State ==================== */
.empty-state-fun {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    border: 2px dashed rgba(255, 255, 255, 0.05);
    margin-top: 10px;
    animation: fadeIn 0.5s ease;
}

.fun-icon {
    font-size: 80px;
    display: block;
    margin-bottom: 15px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    animation: floatGhost 3s ease-in-out infinite;
}

.fun-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.fun-desc {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.6;
}

@keyframes floatGhost {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* ==================== V6.5 Premium Meta Footer ==================== */

.ch-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* الكبسولة العامة */
.meta-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* 1. كبسولة المشاركين (يسار - هادئة) */
.meta-pill.social {
    background: rgba(59, 130, 246, 0.15);
    /* أزرق شفاف */
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.meta-pill.social i {
    font-size: 14px;
}

/* 2. كبسولة الوقت (يمين - تعتمد على الحالة) */
.meta-pill.time {
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 🔥 حالة الطوارئ (باقي وقت قليل) */
.meta-pill.time.urgent {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
    animation: pulse-border 2s infinite;
}

/* ✨ حالة النجاح/الانتهاء */
.meta-pill.time.done {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Animations */
@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        border-color: rgba(239, 68, 68, 0.4);
    }

    70% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
        border-color: rgba(239, 68, 68, 0.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* حركة بسيطة للأيقونة */
.meta-pill:hover i {
    transform: scale(1.2);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* تحسين كارت الكوتش ليتناسب مع الذكاء الجديد */
.coach-card {
    transition: transform 0.3s ease;
}

.coach-card:active {
    transform: scale(0.98);
}

.coach-label {
    font-size: 11px;
    color: #bfdbfe;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    /* زيادة السمك */
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* تحسين كارت الكوتش لعرض الجداول */
.coach-card {
    align-items: flex-start;
    /* المحاذاة للأعلى لأن النص قد يطول */
    padding: 18px;
    background: linear-gradient(135deg, #1e3a8a, #172554);
    /* أزرق داكن احترافي */
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.coach-icon {
    margin-top: 5px;
    /* ضبط مكان الأيقونة */
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.coach-content {
    width: 100%;
}

.coach-label {
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}


/* زر تعديل البروفايل المصغر */
.btn-edit-mini {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #9ca3af;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: auto;
    /* يدفعه لأقصى اليسار */
    transition: all 0.2s;
}

.btn-edit-mini:active {
    transform: scale(0.9);
    background: var(--primary);
    color: #000;
}

/* ==================== V10.0 Plan Wizard & Animation ==================== */

.wizard-icon {
    width: 60px;
    height: 60px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 15px auto;
    border: 2px solid var(--primary);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.selection-grid {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.sel-option {
    flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    color: #9ca3af;
}

.sel-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sel-option.selected {
    background: var(--primary);
    color: #000;
    font-weight: bold;
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    transform: scale(1.05);
}

/* Brain Loader Animation */
.brain-loader {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brain-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.progress-line-box {
    width: 80%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin: 15px auto;
    overflow: hidden;
}

.progress-line-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), #3b82f6);
    transition: width 0.3s ease;
}

.plan-preview-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: right;
}

.pp-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.pp-row:last-child {
    border: none;
    margin: 0;
    padding: 0;
}


/* 1. صورة الكوتش الجديدة (بدل الأيقونة) */
.coach-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    /* استبدل الرابط أدناه بصورتك أو اسم الملف 'coach.png' */
    background-image: url('https://img.freepik.com/free-psd/3d-illustration-person-with-sunglasses_23-2149436188.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid #f59e0b;
    /* إطار ذهبي */
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    display: block;
    /* إلغاء الـ flex القديم */
}

.coach-icon i {
    display: none;
}

/* إخفاء أيقونة الروبوت القديمة */

/* 2. زر الخطة الفخم */
.btn-plan-action {
    margin-top: 15px;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    /* تكبير الخط */
    font-weight: 800;
    /* خط عريض */
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-plan-action:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.2);
}

.btn-plan-action i {
    font-size: 18px;
    color: var(--primary);
}

/* 3. تنسيق جدول الخطة (Timeline) */
.plan-timeline {
    margin-top: 20px;
    position: relative;
    padding-right: 20px;
    border-right: 2px solid rgba(255, 255, 255, 0.1);
}

.plan-day-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
    transition: 0.3s;
}

.plan-day-card::before {
    content: '';
    position: absolute;
    right: -26px;
    top: 20px;
    width: 10px;
    height: 10px;
    background: #374151;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
}

.plan-day-card.today {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.05);
}

.plan-day-card.today::before {
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
}

.plan-day-card.done {
    opacity: 0.6;
    border-color: #10b981;
}

.plan-day-card.done::after {
    content: '✅';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
}

.plan-day-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.plan-day-title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.plan-day-desc {
    font-size: 12px;
    color: #d1d5db;
    line-height: 1.5;
}

/* ==================== زر تعديل البروفايل الجديد (V11.0) ==================== */

.btn-edit-profile-fancy {
    /* التنسيق الأساسي */
    background: rgba(255, 255, 255, 0.08);
    /* خلفية شفافة */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* حدود دقيقة */
    border-radius: 20px;
    /* شكل كبسولة */
    padding: 6px 14px;

    /* تنسيق النص والأيقونة */
    color: #e0e7ff;
    /* أبيض مائل للأزرق الفاتح */
    font-size: 10px;
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;

    display: flex;
    align-items: center;
    gap: 6px;

    cursor: pointer;
    margin-right: auto;
    /* يدفعه لأقصى اليسار */
    position: relative;
    overflow: hidden;
    /* عشان اللمعة متخرجش برا */
    transition: all 0.3s ease;
}

/* أيقونة التعديل */
.btn-edit-profile-fancy i {
    font-size: 14px;
    color: var(--accent);
    /* لون مميز للأيقونة */
}

/* تأثير عند الضغط */
.btn-edit-profile-fancy:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

/* ✨ أنيميشن اللمعة (Shimmer Effect) */
.btn-edit-profile-fancy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    /* يبدأ من خارج الزر */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: 0.5s;
    animation: shimmerBtn 3s infinite;
    /* تتكرر كل 3 ثواني */
}

@keyframes shimmerBtn {
    0% {
        left: -100%;
    }

    20% {
        left: 100%;
    }

    /* تتحرك بسرعة للنهاية */
    100% {
        left: 100%;
    }

    /* تنتظر باقي الوقت */
}

/* ==================== V12.0 Coach Feedback Pop-up ==================== */

.coach-feedback-avatar {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
}

.coach-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url('https://img.freepik.com/free-psd/3d-illustration-person-with-sunglasses_23-2149436188.jpg');
    /* نفس صورة الكوتش */
    background-size: cover;
    background-position: center;
    border: 3px solid var(--bg-card);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.coach-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 20px;
    background: var(--bg-card);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary);
}

.feedback-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.feedback-stats div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feedback-stats span {
    font-weight: 800;
    font-size: 16px;
    color: #fff;
}

.feedback-stats small {
    font-size: 10px;
    color: #9ca3af;
}


/* تنسيق الأيقونة الذهبية (للأرقام القياسية) */
.log-icon-wrapper.record {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    /* تدرج ذهبي */
    color: #fff;
    /* لون الكأس أبيض */
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    /* وهج ذهبي */
    border: 1px solid #fbbf24;
    animation: pulse-gold 2s infinite;
    /* نبض خفيف */
}

@keyframes pulse-gold {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* 1. الذهبي (المسافة الأطول) - موجود سابقاً */
.log-icon-wrapper.record-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: 1px solid #fbbf24;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    animation: pulse-gold 2s infinite;
}

/* 2. الأحمر الناري (الأسرع - Best Pace) */
.log-icon-wrapper.record-fire {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    border: 1px solid #fca5a5;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* 3. البنفسجي العميق (أطول وقت) */
.log-icon-wrapper.record-time {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    border: 1px solid #c4b5fd;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

/* تأثير النبض الذهبي */
@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
        transform: scale(1);
    }
}

/* ==================== إصلاح زحمة الهيدر في الموبايل hEADER جديد==================== */

@media (max-width: 480px) {

    /* 1. تقليل الهوامش الجانبية للشاشة */
    .glass-header {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-bottom: 10px;
        /* حل مشكلة الآيفون (Safe Area) */
        padding-top: env(safe-area-inset-top);
        height: calc(80px + env(safe-area-inset-top));

        position: sticky;
        top: 0;
        z-index: 5000;
    }
}

/* 2. تصغير اللوجو */
.brand-logo {
    height: 55px;
    /* كان 55px */
}

/* 3. تقليل الفراغ بين اللوجو والاسم */
.header-right {
    gap: 10px;
    /* كان 15px */
}

/* 4. تصغير خط الترحيب والاسم */
.hello-text {
    font-size: 11px;
}

.user-greeting-box h3 {
    font-size: 13px;
    /* كان 15px */
    max-width: 90px;
    /* لضمان عدم تمدد الاسم الطويل */
}

/* 5. ضغط حاوية الأزرار */
.header-actions {
    gap: 3px;
    /* تقليل المسافة بين الزراير */
    padding: 4px;
    /* تقليل الحشو الداخلي */
}

/* 6. تصغير الأزرار الدائرية */
.icon-badge {
    width: 32px;
    /* كان 38px */
    height: 32px;
}

.icon-badge i {
    font-size: 16px;
    /* تصغير الأيقونة داخل الزر */
}

/* 7. ضبط شارة الستريك (النار) */
.streak-badge {
    padding: 1px 6px;
    font-size: 10px;
}

.streak-badge i {
    font-size: 10px;
}
}

/* تصميم إشعار الإدارة الفخم (V4.0 - Midnight Neon) */
.notif-item.admin-alert {
    /* خلفية داكنة جداً مع تدرج أحمر خفيف */
    background: linear-gradient(135deg, #2b0808 0%, #1a0505 100%);
    background-size: cover;
    background-repeat: no-repeat;

    border: 1px solid rgba(239, 68, 68, 0.3);
    border-right: 4px solid #ef4444;
    /* العلامة المميزة */
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;

    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);

    display: flex;
    align-items: center;
    gap: 15px;
}

/* أيقونة الجرس/التنبيه */
.notif-item.admin-alert .notif-icon {
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
    animation: pulse-red 2s infinite;
    flex-shrink: 0;
}

/* النص */
.notif-item.admin-alert .notif-content {
    color: #ffe4e4;
    /* أبيض دافئ */
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* لمعة خفيفة تمر فوق الإشعار */
.notif-item.admin-alert::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 60, 60, 0.05), transparent);
    animation: shineAlert 4s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        transform: scale(1);
    }
}


/* Bug Floating Button */
.bug-fab {
    position: fixed;
    bottom: 90px;
    /* فوق الناف بار */
    left: 20px;
    width: 45px;
    height: 45px;
    background: rgba(239, 68, 68, 0.2);
    /* أحمر شفاف */
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 800;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.bug-fab:hover {
    background: #ef4444;
    color: #fff;
    transform: scale(1.1) rotate(15deg);
}

.bug-fab i {
    font-size: 22px;
}

/* ==================== تصميم مودال التحدي الثوري ==================== */
.rev-modal-header {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    padding: 20px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
}

/* دائرة التقدم الكبيرة */
.rev-progress-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    background: conic-gradient(var(--primary) var(--prog), rgba(255, 255, 255, 0.05) 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.15);
}

.rev-progress-circle::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: #111827;
    border-radius: 50%;
}

.rev-progress-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.rev-val {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
}

.rev-unit {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 5px;
    text-transform: uppercase;
}

/* قائمة المتصدرين الثورية */
.rev-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s;
}

/* تمييز المراكز الثلاثة الأولى */
.rev-item.rank-1 {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(0, 0, 0, 0));
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
}

.rev-item.rank-2 {
    border-left: 4px solid #9ca3af;
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.1), rgba(0, 0, 0, 0));
}

.rev-item.rank-3 {
    border-left: 4px solid #cd7f32;
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), rgba(0, 0, 0, 0));
}

/* الأيقونات والميداليات */
.rev-medal {
    font-size: 20px;
    width: 30px;
    text-align: center;
}

.rev-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
    margin: 0 12px;
    background-size: cover;
    background-position: center;
}

.rev-info {
    flex: 1;
}

.rev-name {
    font-size: 13px;
    font-weight: bold;
    color: #f3f4f6;
    display: block;
}

.rev-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-top: 6px;
    overflow: hidden;
}

.rev-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s;
}

.rev-stat {
    text-align: left;
}

.rev-stat-val {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    display: block;
}

.rev-stat-lbl {
    font-size: 10px;
    color: #6b7280;
}

/* زر إعادة ضبط الخطة */
.btn-plan-reset {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    /* لون باهت لعدم التشويش */
    font-size: 13px;
    margin-top: 10px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    font-family: 'Tajawal', sans-serif;
}

.btn-plan-reset:hover {
    color: #ef4444;
    /* يتحول للأحمر عند المرور عليه */
    text-decoration: underline;
}

/* كروت أيام الخطة */
.plan-day-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: 0.3s;
    opacity: 0.7;
    /* الأيام العادية باهتة قليلاً */
}

.plan-day-card.today {
    opacity: 1;
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.05);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.day-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #9ca3af;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.today-badge {
    background: var(--primary);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.day-content {
    display: flex;
    gap: 12px;
    align-items: center;
}

.d-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.d-info h4 {
    margin: 0;
    font-size: 14px;
    color: #fff;
}

.d-info p {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.4;
}

/* ألوان الحالات */
.plan-day-card.rest .d-icon {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
}

.plan-day-card.run .d-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.plan-day-card.long-run .d-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.plan-day-card.interval .d-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ==================== تحسين كارت الإنجاز (Done Day) ==================== */

/* الكارت نفسه عند الإنجاز */
.plan-day-card.done {
    opacity: 1 !important;
    /* إلغاء الشفافية القديمة */
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.4), rgba(16, 185, 129, 0.1));
    /* خلفية خضراء عميقة */
    border: 1px solid #10b981;
    /* حدود خضراء ساطعة */
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
    /* توهج حول الكارت */
    transform: scale(1.02);
    /* تكبير بسيط لبروزه */
    z-index: 2;
}

/* الأيقونة داخل كارت الإنجاز */
.plan-day-card.done .d-icon {
    background: #10b981;
    /* خلفية صلبة */
    color: #fff;
    /* أيقونة بيضاء */
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px #10b981;
    /* توهج للأيقونة */
    font-size: 20px;
}

/* العنوان داخل كارت الإنجاز */
.plan-day-card.done .d-info h4 {
    color: #34d399;
    /* لون نص أخضر فاتح */
    font-weight: 900;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* الوصف داخل كارت الإنجاز */
.plan-day-card.done .d-info p {
    color: #d1fae5;
    /* أبيض مائل للخضار */
    opacity: 0.9;
}

/* إضافة علامة "صح" عائمة في الخلفية كلمسة جمالية */
.plan-day-card.done::after {
    content: '✔';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #10b981;
    opacity: 0.1;
    pointer-events: none;
}

.gov-card {
    transition: transform 0.2s ease;
}

.gov-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08) !important;
}

.gov-rank {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}


/* ===================== Coach Zone + Club (V3.3) ===================== */
.coach-zone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.coach-action-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 12px;
    cursor: pointer;
}

.coach-action-card .c-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 10px;
}

.coach-action-card .c-text h4 {
    margin: 0;
    font-size: 13px;
    color: #fff;
}

.coach-action-card .c-text p {
    margin: 6px 0 0 0;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.5;
}

.coach-action-card .c-cta {
    position: absolute;
    left: 12px;
    top: 12px;
    font-size: 11px;
    color: var(--primary);
    font-weight: 700;
}

.plan-card {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 12px;
}

.plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.plan-head h4 {
    margin: 0;
    font-size: 13px;
    color: #fff;
}

.plan-actions {
    display: flex;
    gap: 8px;
}

.chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chip.danger {
    border-color: rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.plan-week {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.plan-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.20);
    border-radius: 14px;
    padding: 10px;
}

.plan-item .pi-day {
    font-size: 11px;
    color: #9ca3af;
    min-width: 64px;
}

.plan-item .pi-main {
    flex: 1;
}

.plan-item .pi-title {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
}

.plan-item .pi-sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    line-height: 1.5;
}

.catalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.catalog-card {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 12px;
    cursor: pointer;
}

.catalog-card .cat-emoji {
    font-size: 18px;
}

.catalog-card .cat-title {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.catalog-card .cat-sub {
    margin-top: 4px;
    font-size: 11px;
    color: #9ca3af;
}

/* Club */
.club-hero {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    padding: 14px;
}

.club-hero h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.club-hero p {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: #9ca3af;
}

.club-card {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    padding: 12px;
}

.club-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.club-card-head h4 {
    margin: 0;
    font-size: 13px;
    color: #fff;
}

.club-card-hint {
    font-size: 10px;
    color: #9ca3af;
}

.spotify-embed {
    border: none;
}

.hof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.hof-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.20);
    border-radius: 14px;
    padding: 10px;
}

.hof-rank {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
}

.hof-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.hof-main {
    flex: 1;
}

.hof-name {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.hof-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 3px;
}

.hof-dist {
    font-size: 12px;
    color: var(--primary);
    font-weight: 900;
}

.data-actions-row {
    margin: 12px 0;
}

/* ==================== Header shortcuts ==================== */
.header-name {
    cursor: pointer;
}

.header-name:hover {
    text-decoration: underline;
}

.header-name:active {
    opacity: 0.8;
}

/* ==================== Coach V2 (Decision) ==================== */
.coach-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.coach-mode-pill {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
    white-space: nowrap;
}

.coach-mode-pill.recovery {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.10);
    color: #6ee7b7;
}

.coach-mode-pill.discipline {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.10);
    color: #fcd34d;
}

.coach-mode-pill.push {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.10);
    color: #fecaca;
}

.coach-mode-pill.build {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.10);
    color: #ddd6fe;
}

.coach-command-title {
    font-weight: 900;
    font-size: 15px;
    color: #fff;
    margin: 8px 0 2px 0;
}

.coach-command-sub {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.6;
}

.coach-message {
    font-size: 13px;
    line-height: 1.7;
    color: #e5e7eb;
    margin-top: 10px;
}

/* ==================== Club actions / social ==================== */
.club-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.club-actions .btn {
    flex: 1;
    min-width: 150px;
}

/* =========================================
   تحديث شبكة التواصل (3 أزرار متجاورة)
   ========================================= */

.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 أعمدة متساوية */
    gap: 8px;
    /* مسافات بينية صغيرة */
    padding: 5px 0;
}

.social-card {
    display: flex;
    flex-direction: column;
    /* الأيقونة فوق والنص تحت */
    align-items: center;
    justify-content: center;
    text-align: center;

    background: rgba(255, 255, 255, 0.03);
    /* خلفية زجاجية */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 100px;
}

.social-card:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.08);
}

/* تنسيق الأيقونات داخل الكروت */
.soc-ico {
    font-size: 24px;
    margin-bottom: 8px;
    color: #fff;
    /* دائرة خلفية للأيقونة */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
}

/* النصوص */
.soc-title {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.soc-sub {
    font-size: 9px;
    color: #9ca3af;
    display: none;
    /* إخفاء الوصف الفرعي لتوفير المساحة */
}

/* ألوان خاصة لكل منصة */
/* فيسبوك */
.social-card.fb-card .soc-ico {
    color: #1877F2;
    background: rgba(24, 119, 242, 0.15);
}

.social-card.fb-card:hover {
    border-color: #1877F2;
}

/* واتس آب */
.social-card.wa-card .soc-ico {
    color: #25D366;
    background: rgba(37, 211, 102, 0.15);
}

.social-card.wa-card:hover {
    border-color: #25D366;
}

/* إخفاء سهم الانتقال لأنه لا يوجد مساحة */
.soc-go {
    display: none;
}

@media (max-width: 420px) {
    .social-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== Coach Daily & Weekly (V3.5) ==================== */

.mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.daily-workout-card,
.weekly-challenge-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.daily-workout-card:before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25), transparent 60%);
    filter: blur(0px);
    pointer-events: none;
}

.weekly-challenge-card:before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.20), transparent 60%);
    pointer-events: none;
}

.dw-head,
.wc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.dw-badge,
.wc-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dw-emoji,
.wc-emoji {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dw-title,
.wc-title {
    font-size: 14px;
    color: #fff;
    font-weight: 800;
    line-height: 1.2;
}

.dw-meta,
.wc-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.dw-notes,
.wc-notes {
    font-size: 12px;
    color: #e5e7eb;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 2;
}

.dw-actions,
.wc-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    position: relative;
    z-index: 2;
}

.dw-actions .btn,
.wc-actions .btn {
    flex: 1;
}

/* Admin Coach Week grid */
.coach-week-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coach-week-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.18);
}

.coach-week-row span {
    font-size: 12px;
    color: #e5e7eb;
    min-width: 70px;
}

#coach-workouts-list .workout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    margin-bottom: 8px;
}

#coach-workouts-list .wr-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#coach-workouts-list .wr-title {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

#coach-workouts-list .wr-sub {
    color: #9ca3af;
    font-size: 10px;
}

#coach-workouts-list .wr-actions {
    display: flex;
    gap: 6px;
}

#coach-workouts-list .wr-actions button {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 11px;
}



/* Coach Plan action highlight */
#coach-plan-action.plan-active {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.12);
}

#coach-plan-action.plan-active .c-icon {
    background: rgba(34, 197, 94, 0.15);
}

#coach-plan-action.plan-active .c-cta {
    color: #22c55e;
}


/* ===== Coach Zone vA (Cleaner) ===== */
.plan-hero-card {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: radial-gradient(120% 140% at 20% 10%, rgba(16, 185, 129, 0.18) 0%, rgba(17, 24, 39, 0.0) 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.plan-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.plan-hero-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-hero-big {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
}

.plan-hero-sub {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 4px;
}

.plan-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
}

.plan-hero-body {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-today-box {
    padding: 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.plan-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #93c5fd;
    margin-bottom: 8px;
}

.plan-today-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.plan-today-meta {
    font-size: 12px;
    color: #9ca3af;
}

.plan-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.plan-hero-actions .btn {
    flex: 1;
    min-width: 140px;
}

.mini-note {
    margin-top: 8px;
    font-size: 11px;
    color: #9ca3af;
}

.modal-close-x {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.coach-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.7;
    color: #e5e7eb;
    opacity: 0.95;
}

/* Admin Coach Folding */
.adm-fold {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.adm-sum {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 800;
    font-size: 12px;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.adm-fold[open] .adm-sum {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.adm-sum::-webkit-details-marker {
    display: none;
}

.adm-fold .admin-panel-box {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 12px 14px;
}



/* === Coach Brain v1: mini controls === */
.coach-mini-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.coach-mini-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.10);
}

/* === Weekly Awards (Club) === */
.weekly-awards-row {
    margin: 10px 0 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.award-badge {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 10px 10px;
    text-align: right;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .15s ease, background .15s ease;
}

.award-badge:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
}

.award-emoji {
    font-size: 18px;
}

.award-title {
    font-size: 12px;
    font-weight: 700;
}

.award-sub {
    font-size: 10px;
    color: #9ca3af;
}

/* === Speed radar modal content === */
.speed-stat {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 10px;
}

.speed-stat b {
    font-size: 12px;
}

.speed-stat span {
    font-size: 12px;
    color: #d1d5db;
    text-align: left;
}

.speed-card {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.speed-card h4 {
    margin: 0 0 6px;
    font-size: 13px;
}

.speed-card p {
    margin: 0;
    font-size: 12px;
    color: #d1d5db;
    line-height: 1.6;
}


/* === Coach Layout Enhancements (v3.7) === */
.coach-duo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}

@media (min-width: 860px) {
    .coach-duo-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

#plan-hero,
#team-workout-section {
    height: 100%;
}

#plan-hero .plan-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#team-workout-section .coach-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.coach-mode-pill.neutral {
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #e5e7eb;
}

.coach-mode-pill.good {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: #34d399;
}

.coach-mode-pill.warn {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: #fbbf24;
}

/* Weekly awards badges */
/* =========================================
   تصميم لوحة الشرف الأسبوعية (معدني فخم مع لمعة)
   ========================================= */

/* الحاوية الرئيسية: 3 أعمدة */
.weekly-awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    /* زيادة المسافة قليلاً */
    margin-bottom: 25px;
    padding: 5px;
}

/* تصميم البطاقة الأساسي - خلفية معدنية داكنة */
.weekly-award-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* تدرج لوني معدني هادئ */
    background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
    /* حدود خارجية ناعمة جداً */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* ظل داخلي خفيف يعطي عمقاً */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 18px 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* مهم جداً لتأثير اللمعة */
    transition: all 0.3s ease;
    min-height: 135px;
}

/* تأثير اللمعة المتحركة (Sheen Effect) */
.weekly-award-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    opacity: 0;
    transform: rotate(35deg);
    /* شريط أبيض شفاف مائل يمر فوق البطاقة */
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.15) 75%,
            rgba(255, 255, 255, 0) 100%);
    transition: opacity 0.5s ease, left 0.7s ease;
    /* حركة ناعمة */
    pointer-events: none;
    /* لضمان عدم تأثيره على النقرات */
}

/* تفعيل اللمعة عند التمرير */
.weekly-award-card:hover::after {
    opacity: 1;
    left: 120%;
    /* يتحرك الشريط من اليسار إلى أقصى اليمين */
}

/* تأثير الضغط */
.weekly-award-card:active {
    transform: scale(0.98);
    background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
    /* عكس التدرج عند الضغط */
}

/* الأيقونة - كبيرة ولكن بتوهج ناعم */
.wa-icon {
    font-size: 42px;
    /* تصغير طفيف للحجم */
    line-height: 1;
    margin-bottom: 10px;
    /* ظل ناعم جداً يرفع الأيقونة عن الخلفية */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.weekly-award-card:hover .wa-icon {
    transform: translateY(-3px);
    /* حركة بسيطة للأعلى عند التمرير */
}

/* حاوية النصوص */
.wa-content {
    margin-bottom: auto;
}

/* العناوين بألوان راقية (غير فجة) */
/* اللون الافتراضي ذهبي هادئ */
.wa-title {
    font-size: 11px;
    font-weight: 800;
    color: #d4af37;
    /* ذهبي معدني (ليس أصفر فاقع) */
    margin-bottom: 3px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* العنوان الفرعي */
.wa-sub {
    font-size: 9px;
    color: #aaa;
    /* رمادي فاتح */
    white-space: nowrap;
}

/* مكان اسم الفائز */
.wa-winner-name {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    /* خط فاصل خفيف */
    width: 85%;
    font-size: 10px;
    color: #e0e0e0;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* === تخصيص الألوان لكل بطاقة (ألوان هادئة) === */

/* الأطول نفساً (ذهبي/برونزي) */
.weekly-award-card.wa-distance:hover {
    border-color: #d4af37;
}

/* الأسرع عدواً (أزرق سماوي هادئ) */
.weekly-award-card.wa-speed .wa-title {
    color: #4dd0e1;
}

/* أزرق هادئ */
.weekly-award-card.wa-speed:hover {
    border-color: #4dd0e1;
}

.weekly-award-card.wa-speed .wa-winner-name {
    color: #b2ebf2;
}

/* الأكثر التزاماً (برتقالي محروق/نحاسي) */
.weekly-award-card.wa-consistency .wa-title {
    color: #ff8a65;
}

/* برتقالي نحاسي */
.weekly-award-card.wa-consistency:hover {
    border-color: #ff8a65;
}

.weekly-award-card.wa-consistency .wa-winner-name {
    color: #ffccbc;
}

/* Catalog modal cards */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 520px) {
    .catalog-grid {
        grid-template-columns: 1fr;
    }
}

.catalog-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 12px;
    text-align: right;
    color: var(--text);
    cursor: pointer;
    transition: 0.18s ease;
}

.catalog-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
}

.catalog-card-title {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.35;
}

.catalog-card-sub {
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
}

.catalog-body-text {
    color: var(--text);
    line-height: 1.7;
    white-space: normal;
}

/* Toggle rows in preferences */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.toggle-row:last-child {
    border-bottom: none;
}



/* ===================== V4 Coach Home (Compact Hero + Sticky Tabs) ===================== */
.coach-hero-v4 {
    background: rgba(17, 24, 39, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 14px 14px 10px;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
}

.coach-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.coach-hero-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.coach-avatar-v4 {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.coach-hero-text {
    min-width: 0;
}

.coach-greeting {
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-hero-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
    margin-top: 2px;
}

.coach-hero-actions {
    display: flex;
    gap: 8px;
}

.hero-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-icon-btn:active {
    transform: scale(0.98);
}

.coach-hero-stats {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.hero-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-stat span {
    font-weight: 900;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.2px;
}

.hero-stat small {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.70);
    margin-top: 2px;
}

.coach-tabs-nav {
    position: sticky;
    top: 8px;
    z-index: 50;
    display: flex;
    gap: 8px;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 6px;
    margin-bottom: 12px;
}

.coach-tab-btn {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    padding: 10px 8px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
}

.coach-tab-btn.active {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.coach-home-tab {
    display: none;
    animation: coachTabIn .18s ease-out;
}

.coach-home-tab.active {
    display: block;
}

@keyframes coachTabIn {
    from {
        transform: translateY(6px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.coach-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coach-speed-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-tools-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.tool-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(17, 24, 39, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 12px;
}

.tool-ico {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.tool-meta {
    flex: 1;
    min-width: 0;
}

.tool-title {
    font-weight: 900;
    font-size: 13px;
    color: #fff;
}

.tool-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-card i.ri-arrow-left-s-line,
.tool-card i.ri-external-link-line {
    color: rgba(255, 255, 255, 0.65);
    font-size: 18px;
}

.basic-lib-card,
.weekly-challenge-card {
    background: rgba(17, 24, 39, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
}

/* XT Badge */
.xt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fbbf24;
    margin-right: 6px;
}


/* =========================================
   تحسينات الواجهة (UI Polish V2)
   ========================================= */

/* 1. توحيد الخطوط في كل مكان (هام جداً) */
button,
input,
select,
textarea,
.tab-item,
.coach-tab-btn {
    font-family: 'Tajawal', sans-serif !important;
}

/* 2. تصميم تبويبات الكوتش (شكل الكبسولة العصرية) */
.coach-tabs-nav {
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 50px;
    /* شكل بيضاوي */
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.coach-tab-btn {
    flex: 1;
    border-radius: 40px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    background: transparent;
    border: none;
    transition: all 0.3s ease;
}

.coach-tab-btn.active {
    background: var(--primary);
    /* اللون الأخضر المميز */
    color: #000;
    /* نص أسود للتباين */
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* 3. كارت الخطة البطل (Plan Hero) - تضخيم وتجميل */
.plan-hero {
    background: linear-gradient(135deg, #1f2937, #111827);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 25px 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* الرقم الضخم (10K) */
.plan-hero-big {
    font-size: 56px !important;
    /* حجم ضخم */
    font-weight: 900 !important;
    line-height: 1;
    margin-bottom: 5px;
    /* تأثير النص المتدرج */
    background: linear-gradient(to right, #fff, #9ca3af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
}

/* الأزرار الجديدة (Action Buttons) */
/* =========================================
   أزرار زجاجية لامعة (Glossy Compact Buttons)
   ========================================= */
/* =========================================
   تحسينات الزجاج الواقعي وتنسيق الكارت الجديد
   ========================================= */

/* 1. الأزرار الزجاجية الواقعية (Real Frosted Glass) */
.plan-actions-grid {
    display: flex;
    flex-direction: row !important;
    gap: 10px;
    margin-top: 15px;
}

.btn-glossy {
    flex: 1;
    position: relative;
    padding: 10px 5px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    /* تقليل سماكة الخط قليلاً */
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;

    /* سر الزجاج الواقعي: خلفية شفافة جداً + تغبيش قوي */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px) saturate(110%);
    /* تغبيش مع تشبع لوني خفيف */
    -webkit-backdrop-filter: blur(12px) saturate(110%);

    /* حدود ناعمة جداً وغير لامعة */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* ظل ناعم للعمق بدلاً من اللمعان */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #e5e7eb;
    /* لون نص فاتح هادئ */
}

/* تأثير الضغط الهادئ */
.btn-glossy:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.01);
}

/* الزر الأساسي (لمسة خضراء زجاجية) */
.btn-glossy.primary {
    /* تدرج دائري خفيف جداً من الأعلى */
    background: radial-gradient(circle at top, rgba(16, 185, 129, 0.15) 0%, rgba(255, 255, 255, 0.03) 70%);
    border-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
    /* أخضر فاتح مضيء */
    /* توهج للنص فقط */
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.btn-glossy.primary:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}

/* 2. تنسيق الروابط في الأعلى (تعديل وإلغاء) */
/* الحاوية الجديدة في أعلى اليمين */
.plan-top-actions {
    display: flex;
    flex-direction: column;
    /* تحت بعض */
    align-items: flex-end;
    /* محاذاة لليسار (لأن الاتجاه RTL) */
    gap: 4px;
    margin-top: 8px;
}

.link-mini {
    font-size: 10px !important;
    /* تصغير الخط */
    color: #6b7280;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    /* مساحة للضغط */
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0.7;
    /* شفافية افتراضية */
}

.link-mini i {
    font-size: 11px;
}

.link-mini:hover {
    color: #fff;
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}

.link-mini.danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* روابط التحكم الصغيرة (تعديل / إلغاء) */
.plan-controls-mini {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.link-mini {
    font-size: 11px;
    color: #6b7280;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.link-mini:hover {
    color: #fff;
}

.link-mini.danger:hover {
    color: #ef4444;
}


/* 4. تمرين الفريق (Glassmorphism) - إطار شفاف */
.team-workout-card {
    background: rgba(255, 255, 255, 0.03) !important;
    /* خلفية شفافة جداً */
    backdrop-filter: blur(10px);
    /* تغبيش الخلفية */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* لمسة جمالية: خط ملون خفيف بجانب تمرين الفريق */
.team-workout-card::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
    /* لون مميز (بنفسجي مثلاً) */
    opacity: 0.8;
}




/* =========================================
   الفواصل الزجاجية للأقسام (Glass Panels)
   ========================================= */

.glass-panel {
    /* خلفية شفافة جداً */
    background: rgba(255, 255, 255, 0.02);

    /* الإطار الخفيف الشفاف الذي طلبته */
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* تدوير الحواف */
    border-radius: 20px;

    /* مسافات داخلية وخارجية */
    padding: 20px 15px;
    margin-bottom: 25px;
    /* المسافة الفاصلة بين كل قسم والآخر */

    /* تأثير خفيف */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* تحسين شكل العناوين داخل البانل */
.glass-panel h4 {
    margin-top: 0 !important;
    /* إلغاء الهوامش القديمة */
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    /* خط فاصل تحت العنوان */
}




/* --- Admin scroll & fold fixes (2026-01 refactor) --- */
#view-admin {
    overflow-y: auto;
}

.admin-content-section {
    overflow-y: auto;
    max-height: calc(100vh - 220px);
}

.admin-content-section details {
    overflow: visible;
}

.admin-content-section details[open] .panel-body {
    max-height: none;
    overflow: visible;
}


/* ==================== Coach Admin Sub-Tabs (New Design) ==================== */

/* حاوية أزرار التبويب الفرعية */
.coach-sub-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    /* للسماح بالتمرير في الشاشات الصغيرة */
    white-space: nowrap;
}

/* زر التبويب الفرعي */
.coach-sub-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* حالة التبويب النشط */
.coach-sub-btn.active {
    background: var(--primary);
    color: #000;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.coach-sub-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* محتوى الأقسام */
.coach-sub-section {
    display: none;
    /* مخفي افتراضياً */
    animation: fadeIn 0.3s ease;
}

.coach-sub-section.active {
    display: block;
    /* ظاهر عند التنشيط */
}

/* تحسين شكل الصناديق لتأخذ المساحة كاملة */
.coach-sub-section .admin-panel-box {
    height: auto;
    /* السماح للطول بالتمدد */
    min-height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(31, 41, 55, 0.4);
}


/* ==================== زر زجاجي متوهج (تحدي الأسبوع) ==================== */
.btn-glass-glow {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* تأثير الزجاج */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);

    /* التوهج */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.btn-glass-glow:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.btn-glass-glow i {
    font-size: 20px;
    color: var(--primary);
    /* اللون الأخضر */
    filter: drop-shadow(0 0 5px var(--primary));
}


/* ==================== V5.4 Ultimate Plan Card (Neon Blue) ==================== */

/* ==================== V5.5 Elegant Plan Card ==================== */

.plan-hero {
    /* خلفية داكنة جداً مع لمسة زرقاء خفيفة جداً */
    background: linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(30, 58, 138, 0.15) 100%);

    /* إطار ناعم جداً */
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;

    /* توهج خفيف جداً وهادئ */
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.05);
}

/* العلامة المائية الشفافة */
.plan-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* في المنتصف تماماً */
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2C14.2 2 16 3.8 16 6C16 8.2 14.2 10 12 10C9.8 10 8 8.2 8 6C8 3.8 9.8 2 12 2ZM12 12C15.5 12 21 13.5 21 16V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V16C3 13.5 8.5 12 12 12ZM12 14C9.5 14 6.8 14.9 5.6 16H18.4C17.2 14.9 14.5 14 12 14Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.04;
    /* شفافية عالية جداً عشان متزغللش العين */
    pointer-events: none;
    z-index: 0;
}

/* الصف العلوي: العنوان يمين والأزرار يسار */
.plan-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

/* حاوية الأزرار العلوية (تعديل وحذف) */
.plan-top-actions {
    display: flex;
    gap: 8px;
}

/* زر أيقونة دائري صغير وأنيق */
.btn-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-circle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-icon-circle.danger:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

/* زر التسجيل الكبير في الأسفل */
.btn-glass-record {
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.08)) !important;
    color: #eaf2ff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    position: relative;
    overflow: hidden;
}

.btn-glass-record::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 60%;
    height: 220%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.00));
    opacity: 0.9;
    animation: ersShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ersShine {
    0% {
        transform: translateX(-140%) rotate(18deg);
        opacity: 0.0;
    }

    25% {
        opacity: 0.65;
    }

    50% {
        transform: translateX(260%) rotate(18deg);
        opacity: 0.15;
    }

    100% {
        transform: translateX(260%) rotate(18deg);
        opacity: 0.0;
    }
}

.btn-glass-record:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.30), 0 14px 30px rgba(0, 0, 0, 0.30);
}

/* --- أضف هذا الكود في ملف style.css --- */

/* تنسيق الأزرار العلوية في كارت الخطة */
.btn-glass-rect {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e5e7eb;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.btn-glass-rect:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-glass-rect.danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.btn-glass-rect.danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}


/* ==================== ERS Blue Glass Theme (Plan / Schedule / Log) ==================== */
/* Base blue glass card */
.ers-blue-glass {
    background: radial-gradient(120% 140% at 18% 12%, rgba(59, 130, 246, 0.22) 0%, rgba(17, 24, 39, 0.00) 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
}

/* Plan hero card: move from green accent to blue accent */
.plan-hero-card {
    background: radial-gradient(120% 140% at 18% 12%, rgba(59, 130, 246, 0.22) 0%, rgba(17, 24, 39, 0.00) 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* Create plan card inside plan-hero (when no active plan) */
.plan-create-card {
    padding: 18px;
    border-radius: 18px;
    text-align: center;
    overflow: hidden;
}

.plan-create-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: #fff;
}

.plan-create-sub {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 14px 0;
}


/* Apply blue glass to specific modals without affecting all modals */
#modal-my-plan .modal-box,
#modal-log .modal-box {
    background: radial-gradient(140% 160% at 18% 12%, rgba(59, 130, 246, 0.20) 0%, rgba(17, 24, 39, 0.00) 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.40);
}


.btn-glass-record {
    margin-top: 14px;
    width: 100%;
    /* مش 100% */
    min-width: 72%;
    max-width: 92%;
    padding: 12px 18px;
    border-radius: 999px;
    /* Oval */
    cursor: pointer;
    display: inline-flex;
    /* مش flex */
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* توسيط الزر داخل كارت الخطة */
.plan-hero-card .btn-glass-record {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    /* داخل الكارت خليها flex عشان span يتوسّط */
}

/* تكبير الخط شوية */
.btn-glass-record span {
    font-size: 14px;
}

/* ==================== End ERS Blue Glass Theme ==================== */

/* ==================== Fix modal close X position (Top-Left) ==================== */
.modal-head {
    position: relative;
    padding-left: 48px;
    /* مساحة للزر يسار */
    padding-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* العنوان يتوسّط */
    gap: 10px;
    margin-bottom: 10px;
}

.modal-close {
    position: absolute;
    left: 10px;
    /* ✅ أقصى اليسار */
    top: 10px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.modal-close i {
    font-size: 18px;
}

/* ==================== End Fix ==================== */

/* ==================== Weekly challenge polish ==================== */
.weekly-challenge-card {
    border-radius: 20px;
    padding: 18px;
    background: radial-gradient(120% 140% at 18% 12%, rgba(59, 130, 246, 0.18) 0%, rgba(17, 24, 39, 0.00) 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* لو فيه صف أزرار */
.weekly-challenge-card .challenge-actions,
.weekly-challenge-card .actions,
.weekly-challenge-card .btn-row {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}

/* ستايل عام لأي زر جوّا كارت التحدي */
.weekly-challenge-card button,
.weekly-challenge-card .btn {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 12px 14px;
    border-radius: 16px;
    font-weight: 800;
    transition: transform 0.15s, box-shadow 0.15s;
}

/* زر أساسي مميز (نفترض غالبًا آخر زر هو الأساسي مثل "تفاصيل التحدي") */
.weekly-challenge-card .challenge-actions button:last-child,
.weekly-challenge-card .actions button:last-child,
.weekly-challenge-card .btn-row button:last-child {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(59, 130, 246, 0.12));
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.weekly-challenge-card button:hover,
.weekly-challenge-card .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30);
}

/* ==================== End Weekly challenge polish ==================== */


/* ==================== Coach Workout Hero Card ==================== */
.coach-workout-card {
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: radial-gradient(120% 140% at 18% 12%, rgba(59, 130, 246, 0.22) 0%, rgba(17, 24, 39, 0.00) 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transform: translateZ(0);
}

.coach-workout-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(600px 220px at 10% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.00) 60%);
    opacity: .9;
    pointer-events: none;
}

.coach-workout-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
}

/* Media (الصورة الكبيرة) */
.cw-media {
    position: relative;
    height: 140px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.45) 100%),
        radial-gradient(120% 140% at 18% 12%, rgba(59, 130, 246, 0.28) 0%, rgba(17, 24, 39, 0.00) 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    overflow: hidden;
}

/* لو فيه صورة، نركبها كطبقة */
.cw-media.has-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cw-img);
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    filter: saturate(1.1) contrast(1.05);
    opacity: 0.85;
}

/* لمعة زجاج خفيفة تمر */
.cw-media::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 60%;
    height: 220%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.00));
    animation: cwShine 3.6s ease-in-out infinite;
    opacity: .85;
    pointer-events: none;
}

@keyframes cwShine {
    0% {
        transform: translateX(-140%) rotate(18deg);
        opacity: 0.0;
    }

    25% {
        opacity: 0.55;
    }

    55% {
        transform: translateX(260%) rotate(18deg);
        opacity: 0.15;
    }

    100% {
        transform: translateX(260%) rotate(18deg);
        opacity: 0.0;
    }
}

/* محتوى الكارت */
.cw-body {
    padding: 14px 14px 16px;
}

.cw-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #dbeafe;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.10);
}

.cw-title {
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    line-height: 1.35;
}

.cw-sub {
    font-size: 12px;
    color: #d1d5db;
    line-height: 1.6;
}

/* Actions */
.cw-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.cw-actions .btn {
    flex: 1;
    border-radius: 16px;
    padding: 12px 14px;
    font-weight: 900;
}

/* زر "تكبير الصورة" فوق الميديا */
.cw-zoom {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 5;
}

.cw-zoom:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* ==================== End Coach Workout Hero Card ==================== */


/* Coach workout badge inside activity log */
.badge-coach-run {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    margin-inline-start: 10px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.10);
    color: #dbeafe;
}

.badge-coach-run i {
    font-size: 13px;
}


/* --- Log Modal Tabs (Glassy) --- */
.log-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- GPS Map Inside Modal --- */
.gps-overlay-stats {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    z-index: 999;
    /* فوق الخريطة */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gps-overlay-stats div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gps-overlay-stats span {
    font-size: 10px;
    color: #9ca3af;
}

.gps-overlay-stats strong {
    font-size: 18px;
    color: #fff;
    line-height: 1.2;
}

/* ==================== Improved Image Upload Box ==================== */

.upload-zone {
    position: relative;
    height: 140px;
    /* ارتفاع ثابت للمربع */
    width: 100%;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-top: 10px;
}

.upload-zone:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
}

/* محتوى المربع (الأيقونة والنص) */
.upload-placeholder {
    text-align: center;
    pointer-events: none;
    /* عشان الضغط يجي عالبوكس نفسه */
    transition: opacity 0.2s;
}

.upload-placeholder i {
    font-size: 32px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

.upload-placeholder span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* الصورة عند الرفع */
.upload-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: none;
    /* مخفية في البداية */
    z-index: 5;
}

/* حالة التحميل (Loading) */
.upload-loading {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    z-index: 10;
    display: none;
    backdrop-filter: blur(2px);
}

/* --- Compact Form Inputs --- */
.compact-input {
    height: 40px !important;
    /* ارتفاع ملموم */
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

/* --- Magic Upload Box --- */
.upload-magic-box {
    position: relative;
    height: 100px;
    /* نفس ارتفاع الحقول تقريباً */
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* تأثير الحركة (Breathing Glow) */
.upload-magic-box {
    animation: border-pulse 3s infinite;
}

@keyframes border-pulse {
    0% {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }

    50% {
        border-color: var(--accent);
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
    }

    100% {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
}

.magic-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 12px;
    z-index: 2;
}

.magic-icon {
    font-size: 16px;
    color: var(--accent);
}

/* عند التحويم */
.upload-magic-box:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.98);
}

/* معاينة الصورة داخل الزر */
.magic-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    opacity: 0.6;
    /* شفافة قليلاً ليرى المستخدم أنها قابلة للتغيير */
    z-index: 1;
}

/* ==================== Dark Glass Tabs (MATCH DESIGN) ==================== */
.glass-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin: 14px 0 18px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.glass-tab {
    flex: 1;
    padding: 12px 0;

    text-align: center;
    font-size: 13px;
    font-weight: 700;

    color: #cbd5e1;
    /* رمادي فاتح */
    background: transparent;

    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* hover بسيط */
.glass-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Active – نفس اللي في الصورة */
.glass-tab.active {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.4);
}

.glass-tabs {
    position: relative;
    z-index: 50;
}


/* ==================== THE FLOATING CRYSTAL NAV (Elegant Edition) ==================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    /* ارتفاع متوازن */

    /* خلفية midnight عميقة جداً بلمسة زجاجية مطفية */
    background: rgba(10, 15, 24, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    border-radius: 28px 28px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);

    /* ظل ناعم جداً للفصل */
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);

    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 12px 12px 12px;
    z-index: 2000;
}

/* --- العنصر العادي --- */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    /* لون خافت جداً وراقي */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    width: 50px;
    height: 50px;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.nav-item span {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.7;
}

/* --- 🔥 الكريستالة الناعمة (The Elegant Crystal) 🔥 --- */

.nav-item.active {
    /* أبيض ثلجي نصف شفاف يعطي ملمس الزجاج المطفى */
    background: rgba(255, 255, 255, 0.92);

    /* لون أيقونة داكن بلمسة سماوية خفيفة جداً */
    color: #0f172a;

    /* ارتفاع انسيابي غير مبالغ فيه */
    transform: translateY(-22px) scale(1.1);

    /* ظل ناعم وشفاف */
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 255, 255, 0.1);

    border-radius: 18px;
    /* شكل مربع بزويا منحنية بدلاً من الدائرة الكاملة لمظهر عصري */
    border: 1px solid rgba(255, 255, 255, 1);
}

.nav-item.active i {
    font-size: 24px;
    margin-bottom: 0;
}

.nav-item.active span {
    display: none;
}

/* --- الضوء السفلي الهادئ (Soft Glow) --- */
.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 5px;

    /* توهج أبيض خافت جداً "رايق" */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 80%);
    border-radius: 50%;
    filter: blur(3px);
    z-index: -1;
}

/* ضمان عدم تداخل المحتوى مع النافبار */
body {
    padding-bottom: 90px !important;
}

/* ✅ Safe visual re-order (keeps HTML order to avoid JS issues) */
.bottom-nav .nav-item {
    order: 0;
}

.bottom-nav .nav-item[onclick*="switchView('home')"] {
    order: 1;
}

.bottom-nav .nav-item[onclick*="switchView('club')"] {
    order: 2;
}

.bottom-nav .nav-item[onclick*="switchView('challenges')"] {
    order: 3;
}

.bottom-nav .nav-item[onclick*="switchView('profile')"] {
    order: 4;
}

/* ---------- Active (subtle glass capsule + soft glow) ---------- */
.nav-item.active {
    color: rgba(255, 255, 255, 0.92);
}

.nav-item.active i {
    color: var(--primary);
    opacity: 1;
}

/* glass capsule behind active */
.nav-item.active::after {
    content: "";
    position: absolute;
    inset: 7px 10px;
    /* capsule size */
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(16, 185, 129, 0.18);

    pointer-events: none;
    z-index: -1;
}

/* subtle shimmer passing over active capsule */
.nav-item.active::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -35%;
    width: 34%;
    border-radius: 16px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.00),
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.00));
    opacity: 0.55;
    transform: skewX(-18deg);
    animation: navShimmer 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes navShimmer {
    0% {
        left: -35%;
        opacity: 0.0;
    }

    18% {
        opacity: 0.45;
    }

    55% {
        left: 110%;
        opacity: 0.18;
    }

    100% {
        left: 110%;
        opacity: 0.0;
    }
}

.nav-item:active {
    transform: scale(0.97);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bottom-nav {
        background: rgba(17, 24, 39, 0.92);
    }
}

/* ==================== End Bottom Nav ==================== */


/* ==================== Coach Sticky Tabs – Glass (Premium Minimal) ==================== */
.coach-tabs-nav {
    position: sticky;
    /* يخليها تقف تحت الهيدر الزجاجي بدل ما تتخبي وراه */
    top: calc(78px + env(safe-area-inset-top));
    z-index: 120;

    display: flex;
    gap: 8px;

    padding: 6px;
    margin-bottom: 12px;

    border-radius: 18px;
    background: rgba(17, 24, 39, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    overflow: hidden;
}

/* subtle highlight line */
.coach-tabs-nav::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 7px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent);
    opacity: 0.70;
    pointer-events: none;
}

.coach-tab-btn {
    flex: 1;
    min-width: 0;
    position: relative;

    border: 1px solid transparent;
    background: transparent;

    color: rgba(229, 231, 235, 0.78);
    padding: 10px 10px;
    border-radius: 14px;

    font-size: 12px;
    font-weight: 600;
    /* ✅ أخف (مش بولد تقيل) */
    letter-spacing: 0.1px;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .16s ease;
}

.coach-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.coach-tab-btn:active {
    transform: scale(0.98);
}

/* Active: glass capsule + very subtle glow */
.coach-tab-btn.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.26),
        0 0 14px rgba(16, 185, 129, 0.12);
}

/* subtle shimmer over active tab */
.coach-tab-btn.active::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -35%;
    width: 32%;
    border-radius: 12px;

    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.00),
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.00));

    opacity: 0.55;
    transform: skewX(-18deg);
    animation: coachTabShimmer 3.8s ease-in-out infinite;
    pointer-events: none;
}

/* tiny accent line (matches app primary) */
.coach-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;

    background: linear-gradient(90deg,
            transparent,
            var(--primary),
            transparent);
    opacity: 0.55;
    pointer-events: none;
}

@keyframes coachTabShimmer {
    0% {
        left: -35%;
        opacity: 0.0;
    }

    18% {
        opacity: 0.45;
    }

    55% {
        left: 110%;
        opacity: 0.18;
    }

    100% {
        left: 110%;
        opacity: 0.0;
    }
}

.coach-tab-btn:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}

/* ==================== End Coach Tabs ==================== */

/* ==================== EMPIRE LEAGUE V9.0 (FINAL) ==================== */

/* --- حاوية البوديوم --- */
.podium-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 340px;
    /* زيادة الطول لاستيعاب الاسم */
    margin-top: 60px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.p-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 32%;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-column:hover {
    transform: translateY(-5px);
}

/* --- تصميم العمود --- */
.p-block {
    width: 100%;
    border-radius: 12px 12px 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 45px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
}

/* ألوان الأعمدة */
.p-1 .p-block {
    height: 170px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.95), rgba(180, 83, 9, 0.7));
    border-top: 4px solid #fcd34d;
}

.p-2 .p-block {
    height: 140px;
    background: linear-gradient(180deg, rgba(156, 163, 175, 0.95), rgba(75, 85, 99, 0.7));
    border-top: 4px solid #e5e7eb;
}

.p-3 .p-block {
    height: 110px;
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.95), rgba(124, 45, 18, 0.7));
    border-top: 4px solid #fdba74;
}

/* --- كارت البطل العائم (MVP) --- */
.mvp-floating-card {
    position: absolute;
    bottom: 100%;
    margin-bottom: -25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    width: 120%;
    /* مساحة أوسع للاسم */
}

.mvp-floating-card:hover {
    transform: scale(1.05);
    /* تكبير بسيط عند الضغط */
    cursor: pointer;
}

/* برواز الصورة */
.mvp-avatar-frame {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    background: #1f2937;
    position: relative;
    z-index: 22;
    overflow: hidden;
}

.p-1 .mvp-avatar-frame {
    width: 85px;
    height: 85px;
    border-color: #fcd34d;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.7);
}

/* التاج */
.mvp-crown {
    position: absolute;
    top: -32px;
    font-size: 32px;
    z-index: 25;
    animation: bounceCrown 2.5s infinite ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

@keyframes bounceCrown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* الاسم (التعديل الجديد: سطر منفصل وواضح) */
.mvp-name-block {
    margin-top: 8px;
    /* مسافة تحت الصورة */
    background: rgba(0, 0, 0, 0.75);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    max-width: 100%;
    z-index: 25;
}

.mvp-name-text {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mvp-label {
    display: block;
    font-size: 9px;
    color: var(--primary);
    margin-top: 2px;
}

/* --- بيانات المحافظة داخل العمود --- */
.gov-info-block {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 5;
}

.gov-name-large {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.gov-score-large {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}

.gov-sub-label {
    font-size: 9px;
    opacity: 0.8;
    font-weight: normal;
}

/* أيقونة خلفية باهتة */
.gov-bg-icon {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

/* --- أزرار التحكم --- */
.league-header {
    background: linear-gradient(180deg, rgba(31, 41, 55, 0.8), transparent);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
}

.filter-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.f-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.03);
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.f-btn.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* --- القائمة السفلية --- */
.gov-league-row {
    background: #1f2937;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}



/* ==================== Hero Modal Glass Effect ==================== */

/* الكارت الزجاجي للحاوية */
.hero-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(12px);
    /* تأثير الزجاج */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

/* لمعة خفيفة على الزجاج */
.hero-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* تصميم صف الجرية داخل الكارت */
.hero-log-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    /* خلفية داكنة لتباين النص */
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.2s;
}

.hero-log-row:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: translateX(-3px);
}

/* سكرول بار شيك للقائمة */
.hero-logs-scroll {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
    margin-top: 10px;
}

.hero-logs-scroll::-webkit-scrollbar {
    width: 4px;
}

.hero-logs-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}


/* --- Force Horizontal Layout (No Stacking) --- */

.social-grid {
    display: flex !important;
    /* استخدام Flexbox */
    flex-wrap: nowrap !important;
    /* يمنع العناصر من النزول لسطر جديد */
    gap: 8px;
    /* مسافة صغيرة بين الكروت */
    overflow-x: auto;
    /* لو الشاشة صغيرة جداً يسمح بالسكرول بدل ما الشكل يبوظ */
    width: 100%;
}

.social-card {
    flex: 1;
    /* توزيع المساحة بالتساوي على الكروت */
    min-width: 0;
    /* يسمح للكارت يصغر عشان يكفي الشاشة */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 5px;
    /* تقليل الحواشي الجانبية */
    white-space: nowrap;
    /* يمنع النص من الانقسام لسطرين */
}

/* تحسينات خاصة للموبايل فقط */
@media (max-width: 480px) {
    .soc-text {
        overflow: hidden;
        text-overflow: ellipsis;
        /* لو النص طويل اوي يحط نقط ... */
    }

    .soc-title {
        font-size: 11px !important;
        /* تصغير الخط قليلاً */
    }

    .soc-ico i {
        font-size: 18px !important;
        /* تصغير الايقونة قليلاً */
    }

    /* لو عندك كروت الموسيقى بتستخدم نفس الكلاس ده هيظبطها، لو كلاس مختلف ضيفه هنا */
}


/* ==================== GLASS UPDATE POPUP ==================== */

.glass-update-card {
    background: rgba(20, 20, 30, 0.85);
    /* لون داكن جداً */
    backdrop-filter: blur(20px);
    /* زجاج قوي */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 30px 25px;
    width: 85%;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
    animation: popUpBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* أيقونة الصاروخ */
.update-icon-glow {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), #059669);
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
    animation: rocketFloat 3s infinite ease-in-out;
}

@keyframes rocketFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.update-title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

.update-version {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 5px;
    font-family: monospace;
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
}

/* قائمة التغييرات */
.update-changelog {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 15px;
    margin: 20px 0;
    text-align: right;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.update-changelog ul {
    margin: 0;
    padding-right: 20px;
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.6;
}

/* زرار التحديث */
.btn-update-action {
    background: #fff;
    color: #000;
    width: 100%;
    padding: 15px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

.btn-update-action:active {
    transform: scale(0.95);
}

.btn-update-later {
    margin-top: 15px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    text-decoration: underline;
}

@keyframes popUpBounce {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ==================== زر الإغلاق (X) في المكان الصح ==================== */

/* تأكد إنك ضايف كلاس اسمه close-btn للعنصر اللي فيه علامة الاكس */
.close-btn {
    position: absolute;
    /* عشان يتحرر من النص ويتحرك براحته */
    top: 20px;
    /* مسافة من فوق */
    left: 20px;
    /* 🔥 هنا السر: يجبره يروح أقصى اليسار */
    right: auto;
    /* يلغي أي إعدادات قديمة لليمين */

    /* تجميل الزرار (دائري زجاجي) */
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    z-index: 100;
    /* عشان يبقى فوق أي محتوى */
}

/* تأثير عند اللمس/الماوس */
.close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    /* خلفية حمراء خفيفة */
    color: #ef4444;
    /* الاكس يحمر */
    transform: rotate(90deg);
    /* حركة دوران شيك */
    border-color: rgba(239, 68, 68, 0.3);
}

/* ==================== Profile Tabs & Interactions ==================== */

/* شريط التبويبات */
.profile-tabs-nav {
    display: flex;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    position: sticky;
    top: 75px;
    z-index: 90;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.p-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 500;
}

.p-tab.active {
    background: var(--bg-card);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    font-weight: bold;
}

.p-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.p-tab-content.active {
    display: block;
}

/* تنسيق التفاعلات المضغوط (سطر واحد) */
.inter-item.compact {
    transition: background 0.2s;
}

.inter-item.compact:active {
    background: rgba(255, 255, 255, 0.08) !important;
}


/* ==================== PREMIUM GLASS AUTH SCREEN (FINAL) ==================== */

/* الخلفية والطبقة المعتمة */
.glass-auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 20, 0.85);
    /* تعتيم قوي للتركيز */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

/* الكارت الزجاجي */
.glass-auth-card {
    width: 100%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 40px 30px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: authCardFloat 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* اللوجو والهالة */
.auth-logo-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.auth-logo-img {
    width: 220px;
    /* 🔥 الحجم الكبير */
    height: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
    /* هالة برتقالية */
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    /* 🔥 مهم: عشان الماوس يعدي منها */
    z-index: 0;
}

/* النصوص */
.auth-welcome-text h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 5px 0;
}

.text-gradient {
    background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-welcome-text p {
    color: #94a3b8;
    font-size: 13px;
    margin: 0 0 30px 0;
}

/* الحقول (إصلاح التفاعل) */
.auth-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 10;
    /* 🔥 رفعناها فوق الهالة */
}

.input-glass-wrapper {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.input-glass-wrapper:focus-within {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(245, 158, 11, 0.5);
}

.input-glass-wrapper i {
    position: absolute;
    right: 15px;
    color: #64748b;
    font-size: 18px;
}

.input-glass-wrapper input,
.input-glass-wrapper select {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 16px 45px 16px 15px;
    font-size: 14px;
    font-family: inherit;
}

.input-glass-wrapper select option {
    background: #1f2937;
    color: #fff;
}

/* الزر البرتقالي */
.btn-auth-glass {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    border: none;
    border-radius: 16px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 16px;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.3);
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-auth-glass:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(234, 88, 12, 0.5);
}

.btn-auth-glass:active {
    transform: scale(0.98);
}

.btn-auth-glass:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-text-glass {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    padding: 10px;
    margin-top: 10px;
}

.btn-text-glass:hover {
    color: #fff;
    text-decoration: underline;
}

.error-msg-glass {
    color: #ef4444;
    font-size: 12px;
    margin-top: 10px;
    min-height: 18px;
}

@keyframes authCardFloat {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==================== Weekly Schedule Styles ==================== */

/* الحاوية القابلة للسكرول الأفقي */
.schedule-scroll-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* نعومة السكرول في الآيفون */
}

/* إخفاء شريط التمرير المزعج */
.schedule-scroll-wrapper::-webkit-scrollbar {
    height: 4px;
}

.schedule-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* تصميم كارت اليوم الواحد */
.sch-card {
    min-width: 110px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* تأثير عند الضغط */
.sch-card:active {
    transform: scale(0.95);
}

/* تمييز "اليوم الحالي" */
.sch-card.today {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border: 1px solid var(--primary);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

/* نصوص الكارت */
.sch-day {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 5px;
}

.sch-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.sch-title {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 3px;
}

.sch-desc {
    font-size: 10px;
    color: #6b7280;
    line-height: 1.2;
}

/* شارة "اليوم" */
.today-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary);
    color: #000;
    font-size: 8px;
    padding: 2px 6px;
    border-bottom-left-radius: 8px;
    font-weight: bold;
}

.elite-workout-item {
    transition: transform 0.2s ease, background 0.2s ease;
}

.elite-workout-item:hover {
    transform: translateX(-5px);
    background: rgba(255, 255, 255, 0.08) !important;
}


/* ==================== Skimble Premium Card Design (Updated Logo) ==================== */

.skimble-premium-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
    margin: 15px 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.skimble-premium-card:hover {
    transform: translateY(-5px);
    border-color: #ff8a00;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 138, 0, 0.2);
}

/* محتوى النص (يمين) */
.skimble-content {
    flex: 1;
    text-align: right;
    padding-left: 15px;
    /* مسافة بسيطة من اللوجو */
}

.skimble-label {
    display: block;
    font-size: 10px;
    color: #ff8a00;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.skimble-title {
    margin: 0;
    font-size: 19px;
    /* تكبير العنوان قليلاً */
    font-weight: 900;
    color: #fff;
}

.skimble-subtitle {
    margin: 5px 0 0 0;
    font-size: 12px;
    color: #94a3b8;
}

/* 🔥 التعديل الجديد للوجو: بدون حاوية وبحجم كبير 🔥 */
.skimble-card-img {
    width: 100px;
    /* تكبير اللوجو */
    height: 75px;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    /* ظل للوجو عشان يبرز */
    transition: transform 0.3s ease;
    flex-shrink: 0;
    /* يمنع اللوجو من الانضغاط */
}

.skimble-premium-card:hover .skimble-card-img {
    transform: scale(1.1) rotate(-5deg);
    /* حركة تفاعلية للوجو عند التمرير */
}

/* استجابة الموبايل */
@media (max-width: 400px) {
    .skimble-title {
        font-size: 16px;
    }

    .skimble-card-img {
        width: 60px;
        height: 60px;
    }
}


/* حاوية التبويبات المحدثة */
.profile-tabs-nav {
    display: flex;
    background: rgba(15, 23, 42, 0.8);
    /* أغمق قليلاً لإبراز الأبيض */
    border-radius: 12px;
    padding: 4px;
    margin: 0 15px 20px 15px;
    position: sticky;
    top: 75px;
    z-index: 90;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* التبويب الفردي - Slim & Professional */
.p-tab {
    flex: 1;
    text-align: center;
    padding: 8px 5px;
    /* ارتفاع نحيف Slim كما طلبت */
    font-size: 12px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 9px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
    border: 1px solid transparent;
}

/* التبويب النشط - أبيض كريستالي مضغوط */
.p-tab.active {
    background: rgba(255, 255, 255, 1);
    /* لون أبيض صريح */
    color: #111827;
    /* نص داكن للتباين الوضح */
    font-weight: 800;
    border: 1px solid #ffffff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(255, 255, 255, 0.2);
    transform: scale(0.97);
    /* تأثير الزر المضغوط */
}

/* أيقونة التبويب النشط */
.p-tab.active i {
    color: #111827;
}

/* إخفاء وإظهار المحتوى (الإبقاء على منطقك الأصلي) */
.p-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.p-tab-content.active {
    display: block;
}


#btn-pwa-install {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#btn-pwa-install:active {
    transform: scale(0.96);
    background: #e5e7eb;
}


/* حل مشكلة ظهور النافبار خلف شاشة الدخول */

#auth-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    /* أعلى قيمة ممكنة لتغطية النافبار وكل شيء */
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* زر التثبيت بتصميم متناسق مع شاشة الدخول */
#pwa-install-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
    backdrop-filter: blur(5px);
}

#btn-pwa-install {
    background: #ffffff !important;
    color: #000000 !important;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 800;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


/* --- تحديث الأزرار للهوية الجديدة (Crystal & Midnight) --- */

/* الزر الرئيسي (Primary) - بديل الأخضر */
.btn-primary {
    background: rgba(255, 255, 255, 0.95) !important;
    /* أبيض ناصع */
    color: #0f172a !important;
    /* نص داكن جداً */
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.btn-primary:active {
    transform: scale(0.95);
    background: #e2e8f0 !important;
}

/* الزر الشفاف (Ghost) - تفاصيل ومشاركة */
.btn-ghost {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.btn-ghost:active {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(0.95);
}

/* حاوية الأزرار لضمان التنسيق */
.cw-actions,
.wc-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.cw-actions button,
.wc-actions button {
    flex: 1;
    /* جعل الأزرار متساوية العرض وSlim */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


/* تنسيق العناصر القابلة للطي */
.foldable-content {
    max-height: 500px;
    /* أقصى ارتفاع مسموح به */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    margin-top: 10px;
}

.foldable-content.folded {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.fold-icon {
    transition: transform 0.3s ease;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.4);
}

.fold-icon.rotated {
    transform: rotate(180deg);
}

/* تحسين شكل البانل عند الطي */
#latest-interactions-box {
    transition: all 0.3s ease;
}

/* ================================الحاوية الرئيسية للهيدر */
.main-app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 15, 24, 0.85);
    /* Midnight Deep */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    height: 80px;
    display: flex;
    align-items: center;
}

.header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* القسم الأيمن واللوجو */
.brand-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.app-logo-premium {
    height: 80x;
    /* اللوجو كبير وواضح كما طلبت */
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.user-info-stack {
    display: flex;
    flex-direction: column;
}

.welcome-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.user-display-name {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    cursor: pointer;
}

/* زر الإضافة الكريستالي النابض */
.crystal-add-btn {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: none;
    border-radius: 16px;
    color: #000;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pulsate {
    animation: crystalPulse 2s infinite;
}

@keyframes crystalPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

/* الأزرار الجانبية */
.actions-cluster {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-divider {
    width: 1px;
    height: 25px;
    background: rgba(255, 255, 255, 0.1);
}

.icon-group {
    display: flex;
    gap: 8px;
}

.ghost-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
    cursor: pointer;
    transition: 0.2s;
}

.ghost-action-btn:active {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(2px);
}

.notification-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 7px;
    height: 7px;
    background: #ff4d4d;
    border-radius: 50%;
    border: 2px solid #0a0f18;
}

/* استايل الستريك المصغر */
.mini-streak-chip {
    background: linear-gradient(45deg, #f59e0b, #ef4444);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
}

/* الهيدر الأساسي - أغمق وأفخم */
.glass-header {
    background: rgba(10, 15, 25, 0.98) !important;
    /* أسود ملكي عميق */
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 85px;
    padding: 0 15px;
    position: sticky;
    top: 0;
    z-index: 5000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* اللوجو - واضح وبدون وهج مبالغ */
.logo-container {
    background: rgba(255, 255, 255, 0.03);
    padding: 5px;
    border-radius: 12px;
    margin-left: 12px;
}

.brand-logo {
    height: 48px;
    /* حجم كبير وواضح */
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    display: block;
}

/* الترحيب واسم المستخدم */
.user-greeting-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hello-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.user-info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.header-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

/* مجموعة الأيقونات المصغرة */
.action-group-mini {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 15px;
    gap: 4px;
    margin-right: 10px;
}

.icon-badge-mini {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    border-radius: 10px;
    transition: 0.3s;
}

.icon-badge-mini:active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* 🔥 زر الزائد الكريستالي الأبيض النبّاض 🔥 */
.add-btn-crystal {
    width: 42px;
    height: 42px;
    background: #ffffff !important;
    color: #000 !important;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 14px;
    animation: crystal-pulse 2s infinite;
}

@keyframes crystal-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* ستريك الهيدر الصغير */
.header-streak {
    background: linear-gradient(to right, #f59e0b, #d97706);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
}


/* تصميم زر رادار السرعة المطور */
.coach-speed-btn {
    width: 44px;
    /* تكبير الحجم */
    height: 44px;
    /* تكبير الحجم */
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    z-index: 10;
}

/* إضافة تأثير النبض الكريستالي */
.coach-speed-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    animation: radar-pulse 2s infinite;
}

/* حركة النبض */
@keyframes radar-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* تأثير عند الضغط */
.coach-speed-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}

.coach-speed-btn i {
    font-size: 22px;
    /* تكبير حجم الأيقونة */
}

/* ==================== القالب الموحد للتبويبات الكريستالية ==================== */

/* الحاوية الأساسية (لـ coach-tabs-nav و tabs-nav) */
.coach-tabs-nav,
.tabs-nav {
    display: flex !important;
    background: rgba(15, 23, 42, 0.8) !important;
    /* خلفية داكنة عميقة لإبراز التباين */
    border-radius: 12px !important;
    padding: 4px !important;
    margin: 15px !important;
    position: sticky !important;
    top: 75px !important;
    z-index: 100 !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    gap: 5px !important;
}

/* الأزرار الفردية (Items) */
.coach-tab-btn,
.tab-item {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 5px !important;
    /* ارتفاع نحيف Slim لسهولة التصفح */
    font-size: 12px !important;
    color: #94a3b8 !important;
    /* رمادي هادئ للحالة غير النشطة */
    cursor: pointer !important;
    border-radius: 9px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    outline: none !important;
}

/* 🔥 التبويب النشط - الأبيض الكريستالي الموحد 🔥 */
.coach-tab-btn.active,
.tab-item.active {
    background: rgba(255, 255, 255, 1) !important;
    /* أبيض صريح ناصع */
    color: #111827 !important;
    /* نص أسود داكن جداً للوضوح التام */
    font-weight: 800 !important;
    border: 1px solid #ffffff !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(255, 255, 255, 0.25) !important;
    /* توهج كريستالي أبيض */
    transform: scale(0.97) !important;
    /* تأثير الزر المضغوط عند التنشيط */
}

/* ضمان وضوح الأيقونات داخل التبويب النشط */
.coach-tab-btn.active i,
.tab-item.active i {
    color: #111827 !important;
}

/* تحسينات الاستجابة للموبايل */
@media (max-width: 480px) {

    .coach-tab-btn,
    .tab-item {
        font-size: 13px !important;
    }
}



/* ==================== 💎 ERS CHALLENGE MASTERPIECE (V6) 💎 ==================== */

/* --- القاعدة العامة للكروت: زجاجية وعميقة --- */
.ch-card {
    position: relative;
    border-radius: 20px !important;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- 1. كارت المسافات (The Navigator) - أزرق المحيط العميق --- */
.ch-card.dist-mode {
    order: -1 !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e40af 100%) !important;
}

/* جرافيك طريق متلاشي (Perspective Road) */
.ch-card.dist-mode::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath fill='%233b82f6' fill-opacity='.1' d='M0 600l350-600h100l350 600H0zm425-50h-50v-100h50v100z'/%3E%3C/svg%3E");
    background-size: cover;
    opacity: 0.4;
}

/* عداء ماراثون يظهر كظل خلفي */
.ch-card.dist-mode::after {
    content: "🏁";
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 40px;
    opacity: 0.1;
}

/* --- 2. كارت السرعة (The Lightning) - أحمر الغضب والسرعة --- */
.ch-card.speed-mode {
    background: linear-gradient(160deg, #111827 0%, #7f1d1d 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* جرافيك خطوط الحركة (Action Lines) */
.ch-card.speed-mode::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(239, 68, 68, 0.05) 20px, rgba(239, 68, 68, 0.05) 21px);
}

/* --- 3. كارت العادة/التكرار (The Guardian) - أخضر الغابات والنمو --- */
.ch-card.habit-mode {
    background: linear-gradient(160deg, #064e3b 0%, #111827 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* جرافيك حلقات النمو (Growth Rings) */
.ch-card.habit-mode::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2310b981' stroke-opacity='0.05' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 60px;
}

/* ==================== 🏃‍♂️ ANIMATION & ELEMENTS 🏃‍♂️ ==================== */

/* تسميك شريط التقدم وجعله "مضمار" حقيقي */
.road-track {
    height: 14px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 35px 0 10px;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.road-fill {
    border-radius: 20px;
    position: relative;
    background: linear-gradient(90deg, var(--accent), #fff, var(--accent)) !important;
    background-size: 200% 100%;
    animation: shine 3s infinite linear;
}

/* شخص بيجري بوضوح فوق البار */
.road-fill::after {
    content: "🏃‍♂️";
    position: absolute;
    right: -10px;
    top: -35px;
    font-size: 28px;
    filter: drop-shadow(0 0 5px #fff);
    animation: running-man 0.8s infinite alternate ease-in-out;
}

@keyframes running-man {
    from {
        transform: translateX(0) scaleX(1);
    }

    to {
        transform: translateX(-5px) scaleX(1.1);
    }
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* كلاس مخصص لجعل الأرقام "تلمع" */
.dist-val-big {
    font-weight: 900 !important;
    font-size: 32px !important;
    letter-spacing: -1px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


/* ==================== 👑 ERS ANNUAL GOAL (THE CROWN) 👑 ==================== */

/* كارت الهدف السنوي - ذهبي ملكي */
.ch-card.annual-mode {
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%) !important;
    /* خلفية ليلية عميقة */
    border: 2px solid #fbbf24 !important;
    /* إطار ذهبي */
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.3) !important;
    position: relative;
    overflow: hidden;
}

/* إضافة أيقونة التاج في الخلفية */
.ch-card.annual-mode::after {
    content: "👑";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 80px;
    opacity: 0.1;
    transform: rotate(15deg);
}

/* شريط التقدم الذهبي */
.annual-mode .road-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
    box-shadow: 0 0 15px #fbbf24;
}

/* تمييز رقم المسافة السنوية */
.annual-mode .dist-val-big {
    color: #fbbf24 !important;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    font-size: 28px !important;
}

/* حركة العداء في التحدي السنوي (أسرع وأقوى) */
.annual-mode .road-fill::after {
    content: "🏃‍♂️";
    filter: drop-shadow(0 0 15px #fbbf24);
    font-size: 42px;
}

.goal-card.yearly {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.1);
}

.goal-ring.annual {
    border: 2px solid rgba(251, 191, 36, 0.2);


}

/* كارت الترحيب الاسطوري
/* الحاوية: تستخدم Grid لتقسيم الشاشة 4 أجزاء متساوية بالظبط */
.coach-hero-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 أعمدة متساوية */
    gap: 6px;
    /* مسافة صغيرة جداً بين الكروت */
    width: 100%;
    margin-top: 15px;
    padding: 0 2px;
    /* مسافة أمان صغيرة من الجوانب */
}

/* الكارت نفسه: نلغي أي عرض ثابت */
.hero-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 2px;
    /* تقليل الحشو الجانبي لأقصى حد */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    /* مهم جداً: يمنع الكارت يكبر غصب عنه */
    overflow: hidden;
    /* يقص أي زيادة */
}

/* الأيقونة */
.stat-mini-icon {
    font-size: 18px;
    margin-bottom: 5px;
}

/* الرقم */
.hero-stat-card span {
    font-size: 15px;
    /* تصغير الخط سنة بسيطة */
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.hero-stat-card span {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    margin: 4px 0;
}

.hero-stat-card small {
    font-size: 9px;
    color: #9ca3af;
    white-space: nowrap;
}

/* أيقونات صغيرة داخل المربعات */
.stat-mini-icon {
    font-size: 14px;
    margin-bottom: 2px;
}

.stat-mini-icon.blue {
    color: #3b82f6;
}

.stat-mini-icon.purple {
    color: #8b5cf6;
}

.stat-mini-icon.gold {
    color: #fbbf24;
}

.stat-mini-icon.orange {
    color: #f97316;
}

.gold-border {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* البار التحفيزي السفلي */
.coach-motivation-mini {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.motivation-text-line {
    font-size: 10px;
    color: #c4b5fd;
    text-align: center;
    margin-bottom: 6px;
    font-weight: bold;
}

.motivation-progress-bg {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.motivation-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #d8b4fe);
}

/* الحاوية الشبكية القسرية - عمودين متساويين دائماً */
.coach-dual-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* توزيع 50% لكل كارت */
    gap: 12px !important;
    margin: 15px 0 !important;
    align-items: stretch !important;
    /* فرض تساوي الارتفاع */
}

/* توحيد خصائص الكروت الأساسية */
.plan-hero,
.weekly-challenge-card {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* ملء كامل ارتفاع الـ Grid Row */
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

/* حاوية المحتوى الداخلي لكل كارت */
.dual-card-container {
    flex: 1;
    /* جعل المحتوى يأخذ المساحة المتاحة ويدفع الأزرار للأسفل */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* تنسيق العناوين والأيقونات */
.ch-badge-fixed {
    font-size: 9px;
    font-weight: 900;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: inline-block;
}

.ch-main-title {
    font-size: 13px !important;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 4px 0;
}

/* الوصف الصغير - تحديد سطرين بحد أقصى لمنع تمدد الكارت */
.ch-mini-desc {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin: 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* توحيد حجم ومكان الأزرار في الأسفل */
.ch-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: auto;
    /* دفع الأزرار للقاع دائماً */
}

.ch-btn-group button,
.plan-hero .btn {
    padding: 10px 2px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    white-space: nowrap;
}

/* تكبير البادج العلوي ليكون هو الهوية الأساسية */
.ch-badge-fixed-large {
    font-size: 11px;
    font-weight: 900;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: inline-block;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* سطر العنوان المدمج (أيقونة + نص) */
.wc-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.wc-icon-inline {
    font-size: 20px;
    flex-shrink: 0;
}

.ch-main-title-inline {
    font-size: 14px !important;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wc-status-line {
    font-size: 10px;
    color: #9ca3af;
    margin-bottom: 8px;
    font-weight: bold;
}

/* الوصف المحكم لضمان تناسق الارتفاع */
.ch-mini-desc-v2 {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.modal-box {
    max-height: 90vh;
    /* يسمح بالتمدد لحد 90% من طول الشاشة */
    overflow-y: auto;
    /* يظهر سكرول لو العناصر كتير */
}

/* تنسيق زر لوحة المشرفين لضمان الظهور والضغط */
#btn-admin-entry {
    display: none;
    /* القيمة الافتراضية هي الإخفاء */
    border: 1px solid var(--accent);
    padding: 15px;
    border-radius: 16px;
    margin-top: 15px;
}

#view-admin {
    position: relative;
    z-index: 1000;
    background: var(--bg-dark);
    min-height: 100vh;
}

#btn-admin-entry:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
    border-color: var(--accent);
}

#btn-admin-entry .setting-icon {
    font-size: 24px;
    color: var(--accent);
}

#btn-admin-entry .setting-text span {
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

/* --- تمييز كارت خطة التدريب (الجانب الأيمن) --- */
.plan-hero.dual-item {
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.4) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.1);
}

.plan-hero.dual-item .ch-badge-fixed-large {
    color: #60a5fa;
    /* أزرق فاتح للبادج */
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* --- تمييز كارت التحدي الأسبوعي (الجانب الأيسر) --- */
.weekly-challenge-card.dual-item {
    background: linear-gradient(145deg, rgba(6, 78, 59, 0.3) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: inset 0 0 15px rgba(16, 185, 129, 0.1);
}

.weekly-challenge-card.dual-item .ch-badge-fixed-large {
    color: #10b981;
    /* أخضر للبادج */
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

/* توحيد الأزرار لتبدو منسجمة مع كل كارت */
.plan-hero .btn-primary {
    background: #2563eb !important;
}

.weekly-challenge-card .btn-primary {
    background: #059669 !important;
}




.feed-card-premium {
    transition: all 0.3s ease;
}

.feed-card-premium:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary) !important;
}



/* ==================== 🛠️ FIX ANDROID OVERFLOW  حل سحري لمشكلة زيادة عرض الهيدر==================== */

/* 1. إجبار المتصفح على حساب العرض بدقة (بما فيه الـ Padding) */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* 2. منع السكرول الجانبي نهائياً في الصفحة */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* هذا السطر هو الحل السحري */
    margin: 0;
    padding: 0;
    position: relative;
}

/* 3. إصلاح الهيدر تحديداً */
/* استبدل .navbar باسم الكلاس الخاص بالهيدر عندك لو مختلف */
.navbar,
header,
.header-container {
    width: 100%;
    /* استخدم % بدلاً من vw */
    max-width: 100vw;
    /* ضمان عدم تجاوز الشاشة */
    padding-left: 15px;
    /* مسافات آمنة */
    padding-right: 15px;

    /* لو بتستخدم position fixed */
    left: 0;
    right: 0;
}




/* --- Strava Button Style --- */
.btn-strava {
    background: #FC4C02;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(252, 76, 2, 0.3);
}

.btn-strava:active {
    transform: scale(0.98);
}

.strava-logo {
    width: 24px;
    height: 24px;
    fill: white;
    /* لجعل الشعار أبيض */
}

/* --- Separator --- */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 20px 0;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.separator:not(:empty)::before {
    margin-right: .25em;
}

.separator:not(:empty)::after {
    margin-left: .25em;
}

/* --- Input Fields Styling --- */
.input-styled {
    width: 100%;
    padding: 14px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.input-styled:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* --- Image Upload Zone (The Star of the Show) --- */
.upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.upload-zone:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
}

.upload-zone.has-image {
    border-style: solid;
    border-color: var(--success);
    padding: 0;
    height: 150px;
    /* ارتفاع ثابت عند وجود صورة */
}

.upload-icon-wrapper {
    width: 50px;
    height: 50px;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: var(--accent);
    font-size: 24px;
}

.upload-text {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}

.upload-subtext {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* معاينة الصورة */
#preview-image-box {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    /* مخفي افتراضياً */
}

.remove-img-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    cursor: pointer;
    display: none;
    /* مخفي افتراضياً */
    align-items: center;
    justify-content: center;
    z-index: 10;
}



/* Strava سترافا ايقونات عند الجرياتIcon in Lists */
.icon-strava-brand {
    width: 20px;
    height: 20px;
    fill: #FC4C02;
    /* لون سترافا الرسمي */
}

/* تمييز الخلفية لأنشطة سترافا (اختياري - لمسة جمالية) */
.strava-bg-hint {
    background: linear-gradient(to right, rgba(252, 76, 2, 0.05), transparent) !important;
    border-right-color: #FC4C02 !important;
}


/* ==================== 🛠️ Feed Dropdown Menu زراير اخبار الفريق  ==================== */
.feed-dropdown {
    position: absolute;
    top: 35px;
    left: 10px;
    /* أو right حسب اتجاه اللغة */
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 5px;
    min-width: 150px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 100;
    animation: fadeIn 0.2s ease;
}

.feed-menu-item {
    padding: 10px 12px;
    font-size: 13px;
    color: #cbd5e1;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.feed-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.feed-menu-item.danger {
    color: #ef4444;
}

.feed-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ==================== 🛠️ Fix Click Issues ==================== */

/* تأمين كارت الخبر لضمان عمل الأزرار */
.feed-card,
.feed-card-premium {
    position: relative;
    z-index: 1;
    /* يضمن إن الكارت فوق الخلفية */
    transform: translateZ(0);
    /* تفعيل تسريع الهاردوير لمنع التعليق */
}

/* إصلاح أيقونات التفاعل (عشان تشتغل بسلاسة) */
.feed-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
    /* يضمن إن الزرار فوق أي عنصر تاني */
}

.feed-action-btn:active {
    transform: scale(0.95);
    /* تأثير بصري عند الضغط */
}

/* تنسيق بسيط لقائمة الإبلاغ */
.feed-dropdown {
    position: absolute;
    top: 40px;
    left: 10px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px;
    z-index: 100;
    /* لازم يكون عالي جداً عشان يظهر فوق الكل */
    display: none;
    /* مخفي افتراضياً */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.feed-dropdown.active {
    display: block;
    /* يظهر لما نضيف كلاس active */
}

/* ==================== 🛠️ HEADER FIXES (YOUR DESIGN) ==================== */

/* 1. إصلاح مشكلة الزوم في أندرويد (أساسي) */
html,
body {
    width: 100%;
    overflow-x: hidden;
    /* يمنع الصفحة إنها تعرض زيادة عن اللزوم */
}

body {
    padding-top: 100px;
    /* توسيع مسافة عشان الهيدر الثابت */
}

/* 2. الهيدر الزجاجي (تثبيت + نوتش + أندرويد) */
.glass-header {
    position: fixed;
    /* تثبيت الهيدر */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5000;
    /* طبقة عالية جداً فوق كل شيء */

    background: rgba(17, 24, 39, 0.90);
    /* خلفية زجاجية غامقة */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    /* ⚠️ التعامل مع النوتش (Notch Safe Area) */
    padding-top: env(safe-area-inset-top, 15px);
    padding-bottom: 10px;
}

/* الحاوية الداخلية (تضمن عدم خروج العناصر عن الشاشة) */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    /* مسافات جانبية آمنة */
    box-sizing: border-box;
    /* مهم جداً للأندرويد */
}

/* 3. الجزء اليمين (اللوجو + الاسم) */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    /* ✅ تقليل المسافة بين اللوجو والاسم (كانت كبيرة) */
}

/* 4. تكبير اللوجو */
.logo-container .brand-logo {
    height: 55px;
    /* ✅ تكبير اللوجو (كان صغير) */
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 5. تنسيق نصوص الترحيب */
.user-greeting-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.hello-text {
    font-size: 11px;
    color: var(--primary);
    /* اللون الأخضر */
    font-weight: bold;
    margin-bottom: 2px;
}

.user-info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.header-name {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

/* 6. بادج الستريك (النار) */
.header-streak {
    background: rgba(255, 165, 0, 0.15);
    color: #fb923c;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1px solid rgba(255, 165, 0, 0.3);
}

/* 7. الأزرار (إضافة + إشعارات) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* زر الإضافة الكريستالي */
.add-btn-crystal {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary) 0%, #059669 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    position: relative;
    cursor: pointer;
}

.pulse-ring {
    position: absolute;
    inset: -3px;
    border: 2px solid var(--primary);
    border-radius: 14px;
    opacity: 0;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

/* مجموعة الأزرار الصغيرة */
.action-group-mini {
    display: flex;
    gap: 8px;
}

.icon-badge-mini {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    position: relative;
}

.badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    display: none;
    /* يظهر بالجافاسكربت */
}





/* ==================== 💎 Run Detail Modal V2.0 ==================== */

/* صندوق المودال نفسه */
.detail-modal-box {
    background: #111827;
    border-radius: 20px;
    overflow: hidden;
    max-width: 450px;
    width: 95%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

/* منطقة الميديا (خريطة/صورة) */
.detail-media-area {
    width: 100%;
    height: 250px;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* التدرج اللوني فوق الصورة عشان الكلام يبان */
.media-overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, #111827 0%, transparent 100%);
    z-index: 2;
}

/* منطقة الأرقام */
.detail-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.detail-stat-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-label {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.stat-val {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

/* شريط الأزرار السفلي */
.detail-actions-bar {
    display: flex;
    gap: 10px;
    padding: 0 20px 20px 20px;
}

.action-btn {
    flex: 1;
    height: 45px;
    border-radius: 12px;
    border: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: 0.2s;
}

.btn-share {
    background: var(--primary);
    color: #fff;
}

.btn-edit {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}


/* ===================  إخفاء شريط التمرير للجدول الاسبوعي week */
.schedule-scroll-wrapper div::-webkit-scrollbar {
    display: none;
}

.schedule-scroll-wrapper div {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* ==================== 🏋️ ERS SMART TRAINER UI ==================== */

/* 1. شاشة المدرب (Full Focus Overlay) */
.smart-trainer-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    /* فوق كل حاجة */
    display: none;
    /* مخفي افتراضياً */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 2. الدائرة السحرية (Progress Circle) */
.timer-circle-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-svg {
    transform: rotate(-90deg);
    /* نبدأ من فوق */
    width: 100%;
    height: 100%;
}

.timer-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 10;
}

.timer-circle-progress {
    fill: none;
    stroke: var(--primary);
    /* اللون الأساسي */
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 754;
    /* محيط الدائرة (2 * pi * r) -> 2 * 3.14 * 120 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

/* 3. النصوص والأرقام */
.timer-text-overlay {
    position: absolute;
    text-align: center;
}

.timer-big-num {
    font-size: 80px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.timer-sub-text {
    font-size: 16px;
    color: #9ca3af;
    margin-top: 5px;
}

/* 4. معلومات التمرين */
.trainer-header {
    text-align: center;
    margin-bottom: 20px;
}

.current-exercise-name {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 5px;
}

.next-exercise-preview {
    font-size: 14px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 15px;
    border-radius: 20px;
}

/* 5. أزرار التحكم */
.trainer-controls {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.control-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.btn-pause {
    background: #f59e0b;
    color: #fff;
}

.btn-skip {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-quit {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    font-size: 18px;
}

.control-btn:active {
    transform: scale(0.9);
}



/* ==================== 🛠️ HEADER COMPACT FIX (No Gaps) ==================== */

/* 1. تثبيت الهيدر وضغط المسافات */
.glass-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5000;
    background: rgba(17, 24, 39, 0.98);
    /* خلفية غامقة عشان اللوجو يبان */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: env(safe-area-inset-top, 10px);
    /* نوتش الموبايل */
    padding-bottom: 5px;
    height: auto;
    display: flex;
    justify-content: center;
}

/* 2. الحاوية الداخلية (بدون فراغات جانبية كبيرة) */
.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* هنا السر: قللنا المسافة الجانبية جداً لـ 8 بيكسل بس */
    padding-right: 8px;
    padding-left: 8px;
    height: 60px;
    /* ارتفاع كافي للوجو */
}

/* 3. المنطقة اليمنى (اللوجو + الاسم) */
.header-right {
    display: flex;
    align-items: center;
    /* إلغاء الجاب الكبير بين اللوجو والاسم */
    gap: 6px;
}

/* 4. تحرير اللوجو (بدون هالات أو بوكس) */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent !important;
    /* شفاف تماماً */
    box-shadow: none !important;
    /* بدون ظل */
    border: none !important;
    /* بدون حدود */
}

.brand-logo {
    /* تكبير اللوجو لأقصى حد مسموح بيه في الارتفاع */
    height: 52px;
    width: auto;
    /* السماح للوجو ياخد راحته */
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
}

/* 5. نصوص الترحيب (تقريبها من اللوجو) */
.user-greeting-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    margin-right: 2px;
    /* مسافة شعرة بين اللوجو والكلام */
}

.hello-text {
    font-size: 11px;
    color: var(--primary);
    margin-bottom: 3px;
    opacity: 0.9;
}

.user-info-row {
    display: flex;
    align-items: center;
    gap: 4px;
    /* مسافة صغيرة بين الاسم والستريك */
}

.header-name {
    margin: 0;
    font-size: 15px;
    /* خط واضح */
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* 6. بادج الستريك (النار) */
.header-streak {
    background: linear-gradient(to right, #f59e0b, #d97706);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
}

/* 7. الأزرار اليسرى (تقليل الفراغات) */
.header-actions {
    display: flex;
    align-items: center;
    /* تقليل المسافة بين الأزرار */
    gap: 8px;
}

/* زر الإضافة الكريستالي */
.add-btn-crystal {
    width: 38px;
    /* تصغير طفيف */
    height: 38px;
    background: linear-gradient(135deg, var(--primary) 0%, #059669 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    position: relative;
    padding: 0;
    margin: 0;
}

/* الأزرار الصغيرة */
.action-group-mini {
    display: flex;
    gap: 6px;
    /* تلزيق الأزرار في بعض */
}

.icon-badge-mini {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    margin: 0;
    padding: 0;
}


/* Auto Pause Visual Indicator */
.blink-pause {
    animation: blinker 1.5s linear infinite;
    background-color: #f59e0b !important;
    /* Orange warning */
    border-color: #f59e0b !important;
}

@keyframes blinker {
    50% {
        opacity: 0.5;
    }
}


/* ==================== Podcast Episode List ==================== */
.episode-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.episode-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(30, 215, 96, 0.3);
    transform: translateX(-3px);
}

.episode-item.active {
    background: rgba(30, 215, 96, 0.1);
    border-color: rgba(30, 215, 96, 0.4);
}

.episode-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(30, 215, 96, 0.15);
    color: #1ed760;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.episode-item.active .episode-number {
    background: rgba(30, 215, 96, 0.25);
    color: #fff;
}

.episode-details {
    flex: 1;
    min-width: 0;
}

.episode-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.episode-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.episode-item i {
    font-size: 24px;
    color: rgba(30, 215, 96, 0.6);
    flex-shrink: 0;
}

.episode-item.active i {
    color: #1ed760;
}

/* ==================== AI Coach Card (Gemini Powered) ==================== */
.ai-coach-card {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* Integrated style - connects visually to main coach card */
.ai-coach-card.ai-coach-integrated {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.05));
    border-top: 1px dashed rgba(139, 92, 246, 0.3);
    border-left: 1px solid rgba(139, 92, 246, 0.15);
    border-right: 1px solid rgba(139, 92, 246, 0.15);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 0 0 16px 16px;
    margin-top: -1px;
    padding: 15px 20px;
}

.ai-coach-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.ai-coach-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #a78bfa;
    font-size: 14px;
}

.ai-pulse {
    width: 12px;
    height: 12px;
    background: #8b5cf6;
    border-radius: 50%;
    animation: ai-pulse 1.5s ease-in-out infinite;
}

@keyframes ai-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.5;
    }
}

.ai-coach-insight {
    position: relative;
    z-index: 1;
}

.ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-icon {
    font-size: 24px;
}

.ai-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: 0.5px;
}

.ai-refresh-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-refresh-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.ai-refresh-btn:active {
    transform: scale(0.9);
}

.ai-content {
    font-size: 14px;
    line-height: 1.7;
    color: #e5e7eb;
}

.ai-content p {
    margin: 0 0 10px 0;
}

.ai-content p:last-child {
    margin-bottom: 0;
}

.ai-content strong {
    color: #fff;
    font-weight: 700;
}

.ai-cache-note {
    margin-top: 12px;
    font-size: 10px;
    color: #6b7280;
    text-align: left;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.ai-coach-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 15px;
    color: #9ca3af;
    font-size: 13px;
}

.ai-coach-error .btn-sm {
    padding: 8px 16px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

/* ==================== LEAGUE 2.0 PREMIUM UI ==================== */

.league-hero-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    border-radius: 24px;
    padding: 25px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    text-align: center;
}

.league-hero-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 10%, transparent 10.5%);
    background-size: 20px 20px;
    opacity: 0.3;
    transform: rotate(30deg);
    z-index: 0;
}

.league-hero-content {
    position: relative;
    z-index: 1;
}

.league-season-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #fff;
    margin-bottom: 10px;
    backdrop-filter: blur(5px);
}

.user-league-status {
    background: rgba(16, 185, 129, 0.08);
    /* Green tint */
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.user-league-status::after {
    content: "";
    position: absolute;
    right: -20px;
    top: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    z-index: 0;
}

.gov-list-item {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    margin-bottom: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s, background 0.2s;
}

.gov-list-item:hover {
    background: rgba(30, 41, 59, 0.9);
    transform: translateX(-3px);
}

.gov-rank-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.league-empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    border: 2px dashed rgba(255, 255, 255, 0.05);
}

.league-empty-icon {
    font-size: 56px;
    margin-bottom: 15px;
    color: #3b82f6;
    display: inline-block;
    animation: float 3s infinite ease-in-out;
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ==================== PHASE 7: UI REFINEMENTS (MOBILE FIRST) ==================== */

/* --- Modern Season Selector --- */
.league-season-selector-wrapper {
    position: relative;
    margin-bottom: 20px;
    z-index: 50;
    /* Above everything */
}

.season-trigger-btn {
    width: 100%;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}

.season-trigger-btn:active {
    background: rgba(30, 41, 59, 0.8);
    transform: scale(0.98);
}

.season-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 8px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: none;
    /* Toggled by JS */
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.season-option-item {
    padding: 10px 12px;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s;
}

.season-option-item:hover,
.season-option-item.active {
    background: rgba(59, 130, 246, 0.15);
    color: #fff;
}

/* --- Floating Podium (Space Optimized) --- */
.podium-container-modern {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    /* Tighter gap */
    margin-top: -15px;
    /* Pull up to overlap slightly or reduce gap */
    margin-bottom: 25px;
    padding-top: 20px;
}

.podium-step-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.podium-step-modern:hover {
    transform: translateY(-5px);
}

.podium-rank-1 {
    order: 2;
    z-index: 10;
    margin-bottom: 15px;
}

/* Center, Higher */
.podium-rank-2 {
    order: 1;
    opacity: 0.9;
    transform: scale(0.9);
}

.podium-rank-3 {
    order: 3;
    opacity: 0.9;
    transform: scale(0.9);
}

.mvp-avatar-modern {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    background: #1e293b;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: -15px;
    /* Overlap pedestal */
    z-index: 2;
}

.podium-rank-1 .mvp-avatar-modern {
    width: 90px;
    height: 90px;
    border-color: #f59e0b;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}

.podium-pedestal {
    width: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(5px);
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: none;
}

.podium-rank-1 .podium-pedestal {
    height: 140px;
    background: linear-gradient(to bottom, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    border-color: rgba(245, 158, 11, 0.3);
}

.podium-rank-2 .podium-pedestal {
    height: 100px;
    background: linear-gradient(to bottom, rgba(203, 213, 225, 0.15), rgba(203, 213, 225, 0.05));
}

.podium-rank-3 .podium-pedestal {
    height: 80px;
    background: linear-gradient(to bottom, rgba(217, 119, 6, 0.15), rgba(217, 119, 6, 0.05));
}

/* --- Extended List (Top 4-7) --- */
.top-list-item {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px;
    margin-bottom: 4px;
    border-radius: 8px;
}

.top-list-item .rank-num {
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    width: 25px;
}