*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}.scp-generator-container{max-width:1200px;margin:0 auto}.scp-generator-header{text-align:center;margin-bottom:40px;color:#fff}.scp-generator-header h1{font-size:2.5rem;margin-bottom:10px;font-weight:700}.scp-generator-header p{font-size:1.1rem;opacity:.9;max-width:600px;margin:0 auto;line-height:1.6}.scp-tool-card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 40px rgba(0,0,0,.1);margin-bottom:30px}.scp-input-section{margin-bottom:30px}.scp-input-group{margin-bottom:20px}.scp-label{display:block;margin-bottom:8px;font-weight:600;color:#333;font-size:.95rem}.scp-color-picker{width:80px;height:80px;border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.2);transition:transform .2s ease}.scp-color-picker:hover{transform:scale(1.1)}.scp-hex-input{width:200px;padding:12px 16px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;margin-left:15px;transition:border-color .3s ease}.scp-hex-input:focus{outline:none;border-color:#667eea}.scp-color-input-row{display:flex;align-items:center;margin-bottom:15px;padding:10px;border-radius:10px;transition:background-color .2s ease}.scp-color-input-row:hover{background-color:#f8f9ff}.scp-generate-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:15px 30px;border-radius:25px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;margin:20px 10px 10px 0}.scp-generate-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(102,126,234,.3)}.scp-preset-palettes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.scp-preset-card{background:#f8f9ff;border-radius:15px;padding:20px;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;border:2px solid transparent}.scp-preset-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.1);border-color:#667eea}.scp-preset-colors{display:flex;justify-content:center;gap:10px;margin-bottom:15px}.scp-preset-color{width:40px;height:40px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2)}.scp-palette-display{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.scp-color-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.1);transition:transform .2s ease}.scp-color-card:hover{transform:translateY(-5px)}.scp-color-preview{height:120px;cursor:pointer;position:relative;transition:opacity .2s ease}.scp-color-preview:hover{opacity:.9}.scp-color-preview::after{content:"Click to copy";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;padding:5px 10px;border-radius:5px;font-size:.8rem;opacity:0;transition:opacity .2s ease}.scp-color-preview:hover::after{opacity:1}.scp-color-info{padding:15px}.scp-color-name{font-weight:600;margin-bottom:8px;color:#333}.scp-color-codes{font-size:.9rem;color:#666}.scp-color-code{margin-bottom:4px;font-family:'Courier New',monospace}.scp-css-output{background:#1a1a1a;color:#0f0;border-radius:15px;padding:25px;font-family:'Courier New',monospace;white-space:pre-wrap;overflow-x:auto;margin-top:20px;position:relative}.scp-copy-btn{position:absolute;top:15px;right:15px;background:#667eea;color:#fff;border:none;padding:8px 15px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:background-color .2s ease}.scp-copy-btn:hover{background:#5a6fd8}.scp-toast{position:fixed;bottom:20px;right:20px;background:#4caf50;color:#fff;padding:15px 25px;border-radius:25px;font-weight:600;transform:translateX(400px);transition:transform .3s ease;z-index:1000}.scp-toast.scp-toast-show{transform:translateX(0)}.scp-section-title{font-size:1.4rem;margin-bottom:20px;color:#333;font-weight:600}@media(max-width:768px){.scp-generator-header h1{font-size:2rem}.scp-tool-card{padding:25px}.scp-color-input-row{flex-direction:column;align-items:flex-start;gap:10px}.scp-hex-input{width:100%;margin-left:0}}