.sng-container {
max-width: 650px;
margin: 2rem auto;
padding: 1.5rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
font-family: system-ui, -apple-system, sans-serif;
border: 2px solid #2ecc71;
}

.sng-heading {
text-align: center;
color: #2ecc71;
margin: 0 0 12px;
font-size: 1.7rem;
}

.sng-description {
text-align: center;
color: #7f8c8d;
margin-bottom: 1.2rem;
font-size: 0.95rem;
}

.sng-controls {
display: flex;
gap: 10px;
margin-bottom: 1.4rem;
flex-wrap: wrap;
}

.sng-input {
flex: 1;
min-width: 200px;
padding: 10px 14px;
border: 2px solid #2ecc71;
border-radius: 6px;
font-size: 16px;
}

.sng-input:focus {
outline: none;
border-color: #27ae60;
box-shadow: 0 0 4px rgba(46,204,113,0.4);
}

.sng-input::placeholder {
color: #2ecc71;
opacity: 0.9;
}

.sng-input::-webkit-input-placeholder {
color: #2ecc71;
}

.sng-input:-ms-input-placeholder {
color: #2ecc71;
}

.sng-btn {
padding: 10px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}

.sng-btn:hover {
background: #2980b9;
}

.sng-results {
display: grid;
gap: 12px;
}

.sng-result-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: #f9f9f9;
border-radius: 6px;
font-family: monospace;
font-size: 15px;
word-break: break-all;
}

.sng-copy-btn {
background: #2ecc71;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}

.sng-copy-btn:hover {
background: #27ae60;
}

.sng-copy-btn.copied {
background: #3498db;
}