:root {
  --bg: #0e0f11;
  --surface: #16171b;
  --surface-2: #1e2025;
  --border: #2a2c32;
  --text: #e4e4e7;
  --text-dim: #8b8d97;
  --accent: #c5a46c;
  --accent-hover: #d4b57d;
  --accent-dim: rgba(197,164,108,0.12);
  --red: #e5534b;
  --radius: 12px;
}

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

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.grain {
  position: fixed; inset:0; z-index:0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

main {
  position: relative; z-index:1;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

header { text-align:center; margin-bottom:40px; }

.logo {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:12px;
}

.logo h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.subtitle {
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 300;
}

/* Modes */
.modes {
  display:flex; justify-content:center; gap:8px;
  margin-bottom:32px;
  flex-wrap: wrap;
}

.mode-btn {
  display:flex; align-items:center; gap:6px;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.mode-btn:hover { border-color: var(--accent); color: var(--text); }
.mode-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.mode-icon { font-size:16px; }

/* Editor */
.editor-area {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width:700px) {
  .editor-area { grid-template-columns:1fr; }
}

.panel label {
  display:block;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color: var(--text-dim);
  margin-bottom:8px;
}

textarea, .output-box {
  width:100%;
  min-height: 260px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.2s;
}
textarea:focus {
  outline:none;
  border-color: var(--accent);
}
textarea::placeholder { color: var(--text-dim); }

.output-box {
  overflow-y:auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.placeholder-text { color: var(--text-dim); font-style:italic; }

/* Actions */
.actions {
  display:flex; justify-content:center; gap:12px;
  margin-bottom:16px;
}

.submit-btn {
  padding: 14px 36px;
  border-radius: 100px;
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.submit-btn:hover { background: var(--accent-hover); transform:translateY(-1px); }
.submit-btn:active { transform:translateY(0); }
.submit-btn:disabled {
  opacity:0.6; cursor:not-allowed; transform:none;
}

.copy-btn {
  padding: 14px 28px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.copy-btn:hover { border-color: var(--text-dim); color:var(--text); }

/* Spinner */
.spinner {
  display:inline-block;
  width:14px; height:14px;
  border: 2px solid var(--bg);
  border-top-color: transparent;
  border-radius:50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right:6px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Error */
.error {
  text-align:center;
  color: var(--red);
  font-size: 14px;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(229,83,75,0.08);
  border: 1px solid rgba(229,83,75,0.2);
}

/* Animations */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
main > * {
  animation: fadeUp 0.5s ease-out both;
}
main > *:nth-child(2) { animation-delay: 0.05s; }
main > *:nth-child(3) { animation-delay: 0.1s; }
main > *:nth-child(4) { animation-delay: 0.15s; }
main > *:nth-child(5) { animation-delay: 0.2s; }