:root { 
    --primary: #2563eb; --primary-dark: #1d4ed8; --bg: #f8fafc; --text: #1e293b; --border: #e2e8f0; 
}

#cpg-ui-container { 
    display: flex; background: var(--bg); font-family: 'Segoe UI', sans-serif; min-height: 600px; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; margin: 20px 0; width: 100%;
}

.cpg-sidebar { width: 220px; background: #fff; border-right: 1px solid var(--border); padding: 25px 0; flex-shrink: 0; display: flex; flex-direction: column; }
.cpg-nav-item { padding: 14px 24px; cursor: pointer; color: #64748b; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 12px; transition: all 0.2s ease; border-right: 4px solid transparent; }
.cpg-nav-item.active { color: var(--primary); background: #eff6ff; border-right-color: var(--primary); }
.cpg-nav-item i { width: 20px; }

.cpg-main { flex: 1; padding: 30px; display: flex; flex-direction: column; align-items: center; background: #fff; min-width: 0; overflow-y: auto; }
.cpg-section-title { font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; width: 100%; max-width: 500px; }

.cpg-template-scroll { display: flex; gap: 12px; overflow-x: auto; width: 100%; max-width: 500px; padding: 10px 0 20px 0; scrollbar-width: thin; }
.cpg-scroll-item { flex: 0 0 auto; width: 90px; height: 115px; border-radius: 10px; cursor: pointer; border: 3px solid transparent; overflow: hidden; transition: transform 0.2s; background: #f1f5f9; }
.cpg-scroll-item img { width: 100%; height: 100%; object-fit: cover; }
.cpg-scroll-item.selected { border-color: var(--primary); transform: scale(1.05); }

.cpg-pro-feature-box { width: 100%; max-width: 500px; margin-top: 20px; padding: 20px; background: #f0f7ff; border-radius: 14px; border: 1px solid #d0e8ff; }
.cpg-canvas-wrapper { margin-top: 25px; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.12); background: #fff; padding: 10px; border: 1px solid var(--border); }
#cpg-main-canvas { max-width: 100%; height: auto; border-radius: 8px; display: block; }

.cpg-right-panel { width: 280px; background: #fff; border-left: 1px solid var(--border); padding: 30px 20px; flex-shrink: 0; }
.cpg-branding-card { display: flex; align-items: center; gap: 15px; padding: 16px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--border); margin-bottom: 12px; cursor: pointer; transition: all 0.2s; }
.cpg-branding-card.active { border-color: var(--primary); background: #eff6ff; color: var(--primary); }
.cpg-icon-box { width: 40px; height: 40px; background: #e2e8f0; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold; color: #64748b; }

.cpg-input-nice { width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 10px; margin-bottom: 15px; font-size: 15px; transition: border-color 0.2s; box-sizing: border-box; }
.cpg-action-btn-main { width: 100%; padding: 15px; background: var(--primary); color: #fff !important; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; margin-top: 10px; text-align: center; }

.cpg-profile-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 25px; width: 100%; max-width: 500px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.03); }
.cpg-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(5px); z-index: 10000; justify-content: center; align-items: center; }
.cpg-modal-content { background: #fff; padding: 35px; border-radius: 20px; width: 90%; max-width: 400px; position: relative; box-shadow: 0 25px 50px rgba(0,0,0,0.2); }
.cpg-close-modal { position: absolute; right: 20px; top: 15px; font-size: 28px; cursor: pointer; color: #94a3b8; }
.cpg-link { color: var(--primary); cursor: pointer; text-decoration: underline; font-size: 14px; font-weight: 600; }

@media (max-width: 991px) {
    #cpg-ui-container { flex-direction: column; }
    .cpg-sidebar { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; }
    .cpg-nav-item { flex-direction: column; font-size: 11px; gap: 4px; border-right: none; border-bottom: 3px solid transparent; flex: 1; padding: 10px; }
    .cpg-nav-item.active { border-bottom-color: var(--primary); background: transparent; }
    .cpg-right-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}