/* ================================================================
   Multype — style.css  v5
   Design audit: Outfit + Inter Tight, tighter token system,
   no duplicate rules, consistent radius, cohesive palette.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;600;700&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  /* typography */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-ui:      'Inter Tight', system-ui, sans-serif;

  /* surfaces */
  --bg:         #EAECF0;
  --surface:    #FFFFFF;
  --surface-2:  #F5F6F8;
  --surface-3:  #EAECF0;

  /* text */
  --text-hi:    #0D1117;
  --text-mid:   #52606D;
  --text-lo:    #8E9BAA;

  /* borders */
  --border:     #E0E3E8;
  --border-hi:  #C8CDD5;

  /* brand — single accent: emerald */
  --accent:     #10B981;
  --accent-d:   #059669;
  --accent-glow:rgba(16,185,129,.12);
  --accent-ring:rgba(16,185,129,.22);

  /* secondary accent: only for btn-coffee */
  --accent-2:   #F43F5E;

  /* nav */
  --nav-bg:     rgba(255,255,255,.88);

  /* card */
  --card:       #FFFFFF;
  --input-bg:   #F8F9FA;

  /* shadow — tinted to bg hue (cool grey) */
  --sh-card:    0 0 0 1px rgba(0,0,0,.055), 0 2px 6px rgba(15,20,40,.05);
  --sh-lift:    0 4px 14px rgba(15,20,40,.08), 0 1px 3px rgba(15,20,40,.05);

  /* radius — ONE scale: sharp-ish, not bubbly */
  --r-xs:  3px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;

  /* motion */
  --ease: all .14s cubic-bezier(.4,0,.2,1);
}

/* ── Dark tokens ── */
body.dark {
  --bg:         #0D1117;
  --surface:    #161B22;
  --surface-2:  #0D1117;
  --surface-3:  #0D1117;
  --text-hi:    #E6EDF3;
  --text-mid:   #7D8590;
  --text-lo:    #484F58;
  --border:     #21262D;
  --border-hi:  #30363D;
  --nav-bg:     rgba(13,17,23,.92);
  --card:       #161B22;
  --input-bg:   #0D1117;
  --sh-card:    0 0 0 1px rgba(255,255,255,.055), 0 2px 8px rgba(0,0,0,.3);
  --sh-lift:    0 4px 16px rgba(0,0,0,.4);
}

/* ================================================================
   BASE
   ================================================================ */
html, body { min-height: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text-hi);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  transition: background .22s, color .22s;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   NAVBAR
   ================================================================ */
#navbar {
  position: sticky;
  top: 0; z-index: 300;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  flex-shrink: 0;
  transition: background .22s, border-color .22s;
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  height: 46px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.2px;
  color: var(--text-hi);
  transition: opacity .14s;
}
.logo:hover { opacity: .75; }

.logo-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  transition: transform .3s;
}
.logo:hover .logo-mark { transform: scale(1.12); }

/* Center badge */
.nav-center { display: flex; justify-content: center; }
.nav-badge {
  padding: 3px 12px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-ring);
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .15px;
  white-space: nowrap;
}

.nav-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

.mode-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mid);
  transition: var(--ease);
  font-family: var(--font-ui);
}
.mode-toggle:hover { border-color: var(--border-hi); color: var(--text-hi); }
.mode-icon { display: flex; align-items: center; }

.btn-nav-support {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  transition: var(--ease);
  white-space: nowrap;
}
.btn-nav-support:hover {
  background: var(--accent-d);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16,185,129,.28);
}
.btn-nav-support:active { transform: scale(.98); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  text-align: center;
  padding: 22px 20px 12px;
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.18;
  margin-bottom: 8px;
  color: var(--text-hi);
}

.hero-grad {
  background: linear-gradient(120deg, var(--accent) 0%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* descender clearance for italic-like renders */
  padding-bottom: 2px;
  display: inline-block;
}

.hero-sub {
  font-size: 13px;
  color: var(--text-mid);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ================================================================
   MAIN
   ================================================================ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 12px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ── Shared card shell ── */
.input-card,
.style-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  transition: background .22s, border-color .22s;
}

/* ================================================================
   INPUT CARD
   ================================================================ */
.input-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.input-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-wrap: wrap;
}

.input-head-left  { display: flex; align-items: center; gap: 8px; }
.input-head-right { display: flex; align-items: center; gap: 8px; }

/* Step badge */
.step-badge {
  width: 18px; height: 18px;
  border-radius: var(--r-xs);
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--accent-ring);
  font-family: var(--font-ui);
}

.panel-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: -.05px;
}

/* Style active pill */
.style-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 9.5px; font-weight: 500;
  color: var(--text-lo);
  transition: var(--ease);
  font-family: var(--font-ui);
}
.style-pill.active {
  background: var(--accent-glow);
  border-color: var(--accent-ring);
  color: var(--accent);
  font-weight: 700;
}
.style-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-lo);
  flex-shrink: 0;
  transition: background .14s;
}
.style-pill.active .style-pill-dot { background: var(--accent); }

/* Char count */
.char-count { display: flex; align-items: center; gap: 3px; }
.char-label { font-size: 10px; color: var(--text-lo); font-weight: 400; }
.char-num   { font-size: 10px; font-weight: 700; color: var(--text-mid); font-variant-numeric: tabular-nums; }

/* Action button row */
.btn-row { display: flex; gap: 4px; }

.btn-xs {
  padding: 5px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-mid);
  font-size: 11px; font-weight: 500;
  font-family: var(--font-ui);
  transition: var(--ease);
  white-space: nowrap;
}
.btn-xs:hover { border-color: var(--border-hi); color: var(--text-hi); }
.btn-xs:active { transform: scale(.97); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.btn-primary.copied { background: #6366F1; border-color: #6366F1; }

.btn-ghost-danger:hover {
  border-color: #FCA5A5;
  color: #DC2626;
  background: rgba(220,38,38,.06);
}
body.dark .btn-ghost-danger:hover {
  border-color: #7f1d1d;
  color: #FCA5A5;
  background: rgba(220,38,38,.1);
}

/* Textarea */
.textarea {
  width: 100%;
  min-height: 148px;
  max-height: 300px;
  background: transparent;
  border: none;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-hi);
  resize: vertical;
  outline: none;
  line-height: 1.7;
  transition: color .22s;
}
.textarea::placeholder { color: var(--text-lo); }
.input-card:focus-within { box-shadow: var(--sh-card), 0 0 0 2px var(--accent-ring); }

/* ================================================================
   STYLE CARD
   ================================================================ */
.style-card {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.style-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.style-hint {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--text-lo);
  font-style: italic;
}

.style-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
}

.section-divider { height: 1px; background: var(--border); }

.sec-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-family: var(--font-ui);
}

/* ================================================================
   UTILITY GRID
   ================================================================ */
.util-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.util-btn {
  padding: 8px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--ease);
}

/* Unique tint per utility — using single hue families, lighter */
.util-btn[data-style="upper"]    { background:#EFF6FF; border-color:#BFDBFE; color:#1E40AF; }
.util-btn[data-style="lower"]    { background:#F0FDF4; border-color:#BBF7D0; color:#166534; }
.util-btn[data-style="title"]    { background:#FFF7ED; border-color:#FED7AA; color:#9A3412; }
.util-btn[data-style="sentence"] { background:#FAF5FF; border-color:#E9D5FF; color:#6B21A8; }
.util-btn[data-style="nospaces"] { background:#FFF1F2; border-color:#FECDD3; color:#9F1239; }
.util-btn[data-style="nobreaks"] { background:#F0F9FF; border-color:#BAE6FD; color:#075985; }

/* dark */
body.dark .util-btn[data-style="upper"]    { background:#0c1c3a; border-color:#1e3a6e; color:#93C5FD; }
body.dark .util-btn[data-style="lower"]    { background:#052212; border-color:#14532d; color:#86EFAC; }
body.dark .util-btn[data-style="title"]    { background:#1c0e04; border-color:#431407; color:#FDBA74; }
body.dark .util-btn[data-style="sentence"] { background:#130738; border-color:#3b0764; color:#D8B4FE; }
body.dark .util-btn[data-style="nospaces"] { background:#1c0610; border-color:#4c0519; color:#FDA4AF; }
body.dark .util-btn[data-style="nobreaks"] { background:#031420; border-color:#0c4a6e; color:#7DD3FC; }

.util-btn:hover {
  filter: brightness(.94);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
body.dark .util-btn:hover { filter: brightness(1.18); }

.util-btn.active {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 2px var(--accent-glow);
  transform: translateY(-1px);
}

/* ================================================================
   FUN TYPE GRID
   ================================================================ */
.fun-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;
}

.fun-btn {
  padding: 8px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--ease);
  cursor: pointer;
}

.fun-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.07); filter: brightness(.94); }
body.dark .fun-btn:hover { filter: brightness(1.18); }

.fun-btn.active {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 2px var(--accent-glow);
  transform: translateY(-1px);
}

/* Fun type tints — subtle, one family per vibe */
.fc-alay     { background:#FFFBEE; border-color:#F0E4B0; color:#78350F; font-weight:700; letter-spacing:.4px; }
.fc-typo     { background:#F6FFF8; border-color:#C3EAC9; color:#14532D; }
.fc-ae       { background:#F6F4FF; border-color:#D5CCF7; color:#4C1D95; font-size:9px; letter-spacing:1.8px; }
.fc-emoji    { background:#FFFBF0; border-color:#F5DFB8; color:#7C3F00; }
.fc-softgirl { background:#FFF0F6; border-color:#F4BFDA; color:#881337; }
.fc-fancy    { background:#FFFEF0; border-color:#EEE4A0; color:#713F12; font-size:13px; }
.fc-cursed   { background:#FFF5F5; border-color:#F5C0C0; color:#7F1D1D; }
.fc-zalgo    { background:#F9F4FF; border-color:#DDD0F7; color:#4C1D95; }
.fc-gothic   { background:#F7F6F8; border-color:#D0CBDA; color:#1C1028; font-size:13px; }

/* dark fun */
body.dark .fc-alay     { background:#1a1400; border-color:#3a2e00; color:#FCD34D; }
body.dark .fc-typo     { background:#051408; border-color:#0f3018; color:#6EE7B7; }
body.dark .fc-ae       { background:#120a28; border-color:#2a1655; color:#C4B5FD; }
body.dark .fc-emoji    { background:#1a1000; border-color:#382200; color:#FDBA74; }
body.dark .fc-softgirl { background:#1e0812; border-color:#3a1028; color:#F9A8D4; }
body.dark .fc-fancy    { background:#181400; border-color:#362c00; color:#FDE68A; }
body.dark .fc-cursed   { background:#1c0808; border-color:#3a1010; color:#FCA5A5; }
body.dark .fc-zalgo    { background:#140828; border-color:#2c1050; color:#D8B4FE; }
body.dark .fc-gothic   { background:#0e0c12; border-color:#201c28; color:#C4B5FD; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card);
  gap: 12px;
  flex-wrap: wrap;
  transition: background .22s, border-color .22s;
}

.trust-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

.trust-pill {
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-lo);
  white-space: nowrap;
  transition: var(--ease);
  font-family: var(--font-ui);
}
.trust-pill:hover { color: var(--text-mid); border-color: var(--border-hi); }

.support-card { display: flex; align-items: center; gap: 10px; }

.support-inline {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-lo);
  white-space: nowrap;
}

.btn-coffee {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--accent-2);
  color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  transition: var(--ease);
  white-space: nowrap;
}
.btn-coffee:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.btn-coffee:active { transform: scale(.97); }

/* ================================================================
   TOAST
   ================================================================ */
.toast {
  position: fixed;
  bottom: 16px; right: 16px;
  padding: 8px 14px;
  background: var(--text-hi);
  color: var(--bg);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 500;
  transform: translateY(60px);
  opacity: 0;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
  z-index: 9999;
  pointer-events: none;
  box-shadow: var(--sh-lift);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: #DC2626; color: #fff; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  .util-grid { grid-template-columns: repeat(3, 1fr); }
  .fun-grid  { grid-template-columns: repeat(3, 1fr); }
  .hero-title { font-size: 24px; }
  .nav-center { display: none; }
}

@media (max-width: 600px) {
  .nav-inner { grid-template-columns: 1fr auto; gap: 8px; }
  .nav-center { display: none; }
  .hero { padding: 14px 14px 10px; }
  .hero-title { font-size: 19px; }
  .main { padding: 0 10px 12px; }
  .util-grid { grid-template-columns: repeat(2, 1fr); }
  .fun-grid  { grid-template-columns: repeat(3, 1fr); }
  .mode-toggle span:not(.mode-icon) { display: none; }
  .btn-nav-support { padding: 5px 10px; font-size: 11px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .support-inline { display: none; }
  .trust-row { display: none; }
  .input-card-head { flex-direction: column; align-items: flex-start; }
}

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }