:root{--bg:#fff7fb;--card:#ffffff;--text:#182033;--pink:#ff5fa2;--purple:#8b5cf6}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(#fff,#fff7fb);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
.top{height:60px;background:linear-gradient(90deg,#ff8fc7,#cf55f5,#7a5cff);display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#fff;font-weight:700}
.top a{color:#fff;text-decoration:none}
.coffee-link{display:flex;align-items:center;text-decoration:none}
.coffee-link img{height:38px;max-width:190px;display:block}
.app-main{flex:0 0 auto;width:100%;min-height:56vh}
.wrap{max-width:920px;margin:24px auto;padding:0 18px}
.card{background:var(--card);border:1px solid #f1dce8;border-radius:20px;padding:24px;box-shadow:0 8px 30px rgba(96,59,89,.07)}
h1{margin-top:0}
input,button{font:inherit}
input{width:100%;padding:12px;border:1px solid #d9d9df;border-radius:12px;margin:8px 0 14px}
button{border:0;border-radius:12px;padding:12px 18px;background:linear-gradient(90deg,#ff5fa2,#8b5cf6);color:white;font-weight:700;cursor:pointer}
.result{margin-top:16px;padding:14px;border-radius:12px;background:#faf7ff}
.preview{max-width:100%;border-radius:12px;margin-top:12px}
.site-footer{width:100%;background:#fff;border-top:1px solid #f2dce8;padding:30px 20px 34px;text-align:center;flex-shrink:0}
.site-footer .footer-brand{margin:0 0 8px;font-size:22px;font-weight:800;color:#17223b;text-align:center}
.site-footer .footer-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;text-align:center}
.site-footer .footer-links a{color:#6d46d8;text-decoration:none;font-weight:700}
.site-footer .footer-links span{color:#6d46d8}
@media(max-width:640px){.coffee-link img{height:34px;max-width:145px}}


.site-footer 
.site-footer 


.site-footer{
  width:100%;
  background:#fff;
  border-top:1px solid #f2dce8;
  padding:30px 20px 24px;
  text-align:center;
}
.site-footer .footer-brand{
  margin:0 0 8px;
  font-size:22px;
  font-weight:800;
  color:#17223b;
  text-align:center;
}
.site-footer .footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  text-align:center;
  font-size:18px;
}
.site-footer .footer-links a{
  color:#6d46d8;
  text-decoration:none;
  font-weight:700;
}
.site-footer .footer-links span{color:#6d46d8}
.tool-seo{
  width:100%;
  background:#fff;
  padding:0 20px 34px;
  text-align:center;
}
.tool-seo-inner{
  max-width:760px;
  margin:0 auto;
  padding-top:20px;
  border-top:1px solid #f3e5ed;
}
.tool-seo h2{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.3;
  color:#17223b;
}
.tool-seo p{
  margin:0 auto;
  color:#667085;
  font-size:15px;
  line-height:1.65;
}
@media(max-width:640px){
  .site-footer{padding:28px 14px 22px}
  .site-footer .footer-brand{font-size:21px}
  .site-footer .footer-links{font-size:17px;gap:6px}
  .tool-seo{padding:0 18px 30px}
  .tool-seo-inner{padding-top:18px}
  .tool-seo h2{font-size:17px}
  .tool-seo p{font-size:14px;line-height:1.6}
}

.home-icon{
  color:#fff;
  text-decoration:none;
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
}
.home-icon:hover{background:rgba(255,255,255,.14)}