.prompt-playground{animation:fadeIn .3s ease;background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-xl);position:relative}.playground-header{margin-bottom:var(--spacing-xl);text-align:center}.playground-title{align-items:center;color:var(--color-text-primary);display:flex;font-size:1.5rem;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-sm)}.title-icon{animation:pulse 2s ease-in-out infinite;font-size:2rem}.playground-description{color:var(--color-text-secondary);font-size:1rem;line-height:1.6}.examples-section{margin-bottom:var(--spacing-xl)}.section-title{color:var(--color-text-primary);font-size:1.1rem;margin-bottom:var(--spacing-md)}.examples-tabs{display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.category-title{color:var(--color-primary);font-size:.9rem;letter-spacing:.5px;margin-bottom:var(--spacing-sm);text-transform:uppercase}.example-prompts{display:flex;flex-direction:column;gap:var(--spacing-xs)}.example-prompt{align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;font-family:var(--font-arabic);font-size:.875rem;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);text-align:right;transition:var(--transition-base)}.example-prompt:hover{background:var(--color-primary-light);border-color:var(--color-primary);transform:translateY(-2px)}.prompt-icon{flex-shrink:0;font-size:1rem}.prompt-text{color:var(--color-text-primary);flex:1;line-height:1.4}.input-section{margin-bottom:var(--spacing-xl)}.input-label{color:var(--color-text-primary);display:block;font-size:1rem;font-weight:600;margin-bottom:var(--spacing-sm)}.input-wrapper{margin-bottom:var(--spacing-md);position:relative}.prompt-input{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-arabic);font-size:1rem;line-height:1.6;padding:var(--spacing-md);resize:vertical;transition:var(--transition-base);width:100%}.prompt-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #3498db1a;outline:none}.input-stats{bottom:var(--spacing-sm);color:var(--color-text-secondary);display:flex;font-size:.8rem;gap:var(--spacing-md);inset-inline-start:var(--spacing-md);position:absolute}.char-count,.word-count{background:var(--color-background);border-radius:var(--radius-sm);padding:2px 8px}.input-actions{display:flex;gap:var(--spacing-md)}.submit-button{align-items:center;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;flex:1;font-family:var(--font-arabic);font-size:1rem;font-weight:600;gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-sm) var(--spacing-xl);transition:var(--transition-base)}.submit-button:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-2px)}.submit-button:disabled{cursor:not-allowed;opacity:.5}.button-icon{font-size:1.2rem}.loading-spinner{animation:spin .8s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;height:16px;width:16px}.clear-button,.history-button{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;font-family:var(--font-arabic);font-size:.9rem;font-weight:600;padding:var(--spacing-sm) var(--spacing-lg);transition:var(--transition-base)}.clear-button:hover,.history-button:hover{background:var(--color-surface-hover);border-color:var(--color-primary)}.history-icon{margin-inline-start:var(--spacing-xs)}.history-dropdown{animation:slideInUp .3s ease;background:var(--color-background);border:2px solid var(--color-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);inset-inline-start:var(--spacing-md);max-width:400px;min-width:300px;padding:var(--spacing-md);position:absolute;top:auto;z-index:10}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.history-title{color:var(--color-text-primary);font-size:.9rem;margin-bottom:var(--spacing-sm)}.history-list{display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:200px;overflow-y:auto}.history-item{align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;display:flex;font-family:var(--font-arabic);justify-content:space-between;padding:var(--spacing-sm);text-align:right;transition:var(--transition-base)}.history-item:hover{background:var(--color-surface-hover);border-color:var(--color-primary)}.history-prompt{color:var(--color-text-primary);flex:1;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-time{color:var(--color-text-secondary);font-size:.75rem;margin-inline-start:var(--spacing-sm)}.response-section{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden}.response-tabs{background:var(--color-surface-hover);border-bottom:2px solid var(--color-border);display:flex}.tab-button{align-items:center;background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;display:flex;flex:1;font-family:var(--font-arabic);font-size:.95rem;gap:var(--spacing-xs);justify-content:center;padding:var(--spacing-md);position:relative;transition:var(--transition-base)}.tab-button:hover{background:var(--color-surface);color:var(--color-text-primary)}.tab-button.active{background:var(--color-surface);color:var(--color-primary);font-weight:600}.tab-button.active:after{background:var(--color-primary);bottom:-2px;content:"";height:2px;inset-inline:0;position:absolute}.tab-icon{font-size:1.1rem}.tab-content{max-height:500px;min-height:200px;overflow-y:auto;padding:var(--spacing-lg)}.response-text{color:var(--color-text-primary);line-height:1.8}.response-text p{margin-bottom:var(--spacing-md)}.response-text p:last-child{margin-bottom:0}.response-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.copy-response{align-items:center;background:var(--color-primary);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;display:flex;font-family:var(--font-arabic);font-size:.875rem;font-weight:600;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:var(--transition-base)}.copy-response:hover{background:var(--color-primary-dark);transform:translateY(-2px)}.action-icon{font-size:1rem}.evaluation-text{color:var(--color-text-primary);line-height:1.8}.evaluation-text p{margin-bottom:var(--spacing-md)}.tips-title{color:var(--color-text-primary);font-size:1rem;margin-bottom:var(--spacing-md)}.tips-list{flex-direction:column;list-style:none;margin:0;padding:0}.tip-item,.tips-list{display:flex;gap:var(--spacing-md)}.tip-item{background:var(--color-background);border-inline-start:3px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--spacing-md)}.tip-number{align-items:center;background:var(--color-primary);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:.8rem;font-weight:700;height:24px;justify-content:center;width:24px}.tip-text{color:var(--color-text-primary);flex:1;line-height:1.6}.loading-overlay{align-items:center;background:#fffffff2;border-radius:var(--radius-lg);bottom:0;display:flex;position:absolute;top:0;inset-inline:0;justify-content:center;z-index:100}.loading-content{text-align:center}.loading-spinner-large{animation:spin 1s linear infinite;border-top:4px solid var(--color-border);border:4px solid var(--color-border);border-radius:50%;border-top-color:var(--color-primary);height:60px;margin:0 auto var(--spacing-md);width:60px}.loading-text{color:var(--color-text-primary);font-size:1rem}@media(max-width:768px){.prompt-playground{padding:var(--spacing-md)}.examples-tabs{grid-template-columns:1fr}.input-actions{flex-wrap:wrap}.submit-button{width:100%}.clear-button,.history-button{flex:1}.history-dropdown{inset-inline-start:50%;max-width:none;position:fixed;top:50%;transform:translate(-50%,-50%);width:90%}.response-tabs{overflow-x:auto}.tab-button{min-width:100px}.tab-content{max-height:300px}}.prompt-playground{background:linear-gradient(180deg,#fffffffa,#f7f7fbfa);border-color:#2b2d5e14;border-radius:var(--radius-xl);box-shadow:0 16px 36px #2b2d5e14}.example-prompt,.history-item,.tip-item{border-radius:var(--radius-lg)}.response-section{border:1px solid rgba(43,45,94,.08);border-radius:var(--radius-xl)}