/* Utility classes to replace small inline styles */
.light-icon { display: none; }
.full-width { width: 100%; }

.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-28 { width: 28px; height: 28px; }
.icon-spin { animation: spin 1s linear infinite; }

.text-accent-green { color: #10b981; }
.text-accent-indigo { color: #6366f1; }
.text-accent-amber { color: #f59e0b; }

.footer-no-top { border-top: none; padding-top: 0; }

/* Mockup helpers for small elements */
.mockup-line.h-small { height: 6px; opacity: 0.5; }

.modal-relative { position: relative; }
.hidden { display: none !important; }

/* margin helpers */
.mt-40 { margin-top: 40px !important; }
.mb-20 { margin-bottom: 20px !important; }
.m-0 { margin: 0 !important; }

/* width helpers used for mockup lines */
.w-120 { width: 120px !important; }
.w-140 { width: 140px !important; }
.w-100 { width: 100px !important; }
.w-70 { width: 70px !important; }
.w-60 { width: 60px !important; }
.w-50 { width: 50px !important; }
.w-45 { width: 45px !important; }

/* small utilities */
.btn-size-32 { width: 32px; height: 32px; }
.btn-padding-sm { padding: 8px 14px; font-size: 0.8rem; }
.full-width { width: 100%; }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-gap-16-start { display:flex; gap:16px; align-items:flex-start; }
.full-size { width:100%; height:100%; }

.mt-4 { margin-top: 4px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-32 { margin-top: 32px !important; }
.mb-24 { margin-bottom: 24px !important; }
.text-center-muted { text-align: center !important; color: #94a3b8 !important; padding: 24px !important; }
.text-white { color: #fff !important; }
.accent-color { color: var(--accent-color, #6366f1) !important; }
.accent-bg { background: var(--accent-color, #6366f1) !important; }
.accent-border { border-color: var(--accent-color, #6366f1) !important; }
.accent-muted { color: rgba(255, 255, 255, 0.5) !important; }
.text-danger { color: #ef4444 !important; }
.no-transform { transform: none !important; }

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

.text-secondary { color: var(--text-secondary); }

.p-12 { padding: 12px; }
.w-38p { width: 38% !important; }
.w-15p { width: 15% !important; }
.w-20p { width: 20% !important; }

/* Color presets for editor */
.preset-1 { background: #2563EB; }
.preset-2 { background: #059669; }
.preset-3 { background: #7C3AED; }
.preset-4 { background: #EA580C; }
.preset-5 { background: #E11D48; }
.preset-6 { background: #0D9488; }
.preset-7 { background: #475569; }
.preset-8 { background: #D97706; }