@import url("https://fonts.googleapis.com/css2?family=Sacramento&family=Quicksand:wght@400;500;600;700&display=swap");

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

:root{
  --bg: #ffe9f2;
  --text: #2e2e2e;
  --muted: #4f4f4f;
  --muted2: #6b6b6b;

  --panel: rgba(255,255,255,0.96);
  --panel2: #ffffff;

  --border: #c9d3e0;
  --borderFocus: #9fb3c8;

  --shadow: 0 10px 24px rgba(0,0,0,0.10);

  --radius: 14px;
  --radius-sm: 12px;

  --accent: #2c7be5;

  --kbd: rgba(0,0,0,0.06);
  --kbdBorder: rgba(0,0,0,0.12);
}

body{
  font-family: "Quicksand", Arial, sans-serif;
  background: radial-gradient(900px 500px at 30% 0%, rgba(44,123,229,0.10), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(229,44,138,0.10), transparent 55%),
              var(--bg);
  display:flex;
  justify-content:center;
  padding: 40px 16px 110px;
  color: var(--text);
}

.container{
  width:100%;
  max-width: 520px;
  text-align:center;
}

.cursive-title{
  font-family:"Sacramento", cursive;
  font-weight:400;
  letter-spacing:0.2px;
  line-height:1.0;
}
.cursive-subtitle{
  font-family:"Sacramento", cursive;
  font-weight:400;
  font-size:22px;
  line-height:1.0;
  letter-spacing:0.2px;
  color: color-mix(in srgb, var(--text) 70%, white);
}

.top{ text-align:left; }
.brand{ font-size:46px; font-weight:900; }
.tagline{ margin-top:8px; font-size:16px; color:var(--muted); }

.card{
  background: rgba(255,255,255,0.70);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.quote-card{
  margin: 18px 0 12px;
  padding: 14px;
  text-align:left;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.quote-text{ font-size:15px; line-height:1.45; color:var(--muted); }
.quote-sub{ margin-top:8px; font-size:12px; color: var(--muted2); }

.block{ text-align:left; margin-top: 14px; }
.block-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.label{ font-weight: 900; }

.text-btn{
  border:none;
  background:none;
  color: var(--muted);
  cursor:pointer;
  font-size:14px;
}
.text-btn:hover{ color:#222; }

.textarea-wrapper{ position:relative; }

textarea{
  width:100%;
  height: 160px;
  padding: 14px 52px 44px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  font-size: 16px;
  color: var(--muted);
  resize:none;
  outline:none;
  background: var(--panel2);
  box-shadow: var(--shadow);
}
textarea::placeholder{ color:#9aa6b2; }
textarea:focus{
  border-color: var(--borderFocus);
  box-shadow: 0 0 0 3px rgba(44,123,229,0.14), var(--shadow);
}

.enter-word-btn{
  position:absolute;
  left: 14px;
  bottom: 12px;
  border: 1px solid var(--kbdBorder);
  background: var(--kbd);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 900;
  font-size: 12px;
  color: var(--muted2);
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, border-color 0.12s ease, color 0.12s ease;
}
.enter-word-btn:hover{ color: var(--text); border-color: var(--borderFocus); }
.enter-word-btn:active{ transform: scale(0.97); }

.input-hint{
  position:absolute;
  left: 78px;
  bottom: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  opacity: 0.88;
  pointer-events:none;
}
.hint-chip{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--kbd);
  border: 1px solid var(--kbdBorder);
}
.hint-after{
  margin-left: 6px;
  font-weight: 800;
  opacity: 0.85;
}

/* Tabs */
.version-switcher{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin: 10px 0 8px;
}
.version-tab{
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.70);
  border-radius: 999px;
  padding: 7px 12px;
  cursor:pointer;
  font-weight: 900;
  font-size: 12px;
  color: var(--muted2);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.version-tab:hover{ border-color: var(--borderFocus); color: var(--text); }
.version-tab.is-active{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,0.70));
}

.active-title{
  font-weight: 900;
  color: var(--muted2);
  margin: 4px 0 10px;
  text-transform: lowercase;
}

.output-placeholder{
  padding: 14px;
  color: var(--muted2);
  font-size: 14px;
  text-align:center;
  margin-bottom: 12px;
}

.output-wrap textarea{
  background: rgba(255,255,255,0.70);
}

.copy-icon-btn{
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.80);
  border-radius: 999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-size: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, border-color 0.12s ease, color 0.12s ease;
}
.copy-icon-btn:hover{ border-color: var(--borderFocus); color: var(--text); }
.copy-icon-btn:active{ transform: scale(0.94); }
.copy-icon-btn.copied{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

.copied{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s ease;
  text-align:center;
}
.copied.show{ opacity: 1; }

.warning{
  margin-top: 8px;
  font-size: 13px;
  color: #8a2a2a;
  min-height: 18px;
  text-align:center;
}