body{font-family:Inter,sans-serif;background-color:#f8f9fa;color:#212529}.container{max-width:900px}.form-section{background-color:#fff;padding:28px;border-radius:12px;margin-bottom:28px;box-shadow:0 2px 8px #00000012;border:1px solid #dee2e6;transition:box-shadow .3s ease}.form-section:hover{box-shadow:0 4px 12px #00000017}.form-section h2{font-size:1.3rem;font-weight:600;color:#343a40;margin-bottom:22px;border-bottom:1px solid #e9ecef;padding-bottom:14px}label,.label-text{color:#495057;display:block;margin-bottom:.6rem;font-weight:500}input[type=text],input[type=password],input[type=email],input[type=url],textarea,select{background-color:#fff;border:1px solid #ced4da;color:#212529;border-radius:6px;padding:10px 12px;transition:all .2s ease-in-out;width:100%;font-weight:400}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,textarea:focus,select:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40;outline:none}textarea{min-height:80px}.checkbox-group label,.radio-group label{background-color:#e9ecef;color:#495057;padding:8px 12px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid #ced4da;display:inline-block;font-weight:500;box-shadow:none}.checkbox-group input[type=checkbox]:checked+label,.radio-group input[type=radio]:checked+label{background-color:#007bff;color:#fff;border-color:#007bff;box-shadow:none}.checkbox-group input[type=checkbox],.radio-group input[type=radio]{display:none}.ai-suggestion-btn,.fetch-models-btn{background-color:#5a67d8;color:#fff;padding:8px 12px;font-size:.875rem;font-weight:500;border-radius:6px;margin-left:10px;transition:all .2s ease;border:none}.ai-suggestion-btn:hover,.fetch-models-btn:hover{background-color:#434190;transform:translateY(-1px)}.fetch-models-btn:disabled{background-color:#adb5bd;color:#f8f9fa;cursor:not-allowed;transform:none}.word-count{font-size:.875rem;color:#6c757d;text-align:right;margin-top:4px}.prd-output-section{background-color:#fff;padding:28px;border-radius:12px;border:1px solid #dee2e6;box-shadow:0 2px 8px #00000012;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.prd-output{background-color:#f8f9fa;color:#212529;padding:20px;border-radius:8px;border:1px solid #e9ecef}.prd-output h1{font-size:1.75rem;color:#0056b3;margin-bottom:.75em;padding-bottom:.25em;border-bottom:1px solid #e9ecef}.prd-output h2{font-size:1.5rem;color:#0069d9;margin-top:1.25em;margin-bottom:.6em}.prd-output h3{font-size:1.25rem;color:#212529;margin-top:1em;margin-bottom:.5em}.prd-output h4{font-size:1.1rem;color:#343a40;margin-top:.8em;margin-bottom:.4em}.prd-output p{line-height:1.65;margin-bottom:1.1em;color:#343a40}.prd-output ul,.prd-output ol{margin-left:1.5em;margin-bottom:1.1em;color:#343a40}.prd-output li{margin-bottom:.55em}.prd-output strong{color:#000;font-weight:600}.prd-output em{color:#212529;font-style:italic}.prd-output::-webkit-scrollbar{width:8px}.prd-output::-webkit-scrollbar-track{background:#e9ecef;border-radius:10px}.prd-output::-webkit-scrollbar-thumb{background:#adb5bd;border-radius:10px}.prd-output::-webkit-scrollbar-thumb:hover{background:#6c757d}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#212529bf}.modal-content{background-color:#fff;color:#212529;margin:15% auto;padding:32px;border-radius:8px;width:90%;max-width:500px;box-shadow:0 5px 15px #0003;border:1px solid #dee2e6;animation:modalFade .3s ease-in-out}@keyframes modalFade{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-content p{font-size:1.125rem}.loader{border:4px solid #e9ecef;border-top:4px solid #007bff;border-radius:50%;width:36px;height:36px;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-action-btn{background-color:#007bff;color:#fff;font-weight:500;padding:12px 28px;border-radius:6px;box-shadow:0 2px 4px #007bff33;transition:all .2s ease;border:none}.main-action-btn:hover{background-color:#0069d9;transform:translateY(-1px);box-shadow:0 4px 8px #007bff4d}.main-action-btn:disabled{background-color:#6c757d;color:#f8f9fa;opacity:.8;cursor:not-allowed;transform:none;box-shadow:none}.copy-btn{background-color:#6c757d;color:#fff;font-weight:500;padding:8px 16px;border-radius:6px;transition:all .2s ease;border:none}.copy-btn:hover{background-color:#5a6268}.api-key-disclaimer{font-size:.8rem;color:#856404;background-color:#fff3cd;border:1px solid #ffeeba;padding:10px;border-radius:6px;margin-top:8px}@media (max-width: 768px){.form-section{padding:20px}.checkbox-group label,.radio-group label{padding:6px 10px;font-size:.9rem}.ai-suggestion-btn,.fetch-models-btn{margin-left:0;margin-top:8px}.flex.justify-between{flex-direction:column;align-items:flex-start}.flex.justify-between button{margin-top:8px}}.principles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1rem}.principle-card{background:#fff;border-radius:.5rem;padding:1.25rem;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb}.principle-card h4{color:#1a56db;font-weight:600;margin-bottom:.75rem}.principle-card ul{list-style-type:disc;list-style-position:inside;color:#4b5563}.principle-card li{margin-bottom:.5rem;font-size:.875rem}[data-tooltip]{position:relative;cursor:help}[data-tooltip]:hover:before{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:.5rem;background:#1a56db;color:#fff;border-radius:.25rem;font-size:.875rem;white-space:nowrap;z-index:10}