*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222}
header,footer{background:#f6f6f6;padding:12px 16px}
main{max-width:960px;margin:0 auto;padding:16px}
a.btn,button.btn{display:inline-block;padding:10px 14px;border:1px solid #ccc;border-radius:8px;background:#fff;cursor:pointer;text-decoration:none}
.btn.primary{background:#222;color:#fff;border-color:#222}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{border:1px solid #eee;border-radius:10px;padding:12px}
.muted{color:#666; font-size: 12px;}
.notice{background:#e8f8ef;border:1px solid #c8ecd8;padding:10px;border-radius:8px}
.error{background:#fdeaea;border:1px solid #f5bcbc;padding:10px;border-radius:8px}
.pill{padding:2px 8px;border:1px solid #ddd;border-radius:999px;font-size:12px}
.qbox{border:1px solid #eee;border-radius:10px;padding:12px;margin:10px 0}
.qword{font-size:30px;margin:6px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:8px 10px;border:1px solid #ddd;border-radius:8px;cursor:pointer}
.opt.selected{border-color:#222}
.imgwrap img{max-width:100%;display:block;border-radius:10px}
.center{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hl{color:#1a73e8;font-weight:700;text-decoration:none}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{
  content:"";
  position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border:2px solid rgba(0,0,0,.25);border-top-color:#000;border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.badge{display:inline-block;padding:2px 6px;border:1px solid #ddd;border-radius:999px;font-size:12px}
.word-btn{padding:8px 10px;border:1px solid #ddd;border-radius:8px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-size:19px;}
.word-target{min-height:48px;border:1px dashed #ccc;border-radius:8px;padding:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Выбранный вариант в «Фразы по категориям» */
.word-btn.selected{
  border-color:#1a73e8;
  box-shadow:0 0 0 3px rgba(26,115,232,.15);
}
