.css-transform-generator{min-height:auto;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:2rem}.css-transform-generator .tool-header{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff}.css-transform-generator .tool-header-title{color:#fff}.css-transform-generator .tool-header-description{color:#c0cae0}.transform-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--tool-content-gap, 2rem);max-width:1600px;margin:0 auto}.transform-controls{display:flex;flex-direction:column;gap:1.5rem}.control-section{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.control-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.control-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.preset-btn{background:#667eea33;border:1px solid rgba(102,126,234,.3);color:#d0d8f0;padding:.5rem;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s ease}.preset-btn:hover{background:#667eea66;color:#fff;border-color:#667eea}.transform-controls-grid{display:flex;flex-direction:column;gap:1rem}.transform-control{display:flex;flex-direction:column;gap:.5rem}.transform-control label{color:#d0d8f0;font-size:.875rem;display:flex;align-items:center;gap:.5rem}.transform-control label input[type=checkbox]{width:16px;height:16px;cursor:pointer}.control-inputs{display:flex;align-items:center;gap:.75rem}.control-inputs input[type=range]{flex:1;height:6px;border-radius:3px;background:#ffffff26;outline:none;-webkit-appearance:none}.control-inputs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer}.control-inputs input[type=range]:disabled{opacity:.4}.control-inputs input[type=range]:disabled::-webkit-slider-thumb{background:#666;cursor:not-allowed}.control-inputs input[type=number]{width:70px;background:#ffffff26;border:2px solid rgba(255,255,255,.35);color:#fff;padding:.4rem;border-radius:4px;font-size:.85rem;text-align:center}.control-inputs input[type=number]:disabled{opacity:.4;cursor:not-allowed}.control-inputs select{background:#ffffff26;border:2px solid rgba(255,255,255,.35);color:#fff;padding:.4rem;border-radius:4px;font-size:.85rem}.control-inputs select:disabled{opacity:.4;cursor:not-allowed}.unit-label{color:#667eea;font-size:.85rem;min-width:30px}.help-text{color:#718096;font-size:.8rem;margin-top:.5rem;font-style:italic}.origin-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.origin-select{display:flex;align-items:center;gap:.5rem}.origin-select label{color:#a0aec0;font-size:.85rem}.origin-select select{background:#ffffff26;border:2px solid rgba(255,255,255,.35);color:#fff;padding:.4rem .6rem;border-radius:4px;font-size:.85rem}.origin-visual{margin-left:auto}.origin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:60px;height:60px;background:#ffffff14;border-radius:6px;padding:4px}.origin-point{width:100%;height:100%;border-radius:50%;border:2px solid rgba(102,126,234,.3);background:transparent;cursor:pointer;transition:all .2s ease}.origin-point:hover{border-color:#667eea;background:#667eea4d}.origin-point.active{background:#667eea;border-color:#667eea}.action-buttons{display:flex;gap:1rem}.btn-save,.btn-reset{flex:1;padding:.75rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .2s ease;border:none}.btn-save{background:linear-gradient(135deg,#667eea,#764ba2);color:var(--white)}.btn-save:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.btn-reset{background:#ef444433;color:var(--danger);border:1px solid rgba(239,68,68,.3)}.btn-reset:hover{background:#ef44444d}.saved-list{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto}.saved-item{display:flex;justify-content:space-between;align-items:center;background:#ffffff14;padding:.75rem;border-radius:6px;border:2px solid rgba(255,255,255,.25)}.saved-name{color:#fff;font-size:.875rem}.saved-actions{display:flex;gap:.5rem}.saved-actions button{padding:.3rem .6rem;border-radius:4px;font-size:.75rem;cursor:pointer;border:none;transition:all .2s ease}.saved-actions button:first-child{background:#667eea4d;color:#667eea}.saved-actions button:first-child:hover{background:#667eea80}.saved-actions button.delete{background:#ef444433;color:var(--danger)}.saved-actions button.delete:hover{background:#ef444466}.transform-preview-section{display:flex;flex-direction:column;gap:1.5rem}.preview-container{background:#f9fafb;border-radius:12px;padding:1.5rem;border:2px solid #d1d5db;box-shadow:0 1px 3px #0000001a}.preview-container h3{color:#fff;font-size:1.1rem;margin-bottom:1rem}.preview-settings{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 1px 3px #0000001a}.preview-settings label{color:#a0aec0;font-size:.85rem;display:flex;align-items:center;gap:.5rem}.preview-settings input[type=checkbox]{width:16px;height:16px;cursor:pointer}.color-setting{display:flex;align-items:center;gap:.5rem}.color-setting label{color:#a0aec0;font-size:.85rem}.color-setting input[type=color]{width:36px;height:28px;border:none;border-radius:4px;cursor:pointer;background:none}.preview-stage{position:relative;min-height:350px;background:#f9fafb;border:2px solid #d1d5db;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-box{display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:600;font-size:1rem;position:absolute;transition:transform .3s ease}.preview-box.original{background:#ffffff26;border:2px dashed rgba(255,255,255,.3);z-index:1}.preview-box.original span{opacity:.5}.preview-box.transformed{z-index:2;box-shadow:0 10px 30px #0000004d}.preview-box.transformed.hoverable{transform:none!important}.preview-box.transformed.hoverable:hover{transform:var(--hover-transform)!important;transform-origin:var(--hover-origin)!important}.css-output-section{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.css-output-section h3{color:#fff;font-size:1.1rem;margin-bottom:1rem}.css-output{background:#0d1117;border-radius:8px;padding:1rem;margin-bottom:1rem;overflow-x:auto}.css-output pre{color:#7ee787;font-family:Fira Code,Consolas,monospace;font-size:.875rem;margin:0;white-space:pre-wrap;word-break:break-all}.copy-buttons{display:flex;gap:.75rem}.copy-btn{flex:1;padding:.65rem 1rem;background:#667eea33;border:1px solid rgba(102,126,234,.3);color:#667eea;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s ease}.copy-btn:hover{background:#667eea4d;border-color:#667eea}.copy-btn.success{background:#10b98133;border-color:#10b98166;color:var(--success)}.info-section{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.info-section h3{color:#fff;font-size:1.1rem;margin-bottom:1rem}.info-content{color:#a0aec0;font-size:.875rem;line-height:1.6}.info-content p{margin-bottom:1rem}.info-content h4{color:#fff;font-size:.95rem;margin:1rem 0 .5rem}.info-content ul{margin:.5rem 0 1rem 1.5rem}.info-content li{margin-bottom:.4rem}.info-content code{background:#667eea33;padding:.1rem .4rem;border-radius:4px;font-family:Fira Code,monospace;font-size:.85rem;color:#667eea}.css-transform-generator .cta-section{background:linear-gradient(135deg,#667eea33,#764ba233);border:1px solid rgba(102,126,234,.3);border-radius:16px;padding:3rem;text-align:center;margin-top:2rem;max-width:1600px;margin-left:auto;margin-right:auto}.css-transform-generator .cta-section h2{color:#fff;font-size:1.8rem;margin-bottom:1rem}.css-transform-generator .cta-section p{color:#a0aec0;font-size:1.1rem;margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}.css-transform-generator .cta-button{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:var(--white);padding:1rem 2rem;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease}.css-transform-generator .cta-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.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: 1200px){.transform-layout{grid-template-columns:1fr}.presets-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 768px){.css-transform-generator{padding:1rem}.css-transform-generator h1{font-size:1.8rem}.presets-grid{grid-template-columns:repeat(2,1fr)}.origin-controls{flex-direction:column;align-items:flex-start}.origin-visual{margin-left:0;margin-top:1rem}.preview-settings{flex-direction:column;align-items:flex-start;gap:.75rem}.copy-buttons{flex-direction:column}.css-transform-generator .cta-section{padding:2rem 1.5rem}.css-transform-generator .cta-section h2{font-size:1.4rem}}