:root {
  color-scheme: dark;
}

.premium-bg {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.18), transparent 35%),
    linear-gradient(135deg, #020617 0%, #0f172a 52%, #020617 100%);
}

.glass {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
}

.card-hover {
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.86);
}

.input-premium, .select-premium, .textarea-premium {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.58);
  padding: 0.85rem 1rem;
  color: #fff;
  outline: none;
}
.input-premium:focus, .select-premium:focus, .textarea-premium:focus {
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}
.select-premium option {
  color: #0f172a;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
  padding: .85rem 1.1rem;
  font-weight: 800;
  color: white;
  box-shadow: 0 18px 40px rgba(37, 99, 235, .25);
  transition: transform .18s ease, filter .18s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(15, 23, 42, 0.72);
  padding: .65rem .9rem;
  font-weight: 700;
  color: #cbd5e1;
  transition: all .18s ease;
}
.btn-soft:hover { border-color: rgba(56, 189, 248, .45); color: white; }
.btn-danger:hover { border-color: rgba(244, 63, 94, .55); color: #fecdd3; }
.btn-success:hover { border-color: rgba(16, 185, 129, .55); color: #bbf7d0; }

.progress-track {
  height: .55rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(51, 65, 85, .8);
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
  transition: width .4s ease;
}

.mono-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.preview-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #020617;
}
.preview-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020617;
}
.crop-box {
  position: absolute;
  border: 2px solid #22d3ee;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, .45), 0 0 24px rgba(34, 211, 238, .45);
  pointer-events: none;
}
.overlay-preview {
  position: absolute;
  border-radius: .75rem;
  background: rgba(0,0,0,.55);
  color: white;
  padding: .45rem .75rem;
  font-weight: 800;
  pointer-events: none;
}


.crop-box {
  cursor: move;
  touch-action: none;
  pointer-events: auto;
}
.crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #22d3ee;
  border: 2px solid #020617;
  box-shadow: 0 0 18px rgba(34, 211, 238, .75);
}
.crop-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.crop-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.crop-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }