/* تهيئة وتصفير الهوامش لملء الشاشة بالكامل */
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
}

.spg-premium-dashboard {
    display: flex; background-color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b; width: 100vw; height: 100vh; overflow: hidden; direction: ltr;
}

/* شريط القائمة الجانبي الأيسر */
.spg-sidebar-nav {
    width: 75px; background-color: #0f0e26; display: flex; flex-direction: column; align-items: center; padding: 20px 0; gap: 15px; flex-shrink: 0;
}
.spg-studio-logo {
    width: 45px; height: 45px; background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 15px;
}
.spg-nav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: #64748b; cursor: pointer; gap: 6px; padding: 12px 0; text-decoration: none; transition: all 0.2s;
}
.spg-nav-link i { font-size: 20px; }
.spg-nav-link span { font-size: 10px; font-weight: 500; }
.spg-nav-link.active { color: #fff; background-color: #1e1b4b; border-left: 4px solid #6366f1; }

/* لوحة التحكم اليسرى الجانبية */
.spg-control-panel {
    width: 350px; background-color: #ffffff; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; padding: 20px; overflow-y: auto; flex-shrink: 0; box-sizing: border-box;
}
.control-panel-header {
    display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 2px solid #f1f5f9; margin-bottom: 15px;
}
.panel-main-title { font-size: 16px; font-weight: 800; color: #0f172a; }
.spg-reset-btn {
    background: #ef4444; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.spg-reset-btn:hover { background: #dc2626; }

.panel-section-group { border-bottom: 1px solid #f1f5f9; padding-bottom: 16px; margin-bottom: 16px; }
.panel-section-title {
    font-size: 12px; font-weight: 700; color: #0f172a; margin: 0 0 14px 0; display: flex; align-items: center; gap: 8px; text-transform: uppercase;
}
.panel-section-title .step-num {
    background: #6366f1; color: white; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}

/* شبكة معرض رفع الـ 4 منتجات المدمجة */
.upload-gallery-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px;
}
.gallery-slot {
    border: 2px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; height: 70px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: all 0.2s; text-align: center;
}
.gallery-slot:hover { border-color: #6366f1; background: #f5f3ff; }
.gallery-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-slot span { font-size: 10px; font-weight: 700; color: #94a3b8; }

/* عناصر الإدخال المتقدمة */
.control-input-block { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.control-input-block label { font-size: 11px; font-weight: 600; color: #64748b; }
.control-input-block input[type="text"], .control-input-block select {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 500; box-sizing: border-box;
}
.spg-color-box { width: 100%; height: 34px; border-radius: 6px; cursor: pointer; border: 1px solid #cbd5e1; }

/* حاوية التحكم المتقدم بالأشكال وطبقاتها */
.shape-advanced-control-box {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; margin-bottom: 12px;
}
.shape-box-title { font-size: 11px; font-weight: 700; color: #334155; display: block; margin-bottom: 6px; }
.mar-b-5 { margin-bottom: 6px !important; }
.color-inputs-inline { display: flex; gap: 8px; align-items: center; }
.inline-color-item { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.inline-color-item input[type="color"] { width: 100%; height: 30px; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0; background: none; cursor: pointer; }
.inline-color-item input[type="range"] { width: 100%; cursor: pointer; }
.layer-btns-row { display: flex; gap: 6px; margin-top: 6px; }
.layer-act-btn {
    flex: 1; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 5px; font-size: 10px; font-weight: 700; color: #475569; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: all 0.2s;
}
.layer-act-btn:hover { background: #f1f5f9; border-color: #94a3b8; }

/* 🌟 مساحة العمل الكبرى بالمنتصف (Enlarged Working Design) */
.spg-workspace-area {
    flex-grow: 1; padding: 30px; background-color: #0f172a; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; justify-content: space-between;
}
.workspace-tabs-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; flex-shrink: 0; justify-content: center; }
.tab-filter-btn {
    background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 12px 18px; font-size: 12px; font-weight: 600; color: #94a3b8; cursor: pointer; white-space: nowrap; text-align: left; transition: all 0.2s;
}
.tab-filter-btn.active { background: #6366f1; border-color: #818cf8; color: #ffffff; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4); }
.tab-filter-btn span { display: block; font-size: 10px; color: #cbd5e1; font-weight: 400; margin-top: 2px; opacity: 0.8; }

.posts-preview-matrix {
    display: flex; justify-content: center; align-items: center; flex-grow: 1; padding: 20px 0;
}
.preview-card-frame {
    background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: none; flex-direction: column; gap: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.preview-card-frame.active { display: flex; }
.preview-card-frame .card-title-meta { font-size: 14px; font-weight: 700; color: #f8fafc; border-bottom: 1px solid #334155; padding-bottom: 10px; display: flex; align-items: center; gap: 8px; }

/* زوم وتكبير الكانفاس بداخل مساحة العرض */
.canvas-holder-viewport {
    background: #111827; border-radius: 12px; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 15px; border: 1px solid #334155; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* أزرار التحميل والطباعة */
.bottom-sticky-actions { display: flex; gap: 15px; flex-shrink: 0; }
.studio-success-btn, .studio-print-btn {
    flex: 1; color: white; border: none; border-radius: 8px; padding: 15px 24px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s;
}
.studio-success-btn { background: #6366f1; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3); }
.studio-success-btn:hover { background: #4f46e5; }
.studio-print-btn { background: #334155; border: 1px solid #475569; }
.studio-print-btn:hover { background: #475569; }

/* عمود الأنماط الأيمن المساعد الـ 20 */
.spg-styles-sidebar {
    width: 260px; background-color: #ffffff; border-left: 1px solid #e2e8f0; padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex-shrink: 0; box-sizing: border-box;
}
.sidebar-section-title { font-size: 11px; font-weight: 700; color: #0f172a; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px; }
.preset-style-tile {
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; cursor: pointer; background: #fff; display: flex; flex-direction: column; gap: 4px; position: relative; transition: all 0.2s;
}
.preset-style-tile.active { border: 2px solid #6366f1; background: #f5f3ff; }
.preset-style-tile h4 { font-size: 12px; font-weight: 700; margin: 0; color: #1e293b; }
.preset-color-dots { display: flex; gap: 4px; }
.color-dot { width: 12px; height: 12px; border-radius: 3px; }
.style-active-badge { position: absolute; top: 10px; right: 10px; background: #6366f1; color: white; font-size: 8px; padding: 1px 4px; border-radius: 3px; }

/* 📱 هندسة الاستجابة للهواتف المحمولة */
@media (max-width: 1024px) {
    .spg-premium-dashboard { flex-direction: column; height: auto; overflow: visible; width: 100%; }
    .spg-sidebar-nav { width: 100%; height: auto; flex-direction: row; justify-content: space-around; padding: 10px 0; }
    .spg-control-panel { width: 100%; height: auto; border-right: none; }
    .spg-workspace-area { width: 100%; height: auto; padding: 15px; }
    .spg-styles-sidebar { width: 100%; height: 200px; border-left: none; border-top: 1px solid #e2e8f0; }
}

@media print {
    body * { visibility: hidden; }
    .preview-card-frame.active, .preview-card-frame.active * { visibility: visible; }
    .preview-card-frame.active { position: absolute; left: 0; top: 0; width: 100%; }
}