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

.grg-tool-wrap { font-family:'DM Sans',sans-serif; max-width:640px; margin:0 auto; }
.grg-tool-wrap * { box-sizing:border-box; }

.grg-tool-card { background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:28px 32px; }

.grg-tool-head { text-align:center; margin-bottom:26px; }
.grg-tool-head h2 { font-size:22px; font-weight:700; color:#111827; margin:0 0 6px; }
.grg-tool-head p  { font-size:14px; color:#6b7280; }

.grg-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9ca3af; margin-bottom:7px; }

.grg-tool-select { width:100%; padding:10px 13px; border:1.5px solid #e5e7eb; border-radius:11px; font-size:14px; font-family:inherit; background:#fafafa; color:#111827; margin-bottom:16px; }
.grg-tool-select:focus { outline:none; border-color:#f59e0b; }

.grg-tool-field { width:100%; padding:10px 13px; border:1.5px solid #e5e7eb; border-radius:11px; font-size:14px; font-family:inherit; background:#fafafa; color:#111827; margin-bottom:12px; }
.grg-tool-field:focus { outline:none; border-color:#f59e0b; }
textarea.grg-tool-field { min-height:80px; resize:vertical; }

.grg-divider { border:none; border-top:1px solid #f3f4f6; margin:18px 0; }

.grg-front-stars { display:flex; gap:8px; margin:8px 0 14px; }
.grg-front-star { font-size:38px; opacity:.3; cursor:pointer; border:none; background:none; padding:0; line-height:1; transition:all .15s; }
.grg-front-star.on { opacity:1; transform:scale(1.1); }

.grg-pills { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.grg-front-pill { padding:5px 13px; font-size:13px; border-radius:20px; border:1.5px solid #e5e7eb; background:#fff; cursor:pointer; font-family:inherit; color:#6b7280; transition:all .15s; }
.grg-front-pill.sel { background:#fef3c7; border-color:#f59e0b; color:#92400e; font-weight:600; }

.grg-front-btn { width:100%; padding:13px; font-size:16px; font-weight:700; font-family:inherit; border:none; border-radius:12px; background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff; cursor:pointer; margin-top:8px; transition:all .2s; }
.grg-front-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,158,11,.35); }
.grg-front-btn:disabled { opacity:.55; transform:none; box-shadow:none; }

.grg-front-result { background:#fffbeb; border:1.5px solid #fde68a; border-radius:14px; padding:20px; margin-top:20px; animation:grgFade .35s ease; }
@keyframes grgFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.grg-front-review { font-size:15px; line-height:1.8; color:#1a1a2e; white-space:pre-wrap; }
.grg-front-actions { display:flex; gap:10px; margin-top:14px; }
.grg-front-copy { flex:1; padding:10px; font-size:14px; font-weight:600; font-family:inherit; border:1.5px solid #e5e7eb; background:#fff; border-radius:10px; cursor:pointer; }
.grg-front-copy:hover { border-color:#f59e0b; }
.grg-front-gmb { padding:10px 18px; font-size:14px; font-weight:600; font-family:inherit; background:#4285f4; color:#fff; border:none; border-radius:10px; cursor:pointer; }

.grg-spinner { display:inline-block; width:16px; height:16px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:grgSpin .7s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes grgSpin { to{transform:rotate(360deg)} }