@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.wpava-wrap { font-family: 'Inter', sans-serif; max-width: 1100px; padding: 20px 0; }

.wpava-header { margin-bottom: 24px; }
.wpava-header h1 { font-size: 24px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; }
.wpava-header p  { color: #666; margin: 0; }

/* TABS */
.wpava-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; padding-bottom: 0; }
.wpava-tab  { background: none; border: none; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.wpava-tab.active, .wpava-tab:hover { color: #7c3aed; border-bottom-color: #7c3aed; }

.wpava-tab-content { display: none; }
.wpava-tab-content.active { display: block; }

/* CARD */
.wpava-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.wpava-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 20px; color: #1a1a2e; }

/* CREATOR GRID */
.wpava-creator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* FIELD */
.wpava-field { margin-bottom: 18px; }
.wpava-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.wpava-field input[type=text],
.wpava-field input[type=password],
.wpava-field select,
.wpava-field textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #d1d5db;
    border-radius: 8px; font-size: 14px; font-family: inherit;
    transition: border-color .2s;
}
.wpava-field input:focus, .wpava-field select:focus, .wpava-field textarea:focus {
    outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.wpava-help { font-size: 12px; color: #9ca3af; margin: 4px 0 0; }

/* STYLE GRID */
.wpava-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wpava-style-btn  { background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; transition: all .2s; }
.wpava-style-btn.active, .wpava-style-btn:hover { border-color: #7c3aed; background: #f5f3ff; color: #7c3aed; font-weight: 600; }

/* COLOR GRID */
.wpava-color-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.wpava-color-btn  { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: all .2s; }
.wpava-color-btn.active { border-color: #7c3aed; transform: scale(1.15); }
.wpava-color-btn:hover  { transform: scale(1.1); }

/* GENERATE BTN */
.wpava-generate-btn {
    width: 100%; padding: 14px; background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity .2s; margin-top: 4px;
}
.wpava-generate-btn:hover   { opacity: .9; }
.wpava-generate-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { font-size: 18px; }

/* SAVE BTN */
.wpava-save-btn {
    padding: 10px 24px; background: #7c3aed; color: white; border: none;
    border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s;
}
.wpava-save-btn:hover { opacity: .85; }

/* PREVIEW BOX */
.wpava-preview-box {
    width: 100%; aspect-ratio: 3/4; background: #f3f4f6; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    position: relative; margin-bottom: 16px;
}
.wpava-preview-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.wpava-placeholder { text-align: center; color: #9ca3af; }
.wpava-placeholder span { font-size: 48px; display: block; margin-bottom: 12px; }
.wpava-placeholder p { font-size: 14px; line-height: 1.5; }

.wpava-generating {
    position: absolute; inset: 0; background: rgba(0,0,0,.6);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 12px; color: white; text-align: center;
}
.wpava-generating p { margin: 12px 0 0; font-size: 14px; }

.wpava-spinner {
    width: 40px; height: 40px; border: 4px solid rgba(255,255,255,.3);
    border-top-color: white; border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* WIDGET PREVIEW */
.wpava-widget-preview { background: #f9fafb; border-radius: 10px; padding: 14px; }
.wpava-widget-preview p { font-size: 12px; color: #6b7280; margin: 0 0 10px; }
.wpava-mock-widget { display: flex; align-items: center; gap: 10px; }
.wpava-mock-widget img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #7c3aed; }
.wpava-mock-bubble { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px 12px; }
.wpava-mock-bubble strong { display: block; font-size: 12px; color: #7c3aed; }
.wpava-mock-bubble span { font-size: 12px; color: #374151; }

/* CODE BLOCK */
.wpava-code-block { background: #1e1b4b; border-radius: 8px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.wpava-code-block code { color: #a78bfa; font-size: 12px; flex: 1; word-break: break-all; }
.wpava-copy-btn { background: #7c3aed; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }

@media (max-width: 768px) {
    .wpava-creator-grid { grid-template-columns: 1fr; }
}