#wpp-app-container {
  --wpp-primary: #3F51B5; --wpp-primary-hover: #303F9F; --wpp-secondary: #64B5F6;
  --wpp-secondary-hover: #42A5F5; --wpp-bg-light: #fff; --wpp-text-dark: #333; --wpp-border: #ddd;
  width: 100% !important; max-width: 1300px !important; margin: 2rem auto !important; 
  font-family: 'Poppins', sans-serif !important; color: var(--wpp-text-dark) !important;
  background: none !important; border: none !important; padding: 0 !important;
}
#wpp-app-container *, #wpp-app-container *::before, #wpp-app-container *::after { 
  box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; 
  font-family: inherit !important; background: transparent !important; 
}
#wpp-app-container .wpp-h1 { display: none !important; }
#wpp-app-container .wpp-layout-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; align-items: start !important; }
@media (min-width: 992px) { #wpp-app-container .wpp-layout-grid { grid-template-columns: repeat(3, 1fr) !important; } }
#wpp-app-container .wpp-preview-container { width: 100% !important; background: var(--wpp-bg-light) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; border: 1px solid var(--wpp-border) !important; position: sticky !important; top: 11rem !important; }
#wpp-app-container .wpp-controls-container { background: var(--wpp-bg-light) !important; padding: 1.5rem !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; display: flex !important; flex-wrap: wrap !important; gap: 1.5rem !important; border: 1px solid var(--wpp-border) !important; }
@media (min-width: 992px) { #wpp-app-container .wpp-controls-container { grid-column: span 2 / span 2 !important; } }
#wpp-app-container .wpp-controls-column { flex: 1 !important; min-width: 280px !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; }
#wpp-app-container .wpp-post-preview { 
  width: 100% !important; position: relative !important; background: #e0e0e0 !important; 
  transition: aspect-ratio 0.3s ease !important;
  aspect-ratio: 4/5; /* NO !important */
}
#wpp-app-container .wpp-dark-overlay { 
  position: absolute !important; top: 0 !important; left: 0 !important; 
  width: 100% !important; height: 100% !important; 
  background: rgba(0,0,0,0.3) !important; z-index: 3 !important;
  opacity: 0.3; /* NO !important */
}
#wpp-app-container .wpp-text-content { 
  position: absolute !important; bottom: 5rem !important; width: 100% !important; 
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; 
  padding: 1.5rem !important; text-align: center !important; color: white !important; z-index: 4 !important;
  height: 50%; /* NO !important */
}
#wpp-app-container .wpp-white-text { 
  margin: 0.2rem 0 !important; font-weight: 400 !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important; border: none !important; background: none !important; padding: 0 !important;
  font-size: 18px; /* NO !important */
}
#wpp-app-container .wpp-yellow-text { 
  color: #FFD700 !important; font-weight: 700 !important; margin: 0.2rem 0 !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important; border: none !important; background: none !important; padding: 0 !important;
  font-size: 24px /* NO !important */
}
#wpp-app-container .wpp-control-group { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; width: 100% !important; }
#wpp-app-container .wpp-ai-controls { background-color: #e8f5e9 !important; padding: 1rem !important; border-radius: 8px !important; border: 1px solid #c8e6c9 !important; }
#wpp-app-container .wpp-info-text { font-size: 0.8rem !important; color: #555 !important; text-align: left !important; padding: 0.5rem !important; background: #f0f0f0 !important; border-radius: 4px !important; margin-top: 0.5rem !important; line-height: 1.4 !important; }
#wpp-app-container label { font-weight: 600 !important; font-size: 0.9rem !important; color: #444 !important; display: inline-block !important; margin-bottom: 0.25rem !important; text-align: left !important; }
#wpp-app-container input[type="checkbox"] { width: auto !important; margin-right: 0.5rem !important; vertical-align: middle !important; }
#wpp-app-container input, #wpp-app-container select, #wpp-app-container textarea { width: 100% !important; padding: 0.7rem !important; border: 1px solid var(--wpp-border) !important; border-radius: 8px !important; font-size: 1rem !important; background-color: #fff !important; color: #333 !important; line-height: 1.5 !important; }
#wpp-app-container input:focus, #wpp-app-container select:focus, #wpp-app-container textarea:focus { border-color: var(--wpp-primary) !important; box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2) !important; outline: none !important; }
#wpp-app-container input[type="range"] { padding: 0.5rem 0 !important; box-shadow: none !important; border: none !important; }
#wpp-app-container button { padding: 0.8rem !important; font-size: 1rem !important; border: none !important; background: var(--wpp-primary) !important; color: white !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; min-height: 45px !important; font-weight: 600 !important; }
#wpp-app-container button:hover { background: var(--wpp-primary-hover) !important; transform: translateY(-2px) !important; }
#wpp-app-container button:disabled, #wpp-app-container button[disabled] { background: #ccc !important; color: #888 !important; cursor: not-allowed !important; transform: none !important; }
#wpp-app-container #wpp-generateWithAiBtn { background-color: var(--wpp-secondary) !important; }
#wpp-app-container .wpp-preview-image { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 1 !important; }
#wpp-app-container .wpp-branding { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; margin-top: 1rem !important; }
#wpp-app-container .wpp-logo-img { width: 2.5rem !important; height: 2.5rem !important; object-fit: contain !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)) !important; }
#wpp-app-container .wpp-mention-text { font-size: 1rem !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important; }
#wpp-app-container .wpp-caption-header { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; }
#wpp-app-container .wpp-copy-btn { padding: 0.4rem 0.8rem !important; font-size: 0.8rem !important; min-height: auto !important; background-color: var(--wpp-secondary) !important; }
#wpp-app-container .wpp-copy-btn:hover { background-color: var(--wpp-secondary-hover) !important; transform: translateY(-1px) !important; }
#wpp-app-container .wpp-post-control-btns{ display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 900px) {
  #wpp-app-container .wpp-preview-container {
    position: static !important;
  }
  #wpp-app-container .wpp-layout-grid {
    grid-template-columns: 1fr !important;
  }
}