:root {
  --pink:#ff9ad5;
  --purple:#b38cff;
  --blue:#7acbff;
  --panel-bg:#ffffff;
  --border:#dccfff;
  --text-main:#24324a;
  
  --text-soft:#24324a;
/* --text-soft:#7c73aa; */
  
}

* {
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}

body {
  margin:0;
  min-height:100vh;
  background:linear-gradient(135deg,#f0f0f0,#e6e8ee);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.app {
  width:100%;
  max-width:880px;
  background:var(--panel-bg);
  border:4px solid transparent;
  border-image:linear-gradient(90deg,var(--blue),var(--purple),var(--pink)) 1;
  padding:24px;
  box-shadow:
    0 0 0 4px rgba(179,140,255,.12),
    0 14px 40px rgba(160,120,255,.30);
}

/* HEADER */
.header {
  text-align:center;
  margin-bottom:18px;
}
.grad {
  color: #df94e7;
  font-weight: 800;
}
.copy-icon-btn.copied {
  border-color: #ff9ad5;
  color: #ff9ad5; /* EZ váltja az ikon stroke színét */
  box-shadow: 0 0 12px rgba(255,154,213,.45);
}

.header h1 {
  margin:0;
  font-size:34px;
  font-weight:800;
  background:linear-gradient(90deg,var(--pink),var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.subtitle {
  margin-top:6px;
  font-size:14px;
  color:var(--text-soft);
}

/* TEXTAREAS */
textarea {
  width:100%;
  min-height:120px;
  
  padding-right:50px;
  font-size:15px;
  color:var(--text-soft);
  border:3px solid var(--border);
  outline:none;
  resize:vertical;
  background:#fff;
}

/* TOOLBAR */
.toolbar {
  display:flex;
  gap:10px;
  margin:14px 0;
  flex-wrap:wrap;
}

.tool-btn {
  padding:8px 14px;
  border:3px solid var(--border);
  background:#fff;
  font-weight:800;
  font-size:13px;
  color:var(--text-main);
  cursor:pointer;
}

.tool-btn.active {
  background:linear-gradient(90deg,var(--blue),var(--purple));
  color:#fff;
  border-color:transparent;
}

/* OUTPUT TITLE */
.output-title {
  text-align:center;
  margin:18px 0 8px;
  font-size:18px;
  font-weight:800;
  background:linear-gradient(90deg,var(--pink),var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* FOOTER */
.bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  font-size:13px;
  color:var(--text-soft);
}

.footer-actions {
  display:flex;
  align-items:center;
}

.footer-actions span {
  margin-left:12px;
  cursor:pointer;
  font-weight:500;
}

.footer-divider {
  height:18px;
  margin-left:12px;
  border-left:2px dashed var(--border);
}

.privacy-btn {
  cursor:pointer;
  font-weight:500;
  font-size:13px;
  color:var(--text-soft);
}

.privacy-btn.active {
  color:var(--blue);
  font-weight: 900;
}

/* PRIVACY BOX */
.privacy-box {
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:2px dashed var(--border);
  font-size:13px;
  color:var(--text-soft);
  line-height:1.6;
}
/* OUTPUT WRAPPER */
.output-wrapper {
  position: relative;
}

/* COPY ICON BUTTON */
.copy-icon-btn {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(155, 100, 255, 0.08);
  border: 3px solid #dccfff;
  border-radius: 0px;

  color: #b57bff;
  cursor: pointer;

  transition: all 0.18s ease;
  backdrop-filter: blur(6px);
}

/* SVG size */
.copy-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* Hover state */
.copy-icon-btn:hover {
  background: rgba(155, 100, 255, 0.18);
  border-color: #d3a6ff;
  box-shadow: 0 6px 16px rgba(155, 100, 255, 0.18);
}

/* Active press */
.copy-icon-btn:active {
  transform: scale(0.95);
}

/* Optional subtle fade when empty */
#output:placeholder-shown + .copy-icon-btn {
  opacity: 0.5;
}

/* MOBILE */
@media (max-width:600px) {
  .header h1 { font-size:26px; }
}