/* ShortURL Lite Styles */
.sul-container {
  background: #fff;
  max-width: 420px;
  margin: 32px auto;
  padding: 24px 18px 18px 18px;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  font-family: 'Segoe UI', Arial, sans-serif;
}
#sul-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#sul-long-url {
  flex: 1 1 200px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}
#sul-shorten-btn {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
#sul-shorten-btn:hover {
  background: #219150;
}
#sul-result {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  word-break: break-all;
}
#sul-short-link {
  font-weight: 500;
  color: #27ae60;
  font-size: 1.08rem;
}
#sul-copy-btn {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.98rem;
  transition: background 0.2s;
}
#sul-copy-btn:hover {
  background: #e0e0e0;
}
#sul-error {
  margin-top: 12px;
  color: #e74c3c;
  font-size: 0.98rem;
}
/* Import Fira Code font */
body, .sul-container, input, button, #sul-short-link {
  font-family: 'Fira Code', 'Segoe UI', Arial, monospace, sans-serif;
}
.sul-animated-header {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  animation: fadeInDown 1s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
.sul-anim-text {
  background: linear-gradient(90deg, #27ae60, #00b894, #00cec9, #27ae60);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 2.5s linear infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
#sul-custom-code {
  flex: 1 1 120px;
  padding: 10px;
  border: 1px solid #b2bec3;
  border-radius: 6px;
  font-size: 1rem;
  margin-top: 8px;
  background: #f9f9f9;
  transition: border 0.2s;
}
#sul-custom-code:focus {
  border: 1.5px solid #27ae60;
  outline: none;
}
.sul-link-count {
  margin-top: 18px;
  text-align: center;
  color: #636e72;
  font-size: 1.01rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
  animation: fadeIn 1.2s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 0.85; }
}
.sul-anim-pop {
  animation: popIn 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes popIn {
  0% { transform: scale(0.7); opacity: 0.2; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sul-suggestion {
  display: inline-block;
  background: #eafaf1;
  color: #27ae60;
  border-radius: 4px;
  padding: 2px 7px;
  margin: 0 2px;
  font-family: 'Fira Code', monospace;
  font-size: 0.98em;
  cursor: pointer;
  transition: background 0.2s;
}
.sul-suggestion:hover {
  background: #d4f5e9;
  color: #219150;
}
@media (max-width: 600px) {
  .sul-container {
    padding: 12px 4vw 12px 4vw;
  }
  #sul-form {
    flex-direction: column;
    gap: 10px;
  }
  #sul-shorten-btn {
    width: 100%;
  }
}