/* PromptForge Styles */
.pf-wrap * { box-sizing:border-box; margin:0; padding:0; }
.pf-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; max-width:1100px; margin:30px auto; padding:0 20px; color:#333; line-height:1.6; }
.pf-wrap.pf-rtl { direction:rtl; text-align:right; font-family:'Cairo','Segoe UI',Tahoma,sans-serif; }
.pf-wrap.pf-ltr { direction:ltr; text-align:left; }
.pf-container { background:#fff; border-radius:16px; box-shadow:0 4px 30px rgba(0,0,0,.08); overflow:hidden; }
.pf-header { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; padding:40px; text-align:center; }
.pf-header h1 { font-size:28px; margin-bottom:8px; font-weight:700; }
.pf-header p { opacity:.9; font-size:16px; }

/* Steps */
.pf-steps { display:flex; background:#f8f9fa; border-bottom:1px solid #eee; }
.pf-step { flex:1; padding:16px; text-align:center; cursor:pointer; border-bottom:3px solid transparent; transition:.3s; opacity:.5; }
.pf-step.active { opacity:1; border-bottom-color:#667eea; background:#fff; }
.pf-step.completed { opacity:1; border-bottom-color:#28a745; }
.pf-step-num { display:inline-block; width:28px; height:28px; line-height:28px; border-radius:50%; background:#ddd; color:#fff; font-weight:700; font-size:13px; margin-bottom:4px; }
.pf-step.active .pf-step-num { background:#667eea; }
.pf-step.completed .pf-step-num { background:#28a745; }
.pf-step-label { display:block; font-size:13px; color:#666; }

/* Panels */
.pf-panel { padding:30px 40px; }
.pf-panel h2 { font-size:20px; margin-bottom:20px; color:#333; }
.pf-panel h3 { font-size:16px; margin:20px 0 12px; color:#555; }

/* Cards */
.pf-brand-list { display:grid; gap:12px; }
.pf-brand-card { display:flex; align-items:center; gap:14px; padding:14px 18px; border:2px solid #eee; border-radius:12px; cursor:pointer; transition:.2s; position:relative; }
.pf-brand-card:hover { border-color:var(--pf-primary,#667eea); box-shadow:0 2px 12px rgba(0,0,0,.06); }
.pf-brand-card.selected { border-color:var(--pf-primary,#667eea); background:rgba(102,126,234,.05); }
.pf-brand-color { width:40px; height:40px; border-radius:8px; flex-shrink:0; }
.pf-brand-info { flex:1; }
.pf-brand-info strong { display:block; font-size:15px; }
.pf-brand-info small { color:#999; font-size:13px; }
.pf-btn-delete { position:absolute; top:8px; right:14px; background:none; border:none; font-size:22px; color:#ccc; cursor:pointer; padding:0 4px; line-height:1; }
.pf-btn-delete:hover { color:#e74c3c; }
.pf-rtl .pf-btn-delete { right:auto; left:14px; }
.pf-btn-select { margin-left:auto; padding:6px 18px; border-radius:8px; border:2px solid var(--pf-primary,#667eea); color:var(--pf-primary,#667eea); background:transparent; cursor:pointer; font-weight:600; font-size:13px; transition:.2s; }
.pf-btn-select:hover { background:var(--pf-primary,#667eea); color:#fff; }
.pf-rtl .pf-btn-select { margin-left:0; margin-right:auto; }

/* Form divider */
.pf-form-divider { text-align:center; margin:24px 0; position:relative; }
.pf-form-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:#eee; }
.pf-form-divider span { background:#fff; padding:0 16px; position:relative; color:#999; font-size:13px; }

/* Form */
.pf-brand-form { max-width:600px; }
.pf-field { margin-bottom:16px; }
.pf-field label { display:block; font-size:13px; font-weight:600; color:#555; margin-bottom:4px; }
.pf-field input[type="text"], .pf-field input[type="url"], .pf-field textarea, .pf-field select { width:100%; padding:10px 14px; border:2px solid #e0e0e0; border-radius:8px; font-size:14px; transition:.2s; background:#fafafa; }
.pf-field input:focus, .pf-field textarea:focus { border-color:#667eea; outline:none; background:#fff; }
.pf-field textarea { resize:vertical; min-height:80px; }
.pf-row { display:flex; gap:12px; flex-wrap:wrap; }
.pf-color-field { flex:1; min-width:100px; }
.pf-color-field input[type="color"] { width:100%; height:48px; padding:4px; border:2px solid #e0e0e0; border-radius:8px; cursor:pointer; background:#fafafa; }

/* Keywords */
.pf-keywords-input { width:100%; }
.pf-keywords-input input { width:100%; padding:10px 14px; border:2px solid #e0e0e0; border-radius:8px; font-size:14px; }
.pf-keywords-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pf-keyword-tag { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#667eea; color:#fff; border-radius:20px; font-size:12px; }
.pf-keyword-tag button { background:none; border:none; color:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0; }

/* Network grid */
.pf-network-grid, .pf-tool-grid, .pf-design-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.pf-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px 8px; border:2px solid #eee; border-radius:12px; cursor:pointer; transition:.2s; text-align:center; font-size:14px; font-weight:500; }
.pf-card:hover { border-color:#667eea; box-shadow:0 2px 12px rgba(102,126,234,.12); }
.pf-card.selected { border-color:#667eea; background:rgba(102,126,234,.08); }
.pf-icon { font-size:28px; }
.pf-card small { font-size:11px; color:#999; font-weight:400; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Output */
.pf-output-box { position:relative; padding:16px; background:#1e1e2e; border-radius:10px; margin-bottom:8px; }
.pf-output-box pre { color:#e4e4e4; font-size:13px; line-height:1.7; white-space:pre-wrap; word-break:break-word; max-height:300px; overflow-y:auto; margin:0; font-family:'Cascadia Code','Fira Code','Consolas',monospace; }
.pf-btn-copy { position:absolute; top:10px; right:12px; padding:4px 12px; font-size:12px; background:rgba(255,255,255,.1); color:#ccc; border:1px solid rgba(255,255,255,.2); border-radius:6px; cursor:pointer; transition:.2s; }
.pf-rtl .pf-btn-copy { right:auto; left:12px; }
.pf-btn-copy:hover { background:rgba(255,255,255,.2); color:#fff; }

/* Post types */
.pf-post-types { display:flex; gap:10px; flex-wrap:wrap; }
.pf-post-type-card { min-width:100px; padding:10px 16px; }

/* Buttons */
.pf-btn { display:inline-block; padding:10px 24px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:.3s; border:2px solid transparent; text-decoration:none; }
.pf-btn-primary { background:#667eea; color:#fff; }
.pf-btn-primary:hover { background:#5a6fd6; }
.pf-btn-primary:disabled { background:#b3b3b3; cursor:not-allowed; }
.pf-btn-secondary { background:transparent; border-color:#667eea; color:#667eea; }
.pf-btn-secondary:hover { background:#667eea; color:#fff; }

/* Dimensions */
#pf-dimensions { margin-top:12px; font-size:13px; color:#888; }

/* Hint */
.pf-hint { color:#999; font-style:italic; padding:20px 0; }

/* Loading */
.pf-loading { opacity:.5; pointer-events:none; }

/* Responsive */
@media(max-width:768px) {
    .pf-header { padding:24px 16px; }
    .pf-header h1 { font-size:22px; }
    .pf-panel { padding:20px 16px; }
    .pf-step-label { font-size:11px; }
    .pf-steps { overflow-x:auto; }
    .pf-network-grid, .pf-tool-grid, .pf-design-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
}