/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background: #0f172a;
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

input, button, textarea, select {
  font-family: inherit;
}

button {
  cursor: pointer;
}

/* ColorBends Tailwind Background */
/* Container */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  width: 100%;
}

/* Result container styling */
.result-container {
  margin-top: 32px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  display: block;
  position: relative;
  z-index: 5;
  clear: both;
}

.result-input {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: 'Courier New', monospace;
  word-break: break-all;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* Message container */
.message-container {
  margin-top: 24px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid;
  width: 100%;
  position: relative;
  z-index: 6;
}

/* Main content */
.main-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background: #0f172a;
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

input, button, textarea, select {
  font-family: inherit;
}

button {
  cursor: pointer;
}

/* ColorBends Tailwind Background */
.colorbends-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background: linear-gradient(to bottom right, #0f172a, #581c87, #0f172a);
}

.colorbends-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.colorbends-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.5;
  mix-blend-mode: screen;
}

.colorbends-blob-1 {
  width: 24rem;
  height: 24rem;
  background: linear-gradient(to right, #3e1e2e, #6c0a1a);
  animation: colorbends 8s ease-in-out infinite;
  top: -10%;
  left: -5%;
}

.colorbends-blob-2 {
  width: 20rem;
  height: 20rem;
  background: linear-gradient(to right, #261338, #181936);
  animation: flow 6s ease-in-out infinite 1s;
  top: 50%;
  right: 5%;
}

.colorbends-blob-3 {
  width: 18rem;
  height: 18rem;
  background: linear-gradient(to right, #025462, #1b3a6d);
  animation: pulse-glow 4s ease-in-out infinite 2s;
  bottom: -5%;
  left: 20%;
}

.colorbends-blob-4 {
  width: 16rem;
  height: 16rem;
  background: linear-gradient(to right, #3b2768, #4f0693);
  animation: colorbends 8s ease-in-out infinite reverse 3s;
  top: 10%;
  right: 10%;
}

@keyframes colorbends {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: translate(30px, -30px) scale(1.1);
    opacity: 0.8;
  }
}

@keyframes flow {
  0%, 100% { 
    transform: translateX(-100%);
    opacity: 0;
  }
  50% { 
    opacity: 1;
  }
  100% { 
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes pulse-glow {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Ensure content is above background */
.content-wrapper {
  position: relative;
  z-index: 10;
}

/* Advanced GlassSurface Glass Morphism Effect */
.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.glass-surface--svg {
  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
      inset,
    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
      inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05),
    0px 16px 56px rgba(17, 17, 26, 0.05),
    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.4);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }

  .glass-surface--fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    z-index: -1;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  @media (prefers-color-scheme: dark) {
    .glass-surface--fallback {
      background: rgba(0, 0, 0, 0.4);
    }

    .glass-surface--fallback::before {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}

.glass-surface:focus-visible {
  outline: 2px solid light-dark(#007aff, #0a84ff);
  outline-offset: 2px;
}

/* Apply advanced glass surface to shortener card */
.shortener-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;
  transition: opacity 0.26s ease-out;
  background: rgb(55 55 55 / 62%);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
  border: 1px solid rgb(75 74 74 / 28%);
  border-radius: 16px;
  padding: 40px;
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
  width: 100%;
}

@media (prefers-color-scheme: dark) {
  .shortener-card {
    background: rgb(55 55 55 / 62%);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    border: 1px solid 1px solid rgb(75 74 74 / 28%);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .shortener-card {
    background: rgb(55 55 55 / 62%);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }

  .shortener-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(55 55 55 / 62%);
    border-radius: inherit;
    z-index: -1;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  @media (prefers-color-scheme: dark) {
    .shortener-card {
      background: rgba(0, 0, 0, 0.4);
    }

    .shortener-card::before {
      background: rgb(55 55 55 / 62%);
    }
  }
}

/* Form styling for glass surface */
.form-input {
  background: rgb(0 0 0 / 42%);
  border: 1px solid rgb(255 255 255 / 27%);
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.form-label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.form-hint {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin-top: 6px;
  display: block;
}

.form-error {
  color: #ff6b6b;
  font-size: 0.875rem;
  margin-top: 6px;
  display: block;
}

.form-group {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Button styling */
.btn {
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #110c15, #2f0b7f);
  color: white;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
  width: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: rgba(168, 85, 247, 0.5);
  color: white;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.btn-secondary:hover {
  background: rgba(168, 85, 247, 0.7);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.5);
}

.btn-loader {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-text {
  display: inline;
}

/* Result container styling */
.result-container {
  margin-top: 32px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  display: block;
  position: relative;
  z-index: 5;
  clear: both;
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.result-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-input {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: 'Courier New', monospace;
  word-break: break-all;
}

.result-display {
  display: flex;
  gap: 8px;
}

.result-display .result-input {
  flex: 1;
}

.result-display .btn-secondary {
  flex-shrink: 0;
  padding: 10px 16px;
}

.back-btn {
  display: inline-block;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 16px;
  padding: 0;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}

.copy-feedback {
  color: #4ade80;
  font-size: 0.875rem;
  margin-top: 8px;
  text-align: center;
}

.expiration-info {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  margin-top: 4px;
  width: 100%;
  position: relative;
  z-index: 6;
}

/* Message container */
.message-container {
  margin-top: 24px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid;
}

.message-container.error {
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.3);
}

.message-container.success {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.3);
}

.message {
  color: white;
  text-align: center;
}

.message-container.error .message {
  color: #ff6b6b;
}

.message-container.success .message {
  color: #4ade80;
}

/* Header */
.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.125rem;
  margin: 0;
}

/* Container */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  width: 100%;
}

/* Footer */
.footer {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer p {
  margin: 4px 0;
  width: 100%;
}

/* Main content */
.main-content {
  display: flex;
  flex-direction: column;
}