:root{
  --green:#22c55e; --green-dark:#16a34a; --blue:#60a5fa; --teal:#34d399; --navy:#1e40af;
}
html{scroll-behavior:smooth}
body,*{font-family:'Baloo 2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important}

.a4g-hero{
  position:relative;overflow:hidden;padding:clamp(2.5rem,8vw,4rem) 0;
  color:#fff;text-align:center;
  background:linear-gradient(45deg,var(--green),var(--blue),var(--teal),var(--navy));
  background-size:400%;animation:grad 8s ease infinite;
}
@keyframes grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.a4g-card{
  background:#fff;border:1px solid rgba(34,197,94,.1);
  border-radius:16px;box-shadow:0 8px 35px rgba(0,0,0,.07)
}

.a4g-btn{
  background:linear-gradient(90deg,var(--green),var(--green-dark));
  color:#fff;border-radius:9999px;padding:.65rem 1rem;font-weight:700;
  box-shadow:0 5px 14px rgba(34,197,94,.3);transition:.2s ease;
}
.a4g-btn:hover{filter:brightness(1.06)}

.a4g-label{display:block;font-weight:700;color:#065f46;margin:.25rem 0}
.a4g-input{
  width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:.6rem .8rem;
  outline:none
}
.a4g-input:focus{box-shadow:0 0 0 3px rgba(34,197,94,.2);border-color:rgba(34,197,94,.6)}

.a4g-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.a4g-tabs .tab-btn{
  background:#fff;border:1px solid rgba(34,197,94,.15);border-radius:9999px;
  padding:.5rem 1rem;font-weight:700;color:#065f46;
}
.tab-btn.is-active{background:linear-gradient(90deg,var(--green),var(--green-dark));color:#fff}

.tab-pane{margin-top:1rem}
.editor-toolbar{
  display:flex;align-items:center;gap:.3rem;border:1px solid #e5e7eb;border-radius:12px;padding:.35rem;background:#f8fafc
}
.editor-toolbar button{
  padding:.45rem .6rem;border-radius:.6rem;border:1px solid transparent
}
.editor-toolbar button:hover{background:#f0fdf4;border-color:#bbf7d0}
.editor-toolbar .sep{width:1px;height:22px;background:#e5e7eb;margin:0 .25rem}

.editor-title{
  margin-top:.6rem;font-size:1.5rem;font-weight:700;border:1px dashed #e5e7eb;border-radius:12px;padding:.5rem .75rem;min-height:48px
}
.editor{margin-top:.5rem;border:1px dashed #e5e7eb;border-radius:12px;min-height:380px;padding:1rem;line-height:1.6}
.editor:empty:before,.editor-title:empty:before{content:attr(data-placeholder);color:#9ca3af}

.chat-log{height:420px;overflow:auto;border:1px solid #e5e7eb;border-radius:12px;padding:.75rem;background:#fff}
.msg{display:flex;gap:.5rem;margin-bottom:.65rem}
.msg.me{justify-content:flex-end}
.msg .bubble{
  max-width:80%;padding:.5rem .7rem;border-radius:12px;border:1px solid rgba(34,197,94,.12)
}
.msg.me .bubble{background:#f0fdf4}
.msg.ai .bubble{background:#eff6ff}

.chat-input{display:flex;gap:.5rem;margin-top:.6rem}
.chat-input input{flex:1;border:1px solid #e5e7eb;border-radius:12px;padding:.65rem .8rem}
.chat-input input:focus{box-shadow:0 0 0 3px rgba(34,197,94,.2);border-color:rgba(34,197,94,.6)}

.card{
  border:1px solid rgba(34,197,94,.08);background:#fff;border-radius:14px;
  box-shadow:0 8px 25px rgba(0,0,0,.06);padding:.75rem;transition:.2s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.card h4{color:#16a34a;font-weight:800}

.a4g-footer{padding:2rem 0;background:#111827;color:#9ca3af;margin-top:1.5rem}