/* DesignPreview Pro - Frontend CSS */
.dpp-templates{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));}
.dpp-fonts{display:flex;flex-wrap:wrap;gap:7px;}
.dpp-fonts .dp-font-card{min-width:72px;}
.dpp-symbols{display:flex;flex-wrap:wrap;gap:6px;}
.dpp-zone{margin-bottom:10px;}
.dpp-zone:last-child{margin-bottom:0;}
.dp-label{display:block;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.dpp-colors{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.dpp-color-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;position:relative;}
.dpp-color-radio{position:absolute;opacity:0;width:0;height:0;}
.dpp-color-dot{display:block;width:30px;height:30px;border-radius:50%;border:3px solid transparent;transition:border-color .15s,transform .15s;}
.dpp-color-swatch.is-selected .dpp-color-dot{border-color:#fff;box-shadow:0 0 0 2px #1d6ce6;transform:scale(1.15);}
.dpp-color-label{font-size:10px;color:#718096;font-weight:500;text-align:center;}
.dpp-mode-toggle{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:20px;padding:3px;}
.dpp-mode-btn{padding:4px 10px;border:none;border-radius:16px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.5);font-family:inherit;transition:background .15s,color .15s;}
.dpp-mode-btn.is-active{background:rgba(255,255,255,.15);color:#fff;}
.dpp-mode-day.is-active{background:#fffbeb;color:#92400e;}
.dp-wrap.dpp-day-mode .dp-canvas-wrap{background:#f5f5f0;}
.dp-wrap.dpp-day-mode .dp-preview-step{background:#f8f9fa;}
.dp-wrap.dpp-day-mode .dp-preview-step .dp-step-label{color:#1a2744!important;}
.dp-wrap.dpp-day-mode .dp-num--glow{background:#1a2744;color:#fff;}
.dpp-preview-actions{display:flex;gap:8px;}
.dpp-preview-actions .dp-gen-btn{flex:1;}
.dpp-download-btn{padding:12px 16px;background:#1a2744;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s;}
.dpp-download-btn:hover{background:#0f1a30;}

/* ── Drag to reposition ────────────────────────────────────────── */
#dp-canvas { cursor: move; }

#dpp-nudge-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	background: #0a0a0a;
	border-radius: 0 0 8px 8px;
	margin-bottom: 8px;
}

#dpp-nudge-bar button {
	transition: background .1s, border-color .1s;
}

#dpp-nudge-bar button:hover {
	background: #2a2a2a !important;
}

#dpp-nudge-bar button:active {
	background: #333 !important;
	transform: scale(0.95);
}