:root {
    --main-color: #0073aa;
    --download-color: #005177;
    --share-color: #25D366;
}

.wppf-wrapper { max-width: 480px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; position: relative; }
.wppf-instructions-card { background: #ffffff; border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid rgba(0, 0, 0, 0.05); }
.wppf-ins-title { margin: 0 0 15px 0; font-size: 1.3em; font-weight: 700; color: var(--main-color); text-align: center; }
.wppf-ins-steps { display: flex; flex-direction: column; gap: 12px; }
.wppf-ins-step { display: flex; align-items: center; gap: 12px; text-align: left; }
.wppf-ins-icon { flex-shrink: 0; width: 36px; height: 36px; background-color: rgba(0, 0, 0, 0.03); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wppf-ins-icon svg { width: 20px; height: 20px; fill: var(--main-color); }
.wppf-ins-step p { margin: 0; font-size: 0.9em; color: #4a5568; line-height: 1.3; }
.wppf-container { background: #ffffff; border-radius: 16px; padding: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); text-align: center; }
.wppf-template-selector { margin-bottom: 20px; }
.wppf-selector-title { font-size: 0.9em; font-weight: bold; color: var(--main-color); margin-bottom: 10px; }

.wppf-thumbnails { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
.wppf-thumb-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 65px; }
.wppf-template-thumb { width: 60px; height: 60px; object-fit: cover; border: 3px solid transparent; border-radius: 10px; cursor: pointer; background: #f0f2f5; transition: transform 0.2s ease, border-color 0.2s ease; margin: 0; }
.wppf-template-thumb:hover { transform: scale(1.05); }
.wppf-template-thumb.active { border-color: var(--main-color); transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.wppf-thumb-title { font-size: 0.7em; color: #4a5568; text-align: center; line-height: 1.1; font-weight: 600; word-break: break-word; }

.wppf-preview-toggle { margin-bottom: 15px; font-size: 0.85em; color: #4a5568; display: flex; justify-content: center; }
.wppf-preview-toggle input { margin-right: 8px; accent-color: var(--main-color); }

.wppf-canvas-wrapper { position: relative; width: 100%; background: #edf2f7; border: 2px dashed #cbd5e1; border-radius: 12px; overflow: hidden; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; cursor: move; transition: border-radius 0.3s ease, aspect-ratio 0.3s ease; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-9-16 { aspect-ratio: 9 / 16; }
.wppf-canvas-wrapper.is-circular { border-radius: 50%; border: 2px solid var(--main-color); }

#wppf-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
#wppf-placeholder-text { position: absolute; color: #718096; font-size: 0.9em; padding: 0 15px; pointer-events: none; z-index: 10; text-align: center; }
.wppf-drag-hint-static { font-size: 0.85em; color: var(--main-color); background: #f0f6fc; padding: 10px; border-radius: 8px; margin: 0 0 15px 0; display: flex; align-items: center; justify-content: center; font-weight: 600; }

.wppf-adjustment-controls { margin-bottom: 15px; background: #f7fafc; padding: 12px; border-radius: 8px; text-align: left; }
.wppf-adjustment-controls label { font-size: 0.85em; font-weight: 600; color: var(--main-color); display: block; margin-bottom: 4px; }
.wppf-adjustment-controls input[type="range"] { width: 100%; margin: 0 0 8px 0; accent-color: var(--main-color); }

.wppf-dynamic-inputs-section { margin-bottom: 20px; text-align: left; }
.wppf-dynamic-input-wrap { margin-bottom: 12px; }
.wppf-dynamic-input-wrap label { display: block; font-size: 0.85em; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.wppf-tf-input { width: 100%; padding: 12px 15px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1em; box-sizing: border-box; transition: border-color 0.2s; }
.wppf-tf-input:focus { border-color: var(--main-color); outline: none; }

.wppf-controls { display: flex; flex-direction: column; gap: 10px; }
.wppf-btn-group { display: flex; gap: 10px; }
.wppf-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 10px; color: #ffffff; text-transform: uppercase; font-size: 0.85em; font-weight: 700; letter-spacing: 0.5px; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: opacity 0.2s, transform 0.1s; }
.wppf-btn-icon { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; fill: #ffffff !important; margin-right: 8px !important; flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle !important; }
.wppf-upload-btn { background-color: var(--main-color); }
.wppf-download-btn { background-color: var(--download-color); }
.wppf-share-btn { background-color: var(--share-color); }
.wppf-btn:disabled { background-color: #e2e8f0 !important; color: #a0aec0 !important; cursor: not-allowed; }
.wppf-btn:disabled .wppf-btn-icon { fill: #a0aec0 !important; }
.wppf-btn:active:not(:disabled) { transform: scale(0.98); }
.wppf-btn:hover:not(:disabled) { opacity: 0.9; }

.wppf-modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); z-index: 99999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.wppf-modal-box { background: #fff; padding: 25px; border-radius: 16px; width: 90%; max-width: 350px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.wppf-modal-title { margin: 0 0 10px 0; color: var(--main-color); font-size: 1.4em; }
.wppf-modal-text { font-size: 0.9em; color: #555; margin-bottom: 20px; }
.wppf-modal-input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; font-size: 1em; }
.wppf-modal-close { background: transparent; border: none; color: #888; margin-top: 15px; cursor: pointer; text-decoration: underline; font-size: 0.9em; }