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

:root{
  --bg1:#f7f7f8;
  --bg2:#f7f7f8;
  --text:#111111;
  --muted:#666666;
  --border:#e8e8eb;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --accent:#0e9488;
  --accent2:#0b7d73;
  --danger:#7a1b1b;
  --danger2:#5f1414;
}

html[data-theme="dark"]{
  --bg1:#0b0f14;
  --bg2:#0b0f14;
  --text:#e8eef6;
  --muted:#a7b4c3;
  --border:#202a36;
  --card:#101824;
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --accent:#2dd4bf;
  --accent2:#22c1ad;
  --danger:#ff9b9b;
  --danger2:#ff7f7f;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg1);
  color: var(--text);
}

/* Header */
header{
  position:sticky;
  top:0;
  z-index:10;
  background: var(--bg1);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width: 980px;
  margin:0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  font-weight:800;
  letter-spacing:-0.6px;
  font-size:18px;
  color: var(--text);
  margin-right:auto;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.logo span{ color: var(--accent); }
.logo .dot{ color: var(--muted); font-weight:700; }

/* Language */
.lang{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size:13px;
  white-space:nowrap;
}
select{
  font-family: inherit;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background: var(--bg2);
  color:var(--text);
}

/* Layout */
.container{
  max-width: 980px;
  margin: 18px auto 40px;
  padding: 0 16px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow: var(--shadow);
}

/* Tool */
.tool h1{
  margin:0 0 6px;
  font-size:34px;
  letter-spacing:-1px;
}
.lead{
  margin:0 0 16px;
  color: var(--muted);
}

/* Buttons */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 14px;
}
button{
  font-family: inherit;
  border:1px solid var(--border);
  background: var(--bg2);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
}
button:hover{
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
button.active{
  background: color-mix(in srgb, var(--accent) 18%, var(--bg2));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
button.ghost{
  background: transparent;
}
button.danger{
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--bg2));
}

/* Textarea */
textarea{
  width:100%;
  min-height: 320px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 16px;
  font-size:16px;
  outline:none;
  background: var(--bg2);
  color: var(--text);
}
textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Footer bar */
.footer-bar{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--muted);
}
#stats{ font-size:14px; }
.toast{
  font-size:13px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
  display:none;
}

/* Features */
.features{ margin-top:22px; padding:0; }
.features.card{ padding:18px 18px 16px; }
.features h2{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-0.2px;
}
.features ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}
.features li{ margin:8px 0; }

/* SEO */
.seo{
  margin-top:16px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:18px 18px 16px;
}
.seo h2{ margin:0 0 10px; font-size:20px; letter-spacing:-.3px; }
.seo h3{ margin:16px 0 6px; font-size:16px; }
.seo p, .seo li{ color: var(--muted); }
.seo-lead{ margin:0 0 8px; }
.seo ol{ margin:10px 0 0; padding-left:18px; }
.seo-note{ margin-top: 10px; font-size:13px; }
.example{
  margin-top:8px;
  border:1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  border-radius:12px;
  padding:10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  color: color-mix(in srgb, var(--text) 85%, var(--muted));
  white-space:pre-wrap;
}

/* FAQ */
.faq{ margin-top:16px; padding:18px 18px 16px; }
.faq h2{ margin:0 0 10px; font-size:20px; letter-spacing:-.3px; }
.faq details{
  border-top:1px solid var(--border);
  padding:12px 0;
}
.faq details:first-of-type{ border-top:none; }
.faq summary{
  cursor:pointer;
  font-weight:600;
  color: var(--text);
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq p{
  margin:10px 0 0;
  color: var(--muted);
}

/* Footer */
.site-footer{
  margin-top:26px;
  padding:18px 0 0;
}
.footer-inner{
  border-top:1px solid var(--border);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color: var(--muted);
  font-size:13px;
}
.site-footer nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.site-footer a{
  color: var(--muted);
  text-decoration:none;
}
.site-footer a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 640px){
  .tool h1{ font-size:28px; }
  textarea{ min-height: 260px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

/* Dark/Light Switch (small) */
.mode{ display:flex; align-items:center; }
.mode-toggle{ border:0; background:transparent; padding:0; cursor:pointer; }
.mode-track{
  position:relative;
  width:72px;
  height:30px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(17,17,17,0.03);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
html[data-theme="dark"] .mode-track{
  background: rgba(255,255,255,0.05);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.mode-icon{
  font-size:13px;
  line-height:1;
  color: var(--muted);
  user-select:none;
}
.mode-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:999px;
  background: #2d3ea8;
  box-shadow: 0 10px 22px rgba(45,62,168,.35);
  transition: transform .18s ease;
}
html[data-theme="dark"] .mode-thumb{ transform: translateX(42px); }
.mode-toggle:focus-visible .mode-track{
  outline: none;
  box-shadow: 0 0 0 4px rgba(14,148,136,.18), 0 6px 18px rgba(0,0,0,.05);
}

/* Cookie banner */
.cookie{
  display:none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
}
.cookie-inner{
  max-width: 980px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cookie p{
  margin:0;
  color: var(--muted);
  font-size:13px;
  max-width: 70ch;
}
.cookie a{ color: var(--accent2); text-decoration: none; }
.cookie a:hover{ text-decoration: underline; }
.cookie-actions{ display:flex; gap:10px; }
.cookie-btn{ padding:10px 12px; border-radius:12px; }
.cookie-btn.primary{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 18%, var(--bg2));
}
.logo,
.logo:visited,
.logo:hover,
.logo:active {
  text-decoration: none;
  color: inherit;
}