.container{
  max-width:1184px;
}

#content {
  text-align: center;
  margin-bottom: 30px;
}

#head {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  border-radius: 12px;
  color: #fff;
}

h1 {
  font-size: 45px !important;
  font-weight: 700 !important;
  margin-bottom: 10px;
  color: #fff !important;
}

.sub-title {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* Canvas */
.canvas-section {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}


#text-wrapper {
  position: relative;
  display: inline-block;
}

.line {
  height: 4px;
  background: #e50914;
  width: 100%;
  position: absolute;
  left: 0;
}

.top-line {
  top: -10px;
}

.bottom-line {
  bottom: -10px;
}
#canvas-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5f5f5;
  transition: background 0.2s;
  min-height: 200px;
  width: 100%;
	 transform: scale(1);
}

#bg-image-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

#text-output {
  position: relative;
  z-index: 1;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 90%;
  padding: 16px;
  font-family: 'ITC Benguiat Std','Libre Baskerville',Georgia,serif;
  transition: all 0.12s;
  user-select: none;
}

.download-btn {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 10;
  background: rgba(0,0,0,.5);
  border: none;
  border-radius: 6px;
  padding: 6px 11px;
  cursor: pointer;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: .07em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.download-btn:hover { background: rgba(229,9,20,.8); }

/* Input */
#text-input {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  background: #f9f9f9 !important;
  border: 1px solid #f3c6cf !important;
  border-radius: 8px;
  padding: 12px 14px;
  color: black !important;
}
#text-input:focus{
	border-color:#e91e63 !important;
}



/* Tabs */
.style-tabs {
  display: flex;
  gap: 10px;
}

.style-tab {
  flex: 1;
  background: #1e1e1e;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
}

.style-tab.active {
  border-color: #e50914;
  background: #2a1010;
}

/* Controls */
.controls-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr;
  gap: 14px;
}
.CL{
	padding: 0 !important;
}



.add-bg-btn{
	padding: 10px !important;
	margin-top:10px;
	border-radius: 20px !important;
}

@media (max-width:700px) {
  .controls-panel { grid-template-columns:1fr; }
}

.ctrl-group {
  background: #f9f9f9 !important;
  border: 1px solid #f3c6cf !important;
  border-radius: 10px;
  padding: 14px;
}

.ctrl-group-title {
  font-size: 0.62rem;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 10px;
}

/* Buttons */
.action-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
#btn-bold{
	background-color: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
	
}

.action-btn {
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  border: none;
  border-radius: 8px !important;
  color: #fff;
  padding: 10px 22px;
  cursor: pointer;
}

.action-btn.secondary {
  background: #2a2a2a;
}