:root{--background-color: #191919;--surface-color: #24242499;--primary-color: #3a86ff;--primary-color-hover: #2b73e6;--text-color: #F0F0F0;--secondary-text-color: #9E9E9E;--border-color: #404040;--border-radius: 8px;--box-shadow: 0 4px 12px rgb(0 0 0 / 30%);--font-family: "Inter", sans-serif;--success-color: #28a745;--danger-color: #dc3545;--warning-color: #ffc107}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background-color);background-image:radial-gradient(var(--border-color) 1px,transparent 1px);background-size:24px 24px;color:var(--text-color);line-height:1.6}#app-container{max-width:1400px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:3rem;position:relative}header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}header p{font-size:1.1rem;color:var(--secondary-text-color)}.header-buttons{position:absolute;top:0;right:0;display:flex;gap:.5rem}a:link,a:visited{color:var(--text-color)}a:hover,a:active{color:var(--primary-color);text-decoration:none}.icon-button{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,border-color .2s;color:var(--text-color)}.icon-button:hover{background-color:var(--primary-color);border-color:var(--primary-color)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal.hidden{display:none}.modal-content{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);width:90%;max-width:500px;max-height:90vh;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color);flex-shrink:0}.modal-header h2{margin:0;font-size:1.5rem;font-weight:600}.close-button{background:none;border:none;font-size:2rem;cursor:pointer;color:var(--secondary-text-color);padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.close-button:hover{background-color:var(--surface-color);color:var(--text-color)}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:var(--background-color)}.modal-body::-webkit-scrollbar-thumb{background-color:var(--secondary-text-color);border-radius:3px}.modal-body::-webkit-scrollbar-thumb:hover{background-color:var(--text-color)}.modal-body{scrollbar-width:thin;scrollbar-color:var(--secondary-text-color) var(--background-color);padding:1.5rem;overflow-y:auto;flex-grow:1}.help-content h3{margin-top:1.5rem;margin-bottom:.75rem;font-size:1.2rem;font-weight:600}.help-content ol,.help-content ul{padding-left:1.5rem;margin-bottom:1rem}.help-content li{margin-bottom:.5rem}.help-content a{color:var(--primary-color);text-decoration:none}.form-group label{display:block;font-weight:500;margin-bottom:.5rem}.form-group.hidden{display:none}.form-group small{display:block;margin-top:.5rem;color:var(--secondary-text-color);font-size:.875rem}.form-group small a{color:var(--primary-color);text-decoration:none}.help-content a:hover,.form-group small a:hover{text-decoration:underline}.form-group input[type=password],.form-group input[type=text],.form-group input[type=url]{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;font-family:var(--font-family);transition:border-color .2s,box-shadow .2s;background-color:var(--background-color);color:var(--text-color)}.form-actions{display:flex;gap:1rem;margin-top:1.5rem}.primary-button,.secondary-button{padding:.75rem 1.5rem;border-radius:var(--border-radius);font-size:1rem;font-family:var(--font-family);font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;border:1px solid var(--border-color)}.primary-button{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.primary-button:hover{background-color:var(--primary-color-hover);border-color:var(--primary-color-hover)}.secondary-button{background-color:transparent;color:var(--text-color)}.secondary-button:hover{background-color:var(--surface-color)}main{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:flex-start}#input-column,#output-column{background-color:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:2rem;border:1px solid var(--border-color)}.form-section{margin-bottom:2rem}.form-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.placeholder h2{font-size:1.2rem;color:var(--text-color);margin-bottom:.5rem}#history-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.form-group{margin-bottom:1rem}.form-group input[type=text],.form-group input[type=url]{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;font-family:var(--font-family);transition:border-color .2s,box-shadow .2s;background-color:var(--background-color);color:var(--text-color)}.form-group input[type=text]:focus,.form-group input[type=url]:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3a86ff40}.form-group select{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;font-family:var(--font-family);transition:border-color .2s,box-shadow .2s;background-color:var(--background-color);color:var(--text-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem}.form-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3a86ff40}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:var(--text-color)!important;box-shadow:0 0 0 1000px var(--background-color) inset!important;transition:background-color 5000s ease-in-out 0s;caret-color:var(--text-color)}.platform-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.platform-option{display:flex;align-items:center}.platform-option input[type=checkbox]{display:none}.platform-option label{color:#9e9e9e;cursor:pointer;padding:.675rem 1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);text-align:center;width:100%;transition:background-color .2s,border-color .2s,color .2s}.platform-option label:hover{background-color:var(--surface-color);color:var(--primary-color);border-color:var(--primary-color)}.platform-option input[type=checkbox]:checked+label{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.drop-zone{border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:2rem;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;position:relative}.drop-zone.drag-over{border-color:var(--primary-color);background-color:#3a86ff1a}#drop-zone-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--secondary-text-color)}.placeholder svg{margin-bottom:1rem;animation:spin 10s linear infinite}.card-toggle-btn svg{transition:transform .3s ease-out}.result-card.minimized .card-toggle-btn svg{transform:rotate(-180deg)}#drop-zone-prompt.hidden{display:none}#drop-zone-prompt svg{color:var(--secondary-text-color)}#image-preview{max-width:100%;max-height:200px;border-radius:var(--border-radius);object-fit:contain}#remove-image{position:absolute;top:10px;right:10px;background:#0009;color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:16px;line-height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}.hidden{display:none!important}.generate-btn{width:100%;padding:1rem;font-size:1.1rem;font-weight:600;background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.generate-btn:disabled{background-color:var(--secondary-text-color);cursor:not-allowed}.generate-btn:hover:not(:disabled){background-color:var(--primary-color-hover)}#output-column{min-height:500px}#results-container{display:flex;flex-direction:column;gap:1.5rem}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--secondary-text-color);height:100%;min-height:400px}.result-card{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem;animation:fade-in .5s ease-out;display:flex;flex-direction:column;transition:padding-bottom .3s ease}.result-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.result-card-header h3{font-size:1.1rem;font-weight:600}.card-toggle-btn{background:none;border:none;cursor:pointer;padding:.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--secondary-text-color);transition:background-color .2s,color .2s}.card-toggle-btn:hover{background-color:var(--border-color);color:var(--text-color)}.result-card.minimized .result-card-header{margin-bottom:0}.result-card-image-container{margin-bottom:1.5rem;position:relative;background-color:#111;border-radius:var(--border-radius);overflow:hidden}.result-card-image{display:block;width:100%;max-height:450px;object-fit:contain}.edit-tools{display:flex;gap:.75rem;padding:.75rem;background:linear-gradient(to top,rgb(0 0 0 / 60%),transparent);position:absolute;bottom:0;left:0;right:0;justify-content:flex-end}.edit-btn{background-color:#ffffffe5;color:#191919;border:none;padding:.5rem 1rem;border-radius:var(--border-radius);cursor:pointer;font-weight:500;font-family:var(--font-family);transition:background-color .2s;font-size:.9rem;text-decoration:none;display:inline-block}.edit-btn:hover{background-color:#fff}.crop-btn-container{position:relative}.crop-options{position:absolute;bottom:100%;right:0;margin-bottom:.5rem;background-color:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);z-index:10;width:180px;overflow:hidden;border:1px solid var(--border-color);display:flex;flex-direction:column;animation:fade-in .2s ease-out}.crop-options button{background:none;border:none;padding:.75rem 1rem;text-align:left;cursor:pointer;width:100%;font-size:.9rem;color:var(--text-color)}.crop-options button:hover{background-color:var(--background-color)}.result-card-body{white-space:pre-wrap;word-wrap:break-word;font-size:1rem;line-height:1.7;flex-grow:1}.result-card-footer{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border-color)}.result-card.minimized .result-card-body,.result-card.minimized .result-card-image-container,.result-card.minimized .result-card-footer{display:none}.action-btn{background:none;border:1px solid var(--border-color);padding:.5rem .75rem;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;font-size:.9rem;font-family:var(--font-family);font-weight:500;display:flex;align-items:center;gap:.5rem}.action-btn:disabled{cursor:not-allowed;opacity:.6}.action-btn:hover:not(:disabled){background-color:var(--border-color)}.action-btn.copy-btn{color:var(--secondary-text-color)}.action-btn.copy-btn:hover:not(:disabled){color:var(--text-color)}.regenerate-btn{color:var(--primary-color);border-color:var(--primary-color)}.regenerate-btn:hover:not(:disabled){background-color:var(--primary-color);color:#fff}.save-btn{color:var(--success-color);border-color:var(--success-color)}.save-btn:hover:not(:disabled){background-color:var(--success-color);color:#fff}.share-btn{color:var(--secondary-text-color)}.share-btn:hover:not(:disabled){color:var(--text-color)}#history-section{margin-top:3rem;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:2rem}.history-table-container{overflow-x:auto}#history-section table{width:100%;border-collapse:collapse;margin-top:1rem}#history-section th,#history-section td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)}#history-section th{font-weight:600;color:var(--secondary-text-color)}#history-section td.content-cell{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#history-section td.actions-cell{display:flex;gap:.5rem}.history-action-btn{background:none;border:1px solid var(--border-color);padding:.3rem .6rem;border-radius:var(--border-radius);cursor:pointer;font-size:.85rem}.history-action-btn.load-btn{color:var(--primary-color);border-color:var(--primary-color)}.history-action-btn.delete-btn{color:var(--danger-color);border-color:var(--danger-color)}.spinner{width:20px;height:20px;border:2px solid rgb(255 255 255 / 30%);border-top-color:#fff;border-radius:50%;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width <= 992px){main{grid-template-columns:1fr}}@media (width <= 768px){#history-section th,#history-section td{padding:.5rem}.history-action-btn{padding:.25rem .5rem}}@media (width <= 576px){#app-container{padding:1rem}header h1{font-size:2rem}}