.loading-overlay-generator{min-height:auto;padding:2rem;background:var(--gray-50)}.loading-overlay-generator__container{max-width:var(--tool-container-max-width, 1600px);margin:0 auto}.loading-overlay-generator__header{text-align:center;margin-bottom:2rem}.loading-overlay-generator__header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;color:var(--gray-800)}.loading-overlay-generator__header p{color:var(--gray-500);font-size:1.1rem}.loading-overlay-generator__content{display:grid;grid-template-columns:1fr 350px;gap:var(--tool-content-gap, 2rem);margin-bottom:2rem}.loading-overlay-generator__preview-section h3,.loading-overlay-generator__controls h3,.loading-overlay-generator__output h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--gray-800)}.loading-overlay-generator__preview{background:#f9fafb;border:2px solid #d1d5db;border-radius:12px;min-height:400px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.preview-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.preview-card{padding:32px 48px;background:#f9fafb;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 1px 3px #0000001a}.preview-progress{overflow:hidden}.spinner--circle{border-radius:50%;animation:spin 1s linear infinite}.spinner--dots{display:flex}.spinner--dots .dot{border-radius:50%;animation:bounce 1s ease-in-out infinite}.spinner--pulse{border-radius:50%;animation:pulse 1s ease-in-out infinite}.spinner--bars{display:flex;align-items:flex-end}.spinner--bars .bar{border-radius:2px;animation:bars 1s ease-in-out infinite}.spinner--ring svg{width:100%;height:100%}.spinner--ring circle:last-child{transform-origin:center;animation:spin 1s linear infinite}.spinner--classic{position:relative}.spinner--classic .spoke{position:absolute;width:10%;height:30%;top:35%;left:45%;transform-origin:center 80%;border-radius:2px;animation:spoke-fade 1s linear infinite}.animated-dots:after{content:"";animation:dots 1.5s steps(4,end) infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes pulse{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}@keyframes bars{0%,40%,to{height:40%}20%{height:100%}}@keyframes spoke-fade{0%,to{opacity:1}50%{opacity:.25}}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.loading-overlay-generator__controls{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a;max-height:none;overflow-y:auto}.control-group{margin-bottom:1.25rem}.control-group:last-child{margin-bottom:0}.control-group>label{display:block;font-size:.875rem;font-weight:500;color:var(--gray-700);margin-bottom:.5rem}.control-group input[type=text],.control-group select{width:100%;padding:.625rem .875rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.control-group input[type=text]:focus,.control-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:var(--gray-200);outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer}.preset-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.preset-button{padding:.375rem .75rem;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s}.preset-button:hover{background:var(--gray-200);border-color:var(--gray-300)}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:var(--gray-900);cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;border-radius:4px;accent-color:var(--gray-900)}.color-inputs{display:flex;flex-wrap:wrap;gap:.75rem}.color-input{display:flex;flex-direction:column;align-items:center;gap:.25rem}.color-input label{font-size:1rem;color:var(--gray-900);font-weight:600;margin-bottom:.5rem;line-height:1.5;letter-spacing:.3px}.color-input input[type=color]{width:40px;height:32px;border:1px solid var(--gray-300);border-radius:6px;cursor:pointer;padding:2px}.loading-overlay-generator__output{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.output-section{margin-bottom:1.5rem}.output-section:last-child{margin-bottom:0}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.output-header span{font-size:.875rem;font-weight:500;color:var(--gray-700)}.copy-button{padding:.375rem .75rem;background:var(--primary);color:var(--white);border:none;border-radius:6px;font-size:.75rem;cursor:pointer;transition:background .2s}.copy-button:hover{background:var(--primary)}.copy-button.copied{background:var(--success)}.code-block{background:var(--gray-800);color:var(--gray-200);padding:1rem;border-radius:8px;font-size:.8rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow-y:auto}.control-panel{background-color:#1f2937f2!important;border:2px solid var(--gray-400)!important;border-radius:6px}[data-theme=dark] .control-section{background-color:#1f2937e6!important;border-color:var(--gray-400)!important;border-width:2px}[data-theme=dark] .control-group input,[data-theme=dark] .control-group select,[data-theme=dark] .control-group textarea{background-color:#0f172acc!important;border:2px solid var(--gray-500)!important;color:var(--text-primary)}[data-theme=dark] .control-group label{display:block;color:var(--gray-900);font-size:1rem;margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}@media (max-width: 1023px){.loading-overlay-generator__content{grid-template-columns:1fr}.loading-overlay-generator__controls{max-height:none}}@media (max-width: 640px){.loading-overlay-generator{padding:1rem}.loading-overlay-generator__header h1{font-size:1.75rem}.loading-overlay-generator__preview{min-height:300px}}