.rag-wrap{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:640px;margin:30px auto;color:#1c2333}
.rag-card{background:#fff;border:1px solid #e6ebe3;border-radius:24px;box-shadow:0 14px 40px rgba(30,60,40,.10);overflow:hidden}

.rag-head{padding:30px 30px 20px;background:linear-gradient(135deg,#eafaf0,#e8f6ff);text-align:center}
.rag-kicker{font-size:12px;font-weight:800;letter-spacing:.12em;color:#1e9e6b}
.rag-head h2{margin:8px 0 6px;font-size:28px;line-height:1.2}
.rag-head p{margin:0;color:#5d687b;font-size:14px}

.rag-categories{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:18px 20px 0}
.rag-cat{appearance:none;border:1px solid #d9e2da;background:#f6f9f5;color:#465a4c;border-radius:999px;padding:8px 16px;font-weight:700;font-size:13px;cursor:pointer}
.rag-cat.is-active{background:#1e9e6b;border-color:#1e9e6b;color:#fff}

.rag-result{margin:24px 22px 0;padding:30px 20px;background:#f8faf7;border:1px solid #e6ebe3;border-radius:20px;text-align:center;transition:opacity .15s ease}
.rag-result.is-updating{opacity:0}
.rag-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:#1e9e6b;text-transform:uppercase;margin-bottom:8px;min-height:14px}
.rag-emoji{font-size:64px;line-height:1;margin-bottom:12px}
.rag-name{font-size:26px;font-weight:800;margin-bottom:8px}
.rag-fact{font-size:14px;color:#5d687b;max-width:420px;margin:0 auto}

.rag-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:20px 22px 0}
.rag-generate{border:0;background:#1e9e6b;color:#fff;border-radius:14px;padding:14px 24px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 20px rgba(30,158,107,.30)}
.rag-generate:hover{background:#188056}
.rag-copy{border:1px solid #d9e2da;background:#fff;color:#38493d;border-radius:14px;padding:14px 20px;font-weight:700;font-size:14px;cursor:pointer}

.rag-meta{padding:18px 22px 0;text-align:center}
.rag-count{font-size:12px;color:#7b8a80;font-weight:700}
.rag-history{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;min-height:24px}
.rag-history span{background:#eef4ec;border-radius:999px;padding:5px 12px;font-size:12px;color:#465a4c}

.rag-about{margin-top:26px;padding:20px 26px 26px;border-top:1px solid #edf0f4;color:#4a5568;font-size:13.5px;line-height:1.6}
.rag-about h3{font-size:15px;margin:0 0 8px;color:#1c2333}
.rag-about p{margin:0 0 10px}
.rag-about p:last-child{margin-bottom:0}

@media(max-width:480px){
  .rag-head{padding:24px 18px 16px}
  .rag-head h2{font-size:23px}
  .rag-result{margin:20px 14px 0;padding:24px 14px}
  .rag-emoji{font-size:52px}
  .rag-name{font-size:21px}
  .rag-actions{padding:18px 14px 0}
  .rag-generate,.rag-copy{width:100%}
  .rag-about{padding:18px 18px 22px}
}